/* global React, ReactDOM, LIcons, PhoneDemo, StepsSection */
// Página — nav, hero, seções, footer.

const { useEffect: useLpEffect, useState: useLpState } = React;

const BENEFITS = [
  { icon: 'Zap', title: 'No automático', desc: 'A ferramenta aquece e posta enquanto você cria conteúdo.' },
  { icon: 'Layers', title: 'Quantos celulares quiser', desc: 'Conecte 1 ou 100 — toda a operação em um único painel.' },
  { icon: 'Shield', title: 'Sem senha exposta', desc: 'Nada de login nas suas contas. O controle é físico, via USB.' },
  { icon: 'Heart', title: 'Toque humano', desc: 'Ritmo real de gente: assistir, curtir, comentar, seguir.' },
];

const MODULES = [
  { icon: 'Flame', title: 'Aquecimento inteligente', desc: 'Interações com ritmo humano para contas novas ou paradas ganharem confiança.' },
  { icon: 'Sliders', title: 'Presets por conta', desc: 'Defina a % de curtida, comentário, compartilhamento e o tempo por vídeo.' },
  { icon: 'Calendar', title: 'Agendamento de posts', desc: 'Suba seus vídeos e publique no melhor horário, em todas as contas.' },
  { icon: 'Users', title: 'Multi-contas', desc: 'Troca de conta automática no mesmo aparelho, sem toque manual.' },
  { icon: 'Trophy', title: 'Ranking de seguidores', desc: 'Acompanhe o crescimento de cada conta direto no painel.' },
  { icon: 'Activity', title: 'Logs em tempo real', desc: 'Cada curtida, comentário e post registrado ao vivo.' },
];

const PLANS = [
  { name: 'Free', m: 0, q: 0, was: null, per: '/ 3 dias', cta: 'Começar Grátis',
    feats: [
      { t: '1 celular simultâneo', ok: true },
      { t: 'Até 8 contas TikTok', ok: true },
      { t: 'Aquecimento automático', ok: true },
      { t: 'Agendamento de posts', ok: true },
      { t: 'Suporte WhatsApp prioritário', ok: false },
    ] },
  { name: 'Inicial', m: 29, q: 23, qTotal: 69, was: 49, cta: 'Assinar Inicial',
    feats: [
      { t: 'Até 5 celulares simultâneos', ok: true },
      { t: 'Contas TikTok ilimitadas', ok: true },
      { t: 'Aquecimento automático', ok: true },
      { t: 'Agendamento de posts', ok: true },
      { t: 'Download de vídeos', ok: true },
      { t: 'Suporte WhatsApp', ok: true },
    ] },
  { name: 'Escalando', m: 59, q: 50, qTotal: 149, was: 97, cta: 'Assinar Escalando', popular: true,
    feats: [
      { t: 'Até 20 celulares simultâneos', ok: true },
      { t: 'Contas TikTok ilimitadas', ok: true },
      { t: 'Aquecimento automático', ok: true },
      { t: 'Agendamento de posts', ok: true },
      { t: 'Download de vídeos', ok: true },
      { t: 'Suporte WhatsApp prioritário', ok: true },
    ] },
  { name: 'Avançado', m: 119, q: 100, qTotal: 299, was: 197, cta: 'Assinar Avançado',
    feats: [
      { t: 'Celulares ilimitados', ok: true },
      { t: 'Contas TikTok ilimitadas', ok: true },
      { t: 'Aquecimento automático', ok: true },
      { t: 'Agendamento de posts', ok: true },
      { t: 'Download de vídeos', ok: true },
      { t: 'Suporte WhatsApp prioritário', ok: true },
    ] },
];

const FAQS = [
  { q: 'Preciso deixar o computador ligado?', a: 'Sim. O aqueceai.pro roda no Windows e controla os celulares conectados via USB — com o PC ligado, tudo funciona sozinho, inclusive de madrugada.' },
  { q: 'Vocês pedem a senha das minhas contas?', a: 'Não. O controle é físico, direto no aparelho via USB. Sem API, sem login e sem senha — suas contas continuam só suas.' },
  { q: 'Funciona em iPhone?', a: 'Por enquanto, apenas celulares Android. Qualquer aparelho Android com depuração USB serve, mesmo os mais simples.' },
  { q: 'Quantas contas posso usar por celular?', a: 'Nos planos pagos, contas ilimitadas. O painel troca de conta automaticamente no mesmo aparelho, sem toque manual.' },
  { q: 'Corro risco de banimento?', a: 'O aquecimento imita o ritmo de uma pessoa real: assiste, curte e comenta com pausas naturais. Você controla a intensidade de tudo pelos presets.' },
  { q: 'Como funciona a garantia?', a: 'Você tem 7 dias para testar qualquer plano pago. Não gostou? Devolvemos seu dinheiro, sem perguntas. Pagamento via PIX ou cartão.' },
];

