// Landing page sections — composed in app.jsx

const Reveal = ({ children, delay = 0, as: Tag = 'div', ...rest }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          el.classList.add('in');
          io.unobserve(el);
        }
      });
    }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const delayClass = delay ? `delay-${delay}` : '';
  return <Tag ref={ref} className={`reveal ${delayClass} ${rest.className || ''}`} {...rest}>{children}</Tag>;
};

/* ====================== NAV ====================== */

const Nav = ({ ctaText, onCta }) => (
  <nav className="nav">
    <div className="container nav-inner">
      <a href="#" className="logo">
        <span className="logo-mark">P</span>
        <span>PersonalFit</span>
      </a>
      <div className="nav-links">
        <a href="#problemas">Problemas</a>
        <a href="#solucao">Solução</a>
        <a href="#beneficios">Benefícios</a>
        <a href="#oferta">Oferta</a>
        <a href="#faq">FAQ</a>
      </div>
      <div className="nav-cta">
        <a href="#login" className="btn btn-ghost" style={{ padding: '12px 18px', fontSize: 14 }}>Entrar</a>
        <button className="btn btn-primary" style={{ padding: '12px 20px', fontSize: 14 }} onClick={onCta}>
          7 dias grátis <IconArrow size={16} />
        </button>
      </div>
    </div>
  </nav>
);

/* ====================== HERO ====================== */

const HEADLINES = {
  B: <>Mais alunos.<br/><em>Mais faturamento.</em><br/>Com PersonalFit.</>,
  A: <>Transforme sua <em>carreira</em> de personal trainer em 7 dias.</>,
  C: <>Chega de <em>perder aluno</em> por falta de estrutura.</>,
};

