/* Website UI kit — Services (Orthodontics, Implants, Complete Dentistry) + secondary list */
function Services() {
  const { ServiceCard, Badge } = window.DrRenanMouraDesignSystem_c23fa8;
  const primary = [
    { index: 1, title: "Ortodontia", image: "assets/images/ortodontia.png",
      description: "Alinhamento preciso com acompanhamento próximo, do diagnóstico ao resultado — incluindo alinhadores invisíveis." },
    { index: 2, title: "Implantes dentários", image: "assets/images/implantes-dentarios.png",
      description: "Reabilitação completa com técnica minimamente invasiva e estética natural, devolvendo função e confiança." },
    { index: 3, title: "Odontologia completa", image: "assets/images/odontologia-completa.png",
      description: "Cuidado integral para adultos, crianças e famílias — da prevenção às lentes de contato e endodontia." },
  ];
  const secondary = [
    { label: "Alinhadores invisíveis", icon: "smile", desc: "Alinhamento discreto e removível." },
    { label: "Lentes de contato dental", icon: "sparkles", desc: "Estética natural, resultado imediato." },
    { label: "Harmonização facial", icon: "scan-face", desc: "Equilíbrio e proporção do rosto." },
    { label: "Odontopediatria", icon: "baby", desc: "Cuidado gentil para as crianças." },
    { label: "Clínica geral", icon: "stethoscope", desc: "Prevenção e saúde bucal completa." },
    { label: "Endodontia", icon: "activity", desc: "Tratamento de canal com precisão." },
  ];

  return (
    <section id="tratamentos" className="rm-x40" style={{ background: "var(--surface-page)", padding: "var(--section-pad-y) 40px" }}>
      <div style={{ maxWidth: "var(--content-max)", margin: "0 auto" }}>
        <div style={{ maxWidth: "620px", marginBottom: "72px", display: "flex", flexDirection: "column", gap: "20px" }} data-reveal>
          <Badge variant="gold">Tratamentos</Badge>
          <h2 style={{ fontSize: "var(--text-display-lg)", lineHeight: 1.05, color: "var(--text-primary)", margin: 0 }}>
            Excelência em cada especialidade
          </h2>
        </div>

        <div className="rm-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "28px" }} data-reveal>
          {primary.map((s) => <ServiceCard key={s.title} {...s} cta="Ver tratamento" />)}
        </div>

        <div style={{ marginTop: "80px", paddingTop: "56px", borderTop: "1px solid var(--border-hairline)" }} data-reveal>
          <span className="rm-eyebrow">Também oferecemos</span>
          <div className="rm-grid-3" style={{ marginTop: "36px", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "24px" }}>
            {secondary.map((s) => (
              <div key={s.label} className="rm-mini-card" style={{
                display: "flex", flexDirection: "column", gap: "18px",
                padding: "32px 32px 30px", background: "var(--surface-card)",
                border: "1px solid var(--border-hairline)", borderRadius: "var(--radius-lg)",
                boxShadow: "var(--shadow-sm)",
                transition: "box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out)",
              }}>
                <span style={{
                  width: 52, height: 52, borderRadius: "var(--radius-md)", flex: "none",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  background: "var(--rm-gold-100)", color: "var(--rm-gold-700)",
                }}>
                  <i data-lucide={s.icon} style={{ width: 24, height: 24 }}></i>
                </span>
                <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
                  <span style={{ fontFamily: "var(--font-display)", fontSize: "21px", lineHeight: 1.2, color: "var(--text-primary)" }}>{s.label}</span>
                  <span style={{ fontSize: "14px", lineHeight: 1.55, color: "var(--text-secondary)" }}>{s.desc}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Services = Services;
// Render Lucide icons after this section mounts
setTimeout(() => window.lucide && window.lucide.createIcons(), 400);