// =========================================================================
//  capas-especiais / destaque / banner.jsx
//  ⭐ Destaque — dourado + creme, estrelas, "selecionadas a dedo"
//  Exporta: DestaqueBanner, DestaqueStrip
// =========================================================================

(() => {
  const COLORS = {
    ink: '#2a2014',
    accent: '#c79b30',          // dourado
    accentDark: '#8a6614',
    accentSoft: '#fbeec1',
    blue: '#0b2e36',
    bg: 'linear-gradient(180deg, #fff6dc 0%, #fde8b4 50%, #fff6dc 100%)',
  };
  const FEATURED = [
    { id:'co-stella',  name:'Colar Stella',  sub:'Banhado a ouro 18K', price:74.90, hue:55, metal:'#c79b30' },
    { id:'br-aurora',  name:'Brinco Aurora', sub:'Banhado a ouro 18K', price:48.90, hue:50, metal:'#c79b30' },
    { id:'pl-helena',  name:'Pulseira Helena', sub:'Banhada a ouro 18K', price:54.90, hue:60, metal:'#c79b30' },
  ];

  // estrela dourada simples
  function Star({ size = 40, color = '#c79b30', 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,
                 animation:'cap-twinkle 3s ease-in-out infinite' }}>
        <polygon points="50,8 61,38 92,38 67,57 77,87 50,68 23,87 33,57 8,38 39,38"
          fill={color}/>
      </svg>
    );
  }

  function DestaqueBanner() {
    const decorations = () => (
      <>
        <WatercolorSplash pos="tl" color={COLORS.accent}  size={420} rotation={-10} opacity={0.30}/>
        <WatercolorSplash pos="tr" color="#fde6a8"        size={340} rotation={28}  opacity={0.40}/>
        <WatercolorSplash pos="bl" color={COLORS.accentDark} size={360} rotation={40}  opacity={0.20}/>
        <Star x="6%"  y={50}  size={42} color={COLORS.accent}/>
        <Star x="14%" y={140} size={26} color={COLORS.accentDark} opacity={0.6}/>
        <Star x="84%" y={60}  size={36} color={COLORS.accent} rotate={20}/>
        <Star x="80%" y={170} size={22} color={COLORS.accent} rotate={-10} opacity={0.7}/>
        <Star x="42%" y={'8%'} size={20} color={COLORS.accentDark} opacity={0.7}/>
        <Star x="16%" y={'76%'} size={32} color={COLORS.accent} rotate={20}/>
        <Star x="88%" y={'72%'} size={28} color={COLORS.accent} rotate={-12} opacity={0.8}/>
      </>
    );

    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(255,246,220,0) 70%)',
          filter:'blur(4px)', zIndex:0,
        }}/>
        {/* selo de destaque grande */}
        <div style={{
          position:'absolute', top:0, right:'4%',
          width:88, height:88, borderRadius:'50%',
          background:`conic-gradient(from 0deg, ${COLORS.accent}, #ffeec0, ${COLORS.accent})`,
          display:'flex', alignItems:'center', justifyContent:'center',
          zIndex:4, boxShadow:'0 12px 28px -10px rgba(138,102,20,0.45)',
          color:COLORS.blue,
          fontFamily:"'Cormorant Garamond',serif", fontStyle:'italic',
          fontSize:15, fontWeight:600, textAlign:'center', lineHeight:1.05,
          animation:'cap-spin-slow 50s linear infinite',
        }}>
          escolhidas<br/>à mão
        </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}>
          Destaques · Seleção da Lua Azul
        </ThemeChip>}
        headline={<>As peças<br/>que mais </>}
        italicWord="brilham"
        italicColor={COLORS.accentDark}
        copy="Joias escolhidas a dedo pela Lua Azul — peças que combinam com qualquer ocasião, do dia a dia ao especial."
        ctaPrimary={{ label:'Ver destaques', href:'#destaque-grid', dark:COLORS.accentDark }}
        ctaSecondary={{ label:'Ajuda no WhatsApp', icon:'💬',
          href:'https://wa.me/5571999181376' }}
        perks={[
          { icon:'★', label:'Escolhidas a dedo' },
          { icon:'✦', label:'Combinação versátil' },
          { icon:'◇', label:'Garantia de 90 dias' },
        ]}
        decorations={decorations}
        hero={hero}
      />
    );
  }

  function DestaqueStrip() {
    return (
      <AnnouncementStrip
        gradient={`linear-gradient(90deg, ${COLORS.accent} 0%, #e8c878 50%, ${COLORS.accent} 100%)`}
        icon={<span style={{fontSize:14}}>★</span>}>
        Destaques · Joias escolhidas a dedo pela Lua Azul
      </AnnouncementStrip>
    );
  }

  Object.assign(window, { DestaqueBanner, DestaqueStrip });
  (window.CAPAS = window.CAPAS || {}).destaque = {
    Banner: DestaqueBanner, Strip: DestaqueStrip,
    accent: '#b45309',
    gridLabel: 'Destaque',
    gridTitle: 'Selecionadas a dedo',
  };
})();