// =========================================================================
//  capas-especiais / natal / banner.jsx
//  🎄 Natal — vermelho + verde + ouro, flocos de neve, estrela
//  Exporta: NatalBanner, NatalStrip
// =========================================================================

(() => {
  const { useMemo } = React;
  const COLORS = {
    ink: '#1a3a2a',
    accent: '#c8364e',          // vermelho
    accentDark: '#8c1f30',
    accentSoft: '#fbe2e2',
    green: '#1f5e3a',
    gold: '#c79b30',
    bg: 'linear-gradient(180deg, #f3ebe0 0%, #ece4d6 50%, #f8e7e7 100%)',
  };
  const _D = {
    target:         '2026-12-25T00:00:00-03:00',
    chip:           'Natal · 25 . 12',
    headline:       'Presentes para celebrar',
    italicWord:     'juntos',
    copy:           'Joias com embalagem natalina e cartão de boas festas. Frete grátis acima de R$ 150. Despache cedo pra chegar a tempo das ceias.',
    perks:          [{ icon:'❅', label:'Embalagem natalina' }, { icon:'✉', label:'Cartão de boas festas' }, { icon:'🚚', label:'Despacho com antecedência' }],
    ctaPrimaryLabel:'Ver presentes de Natal',
    ctaPrimaryHref: '#natal-grid',
    ctaWhatsApp:    'https://wa.me/5571999181376?text=Quero%20um%20presente%20de%20Natal',
    stripText:      'Natal · 25.12 · Embalagem natalina & despacho com antecedência',
    featured:       [
      { name:'Colar Estrela',  sub:'Banhado a ouro 18K', price:64.90, hue:60,  metal:'#c79b30' },
      { name:'Brinco Floco',   sub:'Banhado a ouro 18K', price:42.90, hue:200, metal:'#c79b30' },
      { name:'Pulseira Visco', sub:'Banhada a ouro 18K', price:54.90, hue:120, metal:'#c79b30' },
    ],
  };
  function _cfg(k) { return (window.CAPAS_CONFIG?.natal?.[k]) ?? _D[k]; }

  // floco de neve em 6 braços
  function Snowflake({ size = 50, color = '#1f5e3a', x, y, rotate = 0, opacity = 0.7 }) {
    const arms = [];
    for (let i = 0; i < 6; i++) arms.push(i * 60);
    return (
      <svg width={size} height={size} viewBox="0 0 100 100"
        style={{ position:'absolute', top:y, left:x,
                 transform:`rotate(${rotate}deg)`, pointerEvents:'none', opacity,
                 animation:'cap-spin-slow 60s linear infinite' }}>
        <g fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round">
          {arms.map((a,i) => (
            <g key={i} transform={`rotate(${a} 50 50)`}>
              <line x1="50" y1="50" x2="50" y2="10"/>
              <line x1="50" y1="20" x2="44" y2="14"/>
              <line x1="50" y1="20" x2="56" y2="14"/>
              <line x1="50" y1="32" x2="46" y2="28"/>
              <line x1="50" y1="32" x2="54" y2="28"/>
            </g>
          ))}
          <circle cx="50" cy="50" r="3" fill={color} stroke="none"/>
        </g>
      </svg>
    );
  }

  // estrela 5 pontas (ouro)
  function StarGold({ size = 40, x, y, rotate = 0, opacity = 1 }) {
    return (
      <svg width={size} height={size} viewBox="0 0 100 100"
        style={{ position:'absolute', top:y, left:x,
                 transform:`rotate(${rotate}deg)`, pointerEvents:'none', opacity,
                 animation:'cap-twinkle 3s ease-in-out infinite' }}>
        <defs>
          <radialGradient id="sg" cx="0.4" cy="0.35">
            <stop offset="0%" stopColor="#fde7a5"/>
            <stop offset="60%" stopColor="#c79b30"/>
            <stop offset="100%" stopColor="#8a6614"/>
          </radialGradient>
        </defs>
        <polygon points="50,8 61,38 92,38 67,57 77,87 50,68 23,87 33,57 8,38 39,38"
          fill="url(#sg)" stroke="#8a6614" strokeWidth="0.5"/>
      </svg>
    );
  }

  // ramo de pinheiro
  function PineSprig({ size = 100, x, y, rotate = 0, opacity = 0.6 }) {
    return (
      <svg width={size} height={size} viewBox="0 0 100 100"
        style={{ position:'absolute', top:y, left:x,
                 transform:`rotate(${rotate}deg)`, pointerEvents:'none', opacity }}>
        <g stroke={COLORS.green} strokeWidth="1.5" fill="none" strokeLinecap="round">
          <path d="M 50 95 L 50 10"/>
          {[20,30,40,50,60,70,82].map((y,i)=>{
            const w = 6 + i*4;
            return <g key={i}>
              <path d={`M 50 ${y} L ${50-w} ${y+6}`}/>
              <path d={`M 50 ${y} L ${50+w} ${y+6}`}/>
            </g>;
          })}
        </g>
      </svg>
    );
  }

  function NatalBanner() {
    const featured = _cfg('featured');
    const decorations = () => (
      <>
        <WatercolorSplash pos="tl" color={COLORS.accent} size={420} rotation={-10} opacity={0.32}/>
        <WatercolorSplash pos="tr" color={COLORS.green}  size={340} rotation={28}  opacity={0.30}/>
        <WatercolorSplash pos="bl" color={COLORS.gold}   size={360} rotation={40}  opacity={0.25}/>
        <WatercolorSplash pos="br" color={COLORS.accent} size={300} rotation={-22} opacity={0.22}/>
        <Snowflake x="6%"  y={40}  size={48} color={COLORS.green}/>
        <Snowflake x="12%" y={140} size={36} color={COLORS.accentDark} opacity={0.6}/>
        <Snowflake x="84%" y={60}  size={44} color={COLORS.green} rotate={20}/>
        <Snowflake x="88%" y={180} size={32} color={COLORS.accent} rotate={-15} opacity={0.6}/>
        <Snowflake x="44%" y={'6%'} size={28} color={COLORS.gold} opacity={0.8}/>
        <StarGold x="20%" y={70}  size={32}/>
        <StarGold x="76%" y={260} size={26} rotate={20}/>
        <StarGold x="14%" y={'74%'} size={36} rotate={-12}/>
        <PineSprig x="-2%"  y={'58%'} size={140} color={COLORS.green} rotate={-20}/>
        <PineSprig x="90%"  y={'68%'} size={120} color={COLORS.green} rotate={200} opacity={0.5}/>
      </>
    );

    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(243,235,224,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' }}/>
        <StarGold x="2%" y={20} size={68}/>
        <Snowflake x="86%" y={'70%'} size={60} color={COLORS.green} opacity={0.5}/>
      </>
    );

    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.green}
        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 NatalStrip() {
    return (
      <AnnouncementStrip
        gradient={`linear-gradient(90deg, ${COLORS.green} 0%, ${COLORS.gold} 50%, ${COLORS.accent} 100%)`}
        icon={<span style={{fontSize:14}}>❅</span>}>
        {_cfg('stripText')}
      </AnnouncementStrip>
    );
  }

  (window.CAPAS = window.CAPAS || {}).natal = {
    Banner: NatalBanner, Strip: NatalStrip,
    accent: '#15803d',
    gridLabel: 'Natal',
    gridTitle: 'Para presentear no Natal',
  };
})();