/* eslint-disable */
/* PERSONAL TRAINER MORUMBI — Home page sections */

const BAIRROS = [
'Morumbi', 'Panamby', 'Vila Andrade', 'Vila Suzana',
'Portal do Morumbi', 'Jardim Guedala', 'Real Parque', 'Vila Sônia',
'Butantã', 'Caxingui', 'Jardim Leonor', 'Jardim Londrina'];


const FORMAS = [
{
  n: '01',
  title: 'Em Condomínio',
  desc: 'Treinos personalizados na academia ou área fitness do seu próprio prédio. Sem deslocamento, sem fila, sem distrações.',
  icon: <Icon.Building />
},
{
  n: '02',
  title: 'Residencial',
  desc: 'Aulas particulares no conforto da sua casa, com todo equipamento e protocolo levado pelo professor.',
  icon: <Icon.Home />
},
{
  n: '03',
  title: 'Em Academia',
  desc: 'Acompanhamento presencial em academias da região do Morumbi, com foco em técnica, carga e progressão.',
  icon: <Icon.Dumbbell />
},
{
  n: '04',
  title: 'Outdoor',
  desc: 'Treinos em parques, ruas e áreas abertas. Ar livre, vista bonita, alta exigência funcional.',
  icon: <Icon.Tree />
}];


const OBJETIVOS = [
'Emagrecimento', 'Hipertrofia', 'Condicionamento físico', 'Melhor idade',
'Saúde e qualidade de vida', 'Alta performance', 'Funcional',
'Reabilitação física leve', 'Fortalecimento muscular'];


const DIFERENCIAIS = [
{ n: '01', t: 'Atendimento totalmente personalizado para cada aluno.' },
{ n: '02', t: 'Flexibilidade total de horários, inclusive cedo e à noite.' },
{ n: '03', t: 'Treinos no conforto da sua casa ou condomínio.' },
{ n: '04', t: 'Programa adaptado ao seu objetivo e ao seu corpo.' },
{ n: '05', t: 'Professores experientes, atletas e referências locais.' },
{ n: '06', t: 'Padrão premium de atendimento no Morumbi e região.' }];


const PROFS = [
{
  id: 'fabio',
  name: 'Fábio T.',
  spec: 'Musculação · Alta Performance',
  desc: 'Atleta profissional com anos de experiência. Foco em hipertrofia, transformação física real e treinos avançados.',
  tag: 'Atletas - Musculação',
  photo: 'PHOTO · FÁBIO T.',
  src: 'images/fabio/perfil.jpg',
  whats: '5511947849974'
},
{
  id: 'raquel',
  name: 'Raquel V.',
  spec: 'Musculação · Saúde · Qualidade de Vida',
  desc: 'Atendimento humanizado especializado em mulheres, melhor idade e bem-estar. Musculação, pilates solo, mobilidade e fortalecimento.',
  tag: 'Musculação - Funcional',
  photo: 'PHOTO · RAQUEL V.',
  src: 'images/raquel/perfil.png',
  whats: '5511953380917'
},
{
  id: 'luan',
  name: 'Luan Espindola',
  spec: 'Personal Fight · Jiu-Jitsu · Muay Thai',
  desc: 'Atendimento personalizado em artes marciais, defesa pessoal e preparação física aplicada à luta. Para jovens, adultos, mulheres e crianças.',
  tag: 'Personal Fight',
  photo: 'PHOTO · LUAN E.',
  src: 'images/luan/perfil.png',
  whats: '5511974388669'
}];

// Build a wa.me URL with a friendly pre-filled message
function whatsLink(number, profName) {
  const msg = encodeURIComponent(`Olá ${profName.split(' ')[0]}, vim pelo site Personal Trainer Morumbi e gostaria de conversar sobre treinos.`);
  return `https://wa.me/${number}?text=${msg}`;
}


// Reveal-on-scroll
function useReveal(deps = []) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {el.classList.add('in');io.disconnect();}
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, deps);
  return ref;
}

