function WhyUs() {
  const stats = [
    {n: "19", l: "Years in Westchester"},
    {n: "9", l: "Towns served weekly"},
    {n: "11", l: "Step base prep"},
    {n: "5", l: "Year warranty"},
  ];
  return (
    <section id="about" className="section-pad" style={{background: "var(--turf-700)", color: "var(--white)", position: "relative", overflow: "hidden"}}>
      <div style={{position: "absolute", inset: 0, opacity: 0.05, backgroundImage: "url(../../assets/illustrations/paver-texture.svg)", backgroundSize: "200px"}}/>
      <div className="container grid-split--reverse" style={{position: "relative"}}>
        <div>
          <span className="eyebrow" style={{color: "#9FC7AE"}}>Why Lawns and Pavers</span>
          <h2 className="h-section" style={{marginTop: 14, color: "var(--white)"}}>
            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, Cambridge Authorized Installer status, and the same eleven-step base prep on every install — whether it's a $9K walkway or a $60K driveway.
          </p>
          <div className="grid-stats" style={{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 className="aspect-cap" style={{
          borderRadius: 6, aspectRatio: "4/5",
          background: "linear-gradient(150deg, #4C5A66 0%, #252D34 40%, #0B0E12 100%)",
          position: "relative", overflow: "hidden",
          boxShadow: "var(--shadow-3)",
        }}>
          <PhotoOverlay src="assets/photos/home/crew-portrait.jpg" alt="Lawns & Pavers crew"/>
          <div style={{position: "absolute", inset: 0, opacity: 0.10, backgroundImage: "url(assets/illustrations/paver-texture.svg)", backgroundSize: "160px", zIndex: 1}}/>
          <div style={{position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 50%, rgba(11,14,18,0.65) 100%)", zIndex: 2}}/>
          <div style={{position: "absolute", left: 24, bottom: 22, color: "var(--white)", zIndex: 3}}>
            <div style={{fontSize: 11, textTransform: "uppercase", letterSpacing: "0.18em", fontWeight: 700, color: "rgba(255, 255, 255, 0.7)"}}>The crew</div>
            <div style={{fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 800, marginTop: 8, textTransform: "uppercase", letterSpacing: "-0.01em"}}>The crew · Jefferson Valley · April 2025</div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.WhyUs = WhyUs;