/* eslint-disable */
/* PERSONAL TRAINER MORUMBI — Perfil em modal card */

const PROFILES = {
  fabio: {
    name: 'Fábio T.',
    spec: 'Musculação · Alta Performance',
    whats: '5511947849974',
    avatar: 'FÁBIO T.',
    avatarSrc: 'images/fabio/perfil.jpg',
    sobre: [
      'Atleta profissional com  anos de experiência em musculação e histórico em competições. Foco em alunos que buscam hipertrofia, ganho de massa muscular, performance física, treinos intensos e alta intensidade.',
      'Perfil voltado para homens, atletas, pessoas que querem treinar pesado e alunos focados em transformação física real. Metodologia focada em resultado.',
    ],
    foco: [
      'Hipertrofia',
      'Ganho de massa muscular',
      'Performance física',
      'Treinos intensos',
      'Evolução muscular',
      'Alta intensidade',
    ],
    perfil: [
      'Homens',
      'Atletas',
      'Quem quer treinar pesado',
      'Foco em transformação real',
    ],
    atendimento: ['Condomínios', 'Academias', 'Residências', 'Morumbi e região'],
    album: [
      { src: 'images/fabio/01.jpeg' },
      { src: 'images/fabio/02.jpeg' },
      { src: 'images/fabio/03.jpeg' },
      { src: 'images/fabio/04.jpeg' },
      { src: 'images/fabio/05.jpeg' },
      { src: 'images/fabio/06.jpeg' },
      { src: 'images/fabio/07.jpeg' },
      { src: 'images/fabio/08.jpeg' },
    ],
  },
  raquel: {
    name: 'Raquel V.',
    spec: 'Musculação · Saúde · Qualidade de Vida',
    whats: '5511953380917',
    avatar: 'RAQUEL V.',
    avatarSrc: 'images/raquel/perfil.png',
    sobre: [
      'Professora especializada em saúde, qualidade de vida e treinamento de musculação. Atendimento personalizado e humanizado para mulheres, melhor idade, alunos iniciantes e quem busca condicionamento físico com segurança.',
      'Especialidades em Musculação, pilates solo, fortalecimento muscular, mobilidade, alongamento e saúde preventiva. Treinos adaptados ao perfil do aluno, com foco em saúde e bem-estar.',
    ],
    foco: [
      'Musculação',
      'Pilates solo',
      'Funcional',
      'Mobilidade',
      'Alongamento',
      'Saúde preventiva',
    ],
    perfil: [
      'Mulheres',
      'Melhor idade',
      'Alunos iniciantes',
      'Foco em qualidade de vida',
    ],
    atendimento: ['Condomínios', 'Residências', 'Atendimento domiciliar', 'Morumbi e região'],
    album: [
      { src: 'images/raquel/01.png' },
      { src: 'images/raquel/02.jpg' },
      { src: 'images/raquel/03.jpg' },
      { src: 'images/raquel/04.png' },
      { src: 'images/raquel/05.png' },
      { src: 'images/raquel/06.png' },
      { src: 'images/raquel/07.png' },
      { src: 'images/raquel/08.png' },
    ],
  },
  luan: {
    name: 'Luan Espindola',
    spec: 'Personal Fight · Jiu-Jitsu · Muay Thai',
    whats: '5511974388669',
    avatar: 'LUAN E.',
    avatarSrc: 'images/luan/perfil.png',
    sobre: [
      'Professor especializado em <strong>Personal Fight, Jiu-Jitsu e Muay Thai</strong>. Atendimento personalizado e humanizado para alunos que buscam condicionamento físico, defesa pessoal, disciplina e evolução técnica com segurança.',
      'Especialidades em artes marciais, fortalecimento muscular, preparação física, mobilidade, defesa pessoal e treinamento funcional aplicado à luta. Treinos adaptados ao perfil do aluno, respeitando objetivos, idade e nível de experiência.',
    ],
    foco: [
      'Jiu-Jitsu',
      'Muay Thai',
      'Defesa pessoal',
      'Fortalecimento muscular',
      'Condicionamento físico',
      'Mobilidade e resistência',
    ],
    perfil: [
      'Jovens',
      'Adultos',
      'Mulheres',
      'Crianças',
      'Iniciantes',
      'Foco em defesa pessoal',
    ],
    atendimento: ['Condomínios', 'Residências', 'Atendimento domiciliar', 'Morumbi e região', 'Escolas', 'Academias e espaços particulares'],
    album: [
      { src: 'images/luan/01.jpg' },
      { src: 'images/luan/02.jpg' },
      { src: 'images/luan/03.jpg' },
      { src: 'images/luan/04.jpg' },
      { src: 'images/luan/05.jpg' },
      { src: 'images/luan/06.jpg' },
      { src: 'images/luan/07.jpg' },
      { src: 'images/luan/08.jpg' },
    ],
  },
};

