/* Performance 8M — Main App
   Editorial athletic landing · Black + Lime · React */

const { useState, useEffect, useRef, useCallback, useMemo } = React;

/* ---------- Tweaks defaults ---------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#d4ff3a",
  "density": "default",
  "stickyCta": true,
  "modulesLayout": "carousel"
}/*EDITMODE-END*/;

/* ---------- Icons (inline minimal) ---------- */
const Icon = {
  arrow: (
    <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14M13 5l7 7-7 7" />
    </svg>
  ),
  check: (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20 6L9 17l-5-5" />
    </svg>
  ),
  plus: (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 5v14M5 12h14" />
    </svg>
  ),
  chevL: (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M15 18l-6-6 6-6" />
    </svg>
  ),
  chevR: (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 18l6-6-6-6" />
    </svg>
  ),
  clock: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" />
    </svg>
  ),
  target: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" fill="currentColor" />
    </svg>
  ),
  infinity: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18.5 12c-2 0-3 1.5-4 3s-2 3-4 3-3.5-1.3-3.5-3 1.5-3 3.5-3 3 1.5 4 3 2 3 4 3 3.5-1.3 3.5-3-1.5-3-3.5-3z" />
    </svg>
  ),
  shield: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z" />
    </svg>
  ),
  lock: (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="5" y="11" width="14" height="10" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" />
    </svg>
  ),
  video: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="6" width="16" height="12" rx="2" /><path d="M22 8l-4 4 4 4V8z" />
    </svg>
  ),
  book: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 4h6a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H4z" /><path d="M20 4h-6a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h7z" />
    </svg>
  ),
  layers: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3l9 5-9 5-9-5 9-5z" /><path d="M3 13l9 5 9-5" /><path d="M3 18l9 5 9-5" />
    </svg>
  ),
  compass: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10" /><path d="M16 8l-2 6-6 2 2-6 6-2z" />
    </svg>
  ),
  users: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" />
      <path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" />
    </svg>
  ),
  refresh: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 12a9 9 0 0 1 15.5-6.5L21 8" /><path d="M21 3v5h-5" />
      <path d="M21 12a9 9 0 0 1-15.5 6.5L3 16" /><path d="M3 21v-5h5" />
    </svg>
  ),
};

/* ---------- SVG duotone filter (shared) ---------- */
function DuotoneDefs({ accent = '#d4ff3a' }) {
  // turn hex into r/g/b 0..1
  const rgb = useMemo(() => {
    const h = accent.replace('#', '');
    return [
      parseInt(h.substring(0, 2), 16) / 255,
      parseInt(h.substring(2, 4), 16) / 255,
      parseInt(h.substring(4, 6), 16) / 255,
    ];
  }, [accent]);
  return (
    <svg width="0" height="0" style={{ position: 'absolute', pointerEvents: 'none' }} aria-hidden="true">
      <defs>
        <filter id="duotone-lime" colorInterpolationFilters="sRGB">
          <feColorMatrix type="matrix" values="
            0.2126 0.7152 0.0722 0 0
            0.2126 0.7152 0.0722 0 0
            0.2126 0.7152 0.0722 0 0
            0 0 0 1 0" />
          <feComponentTransfer>
            <feFuncR tableValues={`0.03 ${rgb[0].toFixed(3)}`} />
            <feFuncG tableValues={`0.04 ${rgb[1].toFixed(3)}`} />
            <feFuncB tableValues={`0.02 ${rgb[2].toFixed(3)}`} />
          </feComponentTransfer>
        </filter>
        <filter id="duotone-lime-soft" colorInterpolationFilters="sRGB">
          <feColorMatrix type="matrix" values="
            0.2126 0.7152 0.0722 0 0
            0.2126 0.7152 0.0722 0 0
            0.2126 0.7152 0.0722 0 0
            0 0 0 1 0" />
          <feComponentTransfer>
            <feFuncR tableValues={`0.05 ${(rgb[0] * 0.9 + 0.08).toFixed(3)}`} />
            <feFuncG tableValues={`0.06 ${(rgb[1] * 0.9 + 0.08).toFixed(3)}`} />
            <feFuncB tableValues={`0.04 ${(rgb[2] * 0.4 + 0.06).toFixed(3)}`} />
          </feComponentTransfer>
        </filter>
      </defs>
    </svg>
  );
}

