/* Performance 8M — Part 2: Modules, Solution, Transformation, Transition, Offer, FAQ, Close */

const { useState: useState2, useEffect: useEffect2, useRef: useRef2, useMemo: useMemo2 } = React;

/* ---------- Section: Method explanation ---------- */
function MethodIntro() {
  return (
    <section className="page" data-screen-label="06 Method intro" id="metodo">
      <div className="section-header" style={{ maxWidth: '70ch' }}>
        <span className="eyebrow">Preparação física em camadas</span>
        <h2 className="h-section">
          Performance integrada em <br /><span className="accent italic-display">8 camadas</span>.
        </h2>
        <p className="lede">
          Cada módulo é uma camada do atleta completo. Você não pula etapas — você constrói uma sobre a outra, como um atleta de elite faz na temporada. Mês a mês, sem improviso.
        </p>
      </div>
    </section>
  );
}

/* ---------- Section: 8 Modules carousel ---------- */
function ModulesCarousel() {
  const [active, setActive] = useState2(0);
  const total = window.MODULES.length;
  const mod = window.MODULES[active];
  const next = () => setActive((a) => (a + 1) % total);
  const prev = () => setActive((a) => (a - 1 + total) % total);

  // keyboard nav
  useEffect2(() => {
    const onKey = (e) => {
      if (document.activeElement && document.activeElement.tagName === 'INPUT') return;
      if (e.key === 'ArrowRight') next();
      if (e.key === 'ArrowLeft') prev();
    };
    // attach only when stage is in view to avoid hijacking everything
    let inView = false;
    const stage = document.getElementById('modules-stage');
    if (!stage) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => { inView = en.isIntersecting; });
    }, { threshold: 0.3 });
    io.observe(stage);
    const handler = (e) => { if (inView) onKey(e); };
    window.addEventListener('keydown', handler);
    return () => { window.removeEventListener('keydown', handler); io.disconnect(); };
  }, []);

  return (
    <section className="page" data-screen-label="07 Modules" style={{ paddingTop: 0 }} id="modulos">
      <div className="modules-stage" id="modules-stage">
        <div className="module-progress">
          {window.MODULES.map((m, i) => (
            <button key={i} className={i === active ? 'active' : ''} onClick={() => setActive(i)} aria-label={`Ir para módulo ${m.n}`} />
          ))}
        </div>

        <div className={`module-card${mod.image ? ' has-image' : ''}`} key={active}>
          {mod.image ? (
            <>
              <div className="module-hero">
                <img src={mod.image} alt={`Módulo ${mod.n} — ${mod.title}`} className="module-hero-img" />
                <span className="module-counter module-counter-float">{mod.n} / {String(total).padStart(2, '0')}</span>
              </div>
              <div className="module-foot">
                <p className="module-desc">{mod.desc}</p>
                <div className="module-foot-row">
                  <div className="module-attrs">
                    {mod.attrs.map((a, i) => (
                      <div key={i}>
                        <div className="attr-label">{a.label}</div>
                        <div className="attr-value">{a.value}</div>
                      </div>
                    ))}
                  </div>
                  <div className="module-foot-arrows">
                    <button className="arrow-btn" onClick={prev} aria-label="Módulo anterior">{window.Icon.chevL}</button>
                    <button className="arrow-btn" onClick={next} aria-label="Próximo módulo">{window.Icon.chevR}</button>
                  </div>
                </div>
              </div>
            </>
          ) : (
            <>
              <div className="module-visual">
                <div className="module-meta">
                  <span className="module-pill">
                    <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent-ink)' }}></span>
                    Mês {parseInt(mod.n, 10)}
                  </span>
                  <span className="module-counter">{mod.n} / {String(total).padStart(2, '0')}</span>
                </div>
                <div className="module-icon">
                  <window.ModuleIcon kind={mod.icon} />
                </div>
                <div className="module-bignum">{mod.n}</div>
              </div>
              <div className="module-info">
                <div>
                  <span className="module-eyebrow">{mod.eyebrow}</span>
                  <h3 className="module-title">{mod.title}</h3>
                  <p className="module-tagline">"{mod.tagline}"</p>
                  <p className="module-desc">{mod.desc}</p>
                </div>
                <div>
                  <div className="module-attrs">
                    {mod.attrs.map((a, i) => (
                      <div key={i}>
                        <div className="attr-label">{a.label}</div>
                        <div className="attr-value">{a.value}</div>
                      </div>
                    ))}
                  </div>
                  <div style={{ display: 'flex', gap: 8, marginTop: 24 }}>
                    <button className="arrow-btn" onClick={prev} aria-label="Módulo anterior">{window.Icon.chevL}</button>
                    <button className="arrow-btn" onClick={next} aria-label="Próximo módulo">{window.Icon.chevR}</button>
                  </div>
                </div>
              </div>
            </>
          )}
        </div>

        <div className="module-thumbs">
          {window.MODULES.map((m, i) => (
            <button key={i} className={i === active ? 'active' : ''} onClick={() => setActive(i)}>
              <span className="thumb-n">{m.n}</span>
              <span className="thumb-label">{m.short}</span>
            </button>
          ))}
        </div>

        <p style={{ marginTop: 48, textAlign: 'center', fontFamily: 'var(--font-display)', fontSize: 'clamp(20px, 2vw, 28px)', fontWeight: 500, letterSpacing: '-0.015em', color: 'var(--text)', maxWidth: '40ch', margin: '48px auto 0' }}>
          Você não treina partes do corpo. Você constrói o <span className="accent italic-display">atleta completo</span>, camada por camada.
        </p>
      </div>
    </section>
  );
}

