// Header + Hero
function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const isMobile = useIsMobile();

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header style={{
      position:'fixed', top:0, left:0, right:0, zIndex:100,
      padding: scrolled ? '14px 0' : '22px 0',
      background: scrolled ? 'rgba(10,10,11,0.9)' : 'transparent',
      backdropFilter: scrolled ? 'blur(16px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition:'all .3s ease',
    }}>
      <div className="container" style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <Logo/>

        {/* Desktop nav */}
        {!isMobile && (
          <nav style={{display:'flex', gap:28, alignItems:'center'}}>
            <a href="#conteudo" className="mono" style={{fontSize:11, color:'var(--fg-2)'}}>CONTEÚDO</a>
            <a href="#instrutor" className="mono" style={{fontSize:11, color:'var(--fg-2)'}}>INSTRUTOR</a>
            <a href="#faq" className="mono" style={{fontSize:11, color:'var(--fg-2)'}}>FAQ</a>
            <a href="https://pay.hub.la/TCgY4cxmVJFdfEKq0VuL" target="_blank" className="btn btn-primary" style={{padding:'12px 20px', fontSize:12}}>
              INSCREVER-SE <Icon.Arrow className="arrow"/>
            </a>
          </nav>
        )}

        {/* Mobile hamburger */}
        {isMobile && (
          <button onClick={() => setMenuOpen(o => !o)} style={{
            background:'none', border:'none', color:'var(--fg)',
            cursor:'pointer', padding:8, zIndex:201,
          }}>
            <Icon.Menu/>
          </button>
        )}
      </div>

      {/* Mobile menu overlay */}
      {isMobile && menuOpen && (
        <div style={{
          position:'fixed', inset:0,
          background:'rgba(10,10,11,0.97)', backdropFilter:'blur(20px)',
          zIndex:200, display:'flex', flexDirection:'column',
          alignItems:'center', justifyContent:'center', gap:36,
        }}>
          <button onClick={() => setMenuOpen(false)} style={{
            position:'absolute', top:24, right:24,
            fontSize:28, color:'var(--fg)', background:'none', border:'none', cursor:'pointer',
          }}>✕</button>
          <a href="#conteudo" className="mono" style={{fontSize:20, color:'var(--fg)'}} onClick={() => setMenuOpen(false)}>CONTEÚDO</a>
          <a href="#instrutor" className="mono" style={{fontSize:20, color:'var(--fg)'}} onClick={() => setMenuOpen(false)}>INSTRUTOR</a>
          <a href="#faq" className="mono" style={{fontSize:20, color:'var(--fg)'}} onClick={() => setMenuOpen(false)}>FAQ</a>
          <a href="https://pay.hub.la/TCgY4cxmVJFdfEKq0VuL" target="_blank" className="btn btn-primary" style={{padding:'16px 32px', fontSize:14}} onClick={() => setMenuOpen(false)}>
            INSCREVER-SE <Icon.Arrow className="arrow"/>
          </a>
        </div>
      )}
    </header>
  );
}

