// components.jsx — Tom Mendes site components
// Loaded after React + Babel; exposes components to window.

const WA_NUMBER = "5585997313241";
const WA_TEXT = encodeURIComponent("Olá, Tom! Vim pelo site e quero saber mais sobre a consultoria.");
const WA_LINK = `https://wa.me/${WA_NUMBER}?text=${WA_TEXT}`;
const IG_LINK = "https://www.instagram.com/tommendesb/";

/* ────────── icons ────────── */
const Ico = {
  arr: () => <span className="arr">→</span>,
  ig: () =>
  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6">
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r=".9" fill="currentColor" stroke="none" />
    </svg>,

  wa: () =>
  <svg viewBox="0 0 32 32" fill="currentColor">
      <path d="M16 3C9.4 3 4 8.4 4 15c0 2.4.7 4.6 1.9 6.5L4 29l7.7-2c1.8 1 3.9 1.5 6 1.5h.3c6.6 0 12-5.4 12-12S22.6 3 16 3zm6.9 17.1c-.3.8-1.7 1.6-2.4 1.7-.6.1-1.4.1-2.3-.1-.5-.2-1.2-.4-2.1-.8-3.7-1.6-6.1-5.3-6.3-5.6-.2-.2-1.5-2-1.5-3.9 0-1.9 1-2.8 1.4-3.2.4-.4.8-.5 1.1-.5h.8c.3 0 .6.1.9.7.3.7 1 2.5 1.1 2.7.1.2.1.4 0 .6-.1.2-.2.4-.4.6l-.5.6c-.2.2-.4.4-.2.7.2.4.9 1.4 1.9 2.3 1.3 1.2 2.4 1.5 2.7 1.7.3.2.5.1.7-.1.2-.2.8-.9 1-1.2.2-.3.4-.3.7-.2.3.1 1.9.9 2.3 1.1.3.1.5.2.6.4.1.2.1.9-.2 1.6z" />
    </svg>,

  star: () =>
  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 3l2.6 5.6L20 9.4l-4 4 1 5.9L12 16.7 6.9 19.3l1-5.9-4-4 5.4-.8L12 3z" /></svg>,

  clip: () =>
  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6">
      <rect x="5" y="3" width="14" height="18" rx="2" /><path d="M9 7h6M9 11h6M9 15h4" />
    </svg>,

  dumbbell: () =>
  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M3 9v6M6 7v10M18 7v10M21 9v6M6 12h12" />
    </svg>,

  trend: () =>
  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M3 17l6-6 4 4 8-9" /><path d="M14 6h7v7" />
    </svg>

};

/* ────────── Header ────────── */
function Header({ onCta }) {
  return (
    <header className="hd">
      <div className="container hd-inner">
        <a href="#top" className="hd-logo">
          <img src="assets/logo-circle.png" alt="" />
          <div>
            <div style={{ lineHeight: 1 }}>
              <span className="lg-o">TO</span><span className="lg-t">MENDES</span>
            </div>
            <div className="lg-tag">PERSONAL TRAINER</div>
          </div>
        </a>
        <nav className="hd-nav">
          <a href="#sobre">Sobre</a>
          <a href="#metodologia">Metodologia</a>
          <a href="#instagram">Instagram</a>
          <a href="#contato">Contato</a>
        </nav>
        <button className="btn btn--primary hd-cta" onClick={onCta}>
          Avaliação <Ico.arr />
        </button>
      </div>
    </header>);

}