/* ---------- Section: Nav ---------- */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="nav-logo">
        <span className="badge">8M</span>
        <span>Performance</span>
      </div>
      <div className="nav-right">
        <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent)', boxShadow: '0 0 8px var(--accent)' }}></span>
          Temporada aberta
        </span>
        <a href="#oferta" className="btn btn-primary nav-cta">Quero acesso</a>
      </div>
    </nav>
  );
}

/* ---------- Section: Hero ---------- */
function Hero() {
  return (
    <header className="hero" data-screen-label="01 Hero">
      <div className="hero-bg">
        <img src="assets/jp-action.jpg" alt="" className="duotone" />
      </div>

      <div className="page hero-content">
        <div className="hero-top">
          <div className="hero-meta">
            <span className="eyebrow">Temporada 2026 · Lote 01</span>
            <span className="mono-label" style={{ marginTop: 12 }}>Performance 8M · Por Jean Pierre</span>
          </div>
          <div className="hero-meta" style={{ textAlign: 'right', alignItems: 'flex-end' }}>
            <span className="mono-label">8 Módulos / 8 Meses</span>
            <span className="mono-label" style={{ marginTop: 4 }}>R$ 497 · Acesso completo</span>
          </div>
        </div>

        <div className="hero-bottom">
          <div>
            <h1 className="h-display hero-headline">
              Pare de evoluir aos poucos. Vire o <span className="accent italic-display">atleta completo</span> do torneio.
            </h1>
          </div>
          <aside className="hero-side">
            <p>
              Treine como os atletas do circuito mundial pelos próximos <strong style={{ color: 'var(--text)' }}>8 meses</strong> — com o método integrado que prepara cada camada da sua performance, da base explosiva à coordenação em velocidade máxima.
            </p>
            <ul className="hero-bullets">
              <li>{Icon.clock}<span>8 módulos progressivos — cada um focado numa camada específica da performance</span></li>
              <li>{Icon.target}<span>Treinos estruturados pra você seguir a temporada inteira sem sair do método</span></li>
              <li>{Icon.infinity}<span>Plataforma própria com app mobile e web — você treina onde estiver</span></li>
            </ul>
            <div className="hero-cta-row">
              <a href="#oferta" className="btn btn-primary btn-lg">
                Quero treinar como atleta completo {Icon.arrow}
              </a>
            </div>
          </aside>
        </div>
      </div>

      <div className="hero-ticker">
        <div className="ticker-track">
          <span>Base explosiva</span><span>Potência inferior</span><span>Push & pull power</span>
          <span>Aceleração</span><span>Desaceleração</span><span>Potência integrada</span>
          <span>Agilidade</span><span>Velocidade</span><span>Rotação · antirrotação</span>
          <span>Coordenação</span>
          <span>Base explosiva</span><span>Potência inferior</span><span>Push & pull power</span>
          <span>Aceleração</span><span>Desaceleração</span><span>Potência integrada</span>
          <span>Agilidade</span><span>Velocidade</span><span>Rotação · antirrotação</span>
          <span>Coordenação</span>
        </div>
      </div>
    </header>
  );
}

