// =========================================================================
//  capas-especiais / casamentos / banner.jsx
//  💍 Casamentos — off-white + dourado, elegante, atemporal
//  Exporta: CasamentosBanner, CasamentosStrip
// =========================================================================

(() => {
  const COLORS = {
    ink: '#2a2014',
    accent: '#a8893a',          // ouro fosco
    accentDark: '#7a6322',
    accentSoft: '#f5ecd5',
    cream: '#fbf6ec',
    bg: 'linear-gradient(180deg, #fbf6ec 0%, #f5ecd5 60%, #fbf6ec 100%)',
  };
  // sem countdown — coleção permanente
  const FEATURED = [
    { id:'co-veu',    name:'Colar Véu',     sub:'Banhado a ouro 18K', price:84.90, hue:55, metal:'#a8893a' },
    { id:'br-perola', name:'Brinco Pérola', sub:'Pérola natural',     price:69.90, hue:50, metal:'#a8893a' },
    { id:'pl-aliana', name:'Pulseira Eterna', sub:'Banhada a ouro 18K', price:59.90, hue:45, metal:'#a8893a' },
  ];

  // ramo botânico elegante
  function Branch({ size = 140, x, y, rotate = 0, opacity = 0.55, color = '#a8893a' }) {
    return (
      <svg width={size} height={size} viewBox="0 0 100 140"
        style={{ position:'absolute', top:y, left:x,
                 transform:`rotate(${rotate}deg)`, pointerEvents:'none', opacity }}>
        <g stroke={color} strokeWidth="1.2" fill="none" strokeLinecap="round">
          <path d="M 50 138 Q 48 100 52 60 Q 52 30 50 4"/>
          {[20, 36, 52, 68, 84, 100, 116].map((y,i) => {
            const dir = i % 2 ? 1 : -1;
            const w = 18 - i * 1.2;
            return <g key={i}>
              <path d={`M 50 ${y} Q ${50 + dir * w * 0.6} ${y - 4} ${50 + dir * w} ${y - 12}`}/>
              <ellipse cx={50 + dir * w * 0.9} cy={y - 8} rx={w*0.5} ry={3.5}
                fill={color} opacity="0.6"
                transform={`rotate(${dir * 30} ${50 + dir * w * 0.9} ${y - 8})`}
                stroke="none"/>
            </g>;
          })}
        </g>
      </svg>
    );
  }

  // moldura art déco
  function Frame({ size = 60, x, y, color = '#a8893a', opacity = 0.7 }) {
    return (
      <svg width={size} height={size} viewBox="0 0 80 80"
        style={{ position:'absolute', top:y, left:x, pointerEvents:'none', opacity }}>
        <g fill="none" stroke={color} strokeWidth="1">
          <path d="M 40 8 L 72 40 L 40 72 L 8 40 Z"/>
          <path d="M 40 14 L 66 40 L 40 66 L 14 40 Z"/>
          <circle cx="40" cy="40" r="3" fill={color}/>
        </g>
      </svg>
    );
  }

  function CasamentosBanner() {
    const decorations = () => (
      <>
        <WatercolorSplash pos="tl" color={COLORS.accent}  size={420} rotation={-10} opacity={0.18}/>
        <WatercolorSplash pos="tr" color="#e0c98a"        size={340} rotation={28}  opacity={0.20}/>
        <WatercolorSplash pos="bl" color={COLORS.accent}  size={300} rotation={40}  opacity={0.15}/>
        <Branch x="-3%" y={20}    size={200} color={COLORS.accent} rotate={-12}/>
        <Branch x="86%" y={'48%'} size={180} color={COLORS.accent} rotate={170}/>
        <Branch x="3%"  y={'56%'} size={140} color={COLORS.accent} rotate={20}  opacity={0.35}/>
        <Frame x="14%" y={60}  size={42}/>
        <Frame x="84%" y={120} size={36} opacity={0.5}/>
        <Frame x="50%" y={'90%'} size={28} 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.96) 0%, rgba(251,246,236,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 8s ease-in-out infinite' }}/>
        <FloatingCard item={FEATURED[1]} accent={COLORS.ink}
          style={{ position:'absolute', top:'40%', left:'-2%', width:'44%',
                   zIndex:2, transform:'rotate(-4deg)',
                   animation:'cap-float-y 9s 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(4deg)',
                   animation:'cap-float-y 10s ease-in-out infinite', animationDelay:'0.8s' }}/>
        <Branch x="-8%" y={20} size={220} color={COLORS.accent} rotate={-25} opacity={0.45}/>
        <Branch x="86%" y={300} size={180} color={COLORS.accent} rotate={205} opacity={0.4}/>
      </>
    );

    return (
      <BannerShell
        bg={COLORS.bg}
        accent={COLORS.accent}
        accentSoft={COLORS.accentSoft}
        ink={COLORS.ink}
        chip={<ThemeChip icon="◇" color={COLORS.accentDark} soft={COLORS.accentSoft}>
          Coleção Casamentos · Para o grande dia
        </ThemeChip>}
        headline={<>Para o dia<br/>que dura </>}
        italicWord="para sempre"
        italicColor={COLORS.accentDark}
        copy="Joias delicadas e atemporais para noivas, madrinhas e convidadas. Embalagem especial com etiqueta personalizada. Sob encomenda em até 7 dias."
        ctaPrimary={{ label:'Ver coleção noivas', href:'#casamentos-grid', dark:COLORS.accentDark }}
        ctaSecondary={{ label:'Falar com a gente', icon:'💬',
          href:'https://wa.me/5571999181376?text=Quero%20ajuda%20com%20joias%20de%20casamento' }}
        perks={[
          { icon:'◇', label:'Embalagem especial' },
          { icon:'✿', label:'Personalização disponível' },
          { icon:'★', label:'Coleção atemporal' },
        ]}
        decorations={decorations}
        hero={hero}
      />
    );
  }

  function CasamentosStrip() {
    return (
      <AnnouncementStrip
        gradient={`linear-gradient(90deg, ${COLORS.accent} 0%, #e0c98a 50%, ${COLORS.accent} 100%)`}
        icon={<span style={{fontSize:14}}>◇</span>}>
        Coleção Casamentos · Joias atemporais & personalização disponível
      </AnnouncementStrip>
    );
  }

  Object.assign(window, { CasamentosBanner, CasamentosStrip });
  (window.CAPAS = window.CAPAS || {}).casamentos = {
    Banner: CasamentosBanner, Strip: CasamentosStrip,
    accent: '#9333ea',
    gridLabel: 'Casamentos',
    gridTitle: 'Para o grande dia',
  };
})();