/* ────────── Hero — variation A (editorial) ────────── */
function HeroEditorial({ onCta }) {
  return (
    <section className="hero" id="top" data-screen-label="hero">
      <div className="hero-grain" />
      <div className="container hero-a">
        <div className="copy">
          <div className="eyebrow"><span className="dot" />Personal trainer · Consultoria online</div>
          <h1 className="display">
            Treino
            <span className="l3">individual.</span>
            <span className="l2">Resultado real.</span>
          </h1>
          <p className="sub">
            Acompanhamento humanizado para hipertrofia, emagrecimento e qualidade de vida — montado
            a partir de quem você é, não de um plano genérico.
          </p>
          <div className="ctas">
            <button className="btn btn--primary" onClick={onCta}>Quero minha avaliação <Ico.arr /></button>
            <a className="btn btn--ghost" href={WA_LINK} target="_blank" rel="noopener">Falar no WhatsApp</a>
          </div>
        </div>
        <div className="photo">
          <img src="assets/tom-1.jpeg" alt="Tom Mendes correndo" />
          <div className="tag">
            <div className="mono">CREF 6545-G/CE · Fortaleza</div>
            <div className="eyebrow" style={{ color: "#fff" }}><span className="dot" style={{ background: "#1FA9A6" }} />Atende no Brasil e no mundo</div>
          </div>
        </div>
      </div>
      <div className="container">
        <div className="ticker">
          <div className="pill"><span className="d" />Hipertrofia</div>
          <div className="pill"><span className="d" />Emagrecimento</div>
          <div className="pill"><span className="d" />Qualidade de vida</div>
          <div className="pill"><span className="d" />Treino periodizado</div>
          <div className="pill"><span className="d" />Feedback semanal</div>
          <div className="pill"><span className="d" />App próprio</div>
        </div>
      </div>
    </section>);

}

/* ────────── Hero — variation B (kinetic) ────────── */
function HeroKinetic({ onCta }) {
  return (
    <section className="hero-b" id="top" data-screen-label="hero">
      <div className="bg" />
      <div className="corners" />
      <div className="wm">TOMENDES</div>
      <div className="container">
        <div className="copy">
          <div className="eyebrow"><span className="dot" />Personal trainer · Consultoria online</div>
          <h1 className="display">
            Cada série<br />
            <span className="acc">construída</span> para<br />
            <span className="l2">você.</span>
          </h1>
          <p className="sub">
            Treino e periodização individualizados, acompanhamento humano e direto.
            Para hipertrofia, emagrecimento e qualidade de vida.
          </p>
          <div className="ctas">
            <button className="btn btn--primary" onClick={onCta}>Quero minha avaliação <Ico.arr /></button>
            <a className="btn btn--ghost" href={WA_LINK} target="_blank" rel="noopener">Falar no WhatsApp</a>
          </div>
        </div>
      </div>
    </section>);

}

/* ────────── Sobre ────────── */
function Sobre() {
  return (
    <section className="section about" id="sobre" data-screen-label="sobre">
      <div className="container about-grid">
        <div className="about-photos">
          <div className="p1"><img src="assets/tom-2.jpeg" alt="Tom Mendes" /></div>
          <div className="badge">
            <b>10+</b>
            <span>anos<br />de prática</span>
          </div>
          <div className="p2"><img src="assets/tom-4.jpeg" alt="Tom Mendes treino" /></div>
        </div>
        <div className="about-copy">
          <div className="eyebrow"><span className="dot" />Sobre o Tom</div>
          <h2 className="display">
            Treino é técnica.
            <br /><span className="ai">Resultado é gente.</span>
          </h2>
          <p className="lede">
            “A diferença não está só no que eu ensino — está em como eu enxergo cada aluno.
            Treino individualizado e humanizado de acordo com a necessidade de quem está do outro lado.”
          </p>
          <p>
            <strong>Tom Mendes</strong> é personal trainer com formação técnica, experiência prática e um
            jeito próprio de trabalhar: <strong>capacidade profissional somada a um olhar humano</strong> para
            quem está construindo seu corpo, sua saúde e sua rotina.
          </p>
          <p>
            Atende presencialmente em <strong>Fortaleza</strong> e online para alunos no <strong>Brasil e no
            exterior</strong>. Cada programa nasce da sua história, da sua agenda, das suas limitações e do
            que você quer alcançar — não do que está na moda.
          </p>
        </div>
      </div>
    </section>);

}