const Hero = ({ headlineKey = 'B', ctaText, onCta }) => {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <Reveal as="span" className="eyebrow">App #1 para Personal Trainers</Reveal>
            <Reveal as="h1" className="display hero-headline" style={{ marginTop: 24 }}>
              {HEADLINES[headlineKey]}
            </Reveal>
            <Reveal as="p" className="hero-sub" delay={1}>
              O app que prescreve treinos em minutos, te indica alunos automaticamente
              e te ensina a montar sua consultoria online — tudo num só lugar
              por menos de <strong style={{ color: 'var(--ink)' }}>R$ 2 por dia</strong>.
            </Reveal>
            <Reveal className="hero-cta-row" delay={2}>
              <button className="btn btn-primary btn-jumbo" onClick={onCta}>
                {ctaText} <IconArrow size={18} />
              </button>
              <a className="btn btn-ghost btn-jumbo" href="#solucao">
                <IconPlay size={14} /> Ver como funciona
              </a>
            </Reveal>
            <Reveal as="div" className="cta-meta" delay={2} style={{ marginTop: 18 }}>
              <IconCheck size={14} /> Acesso completo <span className="dot"/>
              <IconCheck size={14} /> Cancela quando quiser <span className="dot"/>
              <IconCheck size={14} /> Sem fidelidade
            </Reveal>

            <Reveal as="div" className="hero-trust" delay={3}>
              <div className="item"><div className="num">750+</div><div className="label">Exercícios em vídeo</div></div>
              <div className="item"><div className="num">10+</div><div className="label">Alunos / personal</div></div>
              <div className="item"><div className="num">3</div><div className="label">Idiomas</div></div>
              <div className="item"><div className="num">7</div><div className="label">Dias grátis</div></div>
            </Reveal>
          </div>

          <Reveal className="hero-visual" delay={1}>
            <div className="hero-bg-blob" />
            <div className="hero-orange-card">
              <div className="label"><span className="pulse"/> AO VIVO</div>
              <div className="corner-stat">
                <div className="big">+8</div>
                <div className="small">alunos captados esta semana pelo "Encontre seu Personal"</div>
              </div>
            </div>

            <div className="hero-phone-wrap left">
              <PhoneFrame scale={0.85}>
                <HomeScreen scale={0.85} />
              </PhoneFrame>
            </div>

            <div className="hero-phone-wrap right">
              <PhoneFrame scale={0.75}>
                <DiscoveryScreen scale={0.75} />
              </PhoneFrame>
            </div>

            <div className="float-badge b1">
              <div className="badge-icon orange"><IconChartUp size={20} /></div>
              <div className="text">
                <div className="big">+32%</div>
                <div className="small">faturamento</div>
              </div>
            </div>
            <div className="float-badge b2">
              <div className="badge-icon black"><IconLightning size={20} /></div>
              <div className="text">
                <div className="big">4 min</div>
                <div className="small">para prescrever</div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

/* ====================== MARQUEE ====================== */

const Marquee = () => {
  const items = [
    'Mais alunos', '+ Faturamento', 'Menos planilha',
    '+ Resultado', 'Sem print de treino', '+ Liberdade',
  ];
  const renderTrack = () => (
    <>
      {[...items, ...items].map((t, i) => (
        <span key={i} className={`marquee-item ${i % 2 ? 'outline' : ''}`}>
          {t}<span className="dot"/>
        </span>
      ))}
    </>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">{renderTrack()}</div>
    </div>
  );
};

/* ====================== PROBLEMS ====================== */

const PROBLEMS = [
  { num: '01', label: 'Perde horas montando treino do zero', desc: 'Toda semana, a mesma planilha em branco. Sem banco de exercícios. Sem modelos pra reaproveitar.' },
  { num: '02', label: 'Não sabe por onde começar no online', desc: 'Quer escalar sua consultoria mas não tem método pra criar, precificar e vender.' },
  { num: '03', label: 'Manda treino por print ou PDF', desc: 'Sem controle de execução, sem feedback do aluno, sem dados pra evoluir o programa.' },
  { num: '04', label: 'Depende só do boca a boca', desc: 'Sem captação ativa. Sem aparecer pra quem está procurando personal agora.' },
  { num: '05', label: 'Cobra por PIX avulso', desc: 'Sem controle de inadimplência, sem histórico, sem previsibilidade de receita.' },
  { num: '06', label: 'Vê outros personais crescendo', desc: 'E se pergunta o que eles têm de diferente. Quase sempre, é só estrutura.' },
];

const ProblemSection = () => {
  const [checked, setChecked] = React.useState({});
  const count = Object.values(checked).filter(Boolean).length;
  return (
    <section id="problemas" className="warm">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <span className="eyebrow">Identificação</span>
            <h2 className="display" style={{ marginTop: 18 }}>
              Você reconhece <em className="italic-accent">alguma</em> dessas situações?
            </h2>
          </div>
          <p className="lead">
            Marque as que acontecem com você. Se você reconhece pelo menos uma,
            o PersonalFit foi feito exatamente pra você.
          </p>
        </Reveal>

        <div className="problem-grid">
          {PROBLEMS.map((p, i) => (
            <Reveal key={i} delay={(i % 3) + 1}>
              <div
                className={`problem-card ${checked[i] ? 'checked' : ''}`}
                onClick={() => setChecked(c => ({ ...c, [i]: !c[i] }))}
              >
                <div className="check">
                  {checked[i] && <IconCheck size={14} />}
                </div>
                <div className="num">{p.num}</div>
                <div className="label">{p.label}</div>
                <div className="desc">{p.desc}</div>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal className="problem-result">
          <div className="text">
            {count === 0
              ? 'Marque os itens acima. Se você reconhece pelo menos um, o PersonalFit foi feito pra você.'
              : count < 3
                ? `${count} ${count === 1 ? 'item' : 'itens'} marcado${count > 1 ? 's' : ''}. O PersonalFit resolve isso. Comece grátis hoje.`
                : `${count} de 6 marcados. Você está deixando dinheiro na mesa. Hora de mudar.`}
          </div>
          <button className="btn btn-dark">
            Ver a solução <IconArrow size={16} />
          </button>
        </Reveal>
      </div>
    </section>
  );
};

/* ====================== SOLUTION (spotlight) ====================== */

const SolutionSection = () => (
  <section id="solucao">
    <div className="container">
      <Reveal className="section-head">
        <div>
          <span className="eyebrow">A solução</span>
          <h2 className="display" style={{ marginTop: 18 }}>
            Um app. <em className="italic-accent">Quatro problemas</em> resolvidos.
          </h2>
        </div>
        <p className="lead">
          O PersonalFit unifica prescrição, captação, pagamento e educação
          dentro de uma única plataforma — pensada por personais, pra personais.
        </p>
      </Reveal>

      <Reveal as="div" className="spotlight">
        <div className="copy">
          <span className="eyebrow">01 · Prescrição</span>
          <h3 className="display">Prescreva treinos em minutos, não em horas.</h3>
          <p>
            Banco com mais de 750 exercícios em vídeo. Monte um treino, salve como modelo,
            reaproveite com quantos alunos quiser. Pare de reinventar a roda toda semana.
          </p>
          <div className="meta">
            <div className="item"><div className="v">750+</div><div className="l">Exercícios em vídeo</div></div>
            <div className="item"><div className="v">~4min</div><div className="l">Por treino</div></div>
          </div>
        </div>
        <div className="spotlight-visual">
          <PhoneFrame scale={0.95}>
            <WorkoutBuilderScreen scale={0.95} />
          </PhoneFrame>
        </div>
      </Reveal>

      <Reveal as="div" className="spotlight reverse">
        <div className="copy">
          <span className="eyebrow">02 · Captação</span>
          <h3 className="display">"Encontre seu Personal" trabalha por você.</h3>
          <p>
            Funcionalidade exclusiva que coloca seu perfil na frente de quem
            está buscando personal trainer na sua região <strong>agora</strong>.
            Sem pagar tráfego. Sem depender de indicação manual.
          </p>
          <div className="meta">
            <div className="item"><div className="v">+8</div><div className="l">Alunos / semana (média)</div></div>
            <div className="item"><div className="v">98%</div><div className="l">Match por perfil</div></div>
          </div>
        </div>
        <div className="spotlight-visual dark">
          <PhoneFrame scale={0.95}>
            <DiscoveryScreen scale={0.95} />
          </PhoneFrame>
        </div>
      </Reveal>

      <Reveal as="div" className="spotlight">
        <div className="copy">
          <span className="eyebrow">03 · Financeiro</span>
          <h3 className="display">Cobre, receba e controle sem dor de cabeça.</h3>
          <p>
            Gestão financeira integrada. Você sabe exatamente quem pagou, quem está
            devendo e quanto entra por mês. Recorrência automática, inadimplência sob controle.
          </p>
          <div className="meta">
            <div className="item"><div className="v">100%</div><div className="l">Recorrência automática</div></div>
            <div className="item"><div className="v">0</div><div className="l">PIX avulso</div></div>
          </div>
        </div>
        <div className="spotlight-visual">
          <PhoneFrame scale={0.95}>
            <FinanceScreen scale={0.95} />
          </PhoneFrame>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ====================== BENEFITS GRID ====================== */

const BENEFITS = [
  { ic: <IconDumbbell/>, t: 'Prescreva em minutos', d: 'Banco com 750+ exercícios em vídeo. Salve modelos, reutilize com qualquer aluno — sem reinventar a roda.' },
  { ic: <IconUsers/>, t: 'Indicações automáticas', d: '"Encontre seu Personal" te coloca na frente de quem busca personal agora. Sem pagar tráfego.', variant: 'accent' },
  { ic: <IconWallet/>, t: 'Cobre sem dor de cabeça', d: 'Gestão financeira integrada. Quem pagou, quem está devendo, quanto entra. Tudo num só lugar.' },
  { ic: <IconBook/>, t: 'Consultoria online do zero', d: 'Cursos exclusivos que te guiam passo a passo pra criar, precificar e vender sua consultoria online.', variant: 'feature' },
  { ic: <IconSparkles/>, t: 'IA pra captar clientes', d: 'Aprenda a usar inteligência artificial pra atrair alunos, criar conteúdo e vender mais — sem ser expert.' },
  { ic: <IconGlobe/>, t: 'Atenda o mundo', d: 'App em português, inglês e espanhol. Seus alunos acessam de qualquer dispositivo, em qualquer país.' },
  { ic: <IconClipboard/>, t: 'Avaliação física profissional', d: 'Registro completo de medidas, evolução e histórico. Entrega resultado com dados na mão.' },
];

const BenefitsSection = () => (
  <section id="beneficios" className="warm">
    <div className="container">
      <Reveal className="section-head">
        <div>
          <span className="eyebrow">Benefícios</span>
          <h2 className="display" style={{ marginTop: 18 }}>
            Tudo o que você precisa pra <em className="italic-accent">crescer de verdade</em>.
          </h2>
        </div>
        <p className="lead">
          Não é mais um app de treino. É um sistema completo de carreira — captação,
          gestão, ensino, financeiro, internacional.
        </p>
      </Reveal>

      <div className="benefit-grid">
        {BENEFITS.map((b, i) => (
          <Reveal key={i} delay={(i % 3) + 1} className={`benefit ${b.variant || ''}`} style={{display:'contents'}}>
            <div className={`benefit ${b.variant || ''}`}>
              <div className="icon">{React.cloneElement(b.ic, { size: 26 })}</div>
              <div className="title">{b.t}</div>
              <div className="desc">{b.d}</div>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

/* ====================== CALCULATOR ====================== */

const Calculator = ({ onCta, ctaText }) => {
  const [students, setStudents] = React.useState(15);
  const [pricePerStudent, setPricePerStudent] = React.useState(250);
  const cost = 49.90;
  const perDay = (cost / 30).toFixed(2).replace('.', ',');
  const monthlyRevenue = students * pricePerStudent;
  const roi = Math.round(monthlyRevenue / cost);

  return (
    <section>
      <div className="container">
        <Reveal className="calc-section">
          <div>
            <span className="eyebrow" style={{ color: 'var(--orange-400)' }}>Preço · R$ 49,90 / mês</span>
            <h2 className="display" style={{ marginTop: 18, fontSize: 'clamp(36px, 4.4vw, 56px)' }}>
              Menos do que <em className="italic-accent">um café</em><br/>por dia.
            </h2>
            <div className="calc-display" style={{ marginTop: 28 }}>
              <div className="calc-num">
                <span className="currency">R$</span>
                <span>1</span>
                <span className="decimal">,66</span>
                <span className="period">/ dia</span>
              </div>
              <div className="calc-comparison">
                Um único aluno novo captado pelo "Encontre seu Personal"
                paga o app por <strong style={{ color: 'var(--orange-400)' }}>{Math.floor(pricePerStudent / cost)} meses</strong>.
              </div>
            </div>
          </div>

          <div className="calc-controls">
            <div className="calc-input-row">
              <div className="top">
                <span style={{ color: 'rgba(255,255,255,0.85)', fontSize: 14.5, fontWeight: 600 }}>Quantos alunos hoje?</span>
                <span style={{ fontFamily: 'Archivo, sans-serif', fontWeight: 900, fontSize: 22, color: '#fff', letterSpacing: -0.5 }}>{students}</span>
              </div>
              <input
                type="range" min="1" max="50" value={students}
                onChange={e => setStudents(+e.target.value)}
                className="calc-slider"
              />
            </div>

            <div className="calc-input-row">
              <div className="top">
                <span style={{ color: 'rgba(255,255,255,0.85)', fontSize: 14.5, fontWeight: 600 }}>Quanto cobra por aluno/mês?</span>
                <span style={{ fontFamily: 'Archivo, sans-serif', fontWeight: 900, fontSize: 22, color: '#fff', letterSpacing: -0.5 }}>R$ {pricePerStudent}</span>
              </div>
              <input
                type="range" min="100" max="500" step="10" value={pricePerStudent}
                onChange={e => setPricePerStudent(+e.target.value)}
                className="calc-slider"
              />
            </div>

            <div className="calc-controls">
              <div className="row">
                <div className="label">Sua receita mensal hoje</div>
                <div className="val">R$ {monthlyRevenue.toLocaleString('pt-BR')}</div>
              </div>
              <div className="row highlight">
                <div className="label">Retorno por cada R$ investido</div>
                <div className="val">{roi}×</div>
              </div>
            </div>

            <button className="btn btn-primary btn-jumbo" style={{ width: '100%', marginTop: 20 }} onClick={onCta}>
              {ctaText} <IconArrow size={18}/>
            </button>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

/* ====================== TESTIMONIALS ====================== */

const TESTIMONIALS = [
  {
    quote: 'Em 6 semanas eu passei de 11 pra 19 alunos. Sem pagar tráfego, sem post engajado nas redes — só ativando o perfil no "Encontre seu Personal". Mudou o jogo.',
    stat: { num: '+72%', desc: 'novos alunos em 6 semanas' },
    name: 'Rafael Coutinho',
    loc: 'Personal · Belo Horizonte/MG',
    initials: 'RC',
  },
  {
    quote: 'Eu gastava 4 horas por semana montando planilha de treino. Hoje monto em 5 minutos, salvo modelo, reaproveito. Sobrou tempo pra atender mais aluno presencial.',
    stat: { num: '+R$ 2.8k', desc: 'a mais por mês' },
    name: 'Camila Andrade',
    loc: 'Personal · Curitiba/PR',
    initials: 'CA',
  },
  {
    quote: 'Lancei minha consultoria online seguindo o curso dentro do app. Em 4 meses, fechei 14 alunos remotos cobrando R$ 380/mês. Sem o método, eu nunca teria começado.',
    stat: { num: 'R$ 5.3k', desc: 'em receita 100% online' },
    name: 'Bruno Tavares',
    loc: 'Personal · Florianópolis/SC',
    initials: 'BT',
  },
];

const TestimonialSection = () => (
  <section>
    <div className="container">
      <Reveal className="section-head">
        <div>
          <span className="eyebrow">Prova social</span>
          <h2 className="display" style={{ marginTop: 18 }}>
            Personais que decidiram <em className="italic-accent">parar de improvisar</em>.
          </h2>
        </div>
        <p className="lead">
          Mais de 10 mil personais usam o PersonalFit no Brasil.
          Aqui vão três histórias representativas de quem ativou o método.
        </p>
      </Reveal>

      <div className="testimonial-grid">
        {TESTIMONIALS.map((t, i) => (
          <Reveal key={i} delay={(i % 3) + 1}>
            <div className="testimonial">
              <span className="demo-tag">Exemplo</span>
              <div className="quote-mark">"</div>
              <div className="quote">{t.quote}</div>
              <div className="stat">
                <div className="num">{t.stat.num}</div>
                <div className="desc">{t.stat.desc}</div>
              </div>
              <div className="author">
                <div className="avatar">{t.initials}</div>
                <div>
                  <div className="name">{t.name}</div>
                  <div className="loc">{t.loc}</div>
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

/* ====================== OFFER STACK ====================== */

const OfferSection = ({ ctaText, onCta }) => (
  <section id="oferta" className="warm">
    <div className="container">
      <Reveal className="section-head">
        <div>
          <span className="eyebrow">A oferta</span>
          <h2 className="display" style={{ marginTop: 18 }}>
            Tudo o que você leva. <em className="italic-accent">Por menos de R$ 50.</em>
          </h2>
        </div>
        <p className="lead">
          Plano único. Acesso completo a todas as funcionalidades, todos os cursos
          e todas as atualizações futuras. Sem upsell, sem pegadinha.
        </p>
      </Reveal>

      <Reveal className="offer">
        <div>
          <h3 className="display" style={{ color: '#fff', fontSize: 28, marginBottom: 8 }}>O que entra:</h3>
          <div className="offer-stack">
            <div className="item"><div className="lbl"><span className="tick"><IconCheck size={12}/></span>App completo de gestão e prescrição</div><div className="val">—</div></div>
            <div className="item"><div className="lbl"><span className="tick"><IconCheck size={12}/></span>Banco com 750+ exercícios em vídeo</div><div className="val">R$ 97/mês</div></div>
            <div className="item"><div className="lbl"><span className="tick"><IconCheck size={12}/></span>"Encontre seu Personal" — captação</div><div className="val">R$ 67/mês</div></div>
            <div className="item"><div className="lbl"><span className="tick"><IconCheck size={12}/></span>Cobrança e recebimento integrado</div><div className="val">R$ 47/mês</div></div>
            <div className="item"><div className="lbl"><span className="tick"><IconCheck size={12}/></span>Avaliação física completa</div><div className="val">R$ 37/mês</div></div>
            <div className="item bonus"><div className="lbl"><span className="tick"><IconCheck size={12}/></span>BÔNUS 1 · Consultoria Online do Zero</div><div className="val">R$ 197</div></div>
            <div className="item bonus"><div className="lbl"><span className="tick"><IconCheck size={12}/></span>BÔNUS 2 · Roteiro de Vendas</div><div className="val">R$ 97</div></div>
            <div className="item bonus"><div className="lbl"><span className="tick"><IconCheck size={12}/></span>BÔNUS 3 · Marketing pra Personal</div><div className="val">R$ 97</div></div>
            <div className="item bonus"><div className="lbl"><span className="tick"><IconCheck size={12}/></span>BÔNUS 4 · IA pra Captação</div><div className="val">R$ 147</div></div>
            <div className="total">
              <div className="lbl">Valor total</div>
              <div className="val">R$ 786/mês</div>
            </div>
          </div>
        </div>

        <div className="offer-pricing">
          <div className="tag">Hoje, por</div>
          <div className="label">Plano único PersonalFit</div>
          <div className="price">
            <span className="c">R$</span>
            <span>49</span>
            <span className="d">,90</span>
            <span className="p">/mês</span>
          </div>
          <div className="sub">+ 7 dias grátis pra testar tudo. Cancela quando quiser.</div>

          <button className="btn btn-dark btn-jumbo" style={{ width: '100%' }} onClick={onCta}>
            {ctaText} <IconArrow size={18}/>
          </button>

          <div className="meta">
            <IconLock size={12} style={{ verticalAlign: 'middle', marginRight: 6 }}/>
            Pagamento seguro · Cartão de crédito · Recorrente mensal
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ====================== OBJECTIONS ====================== */

const OBJECTIONS = [
  {
    q: '"Não sou bom com tecnologia, tenho medo de não conseguir usar."',
    a: 'O PersonalFit foi criado pensando exatamente em quem nunca usou um app de gestão antes. A interface é simples e você prescreve o primeiro treino em menos de 10 minutos. Os 7 dias grátis te dão espaço pra explorar tudo sem pressão — e suporte humano se precisar.',
  },
  {
    q: '"R$ 49,90 por mês parece caro pra mim agora."',
    a: 'R$ 49,90 dividido por 30 dias é R$ 1,66 por dia. Menos do que um café. Um único aluno novo captado pelo app paga a assinatura por meses. A pergunta real não é se você pode pagar — é quanto você está perdendo por não ter um sistema que capta e organiza seus alunos.',
  },
  {
    q: '"Ainda não tenho muitos alunos, prefiro contratar depois."',
    a: 'Esse é exatamente o raciocínio que trava a maioria dos personais. Você não precisa de alunos pra usar o app — você usa o app pra conseguir os alunos. O "Encontre seu Personal" começa a trabalhar no momento em que você ativa o perfil. Quem espera ter alunos pra se organizar, continua esperando.',
  },
];

const ObjectionsSection = () => (
  <section>
    <div className="container tight">
      <Reveal>
        <span className="eyebrow">Dúvidas honestas</span>
        <h2 className="display" style={{ marginTop: 18, maxWidth: 18 + 'ch' }}>
          As três coisas que você está <em className="italic-accent">pensando agora</em>.
        </h2>
      </Reveal>

      <div style={{ marginTop: 56 }}>
        {OBJECTIONS.map((o, i) => (
          <Reveal key={i} delay={(i % 3) + 1}>
            <div className="objection">
              <div className="q">{o.q}</div>
              <div className="a">{o.a}</div>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

/* ====================== GUARANTEE ====================== */

const GuaranteeSection = () => (
  <section className="warm">
    <div className="container tight">
      <Reveal className="guarantee">
        <div className="guarantee-seal">
          <div>
            <div className="top">7</div>
            <div className="bot">Dias grátis</div>
          </div>
        </div>
        <div>
          <span className="eyebrow" style={{ color: 'var(--orange-400)' }}>Garantia</span>
          <h2 className="display" style={{ color: '#fff', marginTop: 14, fontSize: 'clamp(28px, 3vw, 44px)' }}>
            7 dias grátis. <em className="italic-accent">Zero risco.</em>
          </h2>
          <p style={{ marginTop: 16, color: 'rgba(255,255,255,0.75)', fontSize: 17, lineHeight: 1.6, maxWidth: '60ch' }}>
            Você ativa hoje e tem 7 dias completos pra testar todas as funcionalidades com quantos alunos quiser.
            Se não gostar por qualquer motivo, cancela antes do prazo e não é cobrado nada. Zero.
            Sem burocracia, sem pergunta, sem enrolação. O risco é 100% nosso.
          </p>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ====================== FAQ ====================== */

const FAQS = [
  ['Preciso saber mexer em tecnologia pra usar o PersonalFit?', 'Não. O app foi desenvolvido pra ser simples e intuitivo. Se você consegue usar WhatsApp, você consegue usar o PersonalFit. E nos 7 dias grátis você aprende tudo no seu ritmo.'],
  ['Serve pra quem ainda está começando na carreira?', 'Sim — e é ainda mais importante começar com estrutura desde o zero. Você já inicia a carreira com um sistema de captação, organização e cobrança. É a vantagem que muitos não tiveram quando começaram.'],
  ['E se eu já tiver muitos alunos e quiser migrar minha gestão?', 'Perfeito. O PersonalFit foi feito pra escalar. Quanto mais alunos você tem, mais tempo você economiza com prescrição automática e mais controle ganha no financeiro.'],
  ['Como funciona o acesso depois que eu assinar?', 'Você cria seu perfil, configura seus dados e já começa a usar. Acesso imediato a todas as funcionalidades — inclusive os cursos bônus.'],
  ['E se eu quiser cancelar?', 'Você cancela quando quiser, direto pelo app, sem precisar falar com ninguém. Sem fidelidade, sem multa.'],
  ['Quais formas de pagamento são aceitas?', 'Assinatura mensal debitada automaticamente no cartão de crédito. Os 7 primeiros dias são gratuitos — você só é cobrado se decidir continuar.'],
  ['O app funciona pra quem atende alunos fora do Brasil?', 'Sim. O PersonalFit está disponível em português, inglês e espanhol. Seu aluno acessa de qualquer dispositivo, em qualquer país.'],
  ['Os cursos bônus têm data de expiração?', 'Não. Enquanto sua assinatura estiver ativa, você tem acesso completo a todos os cursos incluídos no plano.'],
];

const FAQSection = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq">
      <div className="container tight">
        <Reveal>
          <span className="eyebrow">Perguntas frequentes</span>
          <h2 className="display" style={{ marginTop: 18 }}>
            Ainda tem <em className="italic-accent">dúvida?</em>
          </h2>
        </Reveal>

        <div className="faq-list">
          {FAQS.map(([q, a], i) => (
            <Reveal key={i}>
              <div
                className="faq-item"
                data-open={open === i}
                onClick={() => setOpen(open === i ? -1 : i)}
              >
                <div className="q-row">
                  <div className="q">{q}</div>
                  <div className="toggle"><IconPlus size={16}/></div>
                </div>
                <div className="a">{a}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ====================== URGENCY ====================== */

const UrgencyBlock = () => {
  // Show fake "current cohort" countdown - end of week
  const [time, setTime] = React.useState(() => {
    const target = new Date();
    target.setDate(target.getDate() + (7 - target.getDay()));
    target.setHours(23, 59, 59);
    return target.getTime() - Date.now();
  });
  React.useEffect(() => {
    const id = setInterval(() => setTime(t => Math.max(0, t - 1000)), 1000);
    return () => clearInterval(id);
  }, []);
  const days = Math.floor(time / 86400000);
  const hours = Math.floor((time % 86400000) / 3600000);
  const minutes = Math.floor((time % 3600000) / 60000);
  const seconds = Math.floor((time % 60000) / 1000);

  const cell = (v, l) => (
    <div style={{
      background: '#fff', color: '#0A0A0A',
      padding: '14px 18px',
      borderRadius: 14,
      minWidth: 78,
      textAlign: 'center',
    }}>
      <div style={{ fontFamily: 'Archivo, sans-serif', fontWeight: 900, fontSize: 32, letterSpacing: -1, lineHeight: 1, color: '#FF4D2E' }}>
        {String(v).padStart(2, '0')}
      </div>
      <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1, color: '#888', marginTop: 4 }}>{l}</div>
    </div>
  );

  return (
    <section style={{ padding: '60px 0' }}>
      <div className="container">
        <Reveal style={{
          background: '#0A0A0A',
          color: '#fff',
          borderRadius: 32,
          padding: 48,
          display: 'grid',
          gridTemplateColumns: '1fr auto',
          gap: 40,
          alignItems: 'center',
        }} className="urgency-row">
          <div>
            <span className="eyebrow" style={{ color: 'var(--orange-400)' }}>Bônus de lançamento</span>
            <h3 className="display" style={{ color: '#fff', marginTop: 14, fontSize: 'clamp(28px, 3vw, 42px)' }}>
              Assine esta semana e ganhe o <em className="italic-accent">Curso de IA pra Personal Trainer</em> de graça.
            </h3>
            <p style={{ marginTop: 14, color: 'rgba(255,255,255,0.7)', fontSize: 16, lineHeight: 1.55, maxWidth: '60ch' }}>
              Esse bônus de R$ 147 sai da oferta no domingo às 23h59. Quem entra antes garante acesso vitalício.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            {cell(days, 'Dias')}
            {cell(hours, 'Horas')}
            {cell(minutes, 'Min')}
            {cell(seconds, 'Seg')}
          </div>
        </Reveal>
      </div>
    </section>
  );
};

/* ====================== FINAL CTA ====================== */

const FinalCTA = ({ ctaText, onCta }) => (
  <section className="final-cta">
    <div className="container">
      <div className="inner">
        <Reveal as="span" className="eyebrow" style={{ color: '#fff' }}>Sua próxima decisão</Reveal>
        <Reveal as="h2" delay={1}>
          Mais alunos.<br/>Mais faturamento.<br/><em>Em 7 dias grátis.</em>
        </Reveal>
        <Reveal as="p" className="sub" delay={2}>
          Mais de 750 exercícios. Indicação automática de alunos. Cobrança integrada.
          Cursos que transformam sua carreira. Tudo por R$ 49,90/mês.
        </Reveal>
        <Reveal delay={3}>
          <button className="btn btn-dark btn-jumbo" style={{ fontSize: 20, padding: '28px 48px' }} onClick={onCta}>
            {ctaText} <IconArrow size={20}/>
          </button>
        </Reveal>
        <Reveal as="div" className="cta-meta" delay={3} style={{ color: 'rgba(255,255,255,0.85)' }}>
          <IconCheck size={14}/> 7 dias grátis <span className="dot"/>
          <IconCheck size={14}/> Acesso imediato <span className="dot"/>
          <IconCheck size={14}/> Sem compromisso
        </Reveal>
      </div>
    </div>
  </section>
);

/* ====================== PS ====================== */

const PSSection = ({ ctaText, onCta }) => (
  <section className="ps">
    <div className="container">
      <div className="inner">
        <span className="eyebrow">PS · Uma última coisa</span>
        <div style={{ marginTop: 24 }}>
          <p>
            Você pode fechar essa página agora e continuar fazendo tudo do jeito que sempre fez.
            Ou pode ativar sua conta gratuita hoje e descobrir na prática como o PersonalFit
            muda a rotina de quem leva a carreira a sério.
          </p>
          <p>
            A decisão é sua. O risco é zero. O teste é de graça.
          </p>
          <p>
            <strong style={{ color: 'var(--ink)' }}>O próximo aluno que te encontrar pode ser pelo PersonalFit — mas só se você estiver lá.</strong>
          </p>
        </div>
        <button className="btn btn-primary btn-jumbo" style={{ marginTop: 28 }} onClick={onCta}>
          Ativar minha conta grátis agora <IconArrow size={18}/>
        </button>
      </div>
    </div>
  </section>
);

/* ====================== FOOTER ====================== */

const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <a href="#" className="logo">
            <span className="logo-mark">P</span>
            <span>PersonalFit</span>
          </a>
          <p style={{ marginTop: 18, color: 'rgba(255,255,255,0.55)', fontSize: 13.5, maxWidth: 320, lineHeight: 1.55 }}>
            O app que transforma personal trainers em empresários do fitness.
            Captação, gestão e ensino num só lugar.
          </p>
        </div>
        <div>
          <h5>Produto</h5>
          <ul>
            <li><a href="#">Funcionalidades</a></li>
            <li><a href="#">Preço</a></li>
            <li><a href="#">Cursos</a></li>
            <li><a href="#">Encontre seu Personal</a></li>
          </ul>
        </div>
        <div>
          <h5>Empresa</h5>
          <ul>
            <li><a href="#">Sobre</a></li>
            <li><a href="#">Carreiras</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Imprensa</a></li>
          </ul>
        </div>
        <div>
          <h5>Suporte</h5>
          <ul>
            <li><a href="#">Central de ajuda</a></li>
            <li><a href="#">Contato</a></li>
            <li><a href="#">Termos</a></li>
            <li><a href="#">Privacidade · LGPD</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 PersonalFit. Todos os direitos reservados.</div>
        <div>CNPJ 00.000.000/0001-00 · São Paulo, Brasil</div>
      </div>
    </div>
  </footer>
);

/* ====================== STICKY CTA ====================== */

const StickyCTA = ({ ctaText, onCta }) => {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => {
      setShow(window.scrollY > 800 && window.scrollY < (document.body.scrollHeight - window.innerHeight - 600));
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className={`sticky-cta ${show ? 'show' : ''}`}>
      <div className="text">
        7 dias grátis · <span className="price">R$ 49,90/mês</span>
      </div>
      <button className="btn btn-primary" onClick={onCta}>
        {ctaText} <IconArrow size={14}/>
      </button>
    </div>
  );
};

Object.assign(window, {
  Reveal, Nav, Hero, Marquee, ProblemSection, SolutionSection,
  BenefitsSection, Calculator, TestimonialSection, OfferSection,
  ObjectionsSection, GuaranteeSection, FAQSection, UrgencyBlock,
  FinalCTA, PSSection, Footer, StickyCTA,
});