// Sexy Geek é marca única — taxonomia de projeto com uma entrada só (ver Badge.jsx).
const PROJECT_CFGS = {
  geek: { label: 'SEXY GEEK', color: '#33CFFF', bg: 'rgba(0,194,255,0.12)', border: 'rgba(0,194,255,0.3)' },
};

// Slides de demonstração — só aparecem se a página não passar `slides` de verdade (via API).
// Sem imagens reais neste fork ainda; caminhos são placeholders até o catálogo ter conteúdo.
const DEMO_SLIDES = [
  { id: 1, project: 'geek', category: 'exclusivo', kicker: 'CONTEÚDO EXCLUSIVO', title: 'O ENSAIO MAIS ESPERADO', excerpt: 'Galeria completa disponível apenas para assinantes Sexy Geek. Bastidores inéditos e o ensaio na íntegra.', meta: 'Exclusivo · fotos completas', imgSrc: '../../assets/demo-1.jpg' },
  { id: 2, project: 'geek', category: 'galeria', kicker: 'NOVO ENSAIO', title: 'BASTIDORES DA PRODUÇÃO', excerpt: 'Um novo ensaio chegou. Prévia grátis liberada, o resto é só para assinantes.', meta: 'Prévia grátis · fotos', imgSrc: '../../assets/demo-2.jpg' },
  { id: 3, project: 'geek', category: 'video', kicker: 'VÍDEO ESPECIAL', title: 'O QUE VOCÊ AINDA NÃO VIU', excerpt: 'Vídeo exclusivo com prévia liberada para todo mundo — versão completa para assinantes.', meta: 'Vídeo · exclusivo', imgSrc: '../../assets/demo-3.jpg' },
];

if (typeof document !== 'undefined' && !document.getElementById('sb-progress-style')) {
  const st = document.createElement('style');
  st.id = 'sb-progress-style';
  st.textContent = '@keyframes sbProgress { from { width: 0%; } to { width: 100%; } }';
  document.head.appendChild(st);
}

function HeroLogoGlitch({ compact = false }) {
  return (
    <div className={`gx-hero-logo-glitch${compact ? ' gx-hero-logo-glitch-compact' : ''}`} aria-hidden="true">
      <img className="gx-hero-logo-base" src="/assets/sexy-geek-logo.png" alt="" />
      <img className="gx-hero-logo-channel gx-hero-logo-channel-cyan" src="/assets/sexy-geek-logo.png" alt="" />
      <img className="gx-hero-logo-channel gx-hero-logo-channel-pink" src="/assets/sexy-geek-logo.png" alt="" />
    </div>
  );
}

