function Hero() {
  return (
    <section style={{position: "relative", minHeight: 640, 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(", "),
      }}/>
      {/* Paver texture overlay */}
      <div style={{position: "absolute", inset: 0, opacity: 0.05, backgroundImage: "url(../../assets/illustrations/paver-texture.svg)", backgroundSize: "160px"}}/>
      {/* Bottom protection scrim */}
      <div style={{position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(11,14,18,0) 40%, rgba(11,14,18,0.55) 100%)"}}/>

      <div style={{position: "relative", maxWidth: 1200, margin: "0 auto", padding: "96px 32px 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: 76, 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 lifetime 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:9145550199" 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-555-0199</a>
        </div>

        <div style={{display: "flex", alignItems: "center", gap: 18, marginTop: 40, fontSize: 13, color: "rgba(255, 255, 255, 0.72)"}}>
          <span style={{display: "inline-flex", alignItems: "center", gap: 6}}>
            <Icon name="star" size={14} color="#E0906D" stroke={0}/>
            <span style={{fontWeight: 700, color: "var(--white)"}}>4.9</span> · 127 Google reviews
          </span>
          <span style={{width: 1, height: 14, background: "rgba(255, 255, 255, 0.3)"}}/>
          <span>Licensed &amp; insured · NY H-18472-H4</span>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;