/* Website UI kit — Hero
   Full-bleed dark portrait, oversized display headline, quiet CTAs. */
function Hero() {
  const { Button, WhatsAppButton, Badge } = window.DrRenanMouraDesignSystem_c23fa8;
  return (
    <section style={{ position: "relative", minHeight: "100vh", display: "flex", alignItems: "flex-end", overflow: "hidden", background: "var(--rm-navy-900)" }}>
      <img src="assets/images/doctor-portrait-tablet.png" alt="Dr. Renan Moura"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 20%" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(20,27,38,0.82) 0%, rgba(20,27,38,0.45) 45%, rgba(20,27,38,0.15) 100%)" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(20,27,38,0.35) 0%, rgba(20,27,38,0) 30%, rgba(20,27,38,0.65) 100%)" }} />

      <div className="rm-x40" style={{ position: "relative", width: "100%", maxWidth: "var(--content-max)", margin: "0 auto", padding: "0 40px 120px", color: "#fff" }}>
        <div style={{ maxWidth: "760px", display: "flex", flexDirection: "column", gap: "28px" }} data-reveal>
          <Badge variant="onDark">Odontologia premium &middot; Rejuvenescimento facial</Badge>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-display-xl)", lineHeight: 1.02, letterSpacing: "-0.01em", color: "#fff", margin: 0 }}>
            Beleza natural,<br />precisão médica.
          </h1>
          <p style={{ fontSize: "20px", lineHeight: 1.6, color: "rgba(255,255,255,0.82)", maxWidth: "52ch", margin: 0 }}>
            Odontologia avançada e rejuvenescimento facial minimamente invasivo — para restaurar a harmonia do rosto, preservando a sua expressão.
          </p>
          <div style={{ display: "flex", gap: "16px", flexWrap: "wrap", marginTop: "8px" }}>
            <Button variant="gold" size="lg" href="#rejuvenescimento">Conhecer a técnica</Button>
            <WhatsAppButton size="lg" href="#contato" />
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;