// =========================================================================
//  capas-especiais / lancamento / banner.jsx
//  🆕 Lançamento — verde menta + preto, sensação "fresh"
//  Exporta: LancamentoBanner, LancamentoStrip
// =========================================================================

(() => {
  const COLORS = {
    ink: '#0d2620',
    accent: '#00a878',          // verde fresh
    accentDark: '#006b4a',
    accentSoft: '#d4f0e6',
    mint: '#bce4d3',
    bg: 'linear-gradient(180deg, #f0fbf5 0%, #d8f0e6 55%, #f0fbf5 100%)',
  };
  const FEATURED = [
    { id:'co-nova',   name:'Colar Nova',     sub:'Banhado a ouro 18K · NEW', price:64.90, hue:165 },
    { id:'br-fresh',  name:'Brinco Fresh',   sub:'Banhado a ouro 18K · NEW', price:42.90, hue:160 },
    { id:'pl-novidade', name:'Pulseira Novidade', sub:'Aço Inox · NEW',       price:49.90, hue:170 },
  ];

  // selo "NEW" diagonal
  function NewStamp({ size = 56, x, y, rotate = -20 }) {
    return (
      <div style={{
        position:'absolute', top:y, left:x,
        width:size, height:size, borderRadius:'50%',
        background:'#0d2620', color:'#bce4d3',
        display:'flex', alignItems:'center', justifyContent:'center',
        transform:`rotate(${rotate}deg)`,
        fontFamily:'ui-monospace, SFMono-Regular, Menlo, monospace',
        fontWeight:700, fontSize:14, letterSpacing:'0.1em',
        boxShadow:'0 8px 20px -8px rgba(0,0,0,0.4)',
        border:'2px solid #00a878',
        pointerEvents:'none',
      }}>NEW</div>
    );
  }

  // ponto pulsante
  function Pulse({ size = 18, color = '#00a878', x, y }) {
    return (
      <div style={{
        position:'absolute', top:y, left:x, pointerEvents:'none',
        width:size, height:size,
      }}>
        <div style={{
          position:'absolute', inset:0, borderRadius:'50%',
          background:color, animation:'cap-twinkle 2s ease-in-out infinite',
        }}/>
        <div style={{
          position:'absolute', inset:'25%', borderRadius:'50%',
          background:'#fff',
        }}/>
      </div>
    );
  }

  function LancamentoBanner() {
    const decorations = () => (
      <>
        <WatercolorSplash pos="tl" color={COLORS.accent}  size={420} rotation={-10} opacity={0.30}/>
        <WatercolorSplash pos="tr" color={COLORS.mint}    size={340} rotation={28}  opacity={0.45}/>
        <WatercolorSplash pos="bl" color={COLORS.accent}  size={360} rotation={40}  opacity={0.25}/>
        <NewStamp x="3%"  y={50}  size={68}/>
        <NewStamp x="86%" y={130} size={52} rotate={15}/>
        <NewStamp x="78%" y={'70%'} size={46} rotate={-10}/>
        <Pulse x="22%" y={60}  size={12} color={COLORS.accent}/>
        <Pulse x="68%" y={50}  size={16}/>
        <Pulse x="42%" y={'14%'} size={10}/>
        <Pulse x="12%" y={'72%'} size={14} color={COLORS.accentDark}/>
        <Pulse x="92%" y={'42%'} size={12}/>
        {/* tarjas tipográficas */}
        <div style={{
          position:'absolute', top:'-2%', right:'-8%',
          fontFamily:'ui-monospace, SFMono-Regular, Menlo, monospace',
          color:COLORS.accent, opacity:0.08,
          fontSize:'clamp(140px, 18vw, 260px)', fontWeight:900,
          letterSpacing:'-0.05em', pointerEvents:'none', lineHeight:0.85,
        }}>NEW</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(240,251,245,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' }}/>
        <NewStamp x="-4%" y={10} size={84} rotate={-25}/>
      </>
    );

    return (
      <BannerShell
        bg={COLORS.bg}
        accent={COLORS.accent}
        accentSoft={COLORS.accentSoft}
        ink={COLORS.ink}
        chip={<ThemeChip icon="◉" color={COLORS.accent} soft={COLORS.accentSoft}>
          Lançamento · Acabou de chegar
        </ThemeChip>}
        headline={<>Recém chegadas<br/>na </>}
        italicWord="Lua Azul"
        italicColor={COLORS.accent}
        copy="As peças mais novas do nosso acervo. Edições limitadas pensadas para o dia a dia — sem perder o toque artesanal."
        ctaPrimary={{ label:'Ver lançamentos', href:'#lancamento-grid', dark:COLORS.accentDark }}
        ctaSecondary={{ label:'Ajuda no WhatsApp', icon:'💬',
          href:'https://wa.me/5571999181376' }}
        perks={[
          { icon:'◉', label:'Edição limitada' },
          { icon:'★', label:'Primeiras unidades' },
          { icon:'✦', label:'Frete grátis acima de R$120' },
        ]}
        decorations={decorations}
        hero={hero}
      />
    );
  }

  function LancamentoStrip() {
    return (
      <AnnouncementStrip
        gradient={`linear-gradient(90deg, ${COLORS.ink} 0%, ${COLORS.accent} 50%, ${COLORS.mint} 100%)`}
        icon={<span style={{fontSize:14}}>◉</span>}>
        Lançamento · Edições limitadas · Primeiras unidades disponíveis
      </AnnouncementStrip>
    );
  }

  Object.assign(window, { LancamentoBanner, LancamentoStrip });
  (window.CAPAS = window.CAPAS || {}).lancamento = {
    Banner: LancamentoBanner, Strip: LancamentoStrip,
    accent: '#0e7490',
    gridLabel: 'Lançamento',
    gridTitle: 'Recém-chegadas',
  };
})();