/* ---------- Section: Solution / what you receive ---------- */
function Solution() {
  const deliverables = [
    { icon: window.Icon.video, title: '8 módulos completos em vídeo', desc: 'Organizados em progressão, com explicação técnica e execução guiada.' },
    { icon: window.Icon.book, title: 'Biblioteca robusta de exercícios', desc: 'Para cada camada da performance, com adaptações por nível.' },
    { icon: window.Icon.layers, title: 'Progressão estruturada', desc: 'Para você seguir durante os 8 meses sem improviso.' },
    { icon: window.Icon.compass, title: 'Flexibilidade de entrada', desc: 'Comece pelo módulo onde você sente mais dificuldade.' },
    { icon: window.Icon.users, title: 'Aplicável para qualquer nível', desc: 'Do iniciante competitivo ao atleta 60+ ainda em quadra.' },
    { icon: window.Icon.infinity, title: 'Plataforma própria', desc: 'Acesso por app mobile e web. Você treina em casa, na academia ou viajando entre torneios.' },
  ];

  return (
    <section className="page" data-screen-label="08 Solution" id="solucao">
      <div className="section-header" style={{ maxWidth: '24ch' }}>
        <span className="eyebrow">A solução</span>
        <h2 className="h-section">
          Performance <span className="accent italic-display">8M</span>.
        </h2>
        <p className="lede">
          Um programa progressivo que sustenta sua evolução durante a temporada inteira — sem platô, sem improviso, sem perder o método no meio do caminho.
        </p>
      </div>

      <div className="solution-grid">
        <ul className="deliverables">
          {deliverables.map((d, i) => (
            <li key={i}>
              <span className="deliverable-icon">{d.icon}</span>
              <div className="deliverable-text">
                <strong>{d.title}</strong>
                <span>{d.desc}</span>
              </div>
            </li>
          ))}
        </ul>
        <div style={{ position: 'sticky', top: 100 }}>
          <div style={{
            aspectRatio: '4/5',
            background: 'var(--bg-card)',
            borderRadius: 6,
            overflow: 'hidden',
            position: 'relative',
            border: '1px solid var(--line)',
          }}>
            <img src="assets/jp-coaching.jpg" alt="" className="duotone" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{
              position: 'absolute',
              bottom: 0, left: 0, right: 0,
              padding: 32,
              background: 'linear-gradient(0deg, rgba(5,5,5,0.9) 0%, rgba(5,5,5,0) 100%)',
            }}>
              <span className="eyebrow">Resultado</span>
              <p style={{
                fontFamily: 'var(--font-display)',
                fontSize: 'clamp(22px, 2.4vw, 32px)',
                fontWeight: 700,
                letterSpacing: '-0.02em',
                lineHeight: 1.1,
                margin: '16px 0 0',
                color: 'var(--text)',
              }}>
                O atleta completo que aguenta a temporada inteira na sua <span className="accent italic-display">melhor versão</span>.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Section: Transformation ---------- */
function Transformation() {
  const items = [
    'A base explosiva virou natural — você não pensa mais nela, ela acontece.',
    'A potência aparece nos golpes decisivos do tie-break — não some no segundo set.',
    'Você acelera, freia, troca de direção e mantém o controle total do corpo.',
    'Os adversários que antes corriam mais que você agora estão atrás.',
    'Você termina o torneio inteiro — não desiste no meio dele.',
    'As lesões que apareciam do nada deixaram de aparecer.',
  ];
  return (
    <section className="page" data-screen-label="09 Transformation">
      <div className="section-header" style={{ maxWidth: '28ch' }}>
        <span className="eyebrow">Daqui a 8 meses</span>
        <h2 className="h-section">
          O que muda <br />no seu jogo <span className="accent italic-display">ao longo do método</span>.
        </h2>
      </div>

      <div className="transform-grid">
        {items.map((t, i) => (
          <div className="transform-item" key={i}>
            <span className="transform-check">{window.Icon.check}</span>
            <span className="transform-text">{t}</span>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 64, textAlign: 'center' }}>
        <a href="#oferta" className="btn btn-primary btn-lg">Quero virar o atleta completo {window.Icon.arrow}</a>
      </div>
    </section>
  );
}

/* ---------- Section: 7D → 8M transition ---------- */
function Transition() {
  return (
    <section className="page" data-screen-label="10 Transition">
      <div className="transition-block">
        <span className="transition-mark">Da semente · ao caminho</span>
        <span className="eyebrow">7D → 8M</span>
        <h2 className="h-section" style={{ marginTop: 24, maxWidth: '24ch' }}>
          O Protocolo 7D foi o <span className="dim" style={{ color: 'var(--text-mute)' }}>primeiro passo</span>.<br />
          O Performance 8M é o <span className="accent italic-display">caminho inteiro</span>.
        </h2>

        <div className="transition-flow">
          <div className="flow-card">
            <span className="mono-label">Onde você começou</span>
            <div className="flow-num dim">7D</div>
            <h4>Protocolo 7D</h4>
            <p>Sete dias para sentir a diferença. A prova de que preparação física específica funciona.</p>
          </div>
          <div className="flow-arrow">
            <svg width="60" height="40" viewBox="0 0 60 40" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M2 20 h52" />
              <path d="M44 8 l14 12 -14 12" />
            </svg>
          </div>
          <div className="flow-card future">
            <span className="mono-label" style={{ color: 'var(--accent)' }}>Onde você chega</span>
            <div className="flow-num live">8M</div>
            <h4>Performance 8M</h4>
            <p>Oito meses para viver a diferença — todos os meses. A temporada inteira sustentada por método.</p>
          </div>
        </div>

        <p style={{ maxWidth: '70ch', color: 'var(--text-dim)', lineHeight: 1.6, margin: 0, fontSize: 17 }}>
          O 8M te dá o método estruturado pra você sustentar essa evolução durante a temporada inteira — sem voltar pro improviso, sem perder o ritmo entre torneios, sem depender de "treinar mais quando der". Você não precisa mais sentir a diferença. <strong style={{ color: 'var(--text)' }}>Você precisa viver a diferença todos os meses.</strong>
        </p>
      </div>
    </section>
  );
}

/* ---------- Section: Offer ---------- */
function Offer() {
  const includes = [
    'Acesso imediato a todos os 8 módulos',
    'Treinos guiados em vídeo',
    'Liberdade pra começar onde você sente mais dificuldade',
    'Método aplicado por campeões do ranking mundial',
    'Resultado progressivo ao longo dos 8 meses',
    '7 dias de garantia incondicional',
  ];
  return (
    <section className="offer" data-screen-label="11 Offer" id="oferta">
      <div className="page">
        <div className="offer-shell">
          <div className="offer-side">
            <span className="eyebrow">Oferta · Lote 01 · Tempo limitado</span>
            <h3 style={{ marginTop: 24 }}>
              Daqui a 8 meses, <br />você pode estar num <span className="accent italic-display">nível completamente novo</span>…
            </h3>
            <p style={{ fontSize: 17, marginTop: 20 }}>
              …ou ainda batendo de frente com os mesmos limites que você bate hoje. A diferença é entrar no método agora.
            </p>
            <div className="offer-comparison">
              <div className="compare-card bad">
                <h5>Sem método · 8 meses</h5>
                <p>Picos de motivação, pausa entre torneios, lesão aparece, recomeça do zero, mesmo nível.</p>
              </div>
              <div className="compare-card good">
                <h5>Com Performance 8M</h5>
                <p>Progressão estruturada, cada mês prepara o próximo, atleta completo na próxima temporada.</p>
              </div>
            </div>
          </div>

          <div className="offer-card">
            <span className="offer-tag"><span className="dot"></span>Acesso imediato</span>
            <h3 className="offer-title">Performance 8M</h3>
            <p className="offer-sub">Acesso completo · 8 módulos · 8 meses</p>

            <div className="price-block">
              <span className="price-old">R$ 697</span>
              <span className="price-discount">-29% off</span>
            </div>
            <div className="price-main">
              <span className="price-currency">R$</span>
              <span className="price-value">497</span>
            </div>
            <div className="price-period">Acesso completo aos 8 módulos</div>

            <ul className="offer-includes">
              {includes.map((t, i) => (
                <li key={i}>{window.Icon.check}<span>{t}</span></li>
              ))}
            </ul>

            <a href="#" className="btn btn-primary btn-lg" style={{ width: '100%' }} onClick={(e) => e.preventDefault()}>
              Quero acesso imediato {window.Icon.arrow}
            </a>

            <div className="guarantee-row">
              {window.Icon.shield}<span>Garantia 7 dias</span>
              <span style={{ marginLeft: 'auto', display: 'inline-flex', gap: 8, alignItems: 'center' }}>{window.Icon.lock} Pagamento seguro</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Section: FAQ ---------- */
function FAQ() {
  const items = [
    {
      q: 'O Performance 8M é pra quem já fez o Protocolo 7D?',
      a: 'Não obrigatoriamente. Quem fez o 7D já entende o método e tira mais proveito do 8M. Quem nunca fez também consegue começar — o módulo 1 é a base e te dá toda a fundação necessária.',
    },
    {
      q: 'Preciso ter equipamentos especiais?',
      a: 'Alguns módulos pedem equipamentos básicos de academia (anilhas, halteres, banco). O programa indica adaptações pra quem treina em casa, ao ar livre ou na areia.',
    },
    {
      q: 'Quanto tempo por dia de treino?',
      a: 'Entre 40 e 60 minutos por sessão, com frequência ajustável ao seu calendário de torneios. O método foi feito pra encaixar na rotina de quem joga, não pra ocupar a vida toda.',
    },
    {
      q: 'Posso começar por outro módulo que não seja o 1?',
      a: 'Pode. Se você sente uma dificuldade muito específica (ex: aceleração), pode começar pelo módulo correspondente. Mas o ideal é seguir a progressão — cada módulo prepara o próximo.',
    },
    {
      q: 'E se eu não gostar?',
      a: '7 dias de garantia incondicional. Você acessa o programa, testa, e se não for pra você, devolvemos 100% do valor — sem pergunta, sem burocracia.',
    },
    {
      q: 'O método serve pra atletas 50+ ou 60+?',
      a: 'Sim. O sistema é o mesmo, mas a aplicação se adapta ao seu nível e idade. Várias progressões são oferecidas em cada exercício — você escolhe a que respeita o seu corpo hoje.',
    },
    {
      q: 'Como recebo o acesso?',
      a: 'Acesso imediato por e-mail após a confirmação da compra, em plataforma própria, com app mobile e web.',
    },
  ];
  const [open, setOpen] = useState2(0);
  return (
    <section className="page" data-screen-label="12 FAQ" id="faq">
      <div className="section-header" style={{ maxWidth: '24ch' }}>
        <span className="eyebrow">FAQ</span>
        <h2 className="h-section">Perguntas <span className="accent italic-display">frequentes</span>.</h2>
      </div>
      <div className="faq-list">
        {items.map((it, i) => (
          <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
            <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
              <span>{it.q}</span>
              <span className="icon">{window.Icon.plus}</span>
            </button>
            <div className="faq-a">
              <p>{it.a}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- Section: Close ---------- */
function Close() {
  return (
    <section className="close" data-screen-label="13 Close">
      <span className="eyebrow" style={{ justifyContent: 'center' }}>Fechamento</span>
      <h2 style={{ marginTop: 32 }}>
        Pronto pra construir <br />o <span className="accent italic-display">atleta completo</span>?
      </h2>
      <p>
        Para quem quer competir com método, sustentar evolução durante a temporada inteira, e parar de depender de pico de motivação ou improviso.
      </p>
      <a href="#oferta" className="btn btn-primary btn-lg">Quero começar agora {window.Icon.arrow}</a>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer data-screen-label="14 Footer">
      <span>© 2026 Performance 8M · Todos os direitos reservados</span>
      <span>Jean Pierre · JP Training BT</span>
    </footer>
  );
}

/* ---------- Sticky bottom CTA ---------- */
function StickyCTA({ enabled }) {
  const [show, setShow] = useState2(false);
  useEffect2(() => {
    if (!enabled) { setShow(false); return; }
    const onScroll = () => {
      const y = window.scrollY;
      const h = document.documentElement.scrollHeight - window.innerHeight;
      // Show after hero (~80vh) and hide near offer/close section
      const offer = document.getElementById('oferta');
      const offerTop = offer ? offer.getBoundingClientRect().top + window.scrollY : Infinity;
      setShow(y > window.innerHeight * 0.7 && y + window.innerHeight < offerTop + 200);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, [enabled]);
  if (!enabled) return null;
  return (
    <a href="#oferta" className={`sticky-cta ${show ? 'visible' : ''}`}>
      <span className="sticky-cta-text">
        <span className="dot"></span>
        <strong>R$ 497</strong> · 8 módulos · acesso completo
      </span>
      <span className="btn btn-primary" style={{ padding: '12px 20px', fontSize: 13 }}>
        Quero acesso {window.Icon.arrow}
      </span>
    </a>
  );
}

window.MethodIntro = MethodIntro;
window.ModulesCarousel = ModulesCarousel;
window.Solution = Solution;
window.Transformation = Transformation;
window.Transition = Transition;
window.Offer = Offer;
window.FAQ = FAQ;
window.Close = Close;
window.Footer = Footer;
window.StickyCTA = StickyCTA;