// =========================================================================
//  capas-especiais / dia-das-criancas / banner.jsx
//  🧸 Dia das Crianças — laranja + amarelo, balões, estrelas, lúdico
//  Exporta: CriancasBanner, CriancasStrip
// =========================================================================

(() => {
  const { useMemo } = React;
  const COLORS = {
    ink: '#3d2310',
    accent: '#ff8c42',          // laranja
    accentDark: '#e35d00',
    accentSoft: '#ffe4cf',
    yellow: '#ffcb47',
    sky: '#7ec4dd',
    bg: 'linear-gradient(180deg, #fff7e8 0%, #ffece1 50%, #fef0d9 100%)',
  };
  const TARGET = '2026-10-12T00:00:00-03:00';
  const FEATURED = [
    { id:'pl-mini',  name:'Pulseira Mini',  sub:'Aço Inox · Infantil', price:32.90, hue:50  },
    { id:'br-sol',   name:'Brinco Sol',     sub:'Banhado a ouro 18K',  price:34.90, hue:70  },
    { id:'co-luna',  name:'Colar Estrelinha', sub:'Banhado a ouro 18K', price:39.90, hue:30  },
  ];

  // balão com cordinha
  function Balloon({ size = 60, color = '#ff8c42', x, y, rotate = 0, sway = false }) {
    return (
      <div style={{
        position:'absolute', top:y, left:x,
        transform:`rotate(${rotate}deg)`,
        animation: sway ? 'cap-sway 4s ease-in-out infinite' : undefined,
        pointerEvents:'none',
      }}>
        <svg width={size} height={size*1.4} viewBox="0 0 60 84">
          <ellipse cx="30" cy="30" rx="22" ry="28" fill={color}/>
          <ellipse cx="22" cy="22" rx="6" ry="8" fill="#fff" opacity="0.45"/>
          <polygon points="26,58 30,62 34,58" fill={color}/>
          <path d="M 30 62 Q 26 70 32 76 Q 38 82 28 84" stroke={color} strokeWidth="1.5" fill="none" opacity="0.7"/>
        </svg>
      </div>
    );
  }

  // estrela rabiscada
  function StarDrawn({ size = 40, color = '#ffcb47', x, y, rotate = 0, opacity = 0.8 }) {
    const id = useMemo(() => 'st-' + Math.random().toString(36).slice(2), []);
    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>
          <filter id={`${id}-r`}><feTurbulence baseFrequency="0.05" numOctaves="2" seed="9"/><feDisplacementMap in="SourceGraphic" scale="2"/></filter>
        </defs>
        <polygon points="50,8 61,38 92,38 67,57 77,87 50,68 23,87 33,57 8,38 39,38"
          fill={color} filter={`url(#${id}-r)`}/>
      </svg>
    );
  }

  function CriancasBanner() {
    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.36}/>
        <WatercolorSplash pos="bl" color={COLORS.sky}    size={360} rotation={40}  opacity={0.32}/>
        <WatercolorSplash pos="br" color={COLORS.yellow} size={300} rotation={-22} opacity={0.30}/>
        <Balloon x="6%"  y={40}  size={54} color={COLORS.accent} sway/>
        <Balloon x="11%" y={70}  size={42} color={COLORS.yellow} rotate={-8} sway/>
        <Balloon x="84%" y={50}  size={48} color={COLORS.sky}    rotate={6}  sway/>
        <Balloon x="91%" y={120} size={36} color={COLORS.accentDark} sway/>
        <StarDrawn x="20%" y={60}  size={30} color={COLORS.yellow}/>
        <StarDrawn x="76%" y={250} size={26} color={COLORS.accent}  rotate={20}/>
        <StarDrawn x="48%" y={'8%'} size={22} color={COLORS.yellow} opacity={0.7}/>
        <StarDrawn x="14%" y={'72%'} size={34} color={COLORS.accent} rotate={-12}/>
        <StarDrawn x="86%" y={'76%'} size={28} color={COLORS.yellow} rotate={30}/>
      </>
    );

    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(255,247,232,0) 70%)',
          filter:'blur(4px)', zIndex:0,
        }}/>
        <FloatingCard item={FEATURED[1]} 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[0]} accent={COLORS.ink}
          style={{ position:'absolute', top:'42%', left:'-4%', width:'42%',
                   zIndex:2, transform:'rotate(-7deg)',
                   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:'-4%', width:'42%',
                   zIndex:2, transform:'rotate(7deg)',
                   animation:'cap-float-y 9s ease-in-out infinite', animationDelay:'0.8s' }}/>
        <Balloon x="-2%" y={20} size={80} color={COLORS.accent} sway/>
        <Balloon x="90%" y={300} size={60} color={COLORS.yellow} rotate={10} sway/>
      </>
    );

    return (
      <BannerShell
        bg={COLORS.bg}
        accent={COLORS.accent}
        accentSoft={COLORS.accentSoft}
        ink={COLORS.ink}
        chip={<ThemeChip icon="★" color={COLORS.accentDark} soft={COLORS.accentSoft}>
          Dia das Crianças · 12 . 10
        </ThemeChip>}
        headline={<>Para presentear<br/>os pequenos com </>}
        italicWord="brilho"
        italicColor={COLORS.accentDark}
        copy="Pulseirinhas e brincos infantis em aço inox hipoalergênico. Tamanhos ajustáveis, embalagem divertida e cartão para escrever um recado."
        targetIso={TARGET}
        ctaPrimary={{ label:'Ver presentes infantis', href:'#criancas-grid', dark:COLORS.accentDark }}
        ctaSecondary={{ label:'Ajuda no WhatsApp', icon:'💬',
          href:'https://wa.me/5571999181376?text=Quero%20ajuda%20com%20um%20presente%20infantil' }}
        perks={[
          { icon:'★', label:'Hipoalergênico' },
          { icon:'✦', label:'Tamanho ajustável' },
          { icon:'✿', label:'Embalagem lúdica' },
        ]}
        decorations={decorations}
        hero={hero}
      />
    );
  }

  function CriancasStrip() {
    return (
      <AnnouncementStrip
        gradient={`linear-gradient(90deg, ${COLORS.accent} 0%, ${COLORS.yellow} 50%, ${COLORS.sky} 100%)`}
        icon={<span style={{fontSize:14}}>★</span>}>
        Dia das Crianças · 12.10 · Embalagem lúdica & peças hipoalergênicas
      </AnnouncementStrip>
    );
  }

  Object.assign(window, { CriancasBanner, CriancasStrip });
  (window.CAPAS = window.CAPAS || {}).criancas = {
    Banner: CriancasBanner, Strip: CriancasStrip,
    accent: '#db2777',
    gridLabel: 'Dia das Crianças',
    gridTitle: 'Pequenos tesouros',
  };
})();