/* Website UI kit — Localização da clínica */
function LocationSection() {
  const { Button, Badge } = window.DrRenanMouraDesignSystem_c23fa8;
  const MAPS = "https://maps.app.goo.gl/JTfkw2sqpvKWqLHV7";
  return (
    <section id="localizacao" className="rm-x40" style={{ background: "var(--surface-page)", padding: "var(--section-pad-y) 40px" }}>
      <div style={{ maxWidth: "var(--content-max)", margin: "0 auto" }}>
        <div className="rm-split" style={{ display: "grid", gridTemplateColumns: "1.25fr 0.75fr", gap: "72px", alignItems: "center" }}>
          <div data-reveal>
            <a href={MAPS} target="_blank" rel="noopener" aria-label="Ver no Google Maps" style={{ display: "block", position: "relative", borderRadius: "var(--radius-xl)", overflow: "hidden", boxShadow: "var(--shadow-media)" }}>
              <img src="assets/images/clinic-facade.png" alt="Fachada da clínica Dr. Renan Moura — R. Paes Leme, 1186"
                style={{ width: "100%", aspectRatio: "16 / 10", objectFit: "cover", display: "block" }} />
            </a>
          </div>

          <div data-reveal style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
            <Badge variant="gold">Localização</Badge>
            <h2 style={{ fontSize: "var(--text-display-md)", lineHeight: 1.08, color: "var(--text-primary)", margin: 0 }}>
              Venha nos visitar
            </h2>
            <div style={{ display: "flex", gap: "16px", alignItems: "flex-start" }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--rm-gold-600)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ flex: "none", marginTop: 3 }}>
                <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" /><circle cx="12" cy="10" r="3" />
              </svg>
              <p style={{ fontSize: "18px", lineHeight: 1.7, color: "var(--text-primary)", margin: 0 }}>
                R. Paes Leme, 1186 &mdash; Jardim América<br />
                <span style={{ color: "var(--text-secondary)" }}>Londrina &middot; PR &middot; 86010-610</span>
              </p>
            </div>
            <div style={{ marginTop: "8px" }}>
              <Button variant="primary" size="lg" href={MAPS} target="_blank" rel="noopener"
                iconRight={
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M7 17 17 7M8 7h9v9" />
                  </svg>
                }>
                Como chegar
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.LocationSection = LocationSection;