// =========================================================================
//  capas-especiais / dia-da-mulher / banner.jsx
//  ♀ Dia da Mulher — violeta + lilás, traços femininos
//  Exporta: MulherBanner, MulherStrip
// =========================================================================

(() => {
  const { useMemo } = React;
  const COLORS = {
    ink: '#2c1a3a',
    accent: '#8e54a3',          // violeta
    accentDark: '#5d2f78',
    accentSoft: '#f0e3f6',
    lilac: '#c9a8d8',
    bg: 'linear-gradient(180deg, #f6ecfb 0%, #f3e7f7 50%, #fbf5fd 100%)',
  };
  const TARGET = '2027-03-08T00:00:00-03:00';
  const FEATURED = [
    { id:'br-violeta', name:'Brinco Violeta', sub:'Banhado a ouro 18K', price:42.90, hue:300 },
    { id:'co-iris',    name:'Colar Íris',     sub:'Banhado a ouro 18K', price:64.90, hue:280 },
    { id:'pl-lavanda',name:'Pulseira Lavanda',sub:'Banhada a ouro 18K', price:48.90, hue:295 },
  ];

  // símbolo Vênus desenhado
  function VenusSymbol({ size = 56, color = '#8e54a3', stroke = 2.2, style = {} }) {
    const id = useMemo(() => 'vs-' + Math.random().toString(36).slice(2), []);
    return (
      <svg width={size} height={size} viewBox="0 0 100 100"
        style={{ position:'absolute', pointerEvents:'none', ...style }}>
        <defs>
          <filter id={`${id}-r`} x="-10%" y="-10%" width="120%" height="120%">
            <feTurbulence type="fractalNoise" baseFrequency="0.045" numOctaves="2" seed="5"/>
            <feDisplacementMap in="SourceGraphic" scale="1.6"/>
          </filter>
        </defs>
        <g fill="none" stroke={color} strokeWidth={stroke} strokeLinecap="round" filter={`url(#${id}-r)`}>
          <circle cx="50" cy="38" r="22"/>
          <path d="M 50 60 L 50 86"/>
          <path d="M 38 76 L 62 76"/>
        </g>
      </svg>
    );
  }

  // pétala única (margarida solta)
  function Petal({ size, x, y, color, rotate = 0, opacity = 0.45 }) {
    return (
      <svg width={size} height={size*2} viewBox="0 0 50 100"
        style={{ position:'absolute', top:y, left:x,
                 transform:`rotate(${rotate}deg)`, pointerEvents:'none', opacity }}>
        <ellipse cx="25" cy="50" rx="12" ry="40" fill={color}/>
      </svg>
    );
  }

  function MulherBanner() {
    const decorations = () => (
      <>
        <WatercolorSplash pos="tl" color={COLORS.accent}  size={420} rotation={-10} opacity={0.38}/>
        <WatercolorSplash pos="tr" color={COLORS.lilac}   size={360} rotation={28}  opacity={0.42}/>
        <WatercolorSplash pos="bl" color="#b87aca"        size={340} rotation={40}  opacity={0.32}/>
        <WatercolorSplash pos="br" color={COLORS.accent}  size={300} rotation={-22} opacity={0.24}/>
        <VenusSymbol size={56} color={COLORS.accent} style={{ top:48, right:'14%', transform:'rotate(-8deg)' }}/>
        <VenusSymbol size={36} color={COLORS.lilac}  style={{ top:140, right:'7%' }}/>
        <VenusSymbol size={30} color={COLORS.accentDark} style={{ top:230, right:'19%', transform:'rotate(14deg)', opacity:0.7 }}/>
        <VenusSymbol size={44} color={COLORS.accent} style={{ bottom:54, left:'9%' }}/>
        <Petal size={22} x="6%"  y={70}  color={COLORS.lilac} rotate={-25}/>
        <Petal size={18} x="92%" y={300} color={COLORS.accent} rotate={140} opacity={0.4}/>
        <Petal size={16} x="14%" y={400} color={COLORS.accent} rotate={60}  opacity={0.4}/>
      </>
    );

    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(246,236,251,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' }}/>
        <VenusSymbol size={84} color={COLORS.accent}
          style={{ position:'absolute', top:'-2%', right:'2%', opacity:0.85 }}/>
      </>
    );

    return (
      <BannerShell
        bg={COLORS.bg}
        accent={COLORS.accent}
        accentSoft={COLORS.accentSoft}
        ink={COLORS.ink}
        chip={<ThemeChip icon="♀" color={COLORS.accent} soft={COLORS.accentSoft}>
          Dia da Mulher · 08 . 03
        </ThemeChip>}
        headline={<>Para a mulher<br/>que você </>}
        italicWord="é"
        italicColor={COLORS.accentDark}
        copy="Joias para celebrar força, sutileza e história. Feitas à mão para acompanhar você todos os dias — não só hoje."
        targetIso={TARGET}
        ctaPrimary={{ label:'Ver coleção', href:'#mulher-grid', dark:COLORS.accentDark }}
        ctaSecondary={{ label:'Ajuda no WhatsApp', icon:'💬',
          href:'https://wa.me/5571999181376?text=Quero%20ajuda%20com%20uma%20joia' }}
        perks={[
          { icon:'♀', label:'Feita com amor' },
          { icon:'✿', label:'Embalagem especial' },
          { icon:'★', label:'Parcele em 6x' },
        ]}
        decorations={decorations}
        hero={hero}
      />
    );
  }

  function MulherStrip() {
    return (
      <AnnouncementStrip
        gradient={`linear-gradient(90deg, ${COLORS.accentDark} 0%, ${COLORS.accent} 50%, ${COLORS.lilac} 100%)`}
        icon={<span style={{fontSize:14}}>♀</span>}>
        Dia da Mulher · 08.03 · Feita com amor & embalagem especial
      </AnnouncementStrip>
    );
  }

  Object.assign(window, { MulherBanner, MulherStrip });
  (window.CAPAS = window.CAPAS || {}).mulher = {
    Banner: MulherBanner, Strip: MulherStrip,
    accent: '#be185d',
    gridLabel: 'Dia da Mulher',
    gridTitle: 'Força & elegância',
  };
})();