// =========================================================================
//  capas-especiais / padrao / banner.jsx
//  ⚪ Padrão — capa default com carrossel automático de produtos
//  Usa cores de marca da Lua Azul (azul + cobre) e gira produtos.
//  Exporta: PadraoBanner, PadraoStrip
// =========================================================================

(() => {
  const { useState, useEffect, useRef } = React;
  const COLORS = {
    ink: '#0b2e36',
    accent: '#06b6d4',          // ciano/teal brand
    accentDark: '#0891b2',
    accentSoft: '#cffafe',
    blue: '#3a8db8',
    bg: 'linear-gradient(180deg, #f4f8fd 0%, #eaf2fb 50%, #f4f8fd 100%)',
  };
  // pool de produtos aleatórios — embaralha a cada carga
  const POOL = [
    { id:'p1',  name:'Pulseira Ayla',     sub:'Aço Inox Legítimo',  price:45.90, hue:200 },
    { id:'p2',  name:'Pulseira Nataly',   sub:'Banhada a ouro 18K', price:47.90, hue:350 },
    { id:'p3',  name:'Pulseira Isabelle', sub:'Banhada a ouro 18K', price:47.90, hue:15  },
    { id:'p4',  name:'Pulseira Siná',     sub:'Banhada a ouro 18K', price:47.90, hue:210 },
    { id:'p5',  name:'Colar Lua',         sub:'Banhado a ouro 18K', price:64.90, hue:240 },
    { id:'p6',  name:'Colar Maré',        sub:'Banhado a ouro 18K', price:54.90, hue:190 },
    { id:'p7',  name:'Brinco Jasmim',     sub:'Banhado a ouro 18K', price:39.90, hue:25  },
    { id:'p8',  name:'Brinco Sol',        sub:'Banhado a ouro 18K', price:34.90, hue:60  },
    { id:'p9',  name:'Pulseira Lavanda',  sub:'Prata 925',          price:38.90, hue:295 },
    { id:'p10', name:'Pulseira Roça',     sub:'Aço Inox Legítimo',  price:39.90, hue:60  },
    { id:'p11', name:'Colar Estrelinha',  sub:'Banhado a ouro 18K', price:39.90, hue:30  },
    { id:'p12', name:'Pulseira Mini',     sub:'Aço Inox · Infantil',price:32.90, hue:50  },
  ];

  function shuffle(arr) {
    const a = arr.slice();
    for (let i = a.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
  }

  // -------- Carrossel automático (marquee suave) --------
  function ProductCarousel({ items, accent, ink }) {
    const trackRef = useRef(null);
    const [paused, setPaused] = useState(false);
    // duplicamos a lista para loop contínuo
    const loop = [...items, ...items];

    useEffect(() => {
      const el = trackRef.current;
      if (!el) return;
      let x = 0;
      let raf;
      const tick = () => {
        if (!paused) {
          x -= 0.4;
          // quando passou da metade, reseta sem visualizar
          const half = el.scrollWidth / 2;
          if (-x >= half) x += half;
          el.style.transform = `translateX(${x}px)`;
        }
        raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
      return () => cancelAnimationFrame(raf);
    }, [paused]);

    return (
      <div
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
        style={{
          position:'relative', width:'100%', height:'100%',
          overflow:'hidden', borderRadius:24,
          maskImage:'linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%)',
          WebkitMaskImage:'linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%)',
        }}
      >
        <div ref={trackRef} style={{
          display:'flex', gap:18,
          willChange:'transform',
          padding:'4px 0',
        }}>
          {loop.map((item, i) => (
            <div key={i} style={{
              flex:'0 0 220px',
              background:'white', borderRadius:18, overflow:'hidden',
              boxShadow:'0 14px 30px -16px rgba(11,46,54,0.20)',
              border:'1px solid rgba(11,46,54,0.06)',
            }}>
              <div style={{ aspectRatio:'1/1', background:'#f6f2ec' }}>
                <BeadedBracelet hue={item.hue}/>
              </div>
              <div style={{ padding:'12px 14px' }}>
                <div className="cap-serif" style={{ fontSize:15, fontWeight:500, color:ink }}>
                  {item.name}
                </div>
                <div style={{
                  fontSize:10, color:'rgba(0,0,0,0.5)',
                  fontFamily:'ui-monospace, SFMono-Regular, Menlo, monospace',
                  letterSpacing:'0.06em', marginTop:2,
                }}>{item.sub}</div>
                <div className="cap-serif" style={{
                  marginTop:6, fontSize:16, fontWeight:600, color:accent,
                }}>R$ {item.price.toFixed(2).replace('.', ',')}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  function PadraoBanner() {
    const shuffled = React.useMemo(() => shuffle(POOL), []);

    const decorations = () => (
      <>
        <WatercolorSplash pos="tl" color={COLORS.accent}  size={420} rotation={-10} opacity={0.32}/>
        <WatercolorSplash pos="tr" color={COLORS.blue}    size={340} rotation={28}  opacity={0.36}/>
        <WatercolorSplash pos="bl" color="#a8d4e8"        size={360} rotation={40}  opacity={0.28}/>
        <WatercolorSplash pos="br" color={COLORS.accent}  size={300} rotation={-22} opacity={0.22}/>
      </>
    );

    const hero = (
      <div style={{ position:'absolute', inset:0, padding:'10px 0' }}>
        <ProductCarousel items={shuffled} accent={COLORS.accentDark} ink={COLORS.ink}/>
        {/* selo "feito à mão" */}
        <div style={{
          position:'absolute', top:'-4%', right:'4%', zIndex:5,
          width:78, height:78, borderRadius:'50%',
          background:`conic-gradient(from 0deg, ${COLORS.accent}, #cffafe, ${COLORS.accent})`,
          display:'flex', alignItems:'center', justifyContent:'center',
          color:COLORS.ink, boxShadow:'0 10px 24px -10px rgba(11,46,54,0.45)',
          fontFamily:"'Cormorant Garamond',serif", fontStyle:'italic',
          fontSize:13, fontWeight:600, textAlign:'center', lineHeight:1.05,
          animation:'cap-spin-slow 50s linear infinite',
        }}>
          feito<br/>à mão
        </div>
      </div>
    );

    return (
      <BannerShell
        bg={COLORS.bg}
        accent={COLORS.accent}
        accentSoft={COLORS.accentSoft}
        ink={COLORS.ink}
        chip={<ThemeChip icon="✦" color={COLORS.accentDark} soft={COLORS.accentSoft}>
          Lua Azul · Joias artesanais
        </ThemeChip>}
        headline={<>Semijoias feitas<br/>à mão em </>}
        italicWord="Salvador"
        italicColor={COLORS.accentDark}
        copy="Pulseiras, colares, brincos e anéis em aço inox e banho de ouro 18K. Frete grátis acima de R$ 150 para todo o Brasil."
        ctaPrimary={{ label:'Explorar coleção', href:'#produtos', dark:COLORS.accentDark }}
        ctaSecondary={{ label:'WhatsApp', icon:'💬',
          href:'https://wa.me/5571999181376' }}
        perks={[
          { icon:'✦', label:'Banho de ouro 18K' },
          { icon:'★', label:'Frete grátis acima de R$150' },
          { icon:'◇', label:'Garantia de 90 dias' },
        ]}
        decorations={decorations}
        hero={hero}
      />
    );
  }

  function PadraoStrip() {
    return (
      <AnnouncementStrip
        gradient={`linear-gradient(90deg, ${COLORS.ink} 0%, ${COLORS.accent} 50%, ${COLORS.blue} 100%)`}
        icon={<span style={{fontSize:14}}>✦</span>}>
        Lua Azul · Semijoias artesanais · Frete grátis acima de R$ 150
      </AnnouncementStrip>
    );
  }

  Object.assign(window, { PadraoBanner, PadraoStrip });
  (window.CAPAS = window.CAPAS || {}).padrao = {
    Banner: PadraoBanner, Strip: PadraoStrip,
    accent: '#0891b2',
    gridLabel: 'Vitrine',
    gridTitle: 'Todos os produtos',
  };
})();