// =========================================================================
//  capas-especiais / dia-das-maes / banner.jsx
//  👩 Dia das Mães — rosa antigo + dourado, flores aquareladas, eterno
//  Exporta: MaesBanner, MaesStrip
// =========================================================================

(() => {
  const { useMemo } = React;
  const COLORS = {
    ink: '#3a1f2b',
    accent: '#c9697d',          // rose
    accentDark: '#8a3f55',
    accentSoft: '#fbe8ec',
    gold: '#b87333',
    bg: 'linear-gradient(180deg, #fdf2ee 0%, #fbe9e7 50%, #fdf1f3 100%)',
  };
  const _D = {
    target:         '2026-05-10T00:00:00-03:00',
    chip:           'Dia das Mães · 10 . 05',
    headline:       'Para a mulher que nos',
    italicWord:     'formou',
    copy:           'Joias feitas à mão para celebrar quem cuida da gente todos os dias. Embalagem especial com cartão escrito à mão e despacho com antecedência.',
    perks:          [{ icon:'✿', label:'Embalagem com flor seca' }, { icon:'✉', label:'Cartão escrito à mão' }, { icon:'★', label:'Despacho prioritário' }],
    ctaPrimaryLabel:'Ver presentes',
    ctaPrimaryHref: '#maes-grid',
    ctaWhatsApp:    'https://wa.me/5571999181376?text=Quero%20ajuda%20com%20um%20presente%20de%20M%C3%A3es',
    stripText:      'Dia das Mães · 10.05 · Cartão escrito à mão & despacho com antecedência',
    featured:       [
      { name:'Brinco Jasmim', sub:'Banhado a ouro 18K', price:39.90, hue:25  },
      { name:'Colar Flor',    sub:'Banhado a ouro 18K', price:69.90, hue:5   },
      { name:'Pulseira Rosa', sub:'Banhada a ouro 18K', price:49.90, hue:355 },
    ],
  };
  function _cfg(k) { return (window.CAPAS_CONFIG?.maes?.[k]) ?? _D[k]; }

  // flor de 5 pétalas rabiscada
  function DrawnFlower({ size = 60, color = '#c9697d', center = '#b87333', style = {} }) {
    const id = useMemo(() => 'fl-' + Math.random().toString(36).slice(2), []);
    const petals = [];
    for (let i = 0; i < 5; i++) {
      const a = (i / 5) * Math.PI * 2 - Math.PI / 2;
      const cx = 50 + Math.cos(a) * 20;
      const cy = 50 + Math.sin(a) * 20;
      petals.push({ cx, cy, rot: (a * 180 / Math.PI) + 90 });
    }
    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.05" numOctaves="2" seed="2"/>
            <feDisplacementMap in="SourceGraphic" scale="1.8"/>
          </filter>
        </defs>
        <g filter={`url(#${id}-r)`}>
          {petals.map((p,i)=>(
            <ellipse key={i} cx={p.cx} cy={p.cy} rx="10" ry="18"
              transform={`rotate(${p.rot} ${p.cx} ${p.cy})`}
              fill={color} opacity="0.55"/>
          ))}
          <circle cx="50" cy="50" r="9" fill={center}/>
          <circle cx="50" cy="50" r="9" fill="none" stroke="#fff" strokeWidth="1" opacity="0.6"/>
        </g>
      </svg>
    );
  }

  // ramo simples (folha + caule)
  function Stem({ x, y, color, rotate = 0, size = 90 }) {
    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:0.5 }}>
        <path d="M 50 95 Q 50 60 40 30 Q 30 10 50 5" stroke={color} strokeWidth="2" fill="none" strokeLinecap="round"/>
        <path d="M 45 50 Q 25 45 18 30" stroke={color} strokeWidth="1.5" fill="none"/>
        <path d="M 48 35 Q 65 32 70 18" stroke={color} strokeWidth="1.5" fill="none"/>
        <ellipse cx="20" cy="32" rx="8" ry="3" fill={color} opacity="0.4" transform="rotate(-40 20 32)"/>
        <ellipse cx="70" cy="18" rx="8" ry="3" fill={color} opacity="0.4" transform="rotate(45 70 18)"/>
      </svg>
    );
  }

  function MaesBanner() {
    const featured = _cfg('featured');
    const decorations = () => (
      <>
        <WatercolorSplash pos="tl" color={COLORS.accent}  size={420} rotation={-10} opacity={0.42}/>
        <WatercolorSplash pos="tr" color="#e0a8a8"        size={340} rotation={22}  opacity={0.36}/>
        <WatercolorSplash pos="bl" color="#f0c294"        size={360} rotation={40}  opacity={0.34}/>
        <WatercolorSplash pos="br" color={COLORS.gold}    size={300} rotation={-22} opacity={0.22}/>
        <DrawnFlower size={66} color={COLORS.accent} style={{ top:40, right:'14%', transform:'rotate(-12deg)' }}/>
        <DrawnFlower size={48} color="#e0a8a8"       style={{ top:140, right:'7%' }}/>
        <DrawnFlower size={38} color={COLORS.gold}   style={{ top:230, right:'18%', transform:'rotate(18deg)' }}/>
        <DrawnFlower size={54} color={COLORS.accent} style={{ bottom:48, left:'8%',  transform:'rotate(8deg)' }}/>
        <DrawnFlower size={32} color="#e0a8a8"       style={{ bottom:28, left:'18%', transform:'rotate(-10deg)' }}/>
        <Stem x="3%" y={70}  color={COLORS.gold} rotate={-20} size={90}/>
        <Stem x="92%" y={260} color={COLORS.gold} rotate={160} size={70}/>
      </>
    );

    const hero = (
      <>
        <div style={{
          position:'absolute', inset:'8% 6%', borderRadius:'50%',
          background:'radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0%, rgba(253,242,238,0) 70%)',
          filter:'blur(4px)', zIndex:0,
        }}/>
        <FloatingCard item={featured[1]} big accent={COLORS.ink}
          style={{ position:'absolute', top:'4%', left:'16%', width:'66%',
                   zIndex:3, animation:'cap-float-y 7s ease-in-out infinite' }}/>
        <FloatingCard item={featured[0]} accent={COLORS.ink}
          style={{ position:'absolute', top:'40%', left:'-2%', width:'44%',
                   zIndex:2, transform:'rotate(-5deg)',
                   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(6deg)',
                   animation:'cap-float-y 9s ease-in-out infinite', animationDelay:'0.8s' }}/>
        {/* selo "Para mãe" */}
        <div style={{
          position:'absolute', top:8, right:'2%',
          width:74, height:74, borderRadius:'50%',
          background:`conic-gradient(from 0deg, ${COLORS.gold}, #e9c79a, ${COLORS.gold})`,
          display:'flex', alignItems:'center', justifyContent:'center',
          color:'#3a1f2b', zIndex:4,
          boxShadow:'0 10px 24px -10px rgba(58,31,43,0.4)',
          fontFamily:"'Cormorant Garamond',serif", fontStyle:'italic',
          fontSize:14, fontWeight:600, textAlign:'center', lineHeight:1.05,
          animation:'cap-spin-slow 60s linear infinite',
        }}>
          para<br/>mamãe
        </div>
      </>
    );

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

  (window.CAPAS = window.CAPAS || {}).maes = {
    Banner: MaesBanner, Strip: MaesStrip,
    accent: '#be123c',
    gridLabel: 'Dia das Mães',
    gridTitle: 'Para celebrar quem ama incondicionalmente',
  };
})();