function ServiceArea() {
  const cities = [
    "Bellevue", "Kirkland", "Mercer Island", "Redmond",
    "Sammamish", "Issaquah", "Bothell", "Medina",
    "Newcastle", "Woodinville", "Clyde Hill", "Renton"
  ];
  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 Seattle's Eastside</em> and beyond.</h2>
            <p className="lede" style={{marginBottom:16}}>From full gut renovations to refresh remodels, we handle kitchen projects of every size and style across Bellevue, Kirkland, Mercer Island, and the surrounding Eastside communities. If you own your home in the Greater Seattle 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-dark" onClick={() => document.dispatchEvent(new CustomEvent('open-estimate'))}>
              Check if we serve your home <Ic.arrow />
            </button>
          </div>
          <div className="sa-map">
            <img src="assets/service-area-map.jpg" alt="New Day Construction service area — Greater Seattle Eastside" style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', borderRadius:'inherit'}} />
          </div>
        </div>
      </div>
    </section>
  );
}
window.ServiceArea = ServiceArea;