function WhyUs() {
  const stats = [
    {n: "500+", l: "Patios installed"},
    {n: "19", l: "Years in Westchester"},
    {n: "9", l: "Towns served weekly"},
    {n: "4.9", l: "Google review avg"},
  ];
  return (
    <section id="about" style={{background: "var(--turf-700)", color: "var(--white)", padding: "96px 32px", position: "relative", overflow: "hidden"}}>
      <div style={{position: "absolute", inset: 0, opacity: 0.05, backgroundImage: "url(../../assets/illustrations/paver-texture.svg)", backgroundSize: "200px"}}/>
      <div style={{position: "relative", maxWidth: 1200, margin: "0 auto", display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "center"}}>
        <div>
          <span className="eyebrow" style={{color: "#9FC7AE"}}>Why Lawns and Pavers</span>
          <h2 style={{fontFamily: "var(--font-display)", fontSize: 44, fontWeight: 800, letterSpacing: "-0.02em", lineHeight: 1.02, marginTop: 14, color: "var(--white)", textTransform: "uppercase"}}>
            A family shop with a certified crew and a stubborn standard.
          </h2>
          <p style={{fontSize: 16, lineHeight: 1.7, marginTop: 20, color: "rgba(255, 255, 255, 0.8)", maxWidth: 540}}>
            We started in 2006 mowing lawns in Yorktown and took on our first paver patio the following spring. Today the crew runs ICPI/CMHA certifications, Techo-Pro Elite status, and the same eleven-step base prep on every install — whether it's a $9K walkway or a $60K driveway.
          </p>
          <div style={{display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20, marginTop: 40}}>
            {stats.map((s, i) => (
              <div key={i} style={{borderTop: "1px solid rgba(255,255,255,0.2)", paddingTop: 14}}>
                <div style={{fontFamily: "var(--font-display)", fontSize: 42, fontWeight: 800, letterSpacing: "-0.02em", color: "var(--white)"}}>{s.n}</div>
                <div style={{fontSize: 11, textTransform: "uppercase", letterSpacing: "0.18em", fontWeight: 700, color: "rgba(255, 255, 255, 0.7)", marginTop: 8}}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{
          borderRadius: 6, aspectRatio: "4/5",
          background: "linear-gradient(150deg, #4C5A66 0%, #252D34 40%, #0B0E12 100%)",
          position: "relative", overflow: "hidden",
          boxShadow: "var(--shadow-3)",
        }}>
          <div style={{position: "absolute", inset: 0, opacity: 0.10, backgroundImage: "url(../../assets/illustrations/paver-texture.svg)", backgroundSize: "160px"}}/>
          <div style={{position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 50%, rgba(11,14,18,0.6) 100%)"}}/>
          <div style={{position: "absolute", left: 24, bottom: 22, color: "var(--white)"}}>
            <div style={{fontSize: 11, textTransform: "uppercase", letterSpacing: "0.18em", fontWeight: 700, color: "rgba(255, 255, 255, 0.7)"}}>Crew portrait — placeholder</div>
            <div style={{fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 800, marginTop: 8, textTransform: "uppercase", letterSpacing: "-0.01em"}}>Ten-person crew · Bedford · April 2025</div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.WhyUs = WhyUs;