// =========================================================================
//  capas-especiais / promocao / banner.jsx
//  🔥 Promoção — vermelho + amarelo, urgência, "% off"
//  Exporta: PromocaoBanner, PromocaoStrip
// =========================================================================

(() => {
  const COLORS = {
    ink: '#2a0a0a',
    accent: '#d62828',          // vermelho
    accentDark: '#8c1414',
    accentSoft: '#ffd6d6',
    yellow: '#ffd23f',
    cream: '#fff8e8',
    bg: 'linear-gradient(180deg, #ffe5b8 0%, #ffcfa8 55%, #ffd8d8 100%)',
  };
  // promoção termina em 7 dias (estimativa)
  const TARGET = (() => {
    const d = new Date(); d.setDate(d.getDate() + 7); return d.toISOString();
  })();
  const FEATURED = [
    { id:'co-oferta', name:'Colar Oferta',  sub:'De R$ 89 · Por R$ 49',  price:49.00, hue:5,  metal:'#c79b30' },
    { id:'br-flash',  name:'Brinco Flash',  sub:'De R$ 64 · Por R$ 34',  price:34.00, hue:15, metal:'#c79b30' },
    { id:'pl-deal',   name:'Pulseira Deal', sub:'De R$ 79 · Por R$ 39',  price:39.00, hue:25, metal:'#c79b30' },
  ];

  // raio
  function Bolt({ size = 40, color = '#ffd23f', x, y, rotate = 0, opacity = 0.9 }) {
    return (
      <svg width={size} height={size*1.4} viewBox="0 0 40 56"
        style={{ position:'absolute', top:y, left:x,
                 transform:`rotate(${rotate}deg)`, pointerEvents:'none', opacity }}>
        <polygon points="22,0 4,30 18,30 14,56 36,22 22,22"
          fill={color} stroke={COLORS.accentDark} strokeWidth="1.2"/>
      </svg>
    );
  }

  // selo "%" diagonal
  function PercentBadge({ size = 76, value = '50%', x, y, rotate = -12 }) {
    return (
      <div style={{
        position:'absolute', top:y, left:x,
        width:size, height:size, borderRadius:'50%',
        background:COLORS.accent, color:COLORS.cream,
        display:'flex', flexDirection:'column',
        alignItems:'center', justifyContent:'center',
        transform:`rotate(${rotate}deg)`,
        fontFamily:"'Cormorant Garamond',serif",
        fontWeight:700, fontStyle:'italic',
        lineHeight:0.95, textAlign:'center',
        boxShadow:'0 10px 22px -8px rgba(140,20,20,0.45)',
        border:`3px solid ${COLORS.yellow}`,
        pointerEvents:'none',
      }}>
        <span style={{ fontSize:size*0.42 }}>{value}</span>
        <span style={{
          fontSize:size*0.16, letterSpacing:'0.1em', textTransform:'uppercase',
          fontFamily:'ui-monospace, SFMono-Regular, Menlo, monospace',
          fontStyle:'normal', fontWeight:600, marginTop:2,
        }}>OFF</span>
      </div>
    );
  }

  function PromocaoBanner() {
    const decorations = () => (
      <>
        <WatercolorSplash pos="tl" color={COLORS.accent}  size={420} rotation={-10} opacity={0.30}/>
        <WatercolorSplash pos="tr" color={COLORS.yellow}  size={340} rotation={28}  opacity={0.40}/>
        <WatercolorSplash pos="bl" color={COLORS.accentDark} size={360} rotation={40}  opacity={0.20}/>
        <WatercolorSplash pos="br" color={COLORS.accent}  size={300} rotation={-22} opacity={0.25}/>
        <Bolt x="4%"  y={40}  size={48} color={COLORS.yellow}/>
        <Bolt x="14%" y={'70%'} size={36} color={COLORS.accent} rotate={20}/>
        <Bolt x="82%" y={60}  size={42} color={COLORS.yellow} rotate={-8}/>
        <Bolt x="86%" y={'62%'} size={32} color={COLORS.yellow} rotate={12}/>
        <PercentBadge x="3%"  y={170} size={72} value="50%"/>
        <PercentBadge x="86%" y={250} size={64} value="-30" rotate={8}/>
        {/* tarjas tipográficas */}
        <div style={{
          position:'absolute', top:'-4%', left:'-3%',
          fontFamily:"'Cormorant Garamond',serif", fontStyle:'italic',
          color:COLORS.accentDark, opacity:0.08,
          fontSize:'clamp(160px, 22vw, 320px)', fontWeight:700,
          letterSpacing:'-0.05em', pointerEvents:'none', lineHeight:0.85,
        }}>SALE</div>
      </>
    );

    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,229,184,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' }}/>
        <PercentBadge x="-4%" y={20} size={96} value="50%" rotate={-22}/>
      </>
    );

    return (
      <BannerShell
        bg={COLORS.bg}
        accent={COLORS.accent}
        accentSoft={COLORS.accentSoft}
        ink={COLORS.ink}
        chip={<ThemeChip icon="⚡" color={COLORS.accentDark} soft={COLORS.accentSoft}>
          Promoção · Por tempo limitado
        </ThemeChip>}
        headline={<>Brilho<br/>com </>}
        italicWord="desconto"
        italicColor={COLORS.accent}
        copy="Joias selecionadas com até 50% off. Promoção válida até esgotar o estoque ou enquanto o tempo da contagem permitir."
        targetIso={TARGET}
        countdownLabel="Acaba em"
        ctaPrimary={{ label:'Aproveitar agora', href:'#promocao-grid', dark:COLORS.accentDark }}
        ctaSecondary={{ label:'Ajuda no WhatsApp', icon:'💬',
          href:'https://wa.me/5571999181376' }}
        perks={[
          { icon:'⚡', label:'Até 50% off' },
          { icon:'★', label:'Estoque limitado' },
          { icon:'✦', label:'Parcele em 6x' },
        ]}
        decorations={decorations}
        hero={hero}
      />
    );
  }

  function PromocaoStrip() {
    return (
      <AnnouncementStrip
        gradient={`linear-gradient(90deg, ${COLORS.accentDark} 0%, ${COLORS.accent} 35%, ${COLORS.yellow} 100%)`}
        icon={<span style={{fontSize:14}}>⚡</span>}>
        Promoção · Até 50% off · Estoque limitado
      </AnnouncementStrip>
    );
  }

  Object.assign(window, { PromocaoBanner, PromocaoStrip });
  (window.CAPAS = window.CAPAS || {}).promocao = {
    Banner: PromocaoBanner, Strip: PromocaoStrip,
    accent: '#ea580c',
    gridLabel: 'Promoção',
    gridTitle: 'Ofertas relâmpago',
  };
})();