function Reveal({ children, as: As = 'div', className = '', delay = 0, ...rest }) {
  const ref = useReveal();
  return (
    <As ref={ref} className={`fade-up ${className}`} style={{ transitionDelay: `${delay}ms` }} {...rest}>
      {children}
    </As>);

}

// ---------- HERO ----------
function Hero({ onNav }) {
  const mediaRef = useRef(null);

  useEffect(() => {
    const el = mediaRef.current;
    if (!el) return;
    let ticking = false;
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => {
        const y = window.scrollY;
        // Only apply while hero is in view
        if (y < window.innerHeight + 200) {
          el.style.transform = `translate3d(0, ${y * 0.35}px, 0) scale(${1 + y * 0.0003})`;
        }
        ticking = false;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-media" ref={mediaRef}>
        <Placeholder src="images/hero.png" alt="Personal trainer no Morumbi — academia premium ao pôr do sol" />
      </div>

      <div className="hero-inner wrap">
        <Reveal>
          <span className="eyebrow"><span style={{ color: 'rgb(255, 255, 255)' }}>Atendimento personalizado de alto padrão</span></span>
        </Reveal>
        <Reveal delay={80}>
          <h1 style={{ fontSize: "70px" }}>
            Personal trainer no <em>Morumbi</em>, na sua casa, no seu condomínio, no seu tempo.
          </h1>
        </Reveal>
        <Reveal delay={160}>
          <p className="hero-sub">Treinos personalizados para musculação, emagrecimento, funcional, qualidade de vida e alta performance .Professores da região.

          </p>
        </Reveal>
        <Reveal delay={240}>
          <div className="hero-ctas">
            <Btn variant="primary" onClick={() => onNav('professores')}>Conheça os professores</Btn>
            <Btn variant="ghost" onClick={() => scrollToId('contato')}>Falar com a gente</Btn>
          </div>
        </Reveal>
      </div>

      <div className="hero-meta">
        <span className="num">12</span>
        <span className="lbl">Bairros atendidos no Morumbi e região</span>
      </div>
    </section>);

}

// ---------- SOBRE ----------
function Sobre() {
  return (
    <section className="sobre" id="sobre" data-screen-label="02 Sobre">
      <div className="wrap">
        <div className="sobre-grid" style={{ color: "rgb(120, 78, 23)" }}>
          <Reveal>
            <div className="sobre-media">
              <Placeholder src="images/sobre.png" alt="Espaço de treino premium — foco, disciplina, constância, resultados" />
            </div>
          </Reveal>
          <div>
            <Reveal>
              <span className="eyebrow">O Projeto</span>
            </Reveal>
            <Reveal delay={60}>
              <h2 className="section-title" style={{ margin: '18px 0 32px' }}>
                Um time de personal trainers de <em>Qualidade</em>, atendendo o Morumbi como ninguém.
              </h2>
            </Reveal>
            <div className="sobre-body">
              <Reveal delay={120}><p>Nossa proposta é simples: levar o melhor da musculação, do treinamento funcional e da saúde até você — no seu condomínio, na sua residência ou na academia que já faz parte da sua rotina.

Nossos professores são experientes, com atendimento personalizado e um acompanhamento que respeita seu corpo, seu tempo e seus objetivos.
                </p></Reveal>
              <Reveal delay={180}><p>
                Sem método engessado, sem aula em pacote. Cada aluno recebe um programa pensado para sua realidade — do iniciante ao atleta, do idoso ativo ao executivo sem tempo.
              </p></Reveal>
              <Reveal delay={240}><p>Atendemos no Morumbi e bairros vizinhos com a discrição e o padrão que a região merece.

                </p></Reveal>
            </div>
            <Reveal delay={300}>
              <div className="sobre-stats">
                <div className="stat"><div className="n">2–3</div><div className="l">Alunos por aula em grupo</div></div>
                <div className="stat"><div className="n">12</div><div className="l">Bairros atendidos</div></div>
                <div className="stat"><div className="n">1:1</div><div className="l">Atendimento individual</div></div>
                <div className="stat"><div className="n">100%</div><div className="l">Programa personalizado</div></div>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>);
}

// ---------- BAIRROS ----------
function Bairros() {
  return (
    <section className="bairros" id="bairros" data-screen-label="03 Bairros">
      <div className="wrap">
        <div className="section-head">
          <div>
            <Reveal><span className="eyebrow">Cobertura</span></Reveal>
            <Reveal delay={60}>
              <h2 className="section-title" style={{ marginTop: 16 }}>
                Onde a gente <em>atende</em>.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={120}>
            <p className="section-lede">Atendimento presencial em doze bairros da zona oeste de São Paulo. Se você mora ou treina em qualquer um deles, há um possível professor disponível para a sua agenda.

            </p>
          </Reveal>
        </div>
      </div>

      <div className="wrap">
        <div className="bairros-list">
          {BAIRROS.map((b, i) =>
          <div key={b} className="bairro">
              <span className="b-num mono">{String(i + 1).padStart(2, '0')}</span>
              <span className="b-name serif">{b}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------- FORMAS ----------
function Formas() {
  return (
    <section className="formas" id="formas" data-screen-label="04 Atendimento">
      <div className="wrap">
        <div className="section-head">
          <div>
            <Reveal><span className="eyebrow">Formatos de Atendimento</span></Reveal>
            <Reveal delay={60}>
              <h2 className="section-title" style={{ marginTop: 16 }}>
                Quatro formas. Um único <em>padrão</em>.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={120}>
            <p className="section-lede">Você escolhe onde quer treinar, e o professor vai até você com todo o protocolo e os equipamentos necessários.
Sem perda de tempo, sem enrolação e sem “ginástica de marketing”.
            </p>
          </Reveal>
        </div>

        <Reveal>
          <div className="formas-grid">
            {FORMAS.map((f) =>
            <div className="forma" key={f.n}>
                <span className="forma-num">{f.n} / 04</span>
                <h3 className="forma-title">{f.title}</h3>
                <p className="forma-desc">{f.desc}</p>
                <div className="forma-icon">{f.icon}</div>
              </div>
            )}
          </div>
        </Reveal>

        <Reveal delay={120}>
          <div className="objetivos">
            <div className="objetivos-label">
              Para todos os <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>objetivos</em>.
            </div>
            <div className="obj-pills">
              {OBJETIVOS.map((o) => <span key={o} className="obj-pill">{o}</span>)}
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

// ---------- PROFESSORES ----------
function Professores({ onNav, onOpenProfile }) {
  return (
    <section className="profs" id="professores" data-screen-label="05 Professores">
      <div className="wrap">
        <div className="section-head">
          <div>
            <Reveal><span className="eyebrow">Nossos Professores</span></Reveal>
            <Reveal delay={60}>
              <h2 className="section-title" style={{ marginTop: 16 }}>
                Quem vai <em>te treinar</em>.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={120}>
            <p className="section-lede">
              Um time pequeno, selecionado a dedo. Cada professor é referência em seu campo — de hipertrofia avançada a funcional para qualidade de vida.
            </p>
          </Reveal>
        </div>

        <div className="profs-grid">
          {PROFS.map((p, i) =>
          <Reveal key={p.id} delay={i * 80}>
              <article className="prof-card">
                <div className="prof-media">
                  {p.src ?
                <Placeholder src={p.src} alt={p.name} /> :
                <Placeholder label={p.photo} corner={`prof.${p.id}.jpg`} />}
                  <span className="prof-tag">{p.tag}</span>
                </div>
                <div className="prof-body">
                  <div className="prof-name">
                    <span className="serif">{p.name}</span>
                    <span className="idx">/ 0{i + 1}</span>
                  </div>
                  <div className="prof-spec">{p.spec}</div>
                  <p className="prof-desc">{p.desc}</p>
                  <div className="prof-actions">
                    <button className="btn btn-ghost" onClick={() => onOpenProfile(p.id)}>
                      Ver perfil
                      <span className="arrow"><Icon.Arrow size={14} /></span>
                    </button>
                    <a
                    className="btn btn-whats"
                    href={whatsLink(p.whats, p.name)}
                    target="_blank"
                    rel="noopener noreferrer">
                    
                      <Icon.Whats /> WhatsApp
                    </a>
                  </div>
                </div>
              </article>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

// ---------- DIFERENCIAIS ----------
function Diferenciais() {
  return (
    <section className="dif" id="diferenciais" data-screen-label="06 Diferenciais">
      <div className="wrap">
        <div className="section-head">
          <div>
            <Reveal><span className="eyebrow">Diferenciais</span></Reveal>
            <Reveal delay={60}>
              <h2 className="section-title" style={{ marginTop: 16 }}>
                O que faz a gente ser <em>diferente</em>.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={120}>
            <p className="section-lede">
              Não somos uma franquia. Não somos um marketplace. Somos um pequeno time de professores que entrega atendimento premium, com a constância de quem mora e respira o Morumbi.
            </p>
          </Reveal>
        </div>

        <Reveal>
          <div className="dif-grid">
            {DIFERENCIAIS.map((d) =>
            <div className="dif-item" key={d.n}>
                <span className="dif-num">{d.n} / 06</span>
                <h3 className="dif-title">{d.t}</h3>
              </div>
            )}
          </div>
        </Reveal>
      </div>
    </section>);

}

// ---------- CONTATO ----------
function Contato() {
  const [tipo, setTipo] = useState('aluno');
  const [form, setForm] = useState({ nome: '', telefone: '', email: '', regiao: '', mensagem: '' });
  const [sent, setSent] = useState(false);
  const [error, setError] = useState('');

  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    if (!form.nome.trim() || !form.telefone.trim()) {
      setError('Preencha pelo menos nome e telefone.');
      return;
    }
    setError('');
    setSent(true);
  };

  return (
    <section id="contato" className="contato" data-screen-label="07 Contato">
      <div className="wrap">
        <div className="contato-grid">
          <div className="contato-side">
            <Reveal><span className="eyebrow">Contato</span></Reveal>
            <Reveal delay={60}>
              <h2 className="section-title" style={{ marginTop: 16 }}>
                Vamos <em>conversar</em>.
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <p className="section-lede" style={{ marginTop: 24 }}>
                Mande uma mensagem rápida. A gente retorna pelo telefone informado em até <strong style={{ color: 'var(--fg)' }}>24 horas úteis</strong> — para encaixar você na agenda de um dos professores ou para conversar sobre fazer parte do nosso time.
              </p>
            </Reveal>
          </div>

          <Reveal delay={120}>
            <form className="contato-form" onSubmit={submit}>
              {!sent ?
              <>
                  <div className="cf-tabs" role="tablist">
                    <button
                    type="button"
                    role="tab"
                    aria-selected={tipo === 'aluno'}
                    className={`cf-tab ${tipo === 'aluno' ? 'on' : ''}`}
                    onClick={() => setTipo('aluno')}>
                    
                      Quero treinar
                    </button>
                    <button
                    type="button"
                    role="tab"
                    aria-selected={tipo === 'professor'}
                    className={`cf-tab ${tipo === 'professor' ? 'on' : ''}`}
                    onClick={() => setTipo('professor')}>
                    
                      Sou professor
                    </button>
                  </div>

                  <div className="cf-row">
                    <label className="cf-field">
                      <span>Nome</span>
                      <input type="text" value={form.nome} onChange={set('nome')} placeholder="Seu nome completo" required />
                    </label>
                  </div>

                  <div className="cf-row two">
                    <label className="cf-field">
                      <span>Telefone / WhatsApp</span>
                      <input type="tel" value={form.telefone} onChange={set('telefone')} placeholder="(11) 90000-0000" required />
                    </label>
                    <label className="cf-field">
                      <span>E-mail <i>(opcional)</i></span>
                      <input type="email" value={form.email} onChange={set('email')} placeholder="seu@email.com" />
                    </label>
                  </div>

                  {tipo === 'aluno' ?
                <>
                      <div className="cf-row">
                        <label className="cf-field">
                          <span>Bairro / Região</span>
                          <input type="text" value={form.regiao} onChange={set('regiao')} placeholder="Morumbi, Panamby, Vila Andrade…" />
                        </label>
                      </div>
                      <div className="cf-row">
                        <label className="cf-field">
                          <span>Conte rapidamente seu objetivo <i>(opcional)</i></span>
                          <textarea rows="3" value={form.mensagem} onChange={set('mensagem')} placeholder="Ex: quero começar musculação, prefiro treinar em casa, manhã ou início de noite…" />
                        </label>
                      </div>
                    </> :

                <>
                      <div className="cf-row">
                        <label className="cf-field">
                          <span>CREF / Especialidade</span>
                          <input type="text" value={form.regiao} onChange={set('regiao')} placeholder="Ex: CREF 000000-G/SP · Funcional, hipertrofia…" />
                        </label>
                      </div>
                      <div className="cf-row">
                        <label className="cf-field">
                          <span>Conte um pouco do seu trabalho <i>(opcional)</i></span>
                          <textarea rows="3" value={form.mensagem} onChange={set('mensagem')} placeholder="Quanto tempo de atuação, perfil de aluno, regiões em que atende…" />
                        </label>
                      </div>
                    </>
                }

                  {error && <div className="cf-error">{error}</div>}

                  <div className="cf-actions">
                    <button type="submit" className="btn btn-primary">
                      Enviar mensagem
                      <span className="arrow"><Icon.Arrow size={14} /></span>
                    </button>
                    <span className="cf-note">A gente retorna em até 24h úteis.</span>
                  </div>
                </> :

              <div className="cf-success">
                  <div className="cf-success-mark">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M20 6L9 17l-5-5" />
                    </svg>
                  </div>
                  <h3 className="serif">Mensagem enviada.</h3>
                  <p>Obrigado, {form.nome.split(' ')[0]}. Retornamos no telefone informado em até 24 horas úteis.</p>
                  <button type="button" className="btn btn-ghost" onClick={() => {setSent(false);setForm({ nome: '', telefone: '', email: '', regiao: '', mensagem: '' });}}>
                    Enviar outra mensagem
                  </button>
                </div>
              }
            </form>
          </Reveal>
        </div>
      </div>
    </section>);

}

// ---------- CTA FINAL ----------
function CtaFinal() {
  return (
    <section className="cta-final" data-screen-label="07 CTA">
      <div className="cta-final-inner">
        <Reveal><span className="eyebrow">Comece agora</span></Reveal>
        <Reveal delay={60}>
          <h2>
            Treine com quem leva a <em>sua evolução</em> a sério.
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <p style={{ fontWeight: "400", width: "719px" }}>Mande uma mensagem no WhatsApp do professor.
Converse sobre o seu objetivo, seu horário e o melhor
formato de atendimento para você.
Sem compromisso.</p>
        </Reveal>
      </div>
    </section>);
}

// ---------- HOME composition ----------
function Home({ onNav, onOpenProfile }) {
  return (
    <main data-screen-label="HOME">
      <Hero onNav={onNav} />
      <Sobre />
      <Bairros />
      <Formas />
      <Professores onNav={onNav} onOpenProfile={onOpenProfile} />
      <Diferenciais />
      <CtaFinal />
    </main>);

}

Object.assign(window, { Home, PROFS, BAIRROS, FORMAS, OBJETIVOS, Reveal });