/* FAQ + Oferta consolidada + Countdown + PS + Sticky + Footer (10-14) */

function FAQ() {
  const qs = [
    ['Vou conseguir mesmo sem academia, sem aparelho?', 'Sim. Os treinos são pensados pra fazer em casa, com peso do próprio corpo ou com 1 par de halteres simples (qualquer um serve). Mais de 60% das alunas começam com zero equipamento.'],
    ['E se eu não tiver tempo? Eu mal durmo.', 'Os treinos básicos são de 25-30 minutos, 3x na semana. Total: 90 minutos por semana. Tem mãe que faz enquanto o filho dorme à tarde. Tem mãe que faz às 5h antes de todo mundo acordar. Tem mãe que faz na hora do almoço. O método foi feito pra caber, não pra ocupar.'],
    ['Eu nunca treinei. Vai funcionar pra mim?', 'Sim. A plataforma tem trilha pra quem nunca treinou na vida. Vídeo a vídeo, do básico ao intermediário. No seu ritmo. Sem pular etapa.'],
    ['Como eu acesso a plataforma depois de pagar?', 'Em até 5 minutos depois do pagamento aprovado, você recebe um e-mail com seu login e senha. Acessa de qualquer celular, computador ou tablet. Não precisa baixar app — funciona no navegador.'],
    ['Esse "vitalício" é vitalício mesmo? Posso confiar?', 'Vitalício mesmo. Pagamento único. Sem renovação. Sem mensalidade. Atualizações inclusas pra sempre. Eu garanto isso por contrato Eduzz — se eu sumir, a Eduzz te dá o acesso. Risco zero.'],
  ];
  return (
    <section style={{ padding: '64px 22px', background: 'var(--jp-gray-50)' }}>
      <span className="eyebrow" style={{ color: 'var(--jp-pink)' }}>Perguntas que te passaram pela cabeça</span>
      <h2 className="display" style={{
        fontSize: 'clamp(26px, 6.5vw, 36px)',
        marginTop: 12,
        marginBottom: 24,
        letterSpacing: '-0.025em',
        lineHeight: 1.08,
      }}>
        Tira a dúvida antes de fechar a página.
      </h2>
      <div style={{ display: 'grid', gap: 10 }}>
        {qs.map(([q, a]) => (
          <details key={q} style={{
            background: '#fff',
            borderRadius: 14,
            border: '1px solid var(--border)',
            overflow: 'hidden',
          }}>
            <summary style={{
              padding: '16px 18px',
              cursor: 'pointer',
              listStyle: 'none',
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              gap: 14,
              fontFamily: 'var(--font-display)',
              fontWeight: 700,
              fontSize: 15,
              color: 'var(--fg-strong)',
              lineHeight: 1.3,
              letterSpacing: '-0.01em',
            }}>
              <span style={{ flex: 1 }}>{q}</span>
              <span className="faq-toggle" style={{
                width: 28, height: 28, borderRadius: '50%',
                background: 'var(--jp-pink)', color: '#fff',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 18, fontWeight: 800, flexShrink: 0,
                fontFamily: 'var(--font-body)',
              }}>+</span>
            </summary>
            <div style={{ padding: '0 18px 18px', fontSize: 14.5, lineHeight: 1.6, color: 'var(--fg-muted)' }}>
              {a}
            </div>
          </details>
        ))}
      </div>
      <style dangerouslySetInnerHTML={{ __html: `details[open] .faq-toggle { background: var(--jp-black); transform: rotate(45deg); transition: transform 200ms ease; }` }}></style>
    </section>
  );
}

