// sections-2.jsx — Antes&Depois, Depoimentos, FAQ, Localização, Footer, WhatsApp

const CASOS = [
  {
    src: "antes-e-depois-reabilitacao-do-sorriso-instituto-helio-chagas.jpg",
    w: 787, h: 1400,
    caso: "Caso 01",
    tratamento: "Reabilitação do sorriso",
    alt: "Antes e depois de reabilitação do sorriso em paciente do Instituto Hélio Chagas",
  },
  {
    src: "antes-e-depois-reabilitacao-oral-instituto-helio-chagas.jpg",
    w: 1049, h: 1280,
    caso: "Caso 02",
    tratamento: "Reabilitação oral",
    alt: "Antes e depois de reabilitação oral em paciente do Instituto Hélio Chagas",
  },
];

function AntesDepois() {
  return (
    <section className="block" id="antes-depois">
      <div className="container">
        <div className="section-head">
          <div>
            <Eyebrow>Antes & depois</Eyebrow>
            <h2 style={{ marginTop: 16 }}>Resultados <em>reais</em>,<br/>compartilhados com permissão.</h2>
          </div>
          <p>
            Casos reais de pacientes do Instituto, publicados com autorização expressa,
            conforme a Resolução CFO-118/2012 sobre publicidade odontológica.
          </p>
        </div>

        <div className="casos-wrap">
          {CASOS.map(c => (
            <figure key={c.src} className="caso">
              <div className="caso-foto">
                <img src={`assets/${c.src}`} alt={c.alt} loading="lazy" width={c.w} height={c.h} />
                <span className="tag tag-antes">Antes</span>
                <span className="tag tag-depois">Depois</span>
              </div>
              <figcaption>
                <b>{c.caso}</b>
                <span>{c.tratamento}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

const DEPOIMENTOS = [
  {
    quote: "Trouxe meus pais e meus filhos. Em uma clínica só, três gerações sendo cuidadas com a mesma atenção. Não troco por nada.",
    name: "Marina S.",
    meta: "Paciente desde 2014",
    av: "M",
  },
  {
    quote: "Eu tinha pavor de dentista, e isso ficou no passado. A equipe explica tudo, com calma, sem te empurrar nada.",
    name: "Rafael T.",
    meta: "Paciente desde 2019",
    av: "R",
  },
  {
    quote: "Coloquei dois implantes e o planejamento foi tão claro que parecia que eu já sabia o resultado antes de começar.",
    name: "Beatriz O.",
    meta: "Paciente desde 2022",
    av: "B",
  },
];

function Depoimentos() {
  return (
    <section className="block" id="depoimentos">
      <div className="container">
        <div className="section-head">
          <div>
            <Eyebrow>Depoimentos</Eyebrow>
            <h2 style={{ marginTop: 16 }}>Histórias <em>reais</em><br/>de quem confia em nós.</h2>
          </div>
          <p>
            Algumas das mensagens que mais nos emocionam vêm de famílias que estão
            com a gente há mais de uma década.
          </p>
        </div>

        <div className="testi-grid">
          {DEPOIMENTOS.map((d, i) => (
            <article key={i} className="testi">
              <div className="quote-mark">"</div>
              <p>{d.quote}</p>
              <div className="author">
                <div className="av">{d.av}</div>
                <div className="meta">
                  <b>{d.name}</b>
                  <span>{d.meta}</span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

const FAQS = [
  {
    q: "Vocês atendem convênios?",
    a: "Não. O Instituto Hélio Chagas atende exclusivamente como clínica particular. Trabalhamos com PIX, cartão de crédito e parcelamento — fale conosco para montarmos o plano financeiro do seu tratamento.",
  },
  {
    q: "Como funciona a primeira consulta?",
    a: "A primeira visita é uma avaliação completa: conversamos sobre seu histórico, examinamos sua boca e, se necessário, fazemos as imagens no centro de radiologia da própria clínica. Você sai com um plano de tratamento por escrito e os valores discutidos antes de qualquer procedimento.",
  },
  {
    q: "Vocês atendem crianças? A partir de que idade?",
    a: "Sim. A primeira consulta odontopediátrica pode ser feita já a partir do nascimento dos primeiros dentinhos (6 a 12 meses). Recebemos os pequenos com tempo, sem corre-corre e sem trauma — nossa odontopediatra é especialista em construir essa relação com calma.",
  },
  {
    q: "Onde fica a clínica?",
    a: "Estamos no Centro de Brasília de Minas, na Rua Coronel Sansão, 75 — em ponto de fácil acesso na cidade. Atendemos pacientes de Brasília de Minas e de toda a região do norte de Minas.",
  },
  {
    q: "Posso parcelar os tratamentos?",
    a: "Sim. Trabalhamos com pagamento via PIX, cartão de crédito em até 12x e, para tratamentos mais longos como ortodontia ou implantes, montamos um plano de pagamento personalizado.",
  },
  {
    q: "É possível fazer videoconsulta antes de ir até a clínica?",
    a: "Para alguns casos, sim — especialmente para avaliações iniciais de ortodontia e estética. Mande uma mensagem no WhatsApp explicando seu caso e a recepção te orienta sobre o melhor formato.",
  },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="block" id="faq">
      <div className="container">
        <div className="section-head">
          <div>
            <Eyebrow>Perguntas frequentes</Eyebrow>
            <h2 style={{ marginTop: 16 }}>O que costumam<br/>nos <em>perguntar.</em></h2>
          </div>
          <p>
            Se a sua dúvida não está aqui, é só mandar uma mensagem no WhatsApp.
            Respondemos rápido, sem robô.
          </p>
        </div>

        <div className="faq">
          {FAQS.map((f, i) => (
            <div key={i} className={`faq-item${open === i ? ' open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="plus" aria-hidden="true"></span>
              </button>
              <div className="faq-a"><div className="faq-a-inner">{f.a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const ENDERECO = "Instituto Hélio Chagas de Odontologia, R. Cel. Sansão, 75 - Centro, Brasília de Minas - MG, 39330-000";

// ponytail: coordenada tirada da geometria da Rua Coronel Sansão no OpenStreetMap.
// O OSM não tem o número 75 nem a clínica cadastrados, então o pino do mapa é
// aproximado. Para deixar exato: no Google Maps, botão direito sobre a clínica →
// clicar nas coordenadas (copia) → substituir os dois números abaixo.
const COORD = { lat: -16.2099, lon: -44.4333 };

// OpenStreetMap embed: gratuito, sem chave de API e sem biblioteca.
const MAPA_EMBED =
  `https://www.openstreetmap.org/export/embed.html` +
  `?bbox=${COORD.lon - 0.004},${COORD.lat - 0.003},${COORD.lon + 0.004},${COORD.lat + 0.003}` +
  `&layer=mapnik&marker=${COORD.lat},${COORD.lon}`;

// Os botões de rota usam o endereço por extenso, não a coordenada: quem resolve o
// ponto é o próprio Google/Waze, que já têm a clínica cadastrada. No celular isso
// abre o app instalado.
const ROTA_GOOGLE = `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(ENDERECO)}`;
const ROTA_WAZE = `https://waze.com/ul?q=${encodeURIComponent(ENDERECO)}&navigate=yes`;

function Localizacao() {
  return (
    <section className="block" id="contato">
      <div className="container">
        <div className="section-head">
          <div>
            <Eyebrow>Onde estamos</Eyebrow>
            <h2 style={{ marginTop: 16 }}>Venha nos <em>conhecer.</em></h2>
          </div>
          <p>
            Estamos prontos para te receber. Antes da consulta, um cafezinho na recepção
            já está incluso.
          </p>
        </div>

        <div className="loc-grid">
          <div className="loc-info">
            <dl>
              <dt>Endereço</dt>
              <dd>
                R. Cel. Sansão, 75<br/>
                <small>Centro · Brasília de Minas · MG · 39330-000</small>
              </dd>

              <dt>Horário de funcionamento</dt>
              <dd>
                Segunda a sexta, 8h às 18h<br/>
                <small>Sábados e domingos: fechado</small>
              </dd>

              <dt>Contato</dt>
              <dd>
                WhatsApp: (38) 9 9920-5392<br/>
                <small>Telefone fixo: (38) 3231-1377</small>
              </dd>
            </dl>

            <div className="loc-cta">
              <a className="btn btn-primary" href={WA_URL} target="_blank" rel="noopener">
                <Icon.WhatsApp className="btn-icon" /> WhatsApp (38) 9 9920-5392
              </a>
              <a className="btn btn-ghost" href="tel:+553832311377">
                <Icon.Phone className="btn-icon" /> Ligar (38) 3231-1377
              </a>
            </div>
          </div>

          <div>
            <div className="loc-map">
              <iframe
                src={MAPA_EMBED}
                title="Mapa · Instituto Hélio Chagas, R. Cel. Sansão, 75 — Brasília de Minas, MG"
                loading="lazy"
              />
            </div>
            <div className="loc-map-cta">
              <a className="btn btn-primary" href={ROTA_GOOGLE} target="_blank" rel="noopener">
                <Icon.Pin className="btn-icon" /> Como chegar
              </a>
              <a className="btn btn-ghost" href={ROTA_WAZE} target="_blank" rel="noopener">
                Abrir no Waze <Icon.Arrow className="btn-icon" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot-top">
          <div className="brand">
            <h3>Instituto<br/><em>Hélio Chagas</em><br/>de Odontologia</h3>
            <p>
              Odontologia humanizada, técnica e completa para famílias do norte de Minas.
              Cuidando de quem você ama, no Centro de Brasília de Minas.
            </p>
          </div>
          <div>
            <h4>Tratamentos</h4>
            <ul>
              <li><a href="#tratamentos">Clínica geral</a></li>
              <li><a href="#tratamentos">Ortodontia</a></li>
              <li><a href="#tratamentos">Implantes</a></li>
              <li><a href="#tratamentos">Estética</a></li>
              <li><a href="#tratamentos">Cirurgia oral</a></li>
            </ul>
          </div>
          <div>
            <h4>Instituto</h4>
            <ul>
              <li><a href="#sobre">A clínica</a></li>
              <li><a href="#tour">Nosso espaço</a></li>
              <li><a href="#depoimentos">Depoimentos</a></li>
              <li><a href="#faq">Perguntas frequentes</a></li>
              <li><a href="#contato">Contato</a></li>
            </ul>
          </div>
          <div>
            <h4>Contato</h4>
            <ul>
              <li><a href={WA_URL} target="_blank" rel="noopener">WhatsApp (38) 9 9920-5392</a></li>
              <li><a href="tel:+553832311377">Telefone (38) 3231-1377</a></li>
              <li>R. Cel. Sansão, 75 · Centro</li>
              <li>Brasília de Minas · MG · 39330-000</li>
              <li className="foot-social" style={{ display: 'flex', gap: 8, marginTop: 10 }}>
                <a href="https://www.instagram.com/institutohc/" target="_blank" rel="noopener" aria-label="Instagram"><Icon.Instagram style={{ width: 20, height: 20 }} /></a>
                <a href="https://www.facebook.com/institutoheliochagas/" target="_blank" rel="noopener" aria-label="Facebook"><Icon.Facebook style={{ width: 20, height: 20 }} /></a>
              </li>
            </ul>
          </div>
        </div>

        <div className="legal">
          <span>© 2026 Instituto Hélio Chagas de Odontologia</span>
          <span>Responsável técnico: Dr. Hélio Chagas Mendes · CRO-MG CD 19806</span>
        </div>
      </div>
    </footer>
  );
}

function WhatsAppFloat() {
  return (
    <a className="wa-float" href={WA_URL} target="_blank" rel="noopener" aria-label="Falar pelo WhatsApp">
      <span className="wa-pulse" aria-hidden="true"></span>
      <Icon.WhatsApp />
      <span className="wa-label">Fale conosco</span>
    </a>
  );
}

Object.assign(window, { AntesDepois, Depoimentos, FAQ, Localizacao, Footer, WhatsAppFloat });