// =========================================================================
//  capas-especiais / ano-novo / banner.jsx
//  🎆 Ano Novo — azul escuro + dourado, fogos, brilho (dark theme)
//  Exporta: AnoNovoBanner, AnoNovoStrip
// =========================================================================

(() => {
  const { useMemo } = React;
  const COLORS = {
    ink: '#f6efd9',             // texto claro
    accent: '#d4af6a',          // dourado
    accentDark: '#a07d3a',
    accentSoft: '#3a2e16',
    deep: '#0a1428',
    bg: 'radial-gradient(ellipse at 30% 0%, #1d2e52 0%, #0a1428 55%, #050b1a 100%)',
  };
  const _D = {
    target:         '2027-01-01T00:00:00-03:00',
    chip:           'Ano Novo · 01 . 01 . 2027',
    headline:       'Comece o ano com',
    italicWord:     'brilho',
    copy:           'Coleção dourada para virar o ano com elegância. Embalagem em caixa preta com fita dourada e cartão para escrever um desejo.',
    perks:          [{ icon:'✦', label:'Coleção dourada' }, { icon:'✉', label:'Cartão de desejo' }, { icon:'🚚', label:'Despacho com antecedência' }],
    ctaPrimaryLabel:'Ver coleção dourada',
    ctaPrimaryHref: '#anonovo-grid',
    ctaWhatsApp:    'https://wa.me/5571999181376?text=Quero%20uma%20joia%20dourada%20para%20o%20Ano%20Novo',
    stripText:      'Ano Novo · 01.01.2027 · Coleção dourada para virar o ano com brilho',
    featured:       [
      { name:'Colar Luxe',     sub:'Banhado a ouro 18K', price:84.90, hue:60, metal:'#d4af6a' },
      { name:'Brinco Stella',  sub:'Banhado a ouro 18K', price:48.90, hue:55, metal:'#d4af6a' },
      { name:'Pulseira Aurum', sub:'Banhada a ouro 18K', price:69.90, hue:45, metal:'#d4af6a' },
    ],
  };
  function _cfg(k) { return (window.CAPAS_CONFIG?.anonovo?.[k]) ?? _D[k]; }

  // explosão de fogos (linhas radiais)
  function Firework({ size = 100, color = '#d4af6a', x, y, rays = 12, opacity = 0.85 }) {
    const lines = [];
    for (let i = 0; i < rays; i++) {
      const a = (i / rays) * Math.PI * 2;
      const len = 36 + (i % 3) * 6;
      const x2 = 50 + Math.cos(a) * len;
      const y2 = 50 + Math.sin(a) * len;
      const tipX = 50 + Math.cos(a) * (len + 4);
      const tipY = 50 + Math.sin(a) * (len + 4);
      lines.push({ x2, y2, tipX, tipY });
    }
    return (
      <svg width={size} height={size} viewBox="0 0 100 100"
        style={{ position:'absolute', top:y, left:x, pointerEvents:'none', opacity,
                 animation:'cap-twinkle 2.4s ease-in-out infinite' }}>
        {lines.map((l,i) => (
          <g key={i}>
            <line x1="50" y1="50" x2={l.x2} y2={l.y2} stroke={color} strokeWidth="1" opacity="0.7"/>
            <circle cx={l.tipX} cy={l.tipY} r="2" fill={color}/>
          </g>
        ))}
        <circle cx="50" cy="50" r="3" fill={color}/>
      </svg>
    );
  }

  // estrela pequena (sparkle 4 pontas)
  function Sparkle({ size = 16, x, y, color = '#d4af6a', opacity = 0.85 }) {
    return (
      <svg width={size} height={size} viewBox="0 0 20 20"
        style={{ position:'absolute', top:y, left:x, pointerEvents:'none', opacity,
                 animation:'cap-twinkle 2.5s ease-in-out infinite' }}>
        <path d="M10 0 L12 8 L20 10 L12 12 L10 20 L8 12 L0 10 L8 8 Z" fill={color}/>
      </svg>
    );
  }

  function AnoNovoBanner() {
    const featured = _cfg('featured');
    const decorations = () => (
      <>
        <WatercolorSplash pos="tl" color="#1d2e52"      size={460} rotation={-10} opacity={0.7}/>
        <WatercolorSplash pos="tr" color={COLORS.accent} size={320} rotation={28} opacity={0.18}/>
        <WatercolorSplash pos="br" color="#2a3f6a"      size={400} rotation={-22} opacity={0.5}/>
        <Firework x="4%"  y={30}  size={120} color={COLORS.accent}/>
        <Firework x="78%" y={60}  size={90}  color="#f0d28a" opacity={0.6}/>
        <Firework x="86%" y={'62%'} size={140} color={COLORS.accent} opacity={0.5}/>
        <Firework x="-2%" y={'68%'} size={110} color="#f0d28a" opacity={0.6}/>
        <Sparkle x="22%" y={80}   size={14} color="#f0d28a"/>
        <Sparkle x="68%" y={140}  size={18} color={COLORS.accent}/>
        <Sparkle x="30%" y={240}  size={12} color="#f0d28a" opacity={0.7}/>
        <Sparkle x="92%" y={300}  size={16} color={COLORS.accent}/>
        <Sparkle x="6%"  y={400}  size={14} color="#f0d28a"/>
        <Sparkle x="48%" y={460}  size={16} color={COLORS.accent}/>
      </>
    );

    const hero = (
      <>
        <div style={{
          position:'absolute', inset:'8% 6%', borderRadius:'50%',
          background:'radial-gradient(circle at 50% 50%, rgba(212,175,106,0.18) 0%, rgba(10,20,40,0) 70%)',
          filter:'blur(8px)', zIndex:0,
        }}/>
        <FloatingCard item={featured[0]} big accent="#1a1206" tileBg="#fdf5e3"
          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="#1a1206" tileBg="#fdf5e3"
          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="#1a1206" tileBg="#fdf5e3"
          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' }}/>
        <Firework x="-10%" y={20}  size={180} color={COLORS.accent} opacity={0.45}/>
        <Firework x="88%"  y={300} size={120} color="#f0d28a" opacity={0.55}/>
      </>
    );

    return (
      <BannerShell
        bg={COLORS.bg}
        accent={COLORS.accent}
        accentSoft={COLORS.accentSoft}
        ink={COLORS.ink}
        dark={true}
        chip={<div style={{
          display:'inline-flex', alignItems:'center', gap:10,
          background:'rgba(212,175,106,0.12)',
          border:`1px solid ${COLORS.accent}`,
          padding:'8px 14px 8px 10px', borderRadius:999, marginBottom:22,
        }}>
          <span style={{
            width:26, height:26, borderRadius:'50%',
            background:COLORS.accent, color:'#1a1206',
            display:'inline-flex', alignItems:'center', justifyContent:'center',
            fontSize:14,
          }}>✦</span>
          <span style={{
            fontFamily:'ui-monospace, SFMono-Regular, Menlo, monospace',
            fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase',
            color:COLORS.accent, fontWeight:600,
          }}>{_cfg('chip')}</span>
        </div>}
        headline={<>{_cfg('headline')}<br/></>}
        italicWord={_cfg('italicWord')}
        italicColor={COLORS.accent}
        copy={_cfg('copy')}
        targetIso={_cfg('target')}
        countdownLabel="Virada"
        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 AnoNovoStrip() {
    return (
      <AnnouncementStrip
        gradient="linear-gradient(90deg, #0a1428 0%, #1d2e52 50%, #d4af6a 100%)"
        icon={<span style={{fontSize:14}}>✦</span>}>
        {_cfg('stripText')}
      </AnnouncementStrip>
    );
  }

  Object.assign(window, { AnoNovoBanner, AnoNovoStrip });
  (window.CAPAS = window.CAPAS || {}).anonovo = {
    Banner: AnoNovoBanner, Strip: AnoNovoStrip,
    accent: '#d4af6a',
    gridLabel: 'Ano Novo',
    gridTitle: 'Para começar o ano em alta',
  };
})();