function FAQSection() {
  const [open, setOpen] = useLpState(0);
  return (
    <div className="faq-list">
      {FAQS.map((f, i) => (
        <div className="rv" key={f.q} style={{ transitionDelay: `${i * 50}ms` }}>
          <div className={`faq-item ${open === i ? 'open' : ''}`}>
            <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
              {f.q}
              <span className="faq-ic"><LIcons.Close size={14} style={{ transform: 'rotate(45deg)' }}/></span>
            </button>
            <div className="faq-a-wrap">
              <div className="faq-a"><p>{f.a}</p></div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

function PlansSection({ onPlan }) {
  const [cycle, setCycle] = useLpState('m');
  const tri = cycle === 'q';
  return (
    <React.Fragment>
      <div className="plans-head rv">
        <div className="section-head" style={{ marginBottom: 0 }}>
          <span className="eyebrow"><span className="idx">04</span><span className="bar">/</span>Planos</span>
          <h2>Comece grátis. Escale quando fizer sentido.</h2>
        </div>
        <div className="bill-toggle">
          <button className={`bill-opt ${!tri ? 'on' : ''}`} onClick={() => setCycle('m')}>Mensal</button>
          <button className={`bill-opt ${tri ? 'on' : ''}`} onClick={() => setCycle('q')}>
            Trimestral <span className="bill-save">economize</span>
          </button>
        </div>
      </div>

      <div className="plans-grid">
        {PLANS.map((p, i) => {
          const price = tri ? p.q : p.m;
          return (
            <div className={`plan rv ${p.popular ? 'popular' : ''}`} key={p.name} style={{ transitionDelay: `${i * 80}ms` }}>
              {p.popular && <span className="plan-tag">Mais popular</span>}
              <span className="plan-name">{p.name}</span>
              <div className="plan-price"><span className="cur">R$</span>{price}<small> {p.per || '/ mês'}</small></div>
              <div className="plan-was">
                {p.m === 0
                  ? '–'
                  : tri
                    ? <React.Fragment><s>R${p.m}</s> · cobrado R${p.qTotal} a cada 3 meses</React.Fragment>
                    : <s>R${p.was}</s>}
              </div>
              <ul className="plan-feats">
                {p.feats.map(f => (
                  <li key={f.t} className={f.ok ? '' : 'no'}>
                    {f.ok ? <LIcons.Check size={13}/> : <LIcons.Close size={13}/>}
                    {f.t}
                  </li>
                ))}
              </ul>
              <button className={`btn ${p.popular ? 'btn-primary' : ''}`} onClick={() => onPlan(p.name, cycle)}>{p.cta}</button>
            </div>
          );
        })}
      </div>

      <div className="pay-strip rv">
        <span className="pay-label">Pagamento</span>
        <span className="pay-item"><LIcons.Pix size={17}/>PIX</span>
        <span className="pay-sep"></span>
        <span className="pay-item"><LIcons.Card size={17}/>Cartão de crédito</span>
        <span className="pay-sep"></span>
        <span className="pay-item guarantee"><LIcons.Shield size={16}/>Garantia de 7 dias ou seu dinheiro de volta</span>
      </div>
    </React.Fragment>
  );
}

function LandingPage() {
  const [quiz, setQuiz] = useLpState(null);
  const openPlan = (name, cycle) => {
    if (name === 'Free') setQuiz({ start: 'quiz' });
    else setQuiz({ start: 'pay', plan: name, cycle });
  };

  // reveal on scroll — sem depender de IntersectionObserver
  useLpEffect(() => {
    const check = () => {
      const h = window.innerHeight;
      document.querySelectorAll('.rv:not(.in)').forEach(el => {
        if (el.getBoundingClientRect().top < h * 0.92) el.classList.add('in');
      });
    };
    let raf = null;
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(() => { raf = null; check(); }); };
    check();
    const t = setTimeout(check, 350);
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      cancelAnimationFrame(raf); clearTimeout(t);
    };
  }, []);

  return (
    <React.Fragment>
      <nav className="nav">
        <div className="container nav-inner">
          <a className="nav-logo" href="#">
            <img src="assets/logo-aqueceai.png" alt="aqueceai.pro"/>
            aqueceai<span className="pro">.pro</span>
          </a>
          <div className="nav-links">
            <a href="#como-funciona">Como funciona</a>
            <a href="#recursos">Recursos</a>
            <a href="#precos">Planos</a>
          </div>
          <div className="nav-cta">
            <a className="nav-entrar" href="/conta">Entrar</a>
            <a className="btn btn-primary btn-sm" href="#precos">Começar grátis</a>
          </div>
        </div>
      </nav>

      {/* HERO */}
      <header className="hero">
        <div className="hero-bg"></div>
        <div className="container hero-grid">
          <div className="hero-text">
            <span className="hero-badge"><span className="dot"></span>Software para Windows · USB</span>
            <h1>Aqueça contas e <em>escale</em> no TikTok.</h1>
            <p className="hero-sub">
              Conecte celulares Android via USB e deixe o aqueceai.pro interagir como um humano —
              assistir, curtir, comentar e postar no automático.
            </p>
            <div className="hero-ctas">
              <a className="btn btn-primary" href="#precos">Começar grátis <LIcons.ArrowRight size={16}/></a>
              <a className="btn" href="#como-funciona">Ver como funciona</a>
            </div>
            <div className="hero-checks">
              <span><LIcons.Check size={13}/>3 dias grátis</span>
              <span><LIcons.Check size={13}/>Sem senha das contas</span>
              <span><LIcons.Check size={13}/>Cancele quando quiser</span>
            </div>
          </div>
          <div className="hero-phone-wrap">
            <div className="hero-phone-glow"></div>
            <PhoneDemo/>
          </div>
        </div>
      </header>

      {/* COMO FUNCIONA */}
      <section className="section" id="como-funciona">
        <div className="container">
          <div className="section-head rv">
            <span className="eyebrow"><span className="idx">01</span><span className="bar">/</span>Como funciona</span>
            <h2>Do cabo USB ao aquecimento em 3 passos.</h2>
            <p>Sem emulador, sem API, sem senha. O painel controla o celular de verdade.</p>
          </div>
          <div className="rv"><StepsSection/></div>
        </div>
      </section>

      {/* BENEFÍCIOS */}
      <section className="section" id="beneficios" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="section-head rv">
            <span className="eyebrow"><span className="idx">02</span><span className="bar">/</span>Por que aqueceai</span>
            <h2>Menos trabalho manual. Mais alcance.</h2>
          </div>
          <div className="bene-grid">
            {BENEFITS.map((b, i) => {
              const I = LIcons[b.icon];
              return (
                <div className="bene rv" key={b.title} style={{ transitionDelay: `${i * 80}ms` }}>
                  <span className="bene-ic"><I size={18}/></span>
                  <h3>{b.title}</h3>
                  <p>{b.desc}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* RECURSOS DO PAINEL */}
      <section className="section" id="recursos" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="section-head rv">
            <span className="eyebrow"><span className="idx">03</span><span className="bar">/</span>Recursos do painel</span>
            <h2>Tudo que roda enquanto você <em>não</em> está olhando.</h2>
            <p>Os módulos do painel trabalham juntos: aquecer, postar, acompanhar.</p>
          </div>
          <div className="mods-grid">
            {MODULES.map((m, i) => {
              const I = LIcons[m.icon];
              return (
                <div className="mod rv" key={m.title} style={{ transitionDelay: `${(i % 3) * 80}ms` }}>
                  <span className="mod-ic"><I size={17}/></span>
                  <span>
                    <h3>{m.title}</h3>
                    <p>{m.desc}</p>
                  </span>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* PLANOS */}
      <section className="section" id="precos" style={{ paddingTop: 0 }}>
        <div className="container">
          <PlansSection onPlan={openPlan}/>
        </div>
      </section>

      {/* FAQ */}
      <section className="section" id="faq" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="section-head rv">
            <span className="eyebrow"><span className="idx">05</span><span className="bar">/</span>Perguntas frequentes</span>
            <h2>Ficou alguma dúvida?</h2>
          </div>
          <FAQSection/>
        </div>
      </section>

      {/* CTA FINAL */}
      <section className="cta-final">
        <div className="container rv">
          <h2>Pronto para <em>aquecer</em> suas contas?</h2>
          <p>Baixe, conecte um cabo USB e veja rodando em minutos.</p>
          <a className="btn btn-primary" href="#precos">Começar grátis agora <LIcons.ArrowRight size={17}/></a>
        </div>
      </section>

      <footer className="footer">
        <div className="container">
          <div className="footer-grid">
            <div className="footer-brand">
              <span className="footer-logo">
                <img src="assets/logo-aqueceai.png" alt=""/>
                aqueceai<span style={{ color: 'var(--accent)' }}>.pro</span>
              </span>
              <p>Automação de TikTok via cabo USB. Sem senha exposta. Sem emulador. Para criadores que querem escalar sem deixar de criar.</p>
            </div>
            <div className="footer-col">
              <h4>Produto</h4>
              <ul>
                <li><a href="#como-funciona">Como funciona</a></li>
                <li><a href="#beneficios">Benefícios</a></li>
                <li><a href="#precos">Planos e preços</a></li>
                <li><a href="#faq">FAQ</a></li>
              </ul>
            </div>
            <div className="footer-col">
              <h4>Suporte</h4>
              <ul>
                <li><a href="https://chat.whatsapp.com/HPzCDSPkX4ZBFiNCt9CcBk" target="_blank" rel="noopener">Grupo WhatsApp</a></li>
                <li><a href="/tutorial">Tutorial de instalação</a></li>
                <li><a href="/conta">Minha conta</a></li>
              </ul>
            </div>
            <div className="footer-col">
              <h4>Legal</h4>
              <ul>
                <li><a href="/termos">Termos de uso</a></li>
                <li><a href="/privacidade">Política de privacidade</a></li>
                <li><a href="/privacidade">LGPD</a></li>
              </ul>
            </div>
          </div>
          <div className="footer-legal">
            <span>© 2026 aqueceai.pro · todos os direitos reservados</span>
            <span className="cnpj">CNPJ 39.837.721/0001-96</span>
          </div>
        </div>
      </footer>

      <QuizOverlay state={quiz} onClose={() => setQuiz(null)}/>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<LandingPage/>);