// sections-1.jsx — Nav, Hero, Sobre, Tratamentos, Tour

const WA_URL = "https://wa.me/5538999205392?text=Ol%C3%A1%21%20Gostaria%20de%20agendar%20uma%20consulta%20no%20Instituto%20H%C3%A9lio%20Chagas.";

const NAV_LINKS = [
  { href: "#sobre", label: "A clínica" },
  { href: "#tratamentos", label: "Tratamentos" },
  { href: "#tour", label: "Espaço" },
  { href: "#depoimentos", label: "Depoimentos" },
  { href: "#faq", label: "Perguntas" },
  { href: "#contato", label: "Contato" },
];

function Nav() {
  const [drawer, setDrawer] = React.useState(false);
  React.useEffect(() => {
    if (drawer) document.body.style.overflow = 'hidden';
    else document.body.style.overflow = '';
    return () => { document.body.style.overflow = ''; };
  }, [drawer]);
  return (
    <header className="nav">
      <div className="container nav-inner">
        <a href="#top" className="nav-logo" aria-label="Instituto Hélio Chagas">
          <img src="assets/logo-ihc.png" alt="Instituto Hélio Chagas de Odontologia" />
        </a>
        <nav>
          <ul className="nav-menu">
            {NAV_LINKS.map(l => (
              <li key={l.href}><a href={l.href}>{l.label}</a></li>
            ))}
          </ul>
        </nav>
        <a className="btn btn-primary" href={WA_URL} target="_blank" rel="noopener">
          <Icon.WhatsApp className="btn-icon" /> Agendar pelo WhatsApp
        </a>
        <button className="nav-mobile" aria-label="Menu" onClick={() => setDrawer(d => !d)}>
          {drawer ? <Icon.Close /> : <Icon.Menu />}
        </button>
      </div>
      <div className={`nav-drawer${drawer ? ' open' : ''}`}>
        <ul>
          {NAV_LINKS.map(l => (
            <li key={l.href}><a href={l.href} onClick={() => setDrawer(false)}>{l.label}</a></li>
          ))}
        </ul>
        <a className="btn btn-primary" href={WA_URL} target="_blank" rel="noopener">
          <Icon.WhatsApp className="btn-icon" /> Falar no WhatsApp
        </a>
      </div>
    </header>
  );
}

