// =========================================================================
//  capas-especiais / carnaval / banner.jsx
//  🎭 Carnaval — roxo + amarelo + verde, confetes, máscaras
//  Exporta: CarnavalBanner, CarnavalStrip
// =========================================================================

(() => {
  const COLORS = {
    ink: '#231642',
    accent: '#7a3fb8',          // roxo
    accentDark: '#4d2479',
    accentSoft: '#ebdcf7',
    yellow: '#f0c419',
    green: '#3fb872',
    pink: '#e84a8c',
    bg: 'linear-gradient(180deg, #f5edff 0%, #fff4dd 45%, #e9f7ec 100%)',
  };
  const _D = {
    target:         '2027-02-09T00:00:00-03:00',
    chip:           'Carnaval · Folia & Brilho',
    headline:       'Pra brilhar no',
    italicWord:     'bloco',
    copy:           'Brincos extravagantes, colares coloridos e pulseiras pra dançar até o sol nascer. Acabamento bem firme pra acompanhar a folia.',
    perks:          [{ icon:'♪', label:'Acabamento firme' }, { icon:'✦', label:'Cores vibrantes' }, { icon:'★', label:'Frete grátis acima de R$120' }],
    ctaPrimaryLabel:'Ver coleção de Carnaval',
    ctaPrimaryHref: '#carnaval-grid',
    ctaWhatsApp:    'https://wa.me/5571999181376?text=Quero%20joia%20pro%20Carnaval',
    stripText:      'Carnaval · Cores vibrantes & acabamento firme pra brilhar no bloco',
    featured:       [
      { name:'Colar Folia',    sub:'Banhado a ouro 18K', price:54.90, hue:310 },
      { name:'Brinco Confete', sub:'Banhado a ouro 18K', price:42.90, hue:80  },
      { name:'Pulseira Bloco', sub:'Aço Inox Legítimo',  price:39.90, hue:160 },
    ],
  };
  function _cfg(k) { return (window.CAPAS_CONFIG?.carnaval?.[k]) ?? _D[k]; }

  // máscara veneziana simplificada
  function Mask({ size = 80, primary = '#7a3fb8', accent = '#f0c419', x, y, rotate = 0, opacity = 0.85 }) {
    return (
      <svg width={size} height={size*0.65} viewBox="0 0 120 80"
        style={{ position:'absolute', top:y, left:x,
                 transform:`rotate(${rotate}deg)`, pointerEvents:'none', opacity }}>
        {/* corpo */}
        <path d="M 8 22 Q 30 6 60 12 Q 90 6 112 22 Q 116 38 100 56 Q 80 64 60 56 Q 40 64 20 56 Q 4 38 8 22 Z"
          fill={primary}/>
        {/* olhos */}
        <ellipse cx="36" cy="32" rx="14" ry="8" fill="#fff" opacity="0.95"/>
        <ellipse cx="84" cy="32" rx="14" ry="8" fill="#fff" opacity="0.95"/>
        <ellipse cx="36" cy="32" rx="3" ry="3" fill={primary}/>
        <ellipse cx="84" cy="32" rx="3" ry="3" fill={primary}/>
        {/* enfeites */}
        <circle cx="60" cy="10" r="4" fill={accent}/>
        <circle cx="14" cy="14" r="3" fill={accent}/>
        <circle cx="106" cy="14" r="3" fill={accent}/>
        <path d="M 60 6 L 60 -4" stroke={accent} strokeWidth="2"/>
      </svg>
    );
  }

  // confete (retângulo girado)
  function Confete({ size = 12, color, x, y, rotate = 0, opacity = 0.85 }) {
    return (
      <div style={{
        position:'absolute', top:y, left:x,
        width:size, height:size*0.45,
        background:color, opacity,
        transform:`rotate(${rotate}deg)`,
        borderRadius:1, pointerEvents:'none',
      }}/>
    );
  }

  // serpentina (linha ondulada)
  function Serpentina({ color = '#7a3fb8', x, y, w = 160, rotate = 0, opacity = 0.7 }) {
    return (
      <svg width={w} height={36} viewBox={`0 0 ${w} 36`}
        style={{ position:'absolute', top:y, left:x,
                 transform:`rotate(${rotate}deg)`, pointerEvents:'none', opacity }}>
        <path d={`M 0 18 Q ${w*0.15} -6 ${w*0.3} 18 T ${w*0.6} 18 T ${w*0.9} 18 T ${w} 18`}
          stroke={color} strokeWidth="3" fill="none" strokeLinecap="round"/>
      </svg>
    );
  }

  function CarnavalBanner() {
    const featured = _cfg('featured');
    const conf = [
      { color: COLORS.accent,    x:'5%',  y:60,  r:-20 },
      { color: COLORS.yellow,    x:'12%', y:120, r:15  },
      { color: COLORS.green,     x:'18%', y:200, r:45  },
      { color: COLORS.pink,      x:'8%',  y:280, r:-10 },
      { color: COLORS.yellow,    x:'25%', y:60,  r:30  },
      { color: COLORS.accent,    x:'72%', y:30,  r:-8  },
      { color: COLORS.green,     x:'80%', y:120, r:22  },
      { color: COLORS.pink,      x:'88%', y:220, r:-25 },
      { color: COLORS.yellow,    x:'68%', y:340, r:50  },
      { color: COLORS.accent,    x:'48%', y:'8%', r:10 },
      { color: COLORS.green,     x:'30%', y:'90%', r:-30 },
      { color: COLORS.pink,      x:'62%', y:'90%', r:20 },
    ];

    const decorations = () => (
      <>
        <WatercolorSplash pos="tl" color={COLORS.accent} size={420} rotation={-10} opacity={0.30}/>
        <WatercolorSplash pos="tr" color={COLORS.yellow} size={340} rotation={28}  opacity={0.32}/>
        <WatercolorSplash pos="bl" color={COLORS.green}  size={360} rotation={40}  opacity={0.28}/>
        <WatercolorSplash pos="br" color={COLORS.pink}   size={300} rotation={-22} opacity={0.26}/>
        <Mask x="4%"  y={36}  size={90} primary={COLORS.accent} accent={COLORS.yellow} rotate={-8}/>
        <Mask x="84%" y={50}  size={72} primary={COLORS.pink}   accent={COLORS.green}  rotate={10}/>
        <Serpentina color={COLORS.yellow} x="38%" y={20}  w={180} rotate={6}/>
        <Serpentina color={COLORS.green}  x="10%" y={'80%'} w={220} rotate={-8}/>
        <Serpentina color={COLORS.pink}   x="55%" y={'88%'} w={200} rotate={10}/>
        {conf.map((c,i) => (
          <Confete key={i} size={14 + (i%3)*4} color={c.color} x={c.x} y={c.y} rotate={c.r}/>
        ))}
      </>
    );

    const hero = (
      <>
        <div style={{
          position:'absolute', inset:'8% 6%', borderRadius:'50%',
          background:'radial-gradient(circle at 50% 50%, rgba(255,255,255,0.92) 0%, rgba(245,237,255,0) 70%)',
          filter:'blur(4px)', zIndex:0,
        }}/>
        <FloatingCard item={featured[0]} big accent={COLORS.ink}
          style={{ position:'absolute', top:'4%', left:'18%', width:'64%',
                   zIndex:3, animation:'cap-float-y 7s ease-in-out infinite' }}/>
        <FloatingCard item={featured[1]} accent={COLORS.ink}
          style={{ position:'absolute', top:'40%', 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:'2%', right:'-2%', width:'44%',
                   zIndex:2, transform:'rotate(5deg)',
                   animation:'cap-float-y 9s ease-in-out infinite', animationDelay:'0.8s' }}/>
        <Mask x="-2%" y={20} size={110} primary={COLORS.accent} accent={COLORS.yellow}/>
      </>
    );

    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')}
        countdownLabel="Faltam"
        ctaPrimary={{ label:_cfg('ctaPrimaryLabel'), href:_cfg('ctaPrimaryHref'), dark:COLORS.accentDark }}
        ctaSecondary={{ label:'Ajuda no WhatsApp', icon:'💬', href:_cfg('ctaWhatsApp') }}
        perks={_cfg('perks')}
        decorations={decorations}
        hero={hero}
      />
    );
  }

  function CarnavalStrip() {
    return (
      <AnnouncementStrip
        gradient={`linear-gradient(90deg, ${COLORS.accent} 0%, ${COLORS.pink} 35%, ${COLORS.yellow} 70%, ${COLORS.green} 100%)`}
        icon={<span style={{fontSize:14}}>♪</span>}>
        {_cfg('stripText')}
      </AnnouncementStrip>
    );
  }

  (window.CAPAS = window.CAPAS || {}).carnaval = {
    Banner: CarnavalBanner, Strip: CarnavalStrip,
    accent: '#9333ea',
    gridLabel: 'Carnaval',
    gridTitle: 'Brilho de Carnaval',
  };
})();