/* Website UI kit — Meet the team + Clinic */
function Team() {
  const { Badge } = window.DrRenanMouraDesignSystem_c23fa8;
  const people = [
    { name: "Dr. Renan Moura", role: "Diretor clínico · Harmonização facial", img: "assets/images/doctor-coat-smile.png" },
    { name: "Dra. Helena Costa", role: "Ortodontia · Alinhadores", img: "assets/images/team-helena.jpg" },
    { name: "Dr. Paulo Andrade", role: "Implantodontia", img: "assets/images/team-paulo.jpg" },
  ];
  return (
    <section id="equipe" className="rm-x40" style={{ background: "var(--surface-page-pure)", padding: "var(--section-pad-y) 40px" }}>
      <div style={{ maxWidth: "var(--content-max)", margin: "0 auto" }}>
        <div style={{ maxWidth: "620px", marginBottom: "64px", display: "flex", flexDirection: "column", gap: "20px" }} data-reveal>
          <Badge variant="gold">A equipe</Badge>
          <h2 style={{ fontSize: "var(--text-display-lg)", lineHeight: 1.05, color: "var(--text-primary)", margin: 0 }}>
            Especialistas em harmonia
          </h2>
        </div>
        <div className="rm-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "36px" }} data-reveal>
          {people.map((p) => (
            <figure key={p.name} style={{ margin: 0 }}>
              <div style={{ aspectRatio: "4 / 5", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-sm)" }}>
                <img src={p.img} alt={p.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
              <figcaption style={{ marginTop: "20px" }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: "22px", color: "var(--text-primary)" }}>{p.name}</div>
                <div style={{ fontSize: "14px", color: "var(--text-secondary)", marginTop: "6px" }}>{p.role}</div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Team = Team;

function Clinic() {
  const { Button } = window.DrRenanMouraDesignSystem_c23fa8;
  return (
    <section id="clinica" style={{ position: "relative", minHeight: "76vh", display: "flex", alignItems: "center", overflow: "hidden" }}>
      <img src="assets/images/clinic-consult.webp" alt="A clínica" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 30%" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(20,27,38,0.72) 0%, rgba(20,27,38,0.3) 60%, rgba(20,27,38,0.1) 100%)" }} />
      <div className="rm-x40" style={{ position: "relative", maxWidth: "var(--content-max)", margin: "0 auto", padding: "0 40px", width: "100%", color: "#fff" }}>
        <div style={{ maxWidth: "560px", display: "flex", flexDirection: "column", gap: "24px" }} data-reveal>
          <span className="rm-eyebrow" style={{ color: "var(--text-gold-on-dark)" }}>A clínica</span>
          <h2 style={{ fontSize: "var(--text-display-lg)", lineHeight: 1.05, color: "#fff", margin: 0 }}>Um espaço pensado para o cuidado</h2>
          <p style={{ fontSize: "18px", lineHeight: 1.7, color: "rgba(255,255,255,0.82)", margin: 0, maxWidth: "48ch" }}>
            Ambiente acolhedor, tecnologia de ponta e uma atmosfera que transmite calma e confiança em cada detalhe.
          </p>
          <div style={{ marginTop: "8px" }}><Button variant="outline" size="lg" href="#contato" style={{ color: "#fff", borderColor: "rgba(255,255,255,0.4)" }}>Agendar visita</Button></div>
        </div>
      </div>
    </section>
  );
}
window.Clinic = Clinic;