function Hero({ layout }) {
  const cls = layout === 'centered'
    ? 'hero hero--centered'
    : layout === 'fullbleed'
      ? 'hero hero--fullbleed'
      : 'hero';
  return (
    <section className={cls} id="top">
      <div className="container">
        <div className="hero-split">
          <div>
            <Eyebrow>Odontologia · Brasília de Minas · MG</Eyebrow>
            <h1 style={{ marginTop: 28 }}>
              Cuidado próximo,<br/>
              técnica <em>de uma vida</em><br/>
              dedicada a sorrisos.
            </h1>
            <p className="lede">
              No Instituto Hélio Chagas, cada paciente é recebido com tempo, atenção
              e a tranquilidade de uma equipe que acompanha gerações inteiras de famílias
              do norte de Minas.
            </p>
            <div className="hero-actions">
              <a className="btn btn-primary" href={WA_URL} target="_blank" rel="noopener">
                <Icon.WhatsApp className="btn-icon" /> Conversar agora
              </a>
              <a className="btn btn-ghost" href="#tratamentos">
                Ver tratamentos <Icon.Arrow className="btn-icon" />
              </a>
              <span className="since">Desde 1993</span>
            </div>
          </div>
          <div className="hero-image-wrap">
            <div className="hero-photo">
              <div className="hero-photo-bg" aria-hidden="true"></div>
              <img
                src="assets/familia-ihc.png"
                alt="Dr. Hélio Chagas e os três filhos, todos dentistas do Instituto Hélio Chagas"
              />
              <div className="hero-photo-caption">
                <span className="dot"></span>
                Uma família dedicada a sorrisos · Brasília de Minas
              </div>
            </div>
            <div className="hero-meta">
              <div className="stat"><b>33</b><span>anos cuidando<br/>de famílias</span></div>
              <div className="stat"><b>14k+</b><span>pacientes<br/>atendidos</span></div>
              <div className="stat"><b>4</b><span>especialistas<br/>na equipe</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Sobre() {
  return (
    <section className="block first" id="sobre">
      <div className="container">
        <div className="section-head">
          <div>
            <Eyebrow>A clínica</Eyebrow>
            <h2 style={{ marginTop: 16 }}>Uma odontologia<br/>com <em>tecnologia e qualidade.</em></h2>
          </div>
          <p>
            Acreditamos que tratar um sorriso é tratar uma pessoa inteira — com sua história,
            seus medos e seu tempo. Por isso, cada consulta no Instituto começa pela escuta
            de cada um.
          </p>
        </div>

        <div className="about-grid">
          <div className="about-text">
            <p className="lead">
              Fundado em 1993 pelo Dr. Hélio Chagas, o Instituto nasceu da convicção de
              que <em>odontologia humanizada</em> e excelência técnica não são caminhos
              separados — e sim, o mesmo caminho.
            </p>
            <p style={{ marginTop: 24 }}>
              Hoje, três gerações da mesma família já passaram pelas nossas cadeiras.
              Os pais que trouxemos para o aparelho na adolescência agora marcam consultas
              para os próprios filhos. É isso que move a gente: continuidade, confiança e
              o privilégio de fazer parte da rotina de quem nos escolhe.
            </p>
            <p style={{ marginTop: 18 }}>
              Nossa equipe reúne especialistas em todas as áreas da odontologia —
              de ortodontia a implantes, de estética a cirurgia complexa — para que
              cada paciente encontre tudo o que precisa em um só lugar, com um único
              padrão de cuidado.
            </p>
            <div className="about-signature">
              <div className="swatch"><img src="assets/dr-helio-avatar.jpg" alt="Dr. Hélio Chagas" /></div>
              <div className="meta">
                <b>Dr. Hélio Chagas</b>
                Diretor clínico · CRO-MG 19806
              </div>
            </div>
          </div>
          <div className="about-photo">
            <ImgPlaceholder ratio="portrait" src="assets/dr-helio-chagas.jpg" alt="Dr. Hélio Chagas Mendes, diretor clínico do Instituto Hélio Chagas" />
          </div>
        </div>

        <div className="about-pillars">
          <div>
            <h4>Tempo <em>de verdade</em></h4>
            <p>Consultas de 50 a 60 minutos. Sem corre-corre, sem encaixe que atropela a sua avaliação.</p>
          </div>
          <div>
            <h4>Tecnologia <em>de ponta</em></h4>
            <p>Escâner intraoral, fresadora de porcelana e planejamento digital trabalham com rapidez, para o seu maior conforto.</p>
          </div>
          <div>
            <h4>Família <em>por inteiro</em></h4>
            <p>Da primeira consulta da criança aos implantes do avô, todos cuidados pela mesma equipe.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

const TRATAMENTOS = [
  { n: "01", t: "Clínica geral", em: "& prevenção", d: "Limpeza, check-up, restaurações e o acompanhamento de rotina que evita problemas maiores." },
  { n: "02", t: "Ortodontia", em: "", d: "Aparelhos fixos, alinhadores transparentes e ortodontia preventiva para crianças e adultos." },
  { n: "03", t: "Implantes", em: "dentários", d: "Reabilitação total ou parcial com implantes osseointegrados e planejamento digital." },
  { n: "04", t: "Estética", em: "do sorriso", d: "Clareamento, lentes de contato e facetas em cerâmica feitas sob medida." },
  { n: "05", t: "Endodontia", em: "", d: "Tratamento de canal com anestesia eficaz e tecnologia de microscopia." },
  { n: "06", t: "Periodontia", em: "", d: "Cuidado da gengiva, raspagem e tratamento de doenças periodontais." },
  { n: "07", t: "Cirurgia", em: "oral", d: "Extrações, sisos inclusos e pequenas cirurgias com tudo o que ambiente cirúrgico exige." },
  { n: "08", t: "Próteses", em: "dentárias", d: "Próteses fixas, removíveis e sobre implantes feitas com laboratório próprio." },
  { n: "09", t: "Harmonização", em: "orofacial", d: "Procedimentos seguros para equilibrar a expressão do rosto e do sorriso." },
  { n: "10", t: "Documentação", em: "& tomografia", d: "Documentação e tomografia integradas com escâner intraoral, com laudo no mesmo dia." },
];

function Tratamentos() {
  return (
    <section className="block" id="tratamentos">
      <div className="container">
        <div className="section-head">
          <div>
            <Eyebrow>Tratamentos</Eyebrow>
            <h2 style={{ marginTop: 16 }}>Tudo o que sua família<br/>precisa, <em>em um só lugar.</em></h2>
          </div>
          <p>
            Dez especialidades sob o mesmo teto, integradas em um único plano de cuidado.
          </p>
        </div>

        <div className="treat-grid">
          {TRATAMENTOS.map((it, i) => (
            <article key={i} className="treat-card">
              <div className="num">{it.n}</div>
              <h3>{it.t}{it.em && <> <em>{it.em}</em></>}</h3>
              <p>{it.d}</p>
              <div className="arrow">
                <span>Saber mais</span>
                <Icon.Arrow style={{ width: 14, height: 14 }} />
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

const GALERIA = [
  { src: "recepcao-clinica-odontologica-brasilia-de-minas.jpg", w: 1200, h: 800, ar: 1.5,
    alt: "Recepção do Instituto Hélio Chagas de Odontologia em Brasília de Minas" },
  { src: "sala-de-espera-instituto-helio-chagas-odontologia.jpg", w: 800, h: 1200, ar: 0.667,
    alt: "Sala de espera da clínica odontológica Instituto Hélio Chagas" },
  { src: "consultorio-odontologico-instituto-helio-chagas.jpg", w: 1200, h: 800, ar: 1.5,
    alt: "Consultório odontológico com luz natural no Instituto Hélio Chagas" },
  { src: "hall-de-entrada-clinica-odontologica-brasilia-de-minas.jpg", w: 800, h: 1200, ar: 0.667,
    alt: "Hall de entrada da clínica odontológica em Brasília de Minas, MG" },
  { src: "laboratorio-de-proteses-instituto-helio-chagas.jpg", w: 1200, h: 800, ar: 1.5,
    alt: "Laboratório de próteses próprio com fresadora de porcelana e planejamento digital" },
  { src: "espaco-cafe-recepcao-instituto-helio-chagas.jpg", w: 800, h: 1200, ar: 0.667,
    alt: "Espaço de café cortesia na recepção do Instituto Hélio Chagas" },
];

function Tour() {
  // -1 = fechado. O <dialog> nativo ja da backdrop, trava de scroll e ESC.
  const [aberta, setAberta] = React.useState(-1);
  const dlg = React.useRef(null);

  React.useEffect(() => {
    const d = dlg.current;
    if (!d) return;
    if (aberta >= 0 && !d.open) d.showModal();
    if (aberta < 0 && d.open) d.close();
  }, [aberta]);

  return (
    <section className="block" id="tour">
      <div className="container">
        <div className="section-head">
          <div>
            <Eyebrow>Nosso espaço</Eyebrow>
            <h2 style={{ marginTop: 16 }}>Um lugar <em>para respirar</em><br/>antes de abrir a boca.</h2>
          </div>
          <p>
            Sala de espera com luz natural, salas de atendimento individuais e um
            ambiente pensado para que você se sinta em casa.
          </p>
        </div>

        <div className="tour-grid">
          {GALERIA.map((g, i) => (
            <figure key={g.src} style={{ '--ar': g.ar }}>
              <button type="button" onClick={() => setAberta(i)} aria-label={`Ampliar foto: ${g.alt}`}>
                <img src={`assets/${g.src}`} alt={g.alt} loading="lazy" width={g.w} height={g.h} />
              </button>
            </figure>
          ))}
        </div>

        <dialog
          ref={dlg}
          className="lightbox"
          onClose={() => setAberta(-1)}
          onClick={e => { if (e.target === dlg.current) setAberta(-1); }}
        >
          {aberta >= 0 && (
            <React.Fragment>
              <img src={`assets/${GALERIA[aberta].src}`} alt={GALERIA[aberta].alt} />
              <button type="button" className="lightbox-close" onClick={() => setAberta(-1)} aria-label="Fechar">
                <Icon.Close />
              </button>
            </React.Fragment>
          )}
        </dialog>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Sobre, Tratamentos, Tour, WA_URL, NAV_LINKS });