function ProfileModal({ id, onClose }) {
  const [mounted, setMounted] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (id) {
      setMounted(true);
      // double-rAF so the open class triggers a real transition
      requestAnimationFrame(() => requestAnimationFrame(() => setOpen(true)));
      document.body.style.overflow = 'hidden';
    } else {
      setOpen(false);
      const t = setTimeout(() => setMounted(false), 350);
      document.body.style.overflow = '';
      return () => clearTimeout(t);
    }
    return () => { document.body.style.overflow = ''; };
  }, [id]);

  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    if (id) window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [id, onClose]);

  if (!mounted) return null;
  const p = PROFILES[id] || PROFILES.fabio;

  return (
    <div className={`modal-backdrop ${open ? 'open' : ''}`} onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal-card" role="dialog" aria-modal="true" aria-label={`Perfil de ${p.name}`}>

        <button className="mc-share" onClick={(e) => e.preventDefault()}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
            <path d="M8.6 13.5L15.4 17.5M15.4 6.5L8.6 10.5"/>
          </svg>
          Compartilhar
        </button>

        <button className="mc-close" onClick={onClose} aria-label="Fechar">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
            <path d="M6 6l12 12M6 18L18 6"/>
          </svg>
        </button>

        {/* Header */}
        <div className="mc-head">
          <div className="mc-avatar">
            {p.avatarSrc
              ? <img src={p.avatarSrc} alt={p.name} />
              : <span className="lbl">{p.avatar}</span>}
          </div>
          <div className="mc-meta">
            <div className="mc-name">{p.name}</div>
            <div className="mc-role">{p.spec}</div>
            <span className="mc-status">
              <span className="dot"></span> Online agora
            </span>
          </div>
        </div>

        {/* Sobre mim */}
        <div className="mc-section">
          <h3 className="mc-h">Sobre mim</h3>
          <div className="mc-body" dangerouslySetInnerHTML={{ __html: p.sobre.map(s => `<p>${s}</p>`).join('') }} />
        </div>

        {/* Foco + Perfil aluno */}
        <div className="mc-section">
          <div className="mc-cols">
            <div className="mc-col">
              <h5>Foco do treino</h5>
              <ul>{p.foco.map(f => <li key={f}>{f}</li>)}</ul>
            </div>
            <div className="mc-col">
              <h5>Perfil ideal</h5>
              <ul>{p.perfil.map(f => <li key={f}>{f}</li>)}</ul>
            </div>
          </div>
        </div>

        {/* Atendimento */}
        <div className="mc-section">
          <h3 className="mc-h">Atendimento</h3>
          <div className="mc-pills">
            {p.atendimento.map(a => (
              <span key={a} className="mc-pill"><span className="d"></span>{a}</span>
            ))}
          </div>
        </div>

        {/* Album */}
        <div className="mc-section">
          <h3 className="mc-h">
            <span className="ico">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="5" width="18" height="14" rx="2"/>
                <circle cx="9" cy="11" r="1.5"/>
                <path d="M21 16l-5-5-9 8"/>
              </svg>
            </span>
            Álbum de fotos
          </h3>
          <div className="mc-album">
            {p.album.map((item, i) => {
              const src = typeof item === 'object' ? item.src : null;
              const label = typeof item === 'object' ? null : item;
              return (
                <div key={i} className="mc-thumb">
                  {src
                    ? <img src={src} alt={`Foto ${i + 1} — ${p.name}`} />
                    : <span className="num">{label}</span>}
                </div>
              );
            })}
          </div>
        </div>

        {/* CTA footer */}
        <div className="mc-foot">
          <a
            className="mc-btn mc-btn-whats"
            href={`https://wa.me/${p.whats}?text=${encodeURIComponent(`Olá ${p.name.split(' ')[0]}, vim pelo site Personal Trainer Morumbi e gostaria de conversar sobre treinos.`)}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            <Icon.Whats /> Falar com {p.name.split(' ')[0]} no WhatsApp
          </a>
          <button className="mc-btn mc-btn-ghost" onClick={onClose}>
            Fechar
          </button>
        </div>
      </div>
    </div>
  );
}

// ---------- Professores listing (full page) ----------
function ProfessoresPage({ onNav, onOpenProfile }) {
  return (
    <main className="profile-page" data-screen-label="PROFESSORES">
      <section style={{ padding: '40px 0 24px' }}>
        <div className="wrap">
          <a className="back-link" href="#" onClick={(e)=>{ e.preventDefault(); onNav('home'); }}>
            <Icon.ArrowLeft /> Voltar para home
          </a>
          <div className="section-head" style={{ marginTop: 32 }}>
            <div>
              <Reveal><span className="eyebrow">Nossos Professores</span></Reveal>
              <Reveal delay={60}>
                <h1 className="section-title" style={{ marginTop: 16, fontSize: 'clamp(48px, 7vw, 96px)' }}>
                  Quem vai <em>te treinar</em>.
                </h1>
              </Reveal>
            </div>
            <Reveal delay={120}>
              <p className="section-lede">
                Um time pequeno, selecionado a dedo. Cada professor é referência em seu campo — escolha o perfil que combina com o seu objetivo e converse direto no WhatsApp.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      <section style={{ paddingTop: 0, paddingBottom: 100 }}>
        <div className="wrap">
          <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>
    </main>
  );
}

Object.assign(window, { ProfileModal, ProfessoresPage, PROFILES });