/* ---------- Section: Coach card ---------- */
function CoachCard() {
  return (
    <section className="page" data-screen-label="02 Coach" style={{ paddingTop: 'clamp(60px, 8vw, 100px)', paddingBottom: 'clamp(60px, 8vw, 100px)' }}>
      <div className="coach-card">
        <div className="coach-portrait">
          <img src="assets/jp-action.jpg" alt="Jean Pierre" className="duotone-soft" style={{ objectPosition: 'center 20%' }} />
        </div>
        <div>
          <span className="eyebrow" style={{ marginBottom: 16 }}>Preparador físico · Beach Tennis</span>
          <h2 className="coach-name">Jean Pierre</h2>
          <p className="coach-role">
            Preparador físico de atletas do ranking mundial. Estruturou os protocolos físicos de Alessandro Calbucci, Flamínia Daina e Flávia Muniz — referências do circuito internacional.
          </p>
          <div className="coach-stats">
            <div>
              <div className="stat-num">6×</div>
              <div className="stat-label">Anos consecutivos com nº 1 do mundo no programa</div>
            </div>
            <div>
              <div className="stat-num">3</div>
              <div className="stat-label">Títulos mundiais entre atletas treinados</div>
            </div>
            <div>
              <div className="stat-num">10+</div>
              <div className="stat-label">Anos de aplicação em campo, areia e quadra</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Section: Intro / what you'll apply ---------- */
function Intro() {
  const items = [
    { label: 'Potência fundamental', desc: 'A base explosiva que sustenta tudo' },
    { label: 'Potência inferior', desc: 'Força e explosão nos membros inferiores' },
    { label: 'Potência superior', desc: 'Push & pull power aplicados ao jogo' },
    { label: 'Aceleração e desaceleração', desc: 'Chegar antes e travar com controle' },
    { label: 'Potência integrada', desc: 'Todas as valências funcionando juntas' },
    { label: 'Agilidade e velocidade', desc: 'Reação e mudança de direção em velocidade máxima' },
    { label: 'Rotação e antirrotação', desc: 'Gerar e absorver força nos golpes decisivos' },
    { label: 'Coordenação com velocidade', desc: 'A camada final: precisão dentro da quadra' },
  ];
  return (
    <section className="page" data-screen-label="03 Intro" id="programa">
      <div className="intro-grid">
        <div>
          <span className="eyebrow" style={{ marginBottom: 24, display: 'inline-flex' }}>Acesso completo</span>
          <h2 className="h-section">8 módulos. <br /><span className="accent italic-display">8 meses.</span></h2>
          <p className="lede" style={{ marginTop: 28 }}>
            A preparação física que sustenta um atleta de alto nível durante uma temporada inteira. Da fundação à coordenação fina — sem improviso, sem platô, sem perder o método no meio do caminho.
          </p>
          <a href="#oferta" className="btn btn-primary" style={{ marginTop: 32 }}>
            Quero acesso completo {Icon.arrow}
          </a>
        </div>
        <ol className="checklist">
          {items.map((it, i) => (
            <li key={i}>
              <span className="num">{String(i + 1).padStart(2, '0')}</span>
              <span className="label">{it.label}</span>
              <span className="desc">{it.desc}</span>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* ---------- Section: Athletes carousel ---------- */
function Athletes() {
  const trackRef = useRef(null);
  const [canL, setCanL] = useState(false);
  const [canR, setCanR] = useState(true);

  const update = useCallback(() => {
    const t = trackRef.current;
    if (!t) return;
    setCanL(t.scrollLeft > 4);
    setCanR(t.scrollLeft < t.scrollWidth - t.clientWidth - 4);
  }, []);
  useEffect(() => {
    const t = trackRef.current;
    if (!t) return;
    update();
    t.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update);
    return () => { t.removeEventListener('scroll', update); window.removeEventListener('resize', update); };
  }, [update]);
  const scroll = (dir) => {
    const t = trackRef.current;
    if (!t) return;
    t.scrollBy({ left: dir * (t.clientWidth * 0.7), behavior: 'smooth' });
  };

  const athletes = [
    {
      img: 'assets/calbucci.jpg',
      tag: 'Nº 1 do mundo',
      name: 'Alessandro Calbucci',
      bio: '6× consecutivas como nº 1 no ranking mundial de Beach Tennis.',
    },
    {
      img: 'assets/athlete-step.jpg',
      tag: 'Campeã mundial',
      name: 'Flamínia Daina',
      bio: '1× Campeã do mundo em equipe · 2× em dupla · Melhor jogadora do mundo em 2019.',
    },
    {
      img: 'assets/flavia.jpg',
      tag: 'Top 10 · 2021',
      name: 'Flávia Muniz',
      bio: 'Top 10 no ranking mundial de Beach Tennis em 2021.',
    },
  ];

  return (
    <section className="athletes" data-screen-label="04 Athletes" style={{ marginTop: 40 }}>
      <div className="page">
        <div className="carousel-controls">
          <div>
            <span className="eyebrow">Aplicado por campeões</span>
            <h2 className="h-section" style={{ marginTop: 18, maxWidth: '22ch' }}>
              O método rodado por <span className="accent italic-display">top players</span> do ranking mundial.
            </h2>
          </div>
          <div className="carousel-arrows">
            <button className="arrow-btn" onClick={() => scroll(-1)} disabled={!canL} aria-label="Anterior">{Icon.chevL}</button>
            <button className="arrow-btn" onClick={() => scroll(1)} disabled={!canR} aria-label="Próximo">{Icon.chevR}</button>
          </div>
        </div>

        <div className="athlete-track" ref={trackRef}>
          {athletes.map((a, i) => (
            <article className="athlete-card" key={i}>
              <div className="athlete-img">
                <img src={a.img} alt={a.name} className="duotone" />
                <span className="athlete-tag">{a.tag}</span>
              </div>
              <div className="athlete-info">
                <h3 className="athlete-name">{a.name}</h3>
                <p className="athlete-bio">{a.bio}</p>
              </div>
            </article>
          ))}
        </div>

        <p className="mono-label" style={{ marginTop: 32, color: 'var(--text-dim)' }}>
          O método se adapta ao seu nível. <span style={{ color: 'var(--text)' }}>O sistema é o mesmo.</span>
        </p>
      </div>
    </section>
  );
}

/* ---------- Section: Pain ---------- */
function Pain() {
  return (
    <section className="page" data-screen-label="05 Pain">
      <span className="eyebrow">Onde você está</span>
      <h2 className="pain-text" style={{ marginTop: 24 }}>
        Você já passou do <span className="dim">"sentir a diferença"</span>.<br />
        Agora você precisa de <span className="accent">outra coisa</span>.
      </h2>

      <p className="lede" style={{ marginTop: 40, maxWidth: '55ch' }}>
        Você já entende que preparação física específica funciona. Já sentiu o corpo responder depois de aplicar um método estruturado. Mas agora você esbarra em outras paredes:
      </p>

      <div className="pain-walls">
        <div className="pain-wall">
          <div className="wall-num">01</div>
          <div className="wall-title">A explosão melhorou — mas ela some no meio do torneio.</div>
          <div className="wall-desc">Você começa bem. Aos 2/3 do dia, o motor falha. Quem chega inteiro no jogo decisivo vence.</div>
        </div>
        <div className="pain-wall">
          <div className="wall-num">02</div>
          <div className="wall-title">A movimentação destravou — mas falta potência nos golpes decisivos.</div>
          <div className="wall-desc">Chega na bola, posiciona certo, e a bola sai sem peso. A força que decide ponto não está pronta.</div>
        </div>
        <div className="pain-wall">
          <div className="wall-num">03</div>
          <div className="wall-title">O cansaço diminuiu — mas a recuperação entre torneios continua lenta.</div>
          <div className="wall-desc">Você joga, recupera mal, joga de novo já cansado. A temporada come o seu nível, semana a semana.</div>
        </div>
      </div>

      <div className="pain-quote-row" style={{ marginTop: 80, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 40, alignItems: 'center' }}>
        <div className="pain-quote-text h-display" style={{ fontSize: 'clamp(60px, 8vw, 120px)', color: 'var(--accent)', fontStyle: 'italic', lineHeight: 0.85 }}>
          "Eu só preciso<br />treinar mais."
        </div>
        <div style={{ borderLeft: '1px solid var(--line)', paddingLeft: 40 }}>
          <p style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: '24px', fontWeight: 500, lineHeight: 1.3, letterSpacing: '-0.015em' }}>
            Treinar mais <span style={{ color: 'var(--text-mute)' }}>sem progressão</span> te leva ao platô.<br /><br />
            Treinar mais <span style={{ color: 'var(--text-mute)' }}>sem método específico</span> te leva à lesão.
          </p>
          <p style={{ marginTop: 24, color: 'var(--text-dim)', fontSize: 16, lineHeight: 1.5, maxWidth: '50ch' }}>
            Performance de verdade vem de treino certo, na ordem certa, na intensidade certa — durante a temporada inteira.
          </p>
          <a href="#oferta" className="btn btn-ghost" style={{ marginTop: 32 }}>
            Quero treinar com método progressivo {Icon.arrow}
          </a>
        </div>
      </div>
    </section>
  );
}

window.Nav = Nav;
window.Hero = Hero;
window.CoachCard = CoachCard;
window.Intro = Intro;
window.Athletes = Athletes;
window.Pain = Pain;
window.DuotoneDefs = DuotoneDefs;
window.Icon = Icon;
window.TWEAK_DEFAULTS = TWEAK_DEFAULTS;
