// Price + FAQ + Footer
function Price() {
  const ref = useReveal();
  const refR = useReveal();
  const isMobile = useIsMobile();
  return (
    <section style={{padding: isMobile ? '60px 0' : '120px 0'}} className="grid-bg" id="comprar">
      <div className="container">
        <div ref={ref} className="reveal" style={{textAlign:'center', marginBottom:48}}>
          <h2 style={{fontFamily:'var(--font-mono)', fontSize:'clamp(24px, 5vw, 42px)', textTransform:'uppercase', fontWeight:700, letterSpacing:'-0.01em', marginBottom:8}}>
            GARANTA SUA VAGA
          </h2>
          <div className="mono" style={{color:'var(--fg-2)'}}>O LOTE 2 SE ENCERRA EM BREVE</div>
        </div>

        <div ref={refR} className="reveal" style={{
          display:'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1.2fr',
          background:'#fff', color:'#0a0a0b',
          borderRadius:18, overflow:'hidden',
          maxWidth:900, margin:'0 auto',
          boxShadow:'0 40px 100px rgba(0,0,0,0.5)',
          border:'1px solid var(--line-2)',
        }}>
          {/* Left video */}
          <div style={{position:'relative', minHeight: isMobile ? 220 : 320, overflow:'hidden'}}>
            <LazyVideo src="assets/ingresso.mp4"
              style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover'}}/>
          </div>

          {/* Right info */}
          <div style={{padding: isMobile ? '28px 24px' : 40, display:'flex', flexDirection:'column', justifyContent:'center'}}>
            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:22}}>
              <Logo/>
              <div style={{padding:'5px 10px', border:'1px solid #333', borderRadius:999, fontFamily:'var(--font-mono)', fontSize:9, letterSpacing:'0.15em', fontWeight:700}}>4ª EDIÇÃO</div>
            </div>

            <div style={{display:'flex', gap:16, marginBottom:22, fontFamily:'var(--font-mono)', fontSize:10, color:'#555', letterSpacing:'0.08em', flexWrap:'wrap'}}>
              <span style={{display:'inline-flex', alignItems:'center', gap:5}}><Icon.Clock/> 8H DE CONTEÚDO</span>
              <span style={{display:'inline-flex', alignItems:'center', gap:5}}><Icon.Pin/> AO VIVO NO ZOOM</span>
            </div>

            <div style={{fontFamily:'var(--font-display)', fontSize: isMobile ? 'clamp(48px, 12vw, 64px)' : 'clamp(48px, 7vw, 72px)', fontWeight:700, letterSpacing:'-0.035em', lineHeight:1, marginBottom:24}}>
              R$19,<span style={{fontSize:'0.6em'}}>00</span>
            </div>

            <a href="https://pay.hub.la/TCgY4cxmVJFdfEKq0VuL" target="_blank" className="btn btn-primary" style={{alignSelf:'stretch', justifyContent:'center'}}>
              INSCREVER-SE · LOTE 2 <Icon.Arrow className="arrow"/>
            </a>

            <div style={{display:'flex', justifyContent:'space-between', marginTop:20, fontFamily:'var(--font-mono)', fontSize:9, color:'#666', letterSpacing:'0.08em', flexWrap:'wrap', gap:8}}>
              <span style={{display:'inline-flex', alignItems:'center', gap:5}}><Icon.Shield/> COMPRA SEGURA</span>
              <span style={{display:'inline-flex', alignItems:'center', gap:5}}><Icon.Trophy/> SATISFAÇÃO GARANTIDA</span>
              <span style={{display:'inline-flex', alignItems:'center', gap:5}}><Icon.Lock/> PRIVACIDADE</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// FAQ
