// =========================================================================
//  capas-especiais / namorados / banner.jsx
//  💕 Dia dos Namorados — azul + coral, corações desenhados, contagem regressiva
//  Exporta: NamoradosBanner, NamoradosStrip
// =========================================================================

(() => {
  const { useState, useMemo, useEffect } = React;
  const COLORS = {
    ink: '#0b2e36',
    accent: '#e25c7c',          // coral
    accentSoft: '#fbe1e7',
    blue: '#6b8fcc',
    blueDeep: '#2d5b8a',
    bg: 'linear-gradient(180deg, #eaf2fb 0%, #f4f8fd 55%, #fdf4f6 100%)',
  };
  const _D = {
    target:         '2026-06-12T00:00:00-03:00',
    chip:           'Dia dos Namorados · 12 . 06',
    headline:       'Presenteie quem você',
    italicWord:     'ama',
    copy:           'Pulseiras, colares e brincos feitos à mão em Salvador. Embalagem de presente cortesia e entrega antes do dia 12.',
    perks:          [{ icon:'✨', label:'Embalagem presente grátis' }, { icon:'🚚', label:'Entrega antes do dia 12' }, { icon:'♥', label:'Parcele em 6x' }],
    ctaPrimaryLabel:'Ver presentes',
    ctaPrimaryHref: '#namorados-grid',
    ctaWhatsApp:    'https://wa.me/5571999181376?text=Quero%20ajuda%20com%20um%20presente%20de%20Namorados',
    stripText:      'Dia dos Namorados · 12.06 · Embalagem de presente grátis & entrega antes do dia 12',
    featured:       [
      { name:'Pulseira Ayla',     sub:'Aço Inox Legítimo',  price:45.90, hue:200 },
      { name:'Pulseira Nataly',   sub:'Banhada a ouro 18K', price:47.90, hue:350 },
      { name:'Pulseira Isabelle', sub:'Banhada a ouro 18K', price:47.90, hue:15  },
    ],
  };
  function _cfg(k) { return (window.CAPAS_CONFIG?.namorados?.[k]) ?? _D[k]; }

  // coração rabiscado
  function DrawnHeart({ size = 60, color = '#5d7fc4', stroke = 2, style = {} }) {
    const id = useMemo(() => 'hh-' + Math.random().toString(36).slice(2), []);
    return (
      <svg width={size} height={size} viewBox="0 0 100 100"
           style={{ position: 'absolute', pointerEvents: 'none', ...style }}>
        <defs>
          <filter id={`${id}-shake`} x="-10%" y="-10%" width="120%" height="120%">
            <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="2" seed="3"/>
            <feDisplacementMap in="SourceGraphic" scale="2.2"/>
          </filter>
        </defs>
        <g fill="none" stroke={color} strokeWidth={stroke} strokeLinecap="round"
           strokeLinejoin="round" filter={`url(#${id}-shake)`}>
          <path d="M50 84 C 22 64, 14 44, 22 30 C 30 18, 44 20, 50 34 C 56 20, 70 18, 78 30 C 86 44, 78 64, 50 84 Z"/>
          <path d="M50 80 C 26 62, 18 44, 26 32 C 33 22, 45 24, 50 36" opacity="0.55"/>
          <path d="M52 38 C 57 24, 68 22, 75 32 C 82 44, 75 60, 52 78" opacity="0.55"/>
        </g>
      </svg>
    );
  }

  function NamoradosBanner() {
    const [featured, setFeatured] = useState(_cfg('featured'));

    useEffect(() => {
      fetch('/api/products?special=namorados&_=' + Date.now(), { cache: 'no-store' })
        .then(r => r.ok ? r.json() : null)
        .then(data => {
          if (data?.products?.length >= 2) {
            setFeatured(data.products.slice(0, 3).map(p => ({
              ...p,
              sub: p.short || p.cat || '',
              hue: p.hue || 200,
            })));
          }
        })
        .catch(() => {});
    }, []);

    const decorations = () => (
      <>
        <WatercolorSplash pos="tl" color={COLORS.blue}  size={420} rotation={-12} opacity={0.5}/>
        <WatercolorSplash pos="tr" color="#88a8db"      size={340} rotation={28}  opacity={0.42}/>
        <WatercolorSplash pos="bl" color="#7ea3d4"      size={360} rotation={45}  opacity={0.4}/>
        <WatercolorSplash pos="br" color={COLORS.accent} size={300} rotation={-25} opacity={0.28}/>
        <DrawnHeart size={48} color={COLORS.blue}    style={{ top: 48,  right: '14%', transform: 'rotate(-12deg)' }}/>
        <DrawnHeart size={34} color="#88a8db"        style={{ top: 120, right: '8%',  transform: 'rotate(8deg)'   }}/>
        <DrawnHeart size={28} color="#7ea3d4"        style={{ top: 200, right: '18%', transform: 'rotate(-18deg)' }}/>
        <DrawnHeart size={42} color={COLORS.accent}  style={{ bottom: 64, left: '10%', transform: 'rotate(14deg)', opacity: 0.85 }}/>
        <DrawnHeart size={26} color={COLORS.accent}  style={{ bottom: 32, left: '18%', transform: 'rotate(-6deg)',  opacity: 0.75 }}/>
        <DrawnHeart size={22} color={COLORS.blue}    style={{ top: 64,  left: '6%',   transform: 'rotate(20deg)' }}/>
      </>
    );

    const hero = (
      <>
        <div style={{
          position: 'absolute', inset: '8% 6%', borderRadius: '50%',
          background: 'radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0%, rgba(234,242,251,0) 70%)',
          filter: 'blur(4px)', zIndex: 0,
        }}/>
        <FloatingCard item={featured[1]} big accent={COLORS.ink}
          style={{ position:'absolute', top:'6%', left:'18%', width:'64%',
                   zIndex:3, animation:'cap-float-y 7s ease-in-out infinite' }}/>
        <FloatingCard item={featured[0]} accent={COLORS.ink}
          style={{ position:'absolute', top:'38%', left:'-2%', width:'44%',
                   zIndex:2, transform:'rotate(-6deg)',
                   animation:'cap-float-y 8s ease-in-out infinite', animationDelay:'0.4s' }}/>
        <FloatingCard item={featured[2]} accent={COLORS.ink}
          style={{ position:'absolute', bottom:'4%', right:'-2%', width:'44%',
                   zIndex:2, transform:'rotate(5deg)',
                   animation:'cap-float-y 9s ease-in-out infinite', animationDelay:'0.8s' }}/>
        {/* moon mark */}
        <div style={{
          position:'absolute', top:0, right:'4%',
          width:56, height:56, borderRadius:'50%',
          background:'radial-gradient(circle at 35% 30%, #fff, #c7dbf3 70%, #8eaadb 100%)',
          boxShadow:'0 8px 24px -10px rgba(11,46,54,0.3)',
          zIndex:4, animation:'cap-spin-slow 40s linear infinite',
        }}/>
      </>
    );

    return (
      <BannerShell
        bg={COLORS.bg}
        accent={COLORS.accent}
        accentSoft={COLORS.accentSoft}
        ink={COLORS.ink}
        chip={<ThemeChip icon="♥" color={COLORS.accent} soft={COLORS.accentSoft}>
          {_cfg('chip')}
        </ThemeChip>}
        headline={<>{_cfg('headline')}<br/></>}
        italicWord={_cfg('italicWord')}
        italicColor={COLORS.accent}
        copy={_cfg('copy')}
        targetIso={_cfg('target')}
        ctaPrimary={{ label:_cfg('ctaPrimaryLabel'), href:_cfg('ctaPrimaryHref'), dark:'#c8466b' }}
        ctaSecondary={{ label:'Ajuda no WhatsApp', icon:'💬', href:_cfg('ctaWhatsApp') }}
        perks={_cfg('perks')}
        decorations={decorations}
        hero={hero}
      />
    );
  }

  function NamoradosStrip() {
    return (
      <AnnouncementStrip
        gradient={`linear-gradient(90deg, ${COLORS.accent} 0%, #c8466b 50%, ${COLORS.blueDeep} 100%)`}
        icon={<span style={{fontSize:14}}>♥</span>}>
        {_cfg('stripText')}
      </AnnouncementStrip>
    );
  }

  (window.CAPAS = window.CAPAS || {}).namorados = {
    Banner: NamoradosBanner,
    Strip: NamoradosStrip,
    accent: COLORS.accent,
    gridLabel: 'Pulseiras em destaque',
    gridTitle: 'Para presentear seu amor',
  };
})();