/* ────────── Metodologia — variation A (4 cards) ────────── */
const STEPS = [
{ n: "01", t: "Avaliação inicial", d: "Anamnese completa, histórico, lesões, rotina e objetivos. A base de tudo.", Ic: Ico.clip },
{ n: "02", t: "Plano sob medida", d: "Treino e periodização montados a partir da sua realidade — não de um modelo pronto.", Ic: Ico.dumbbell },
{ n: "03", t: "Acompanhamento humano", d: "Feedback semanal, vídeos, ajustes constantes. Eu vejo seu progresso de perto.", Ic: Ico.star },
{ n: "04", t: "Evolução contínua", d: "Reavaliações, novos ciclos e progressões. O treino muda quando você muda.", Ic: Ico.trend }];


function MetodologiaCards() {
  return (
    <section className="section method" id="metodologia" data-screen-label="metodologia">
      <div className="container">
        <div className="method-head">
          <div>
            <div className="eyebrow"><span className="dot" />Como funciona</div>
            <h2 className="display">Um método.<br /><span className="ac">Quatro passos.</span></h2>
          </div>
          <p className="intro">
            Da primeira conversa ao primeiro ciclo de evolução — um processo simples, direto e
            desenhado para você não treinar sozinho nunca mais.
          </p>
        </div>
        <div className="method-a">
          {STEPS.map((s) =>
          <div className="step" key={s.n}>
              <div className="icon"><s.Ic /></div>
              <div className="n">PASSO {s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ────────── Metodologia — variation B (horizontal rows) ────────── */
function MetodologiaRows() {
  return (
    <section className="section method" id="metodologia" data-screen-label="metodologia">
      <div className="container">
        <div className="method-head">
          <div>
            <div className="eyebrow"><span className="dot" />Como funciona</div>
            <h2 className="display">O <span className="ac">processo</span> por trás<br />do resultado.</h2>
          </div>
          <p className="intro">
            Da primeira conversa ao primeiro ciclo de evolução — quatro passos diretos e sem fórmula pronta.
          </p>
        </div>
        <div className="method-b">
          {STEPS.map((s) =>
          <div className="step-b" key={s.n}>
              <div className="n">{s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <div className="arr">→</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ────────── Instagram — variation A (mosaic) ────────── */
const IG_TILES = [
{ src: "assets/tom-1.jpeg", t1: "t1", c: "Corrida na orla" },
{ src: "assets/tom-2.jpeg", t1: "t2", c: "Treino funcional" },
{ src: "assets/tom-3.jpeg", t1: "t3", c: "Manhã" },
{ src: "assets/tom-4.jpeg", t1: "t4", c: "Cardio" },
{ src: "assets/tom-1.jpeg", t1: "t5", c: "Periodização" },
{ src: "assets/tom-3.jpeg", t1: "t2", c: "Treino próprio" }];


function InstagramMosaic() {
  return (
    <section className="section ig" id="instagram" data-screen-label="instagram">
      <div className="container">
        <div className="ig-head">
          <div>
            <div className="eyebrow"><span className="dot" />No Instagram</div>
            <h2 className="display">Treinos, rotina<br />e <span className="ac">bastidores.</span></h2>
            <div className="at">Siga <a href={IG_LINK} target="_blank" rel="noopener">@tommendesb</a></div>
          </div>
          <a className="link-u" href={IG_LINK} target="_blank" rel="noopener">Ver perfil <span>→</span></a>
        </div>
        <div className="ig-grid">
          {IG_TILES.map((t, i) =>
          <a className={`ig-tile ${t.t1}`} key={i} href={IG_LINK} target="_blank" rel="noopener">
              <img src={t.src} alt={t.c} />
              <div className="meta">
                <span>{t.c}</span>
                <Ico.ig />
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

/* ────────── Instagram — variation B (marquee) ────────── */
function InstagramMarquee() {
  const tiles = [...IG_TILES, ...IG_TILES];
  return (
    <section className="section ig" id="instagram" data-screen-label="instagram">
      <div className="container">
        <div className="ig-head">
          <div>
            <div className="eyebrow"><span className="dot" />No Instagram</div>
            <h2 className="display">@<span className="ac">tommendesb</span></h2>
            <div className="at">Treinos, rotina, evolução de alunos.</div>
          </div>
          <a className="link-u" href={IG_LINK} target="_blank" rel="noopener">Ver perfil <span>→</span></a>
        </div>
      </div>
      <div className="ig-marquee" style={{ marginTop: 8 }}>
        <div className="row">
          {tiles.map((t, i) =>
          <a className="ig-tile" key={i} href={IG_LINK} target="_blank" rel="noopener">
              <img src={t.src} alt={t.c} />
              <div className="meta"><span>{t.c}</span><Ico.ig /></div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

/* ────────── Form ────────── */
const OBJETIVOS = ["Hipertrofia", "Emagrecimento", "Qualidade de vida"];

function FormSection({ formRef }) {
  const [state, setState] = React.useState({
    nome: "", whats: "", email: "", idade: "", objetivo: "Hipertrofia", mensagem: "", lgpd: false
  });
  const [sent, setSent] = React.useState(false);

  function set(k, v) {setState((s) => ({ ...s, [k]: v }));}
  function submit(e) {
    e.preventDefault();
    if (!state.nome || !state.whats || !state.lgpd) return;
    setSent(true);
  }

  return (
    <section className="section form-sect" id="contato" data-screen-label="contato" ref={formRef}>
      <div className="container form-grid">
        <div className="form-side">
          <div>
            <div className="eyebrow"><span className="dot" />Avaliação inicial</div>
            <h2 className="display">
              Primeiro passo
              <span className="ai">é uma conversa.</span>
            </h2>
            <p style={{ marginTop: 24 }}>
              Preencha o formulário e me conte um pouco sobre você. Eu mesmo respondo, leio com calma
              e monto um plano só seu. Sem robô, sem template.
            </p>
          </div>
          <div className="check-list">
            <div className="check">Resposta no mesmo dia, pelo WhatsApp.</div>
            <div className="check">Sem compromisso de fechar — converse comigo primeiro.</div>
            <div className="check">Plano e valores apresentados depois da avaliação.</div>
          </div>
          <div className="photo"><img src="assets/tom-3.jpeg" alt="Tom Mendes" /></div>
        </div>

        <div className="form-card">
          {!sent ?
          <form onSubmit={submit}>
              <h3>Comece sua avaliação</h3>
              <p className="sub">Preencha abaixo — eu retorno em algumas horas.</p>

              <div className="fld">
                <label htmlFor="nome">Nome completo</label>
                <input id="nome" required value={state.nome} onChange={(e) => set("nome", e.target.value)} placeholder="Como você gostaria de ser chamado" />
              </div>
              <div className="row2">
                <div className="fld">
                  <label htmlFor="whats">WhatsApp</label>
                  <input id="whats" required value={state.whats} onChange={(e) => set("whats", e.target.value)} placeholder="(85) 9 0000-0000" />
                </div>
                <div className="fld">
                  <label htmlFor="idade">Idade</label>
                  <input id="idade" value={state.idade} onChange={(e) => set("idade", e.target.value)} placeholder="Ex.: 32" />
                </div>
              </div>
              <div className="fld">
                <label htmlFor="email">E-mail</label>
                <input id="email" type="email" value={state.email} onChange={(e) => set("email", e.target.value)} placeholder="seu@email.com" />
              </div>
              <div className="fld">
                <label>Seu objetivo principal</label>
                <div className="objetivo-row">
                  {OBJETIVOS.map((o) =>
                <div key={o} className={"obj-pill " + (state.objetivo === o ? "on" : "")} onClick={() => set("objetivo", o)}>{o}</div>
                )}
                </div>
              </div>
              <div className="fld">
                <label htmlFor="msg">Conta um pouco mais</label>
                <textarea id="msg" value={state.mensagem} onChange={(e) => set("mensagem", e.target.value)} placeholder="Rotina, histórico de treino, lesões, horários, o que você quer alcançar…" />
              </div>

              <label className="lgpd" style={{ display: "flex", gap: 10, alignItems: "flex-start", cursor: "pointer" }}>
                <input type="checkbox" checked={state.lgpd} onChange={(e) => set("lgpd", e.target.checked)} style={{ marginTop: 3 }} />
                <span>
                  Autorizo o tratamento dos meus dados para retorno desta avaliação, conforme a
                  <a href="#"> Política de Privacidade</a> e a Lei 13.709/2018 (LGPD).
                </span>
              </label>

              <button type="submit" className="btn btn--primary form-submit" style={{ marginTop: 20 }}>
                Enviar avaliação <Ico.arr />
              </button>
            </form> :

          <div className="form-ok">
              <div className="checkmark">✓</div>
              <h3>Recebido!</h3>
              <p>Sua avaliação chegou. Em algumas horas eu retorno no seu WhatsApp — combinado, {state.nome.split(" ")[0] || "tudo certo"}?</p>
              <a className="btn btn--whatsapp" href={WA_LINK} target="_blank" rel="noopener" style={{ marginTop: 24 }}>
                <Ico.wa /> Falar agora no WhatsApp
              </a>
            </div>
          }
        </div>
      </div>
    </section>);

}

/* ────────── Footer ────────── */
function Footer() {
  return (
    <footer className="ft">
      <div className="container">
        <div className="ft-grid">
          <div className="ft-brand">
            <div className="mark">
              <img src="assets/logo-circle.png" alt="" />
              <div>
                <div className="name"><span className="o">TO</span><span className="t">MENDES</span></div>
                <div className="tag">PERSONAL TRAINER · CONSULTORIA ONLINE</div>
              </div>
            </div>
            <p>Consultoria online de personal trainer. Treino e acompanhamento individualizados, de Fortaleza para o Brasil e para o mundo.</p>
          </div>
          <div className="ft-col">
            <h4>Navegação</h4>
            <ul>
              <li><a href="#sobre">Sobre</a></li>
              <li><a href="#metodologia">Metodologia</a></li>
              <li><a href="#instagram">Instagram</a></li>
              <li><a href="#contato">Avaliação</a></li>
            </ul>
          </div>
          <div className="ft-col">
            <h4>Contato</h4>
            <ul>
              <li><a href={WA_LINK} target="_blank" rel="noopener">WhatsApp · (85) 99731-3241</a></li>
              <li><a href={IG_LINK} target="_blank" rel="noopener">@tommendesb</a></li>
              <li style={{ fontSize: "14px" }}><a href="mailto:contato@tommendesb.com.br">contato@tommendesb.com.br</a></li>
              <li style={{ fontSize: "14px", color: "var(--fg-dim)" }}>Fortaleza · CE · Brasil e exterior</li>
            </ul>
          </div>
          <div className="ft-col">
            <h4>Informações</h4>
            <ul>
              <li><a href="#">Política de privacidade</a></li>
              <li><a href="#">Termos de consultoria</a></li>
              <li style={{ fontSize: "14px", color: "var(--fg-dim)" }}>CREF 6545-G/CE</li>
            </ul>
          </div>
        </div>
        <div className="ft-bottom">
          <div>© 2026 Tom Mendes Personal Trainer · tommendesb.com.br · Todos os direitos reservados.</div>
          <div>Resultados variam conforme dedicação, consistência e perfil individual.</div>
        </div>
      </div>
    </footer>);

}

/* ────────── WhatsApp float ────────── */
function WhatsFloat() {
  return (
    <a className="wa-float" href={WA_LINK} target="_blank" rel="noopener" aria-label="WhatsApp">
      <Ico.wa />
    </a>);

}

Object.assign(window, {
  Header, HeroEditorial, HeroKinetic, Sobre,
  MetodologiaCards, MetodologiaRows,
  InstagramMosaic, InstagramMarquee,
  FormSection, Footer, WhatsFloat
});