function FAQ() {
  const items = [
    { q: 'Vai ficar gravado?', a: 'Sim. Todos os inscritos recebem a gravação completa da imersão por 6 meses após o evento para revisar o conteúdo quantas vezes quiser.' },
    { q: 'Como funciona a garantia?', a: 'Você tem garantia até um dia depois do evento ao vivo. Se assistir e não gostar, pedimos 100% do seu dinheiro de volta. Sem perguntas, sem burocracia.' },
    { q: 'Tem certificado?', a: 'Sim. Após 7 dias do evento você recebe o certificado de participação, desde que tenha assistido ao dia completo e preenchido o formulário final.' },
    { q: 'Como saber se é pra mim?', a: 'Se você é empreendedor, criador de conteúdo, afiliado, social media, ou qualquer pessoa que queira criar influencers digitais que vendem, é pra você. Não precisa saber nada de IA.' },
    { q: 'Já sou aluno. Ainda vale?', a: 'Com certeza. Essa é uma edição nova, com ferramentas e métodos atualizados. O mercado de IA muda toda semana, o que você aprendeu há 6 meses já pode estar defasado.' },
    { q: 'Preciso de computador?', a: 'Não. Todo o método foi pensado para rodar no celular. Você precisa apenas de um smartphone e acesso à internet para assistir.' },
  ];
  const ref = useReveal();
  const isMobile = useIsMobile();
  return (
    <section style={{padding: isMobile ? '60px 0' : '120px 0'}} id="faq">
      <div className="container" style={{maxWidth:800}}>
        <div ref={ref} className="reveal" style={{textAlign:'center', marginBottom:40}}>
          <div className="eyebrow" style={{justifyContent:'center'}}>PERGUNTAS FREQUENTES</div>
          <h2 className="section-title" style={{marginTop:14}}>Ainda tem dúvidas?</h2>
        </div>
        <div style={{display:'flex', flexDirection:'column', gap:10}}>
          {items.map((it, i) => <FaqItem key={i} {...it} i={i}/>)}
        </div>
      </div>
    </section>
  );
}

function FaqItem({ q, a, i }) {
  const [open, setOpen] = useState(false);
  const ref = useReveal();
  return (
    <div ref={ref} className="reveal" style={{
      background:'var(--bg-3)', border:'1px solid var(--line)',
      borderRadius:10, overflow:'hidden', transitionDelay:`${i * 50}ms`,
    }}>
      <button onClick={() => setOpen(o => !o)} style={{
        width:'100%', padding:'18px 22px',
        display:'flex', justifyContent:'space-between', alignItems:'center',
        textAlign:'left', fontSize:15,
      }}>
        <span>{q}</span>
        <span style={{transition:'transform .3s', transform: open ? 'rotate(180deg)' : 'rotate(0)', color:'var(--fg-2)', flexShrink:0, marginLeft:12}}>
          <Icon.Chevron/>
        </span>
      </button>
      <div style={{maxHeight: open ? 300 : 0, overflow:'hidden', transition:'max-height .4s cubic-bezier(0.16,1,0.3,1)'}}>
        <div style={{padding:'0 22px 22px', color:'var(--fg-2)', fontSize:14, lineHeight:1.7}}>{a}</div>
      </div>
    </div>
  );
}

// Footer
function Footer() {
  const isMobile = useIsMobile();
  return (
    <footer style={{paddingTop:60, position:'relative', overflow:'hidden'}}>
      <div className="container" style={{textAlign:'center', paddingBottom:32}}>
        <Logo/>
      </div>
      <div style={{borderTop:'1px solid var(--line)', padding:'20px 0'}}>
        <div className="container" style={{
          display:'flex', justifyContent:'space-between',
          fontSize:11, color:'var(--fg-3)',
          flexDirection: isMobile ? 'column' : 'row',
          gap:10, textAlign: isMobile ? 'center' : 'left',
        }}>
          <span>© Copyright 2026. Todos os direitos reservados.</span>
          <span>Políticas de privacidade | Termos de uso</span>
        </div>
      </div>
      {/* Big marquee */}
      <div style={{marginTop:20, overflow:'hidden', background:'#0a0a0b'}}>
        <div style={{
          display:'flex', width:'max-content',
          animation:'marquee 24s linear infinite',
          color:'var(--accent)',
          fontFamily:'var(--font-display)',
          fontSize: isMobile ? 'clamp(52px, 16vw, 120px)' : 'clamp(80px, 15vw, 280px)',
          fontWeight:900, letterSpacing:'-0.04em', lineHeight:0.9, whiteSpace:'nowrap',
        }}>
          <span style={{padding:'0 40px'}}>MÁQUINA · DE · CONTEÚDO · IA ·</span>
          <span style={{padding:'0 40px'}}>MÁQUINA · DE · CONTEÚDO · IA ·</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Price, FAQ, Footer });