function Hero({ copy }) {
  const ref = useReveal();
  const isMobile = useIsMobile();

  return (
    <section style={{position:'relative', minHeight:'100vh', overflow:'hidden', display:'flex', alignItems:'center'}}>
      <video src="assets/hero.mp4" autoPlay loop muted playsInline preload="metadata"
        style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', zIndex:0}}/>
      <div style={{
        position:'absolute', inset:0, zIndex:1,
        background:`linear-gradient(90deg, rgba(10,10,11,0.92) 0%, rgba(10,10,11,0.75) 30%, rgba(10,10,11,0.3) 60%, rgba(10,10,11,0.05) 100%),
        linear-gradient(180deg, rgba(10,10,11,0.3) 0%, transparent 30%, transparent 70%, rgba(10,10,11,0.85) 100%)`,
      }}/>

      <div className="container" style={{position:'relative', zIndex:2, paddingTop:120, paddingBottom:120}}>
        <div ref={ref} className="reveal" style={{maxWidth: isMobile ? '100%' : 620}}>
          <div style={{display:'flex', alignItems:'center', gap:14, marginBottom:32}}>
            <Logo/>
            <span className="mono" style={{
              fontSize:10, padding:'6px 12px',
              border:'1px solid var(--line-2)', borderRadius:999,
              color:'var(--fg-2)', background:'rgba(0,0,0,0.4)', backdropFilter:'blur(8px)',
            }}>4ª EDIÇÃO</span>
          </div>

          <div className="eyebrow" style={{marginBottom:24}}>
            <span style={{width:8, height:8, background:'var(--accent)', borderRadius:2, animation:'blink 1.5s infinite'}}/>
            {copy.heroDate || 'DIA 16 DE MAIO · AO VIVO'}
          </div>

          <h1 style={{
            fontFamily:'var(--font-display)',
            fontSize: isMobile ? 'clamp(30px, 8vw, 42px)' : 'clamp(38px, 5.5vw, 64px)',
            fontWeight:500, lineHeight:1.05, letterSpacing:'-0.025em', marginBottom:24,
          }}>{copy.heroTitle || 'Crie influencers de IA que vendem nas redes sociais'}</h1>

          <p style={{fontSize:15, lineHeight:1.65, color:'var(--fg-2)', marginBottom:36}}>
            {copy.heroSub || 'Um dia intenso, ao vivo, criando seu próprio influencer digital do zero. Aprenda a construir, treinar e monetizar personagens de IA que geram vendas reais direto do celular.'}
          </p>

          <a href="https://pay.hub.la/TCgY4cxmVJFdfEKq0VuL" target="_blank" className="btn btn-primary" style={isMobile ? {width:'100%', justifyContent:'center'} : {}}>
            COMPRAR INGRESSO · LOTE 2 <Icon.Arrow className="arrow"/>
          </a>

          <div style={{marginTop:36, maxWidth:520}}>
            <div style={{display:'flex', justifyContent:'space-between', fontSize:11, fontFamily:'var(--font-mono)', color:'var(--fg-2)', textTransform:'uppercase', letterSpacing:'0.12em', marginBottom:10}}>
              <span>Lote 2 — 72% vendido</span><span>Encerra em breve</span>
            </div>
            <div style={{height:3, background:'rgba(255,255,255,0.15)', borderRadius:99, overflow:'hidden'}}>
              <div style={{width:'72%', height:'100%', background:'linear-gradient(90deg, var(--accent), var(--accent-2))', boxShadow:'0 0 12px var(--accent-glow)'}}/>
            </div>
          </div>
        </div>
      </div>

      {/* Brand marquee strip */}
      <div style={{
        position:'absolute', bottom:0, left:0, right:0,
        padding:'18px 0', background:'rgba(0,0,0,0.6)',
        backdropFilter:'blur(10px)', borderTop:'1px solid var(--line)',
        zIndex:3, overflow:'hidden',
      }}>
        <div style={{display:'flex', width:'max-content', animation:'marquee 22s linear infinite'}}>
          {[...Array(2)].map((_,rep) =>
            ['META PARTNER','CAPCUT OFFICIAL','1.000+ ALUNOS','20 ANOS NO MERCADO','4ª EDIÇÃO','AO VIVO NO ZOOM'].map((t,i) => (
              <span key={`${rep}-${i}`} style={{
                display:'inline-flex', alignItems:'center', gap:16,
                color:'rgba(255,255,255,0.85)',
                fontFamily:'var(--font-mono)', fontSize: isMobile ? 10 : 13,
                letterSpacing:'0.15em', textTransform:'uppercase',
                whiteSpace:'nowrap', padding:'0 32px',
              }}>
                <span style={{color:'var(--accent)', fontSize:8}}>◆</span>{t}
              </span>
            ))
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Header, Hero });