/** Sexy Geek DS — super banner — cinematic featured-articles hero carousel. */
function SuperBanner({ slides = DEMO_SLIDES, onOpen, autoPlay = true, interval = 6000 }) {
  const [active, setActive] = React.useState(0);
  const [isMobile, setIsMobile] = React.useState(typeof window !== 'undefined' && window.innerWidth < 768);
  const timerRef = React.useRef(null);

  React.useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  React.useEffect(() => {
    if (!autoPlay) return;
    timerRef.current = setInterval(() => setActive(a => (a + 1) % slides.length), interval);
    return () => clearInterval(timerRef.current);
  }, [autoPlay, interval, slides.length, active]);

  const go = (i) => { setActive(i); if (timerRef.current) clearInterval(timerRef.current); };

  const s = slides[active];
  const pc = PROJECT_CFGS[s.project] || { label: s.project, color: '#33CFFF', bg: 'rgba(0,194,255,0.12)', border: 'rgba(0,194,255,0.3)' };

  return (
    <div className={isMobile ? 'gx-scanlines gx-noise' : 'gx-scanlines gx-noise gx-pixel-corners'} style={{ position: 'relative', width: '100%', overflow: 'hidden', background: '#0A0A0F', minHeight: isMobile ? 'auto' : 480, border: isMobile ? 'none' : '1px solid rgba(255,255,255,0.06)' }}>
      <div style={{ position: 'relative', width: '100%', height: isMobile ? '110vw' : 480, maxHeight: isMobile ? 520 : 480 }}>
        {slides.map((sl, i) => (
          <div key={sl.id} style={{ position: 'absolute', inset: 0, opacity: i === active ? 1 : 0, transition: 'opacity 0.8s cubic-bezier(0.16,1,0.3,1)', pointerEvents: i === active ? 'auto' : 'none' }}>
            <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
              <img src={sl.imgSrc} alt={sl.title} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 25%', transform: i === active ? 'scale(1.08)' : 'scale(1)', transition: 'transform 7s ease-out' }} />
            </div>
            <div style={{ position: 'absolute', inset: 0, background: isMobile ? 'linear-gradient(to top, rgba(10,10,15,0.96) 0%, rgba(10,10,15,0.4) 45%, rgba(10,10,15,0.15) 100%)' : 'linear-gradient(to right, rgba(10,10,15,0.94) 0%, rgba(10,10,15,0.72) 38%, rgba(10,10,15,0.1) 70%, transparent 100%)' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(10,10,15,0.5) 0%, transparent 30%)' }} />
            <div style={{ position: 'absolute', bottom: -120, left: isMobile ? '50%' : 80, transform: isMobile ? 'translateX(-50%)' : 'none', width: 380, height: 380, borderRadius: '50%', background: pc.color, opacity: 0.12, filter: 'blur(90px)', pointerEvents: 'none' }} />
          </div>
        ))}

        <HeroLogoGlitch compact={isMobile} />

        <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', justifyContent: isMobile ? 'flex-end' : 'center', padding: isMobile ? '0 20px 28px' : '0 0 0 56px' }}>
          <div style={{ maxWidth: isMobile ? '100%' : 520 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18, flexWrap: 'wrap' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap', fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '5px 12px', borderRadius: 9999, background: pc.bg, color: pc.color, border: `1px solid ${pc.border}`, fontFamily: "'Inter', sans-serif", lineHeight: 1 }}>{pc.label}</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 9, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '5px 10px', borderRadius: 9999, background: 'rgba(255,255,255,0.08)', color: 'rgba(255,255,255,0.55)', border: '1px solid rgba(255,255,255,0.1)', backdropFilter: 'blur(6px)', fontFamily: "'Inter', sans-serif", lineHeight: 1 }}>
                {s.category === 'video' && <svg width="9" height="9" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3" /></svg>}
                {s.category === 'exclusivo' && <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>}
                {s.category}
              </span>
            </div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: pc.color, fontFamily: "'Inter', sans-serif", marginBottom: 12 }}>{s.kicker}</div>
            <h1 style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: isMobile ? 32 : 'clamp(40px,4.2vw,60px)', color: '#EFEFEF', lineHeight: 1.02, textTransform: 'uppercase', letterSpacing: '0.01em', marginBottom: 16, textWrap: 'balance' }}>{s.title}</h1>
            <p style={{ fontSize: isMobile ? 14 : 16, color: '#9999B2', lineHeight: 1.6, maxWidth: 460, marginBottom: 22, fontFamily: "'Inter', sans-serif" }}>{s.excerpt}</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
              <button onClick={() => onOpen && onOpen(s)}
                onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-1px)'; }}
                onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; }}
                style={{ display: 'inline-flex', alignItems: 'center', gap: 9, background: s.category === 'exclusivo' ? 'linear-gradient(135deg,#62D8FF,#0876C9 58%,#04518F)' : '#EFEFEF', border: 'none', borderRadius: 9999, color: s.category === 'exclusivo' ? '#fff' : '#0A0A0F', fontFamily: "'Inter', sans-serif", fontSize: 14, fontWeight: 700, padding: '13px 26px', cursor: 'pointer', letterSpacing: '0.02em', boxShadow: s.category === 'exclusivo' ? '0 0 24px rgba(8,118,201,0.45)' : 'none', transition: 'transform 0.15s, box-shadow 0.2s' }}>
                {s.category === 'video' ? 'Assistir agora' : s.category === 'exclusivo' ? 'Desbloquear conteúdo' : 'Ver ensaio'}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M12 5l7 7-7 7" /></svg>
              </button>
              <div style={{ fontSize: 12, color: '#55556A', fontFamily: "'Inter', sans-serif" }}>{s.meta}</div>
            </div>
          </div>
        </div>

        {isMobile ? (
          <div style={{ position: 'absolute', top: 16, left: 0, right: 0, display: 'flex', gap: 6, padding: '0 20px', zIndex: 5 }}>
            {slides.map((_, i) => (
              <button key={i} onClick={() => go(i)} style={{ flex: 1, height: 3, borderRadius: 9999, border: 'none', padding: 0, cursor: 'pointer', background: i === active ? '#62D8FF' : 'rgba(255,255,255,0.25)', transition: 'background 0.3s' }} aria-label={`Slide ${i + 1}`} />
            ))}
          </div>
        ) : (
          <div style={{ position: 'absolute', bottom: 28, right: 32, display: 'flex', gap: 10, zIndex: 5 }}>
            {slides.map((sl, i) => (
              <button key={sl.id} onClick={() => go(i)}
                onMouseEnter={e => { if (i !== active) e.currentTarget.style.opacity = '0.85'; }}
                onMouseLeave={e => { if (i !== active) e.currentTarget.style.opacity = '0.55'; }}
                aria-label={sl.title}
                style={{ position: 'relative', width: 88, height: 56, borderRadius: 10, overflow: 'hidden', border: i === active ? '2px solid #62D8FF' : '2px solid rgba(255,255,255,0.12)', padding: 0, cursor: 'pointer', background: '#14141C', boxShadow: i === active ? '0 0 16px rgba(98,216,255,0.4)' : 'none', opacity: i === active ? 1 : 0.55, transition: 'opacity 0.2s, border-color 0.2s, box-shadow 0.2s' }}>
                <img src={sl.imgSrc} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }} alt="" />
                {i === active && autoPlay && (
                  <div style={{ position: 'absolute', bottom: 0, left: 0, height: 2, background: '#62D8FF', animation: `sbProgress ${interval}ms linear` }} />
                )}
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

window.SexyGeekDS = window.SexyGeekDS || {};
window.SexyGeekDS.SuperBanner = SuperBanner;
window.SexyGeekDS.HeroLogoGlitch = HeroLogoGlitch;