function ConsolidatedOffer() {
  const includes = [
    'Acesso vitalício ao Método Corpo Definido',
    'Mais de 120 treinos guiados em vídeo (HD)',
    'Trilha do zero ao intermediário',
    'Plano semanal pronto · 30 min · 3x/semana',
    'Atualizações novas pra sempre — sem custo',
    'Suporte direto comigo no WhatsApp',
  ];
  return (
    <section id="oferta" style={{ padding: '72px 22px', background: '#fff' }}>
      <div style={{ textAlign: 'center', marginBottom: 22 }}>
        <span className="eyebrow" style={{ color: 'var(--jp-pink)' }}>Pra recapitular</span>
        <h2 className="display" style={{
          fontSize: 'clamp(28px, 7vw, 40px)',
          marginTop: 10,
          letterSpacing: '-0.025em',
          lineHeight: 1.08,
        }}>
          Tudo que entra com você hoje.
        </h2>
      </div>

      <div style={{
        background: '#fff',
        border: '2px solid var(--jp-pink)',
        borderRadius: 22,
        padding: '28px 22px',
        boxShadow: '0 24px 60px rgba(255,20,147,0.18), var(--shadow-md)',
        position: 'relative',
      }}>
        <div style={{
          position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)',
          background: 'var(--jp-pink)', color: '#fff',
          padding: '6px 16px', borderRadius: 999,
          fontSize: 11, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase',
          whiteSpace: 'nowrap',
        }}>★ Dia das Mães · 70% off</div>

        <div style={{ textAlign: 'center', marginTop: 6 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: 'var(--fg-subtle)', textDecoration: 'line-through' }}>
            De R$ 997
          </div>
          <div style={{
            fontFamily: 'var(--font-display)',
            fontWeight: 800,
            fontSize: 'clamp(64px, 16vw, 88px)',
            letterSpacing: '-0.05em',
            lineHeight: 1,
            color: 'var(--jp-black)',
            marginTop: 4,
          }}>
            R$ <span style={{ color: 'var(--jp-pink)' }}>297</span>
          </div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: 'var(--fg-strong)', marginTop: 8 }}>
            Acesso vitalício · Pagamento único
          </div>
          <div style={{ fontSize: 13, color: 'var(--jp-green-700)', fontWeight: 700, marginTop: 4 }}>
            Você economiza R$ 700
          </div>
        </div>

        <div style={{ height: 1, background: 'var(--border)', margin: '24px 0' }}></div>

        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 12 }}>
          {includes.map(t => (
            <li key={t} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 14.5, lineHeight: 1.4 }}>
              <span style={{
                width: 22, height: 22, borderRadius: '50%',
                background: 'var(--jp-green)', color: '#fff',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0, marginTop: 1,
              }}>
                <i data-lucide="check" style={{ width: 14, height: 14, strokeWidth: 3 }}></i>
              </span>
              <span style={{ color: 'var(--fg-strong)', fontWeight: 500 }}>{t}</span>
            </li>
          ))}
        </ul>

        <a href="#" className="btn btn-cta" style={{
          width: '100%',
          padding: '20px 18px',
          fontSize: 16,
          whiteSpace: 'normal',
          textAlign: 'center',
          lineHeight: 1.25,
          marginTop: 24,
          boxSizing: 'border-box',
        }}>
          Quero meu acesso vitalício agora →
        </a>

        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, marginTop: 14, fontSize: 12, color: 'var(--fg-subtle)', flexWrap: 'wrap' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
            <i data-lucide="shield-check" style={{ width: 14, height: 14, color: 'var(--jp-green)' }}></i>
            Garantia 7 dias
          </span>
          <span>·</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
            <i data-lucide="lock" style={{ width: 14, height: 14 }}></i>
            Pagamento Eduzz
          </span>
        </div>
      </div>
    </section>
  );
}

function CountdownBlock() {
  const [time, setTime] = React.useState(() => calcTime());
  function calcTime() {
    const target = new Date('2026-05-10T23:59:00-03:00').getTime();
    const now = Date.now();
    const diff = Math.max(0, target - now);
    const d = Math.floor(diff / 86400000);
    const h = Math.floor((diff % 86400000) / 3600000);
    const m = Math.floor((diff % 3600000) / 60000);
    const s = Math.floor((diff % 60000) / 1000);
    return { d, h, m, s };
  }
  React.useEffect(() => {
    const id = setInterval(() => setTime(calcTime()), 1000);
    return () => clearInterval(id);
  }, []);
  const cell = (label, val) => (
    <div style={{
      flex: 1,
      background: 'rgba(255,255,255,0.06)',
      border: '1px solid rgba(255,255,255,0.1)',
      borderRadius: 14,
      padding: '16px 8px',
      textAlign: 'center',
    }}>
      <div style={{
        fontFamily: 'var(--font-display)',
        fontWeight: 800,
        fontSize: 'clamp(28px, 9vw, 40px)',
        color: '#fff',
        letterSpacing: '-0.03em',
        lineHeight: 1,
      }}>{String(val).padStart(2, '0')}</div>
      <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', letterSpacing: '0.14em', fontWeight: 700, marginTop: 8 }}>{label}</div>
    </div>
  );
  return (
    <section style={{ padding: '64px 22px', background: 'var(--jp-black)', color: '#fff' }}>
      <span className="eyebrow" style={{ color: 'var(--jp-pink)' }}>Urgência real</span>
      <h2 className="display" style={{
        color: '#fff',
        fontSize: 'clamp(28px, 7vw, 40px)',
        marginTop: 12,
        marginBottom: 22,
        letterSpacing: '-0.025em',
        lineHeight: 1.08,
      }}>
        Essa condição encerra em:
      </h2>
      <div style={{ display: 'flex', gap: 8, marginBottom: 26 }}>
        {cell('dias', time.d)}
        {cell('horas', time.h)}
        {cell('min', time.m)}
        {cell('seg', time.s)}
      </div>
      <p style={{ color: 'rgba(255,255,255,0.78)', fontSize: 15.5, lineHeight: 1.65, marginBottom: 26 }}>
        Depois de <strong style={{ color: '#fff' }}>10/maio 23h59 BRT</strong>, o vitalício volta pra <strong style={{ color: '#fff' }}>R$ 997</strong>. Os planos trimestrais e anuais voltam ao valor cheio.
        <br/><br/>
        Não tem "última chance". Não tem "reabertura". Não tem "caso extraordinário".
        <br/><br/>
        <strong style={{ color: 'var(--jp-pink)' }}>Quem entrou hoje, treina pra sempre. Quem deixou pra depois, paga depois.</strong>
      </p>
      <a href="#oferta" className="btn btn-pink" style={{
        width: '100%',
        padding: '20px 18px',
        fontSize: 16,
        whiteSpace: 'normal',
        textAlign: 'center',
        lineHeight: 1.25,
        boxSizing: 'border-box',
      }}>
        Quero entrar antes de encerrar →
      </a>
    </section>
  );
}

