// =========================================================================
//  capas-especiais / best-seller / banner.jsx
//  🏆 Best-seller — âmbar + bordô, troféu/loureiro, "mais vendidas"
//  Exporta: BestSellerBanner, BestSellerStrip
// =========================================================================

(() => {
  const COLORS = {
    ink: '#3a1418',
    accent: '#a8324b',          // bordô
    accentDark: '#6e1c2e',
    accentSoft: '#f3d8de',
    amber: '#d97c2e',
    gold: '#c79b30',
    bg: 'linear-gradient(180deg, #fbecdb 0%, #f5dfc6 55%, #fbecdb 100%)',
  };
  const FEATURED = [
    { id:'co-vit',    name:'Colar Vitória', sub:'Banhado a ouro 18K', price:64.90, hue:30, metal:'#c79b30' },
    { id:'br-laur',   name:'Brinco Loureiro', sub:'Banhado a ouro 18K', price:48.90, hue:45, metal:'#c79b30' },
    { id:'pl-medal',  name:'Pulseira Medalha', sub:'Banhada a ouro 18K', price:54.90, hue:25, metal:'#c79b30' },
  ];

  // ramo de loureiro (laurel)
  function Laurel({ side = 'left', size = 200, x, y, color = '#c79b30', opacity = 0.55 }) {
    const flip = side === 'right' ? -1 : 1;
    const leaves = [];
    for (let i = 0; i < 8; i++) {
      const y = 10 + i * 22;
      leaves.push({ y, rot: -30 - i * 4 });
    }
    return (
      <svg width={size} height={size*1.3} viewBox="0 0 100 200"
        style={{ position:'absolute', top:y, left:x,
                 transform:`scaleX(${flip})`, pointerEvents:'none', opacity }}>
        <path d="M 50 195 Q 45 100 60 5" stroke={color} strokeWidth="1.2" fill="none"/>
        {leaves.map((l,i) => (
          <ellipse key={i} cx={50 + 18} cy={l.y} rx="14" ry="5"
            transform={`rotate(${l.rot} ${50 + 18} ${l.y})`}
            fill={color} opacity={0.7}/>
        ))}
        {leaves.map((l,i) => (
          <ellipse key={'r'+i} cx={50 - 16} cy={l.y + 6} rx="12" ry="4.5"
            transform={`rotate(${-l.rot + 180} ${50 - 16} ${l.y + 6})`}
            fill={color} opacity={0.6}/>
        ))}
      </svg>
    );
  }

  // medalha
  function Medal({ size = 100, x, y, rotate = 0, opacity = 1 }) {
    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 }}>
        <defs>
          <radialGradient id="med-g" cx="0.35" cy="0.3">
            <stop offset="0%" stopColor="#ffeec0"/>
            <stop offset="60%" stopColor="#c79b30"/>
            <stop offset="100%" stopColor="#7a5610"/>
          </radialGradient>
        </defs>
        {/* fita */}
        <polygon points="32,4 50,46 68,4 60,4 50,28 40,4" fill={COLORS.accent}/>
        {/* círculo */}
        <circle cx="50" cy="62" r="28" fill="url(#med-g)" stroke="#7a5610" strokeWidth="0.6"/>
        <circle cx="50" cy="62" r="22" fill="none" stroke="#fff7d6" strokeWidth="1" opacity="0.7"/>
        <text x="50" y="68" textAnchor="middle" fontFamily="'Cormorant Garamond',serif"
          fontStyle="italic" fontSize="20" fontWeight="700" fill="#3a1418">★</text>
      </svg>
    );
  }

  function BestSellerBanner() {
    const decorations = () => (
      <>
        <WatercolorSplash pos="tl" color={COLORS.amber}  size={420} rotation={-10} opacity={0.32}/>
        <WatercolorSplash pos="tr" color={COLORS.accent} size={340} rotation={28}  opacity={0.25}/>
        <WatercolorSplash pos="bl" color={COLORS.gold}   size={360} rotation={40}  opacity={0.28}/>
        <WatercolorSplash pos="br" color={COLORS.amber}  size={300} rotation={-22} opacity={0.30}/>
        <Laurel side="left"  x="-2%" y={'15%'} size={220} color={COLORS.accent} opacity={0.30}/>
        <Laurel side="right" x="84%" y={'15%'} size={220} color={COLORS.accent} opacity={0.30}/>
        <Medal x="6%"  y={40}  size={70}/>
        <Medal x="86%" y={170} size={56} rotate={10}/>
        <Medal x="42%" y={'90%'} size={48} rotate={-8} opacity={0.7}/>
      </>
    );

    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,236,219,0) 70%)',
          filter:'blur(4px)', zIndex:0,
        }}/>
        {/* "#1" badge */}
        <div style={{
          position:'absolute', top:0, right:'6%', zIndex:5,
          width:64, height:64, borderRadius:'50%',
          background:`conic-gradient(from 0deg, ${COLORS.gold}, #ffeec0, ${COLORS.gold})`,
          display:'flex', alignItems:'center', justifyContent:'center',
          fontFamily:"'Cormorant Garamond',serif", fontStyle:'italic',
          fontSize:28, fontWeight:700, color:COLORS.ink,
          boxShadow:'0 10px 24px -10px rgba(58,20,24,0.45)',
          animation:'cap-spin-slow 60s linear infinite',
        }}>#1</div>
        <FloatingCard item={FEATURED[0]} big accent={COLORS.ink}
          style={{ position:'absolute', top:'8%', 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:'44%', 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' }}/>
      </>
    );

    return (
      <BannerShell
        bg={COLORS.bg}
        accent={COLORS.accent}
        accentSoft={COLORS.accentSoft}
        ink={COLORS.ink}
        chip={<ThemeChip icon="✦" color={COLORS.accentDark} soft={COLORS.accentSoft}>
          Best-sellers · As mais pedidas
        </ThemeChip>}
        headline={<>As que mais<br/>saem da </>}
        italicWord="prateleira"
        italicColor={COLORS.accentDark}
        copy="As joias que conquistaram nossas clientes. Peças aprovadas no uso diário, com fecho reforçado e acabamento que dura."
        ctaPrimary={{ label:'Ver mais vendidas', href:'#bestseller-grid', dark:COLORS.accentDark }}
        ctaSecondary={{ label:'Ajuda no WhatsApp', icon:'💬',
          href:'https://wa.me/5571999181376' }}
        perks={[
          { icon:'✦', label:'Aprovadas no uso diário' },
          { icon:'★', label:'Avaliações 5 estrelas' },
          { icon:'◇', label:'Garantia estendida' },
        ]}
        decorations={decorations}
        hero={hero}
      />
    );
  }

  function BestSellerStrip() {
    return (
      <AnnouncementStrip
        gradient={`linear-gradient(90deg, ${COLORS.accentDark} 0%, ${COLORS.amber} 50%, ${COLORS.gold} 100%)`}
        icon={<span style={{fontSize:14}}>★</span>}>
        Best-sellers · As joias mais pedidas da Lua Azul
      </AnnouncementStrip>
    );
  }

  Object.assign(window, { BestSellerBanner, BestSellerStrip });
  (window.CAPAS = window.CAPAS || {})['best-seller'] = {
    Banner: BestSellerBanner, Strip: BestSellerStrip,
    accent: '#ca8a04',
    gridLabel: 'Best-sellers',
    gridTitle: 'Mais vendidas',
  };
})();