function ServiceArea({ onCTA }) {
  const cities = [
    "Sacramento", "Elk Grove", "Roseville", "Folsom",
    "Rancho Cordova", "Fair Oaks", "Citrus Heights", "Davis",
    "Rocklin", "Lincoln", "Granite Bay", "El Dorado Hills",
    "Carmichael", "Orangevale", "West Sacramento", "Woodland",
  ];
  return (
    <section className="section" id="service-area">
      <div className="container">
        <div className="sa-grid">
          <div>
            <span className="eyebrow">Service Area</span>
            <h2 className="h2" style={{marginTop:16, marginBottom:20}}>Proudly serving <em>Greater Sacramento</em> and surrounding communities.</h2>
            <p className="lede" style={{marginBottom:16}}>From single window replacements to whole-home upgrades, we handle projects of every size across Sacramento, Fair Oaks, Roseville, and the surrounding Northern California communities. If you own your home in the Greater Sacramento area, we'd love to hear from you.</p>
            <div className="sa-cities">
              {cities.map(c => <div key={c} className="sa-city">{c}</div>)}
            </div>
            <button className="btn btn-primary btn-lg" onClick={onCTA}>
              Get Free Estimate &amp; Offer <Ic.arrow />
            </button>
          </div>
          <div className="sa-map">
            <img src="uploads/A_clean,_modern_202604240914.jpeg" alt="Sacramento area service map" style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', borderRadius:'inherit'}} />
          </div>
        </div>
      </div>
    </section>
  );
}
window.ServiceArea = ServiceArea;