function PS() {
  return (
    <section style={{ padding: '72px 22px 56px', background: 'var(--jp-pink-50)' }}>
      <div style={{
        background: '#fff',
        borderRadius: 22,
        padding: '32px 24px',
        border: '1px solid var(--jp-pink-100)',
        boxShadow: 'var(--shadow-md)',
      }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 12px',
          background: 'var(--jp-pink)',
          color: '#fff',
          borderRadius: 999,
          fontSize: 11, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase',
          marginBottom: 22,
        }}>P.S.</div>

        <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--fg-muted)', marginBottom: 16 }}>
          Lindona, eu não sei se essa página vai fazer sentido pra você ou não. Tem mãe que abre, lê tudo, e fecha. Tem mãe que abre, lê metade, e clica no botão. Não tem certo nem errado.
        </p>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--fg-muted)', marginBottom: 16 }}>
          Mas se em algum momento dessa leitura você sentiu <strong style={{ color: 'var(--jp-pink)' }}>um aperto no peito, uma vontade de chorar baixo, uma vozinha dizendo "esse é o momento"</strong> — escuta essa voz. Não escuta a outra. A outra é a que te fez deixar pra depois nos últimos 5 anos.
        </p>
        <p style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, lineHeight: 1.25, color: 'var(--fg-strong)', letterSpacing: '-0.015em', marginBottom: 14 }}>
          Você não precisa ser perfeita pra começar. Você só precisa começar.
        </p>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--fg-muted)', marginBottom: 6 }}>
          Te espero lá dentro.
        </p>
        <p style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, color: 'var(--jp-pink)', marginBottom: 28 }}>
          — Jaque
        </p>

        <a href="#oferta" className="btn btn-cta" style={{
          width: '100%',
          padding: '20px 18px',
          fontSize: 16,
          whiteSpace: 'normal',
          textAlign: 'center',
          lineHeight: 1.25,
          boxSizing: 'border-box',
        }}>
          Quero meu acesso vitalício por R$ 297 →
        </a>
      </div>
    </section>
  );
}

function Footer({ logoSrc }) {
  return (
    <footer style={{ background: 'var(--jp-black)', color: '#fff', padding: '40px 22px 120px', textAlign: 'left' }}>
      <img src={logoSrc} alt="Jaque Personal" style={{ height: 36, marginBottom: 18 }} />
      <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.55)', lineHeight: 1.7, maxWidth: 480 }}>
        © 2026 Jaque Personal · Método Corpo Definido<br/>
        Resultados variam de pessoa a pessoa. Consulte um profissional de saúde antes de iniciar qualquer programa de exercícios.
        <br/><br/>
        contato@jaquepersonal.com · CNPJ 00.000.000/0001-00
      </div>
    </footer>
  );
}

function StickyCTA() {
  const [time, setTime] = React.useState('');
  React.useEffect(() => {
    const tick = () => {
      const target = new Date('2026-05-10T23:59:00-03:00').getTime();
      const diff = Math.max(0, target - Date.now());
      const d = Math.floor(diff / 86400000);
      const h = Math.floor((diff % 86400000) / 3600000);
      const m = Math.floor((diff % 3600000) / 60000);
      const s = Math.floor((diff % 60000) / 1000);
      setTime(`${d}d ${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`);
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{
      position: 'fixed', bottom: 0, left: 0, right: 0,
      maxWidth: 430, margin: '0 auto',
      zIndex: 50,
      background: 'var(--jp-black)',
      color: '#fff',
      padding: '12px 14px',
      display: 'flex', alignItems: 'center', gap: 10,
      borderTop: '1px solid rgba(255,255,255,0.08)',
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 14, letterSpacing: '-0.01em' }}>
          R$ <span style={{ color: 'var(--jp-pink)' }}>297</span> vitalício
        </div>
        <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.65)', display: 'flex', alignItems: 'center', gap: 6, fontVariantNumeric: 'tabular-nums' }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--jp-pink)' }}></span>
          Encerra em {time}
        </div>
      </div>
      <a href="#oferta" className="btn btn-cta" style={{ padding: '12px 16px', fontSize: 13, flexShrink: 0 }}>
        Garantir →
      </a>
    </div>
  );
}

Object.assign(window, { FAQ, ConsolidatedOffer, CountdownBlock, PS, Footer, StickyCTA });
