function Hero() {
  return (
    <section style={{position: "relative", minHeight: "min(640px, 80vh)", overflow: "hidden", background: "var(--ink-900)"}}>
      {/* Placeholder photo: layered warm-toned gradients */}
      <div style={{
        position: "absolute", inset: 0,
        background: [
          "radial-gradient(ellipse 50% 40% at 72% 30%, rgba(224, 144, 109, 0.18), transparent 70%)",
          "radial-gradient(ellipse 80% 60% at 20% 90%, rgba(31, 90, 58, 0.65), transparent 70%)",
          "linear-gradient(170deg, #2A2F35 0%, #17191D 45%, #0B0E12 100%)",
        ].join(", "),
      }}/>
      {/* Real photo overlay (falls back to gradient above if missing) */}
      <PhotoOverlay src="assets/photos/home/home-hero.jpg" alt="Lawns & Pavers Westchester project"/>
      {/* Paver texture overlay */}
      <div style={{position: "absolute", inset: 0, opacity: 0.05, backgroundImage: "url(assets/illustrations/paver-texture.svg)", backgroundSize: "160px", zIndex: 1}}/>
      {/* Bottom protection scrim — sits over photo so headline stays readable */}
      <div style={{position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(11,14,18,0.15) 0%, rgba(11,14,18,0.5) 60%, rgba(11,14,18,0.75) 100%)", zIndex: 1}}/>

      <div className="container" style={{position: "relative", zIndex: 2, paddingTop: "clamp(56px, 10vw, 96px)", paddingBottom: "clamp(48px, 8vw, 72px)", color: "var(--white)"}}>
        <span style={{
          display: "inline-block", padding: "6px 12px", borderRadius: 2,
          background: "rgba(255, 255, 255, 0.12)", border: "1px solid rgba(255, 255, 255, 0.22)",
          fontSize: 11, fontWeight: 700, letterSpacing: "0.22em", textTransform: "uppercase",
        }}>Serving Westchester since 2006</span>

        <h1 style={{
          fontFamily: "var(--font-display)", fontSize: "clamp(36px, 7.6vw, 76px)", lineHeight: 1.0, fontWeight: 800,
          letterSpacing: "-0.02em", marginTop: 24, maxWidth: 940, textTransform: "uppercase", textWrap: "balance",
        }}>
          Westchester's trusted name in lawn care <span style={{color: "#6FA985"}}>&amp;</span> paver hardscaping
        </h1>

        <p style={{fontSize: 18, lineHeight: 1.6, marginTop: 22, maxWidth: 640, color: "rgba(255, 255, 255, 0.82)"}}>
          ICPI/CMHA-certified crews, NYSDEC-licensed applicators, and a 5-year workmanship warranty on every paver installation.
        </p>

        <div style={{display: "flex", flexWrap: "wrap", gap: 12, marginTop: 32}}>
          <a href="#quote" className="btn btn-primary" style={{textDecoration: "none"}}>
            Get my free estimate <Icon name="arrowRight" size={16}/>
          </a>
          <a href="tel:9142993593" className="btn" style={{
            textDecoration: "none", background: "transparent",
            color: "var(--white)", border: "1px solid rgba(255, 255, 255, 0.45)",
          }}><Icon name="phone" size={16}/>Call 914-299-3593</a>
        </div>

        <div style={{display: "flex", alignItems: "center", flexWrap: "wrap", gap: 18, marginTop: 40, fontSize: 13, color: "rgba(255, 255, 255, 0.72)"}}>
          <span>Licensed &amp; insured · NY H-18472-H4</span>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;