/* Website UI kit — FAQ + final WhatsApp CTA */
function FaqCta() {
  const { Accordion, Badge, WhatsAppButton } = window.DrRenanMouraDesignSystem_c23fa8;
  const faqs = [
    { q: "O rejuvenescimento do olhar remove pele?", a: "Não. Diferente das técnicas tradicionais, a nossa abordagem restaura a harmonia do olhar preservando a pele e a naturalidade da sua expressão." },
    { q: "Quanto tempo dura a recuperação?", a: "A maioria dos pacientes retoma a rotina em poucos dias, com orientações individuais de cuidado após o procedimento." },
    { q: "Vocês atendem crianças e famílias?", a: "Sim. Oferecemos odontologia completa para adultos, crianças e famílias, incluindo odontopediatria e clínica geral." },
    { q: "Como funciona a primeira avaliação?", a: "É uma conversa individual para entender seus objetivos, avaliar o seu caso e desenhar um plano de tratamento personalizado." },
  ];
  return (
    <>
      <section id="faq" className="rm-x40" style={{ background: "var(--surface-page)", padding: "var(--section-pad-y) 40px" }}>
        <div className="rm-split" style={{ maxWidth: "var(--content-max)", margin: "0 auto", display: "grid", gridTemplateColumns: "0.7fr 1.3fr", gap: "72px", alignItems: "start" }}>
          <div data-reveal style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
            <Badge variant="gold">Dúvidas frequentes</Badge>
            <h2 style={{ fontSize: "var(--text-display-md)", lineHeight: 1.08, color: "var(--text-primary)", margin: 0 }}>
              O que você precisa saber
            </h2>
          </div>
          <div data-reveal><Accordion items={faqs} defaultOpen={0} /></div>
        </div>
      </section>

      <section id="contato" className="rm-x40" style={{ background: "var(--surface-inverse)", color: "#fff", padding: "var(--section-pad-y) 40px" }}>
        <div style={{ maxWidth: "var(--content-narrow)", margin: "0 auto", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: "28px" }} data-reveal>
          <span className="rm-eyebrow" style={{ color: "var(--text-gold-on-dark)" }}>Agende agora</span>
          <h2 style={{ fontSize: "var(--text-display-lg)", lineHeight: 1.05, color: "#fff", margin: 0 }}>
            Vamos conversar sobre você
          </h2>
          <p style={{ fontSize: "19px", lineHeight: 1.7, color: "rgba(255,255,255,0.8)", margin: 0, maxWidth: "48ch" }}>
            Agende sua avaliação individual e descubra o plano ideal para restaurar a sua harmonia natural.
          </p>
          <div style={{ marginTop: "8px" }}><WhatsAppButton size="lg" href="#">Falar no WhatsApp</WhatsAppButton></div>
        </div>
      </section>
    </>
  );
}
window.FaqCta = FaqCta;