// =========================================================================
//  capas-especiais / sao-joao / banner.jsx
//  🎉 São João — amarelo + vermelho + azul, bandeirinhas, fogueira, xadrez
//  Exporta: SaoJoaoBanner, SaoJoaoStrip
// =========================================================================

(() => {
  const COLORS = {
    ink: '#3d1a0a',
    accent: '#c8364e',          // vermelho
    accentDark: '#8c1f30',
    accentSoft: '#fde2e2',
    yellow: '#f0c419',
    blue: '#2d6cb8',
    bg: 'linear-gradient(180deg, #fdf0d6 0%, #fde6c8 50%, #fff0d6 100%)',
  };
  const _D = {
    target:         '2026-06-24T00:00:00-03:00',
    chip:           'São João · 24 . 06',
    headline:       'Pra dançar quadrilha',
    italicWord:     'cintilando',
    copy:           'Coleção festeira com peças bem firmes pra dançar quadrilha. Embalagem com mini bandeirinha de tecido e cartão escrito à mão.',
    perks:          [{ icon:'✦', label:'Embalagem com bandeirinha' }, { icon:'★', label:'Fecho reforçado' }, { icon:'♪', label:'Pra dançar à vontade' }],
    ctaPrimaryLabel:'Ver coleção arraiá',
    ctaPrimaryHref: '#saojoao-grid',
    ctaWhatsApp:    'https://wa.me/5571999181376?text=Quero%20joia%20pro%20S%C3%A3o%20Jo%C3%A3o',
    stripText:      'São João · 24.06 · Embalagem festeira & fecho reforçado pra dançar',
    featured:       [
      { name:'Colar Arraiá',    sub:'Banhado a ouro 18K', price:54.90, hue:40, metal:'#d4af6a' },
      { name:'Brinco Fogueira', sub:'Banhado a ouro 18K', price:42.90, hue:25, metal:'#d4af6a' },
      { name:'Pulseira Roça',   sub:'Aço Inox Legítimo',  price:39.90, hue:60, metal:'#d4af6a' },
    ],
  };
  function _cfg(k) { return (window.CAPAS_CONFIG?.saojoa?.[k]) ?? _D[k]; }

  // bandeirinha de varal
  function Bunting({ x, y, w = 400, count = 8, colors }) {
    const cs = colors || [COLORS.accent, COLORS.yellow, COLORS.blue, '#3fb872'];
    const spacing = w / (count - 1);
    return (
      <svg width={w} height={70} viewBox={`0 0 ${w} 70`}
        style={{ position:'absolute', top:y, left:x, pointerEvents:'none' }}>
        {/* corda */}
        <path d={`M 0 8 Q ${w/2} 32 ${w} 8`} stroke="#3d1a0a" strokeWidth="1" fill="none" opacity="0.5"/>
        {Array.from({ length: count }, (_, i) => {
          const t = i / (count - 1);
          // sag curve
          const cx = t * w;
          const cy = 8 + Math.sin(t * Math.PI) * 24;
          const color = cs[i % cs.length];
          return (
            <g key={i} transform={`translate(${cx - 12} ${cy})`}>
              <polygon points="0,0 24,0 12,28" fill={color} opacity="0.92"/>
              <circle cx="12" cy="-1" r="1.5" fill="#3d1a0a" opacity="0.5"/>
            </g>
          );
        })}
      </svg>
    );
  }

  // fogueira simplificada
  function Fogueira({ size = 80, x, y, opacity = 0.85 }) {
    return (
      <svg width={size} height={size} viewBox="0 0 100 100"
        style={{ position:'absolute', top:y, left:x, pointerEvents:'none', opacity,
                 animation:'cap-twinkle 1.8s ease-in-out infinite' }}>
        {/* lenha */}
        <path d="M 20 78 L 80 86" stroke="#6b3a1a" strokeWidth="6" strokeLinecap="round"/>
        <path d="M 22 86 L 78 78" stroke="#5a3014" strokeWidth="6" strokeLinecap="round"/>
        {/* chamas */}
        <path d="M 50 28 Q 32 56 38 78 Q 45 82 50 76 Q 55 82 62 78 Q 68 56 50 28 Z" fill="#c8364e"/>
        <path d="M 50 40 Q 38 60 42 76 Q 48 80 50 74 Q 54 80 58 76 Q 62 60 50 40 Z" fill={COLORS.yellow}/>
        <path d="M 50 54 Q 44 66 46 74 Q 50 78 54 74 Q 56 66 50 54 Z" fill="#fff7d6" opacity="0.9"/>
      </svg>
    );
  }

  // estrela 5 pontas pequena
  function Estrelinha({ size = 18, x, y, color = '#f0c419', 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' }}>
        <polygon points="10,1 12,7 19,7 13,11 15,19 10,14 5,19 7,11 1,7 8,7" fill={color}/>
      </svg>
    );
  }

  function SaoJoaoBanner() {
    const featured = _cfg('featured');
    const decorations = () => (
      <>
        <WatercolorSplash pos="tl" color={COLORS.yellow} size={420} rotation={-10} opacity={0.42}/>
        <WatercolorSplash pos="tr" color={COLORS.accent} size={340} rotation={28}  opacity={0.30}/>
        <WatercolorSplash pos="bl" color={COLORS.blue}   size={360} rotation={40}  opacity={0.25}/>
        <WatercolorSplash pos="br" color={COLORS.yellow} size={300} rotation={-22} opacity={0.32}/>
        {/* varais de bandeirinhas */}
        <Bunting x="-2%" y={18}  w={620} count={11}/>
        <Bunting x="40%" y={'74%'} w={520} count={9}/>
        {/* estrelas pelo céu */}
        <Estrelinha x="14%" y={120} size={16} color={COLORS.accent}/>
        <Estrelinha x="62%" y={80}  size={20}/>
        <Estrelinha x="86%" y={180} size={14}/>
        <Estrelinha x="30%" y={'80%'} size={18} color={COLORS.accent}/>
        <Estrelinha x="92%" y={'40%'} size={16}/>
        <Estrelinha x="6%"  y={'50%'} size={14} color={COLORS.blue} opacity={0.6}/>
      </>
    );

    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(253,240,214,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:'42%', left:'-4%', width:'42%',
                   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:'-4%', width:'42%',
                   zIndex:2, transform:'rotate(6deg)',
                   animation:'cap-float-y 9s ease-in-out infinite', animationDelay:'0.8s' }}/>
        <Fogueira x="-4%" y={'58%'} size={120}/>
        <Estrelinha x="78%" y={20} size={28} color={COLORS.accent}/>
      </>
    );

    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.accentDark}
        copy={_cfg('copy')}
        targetIso={_cfg('target')}
        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 SaoJoaoStrip() {
    return (
      <AnnouncementStrip
        gradient={`linear-gradient(90deg, ${COLORS.accent} 0%, ${COLORS.yellow} 50%, ${COLORS.blue} 100%)`}
        icon={<span style={{fontSize:14}}>✦</span>}>
        {_cfg('stripText')}
      </AnnouncementStrip>
    );
  }

  (window.CAPAS = window.CAPAS || {}).saojoa = {
    Banner: SaoJoaoBanner, Strip: SaoJoaoStrip,
    accent: '#dc2626',
    gridLabel: 'São João',
    gridTitle: 'Festa junina em joias',
  };
})();