function ServiceArea() {
  const towns = ["Yorktown Heights", "Somers", "Bedford", "Katonah", "Chappaqua", "Armonk", "Mount Kisco", "Pleasantville", "Ossining"];
  return (
    <section id="areas" style={{background: "var(--white)", padding: "96px 32px"}}>
      <div style={{maxWidth: 1200, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 64, alignItems: "center"}}>
        <div>
          <span className="eyebrow">Service areas</span>
          <h2 style={{fontFamily: "var(--font-display)", fontSize: 44, fontWeight: 800, letterSpacing: "-0.02em", lineHeight: 1.02, marginTop: 12, textTransform: "uppercase"}}>
            We serve nine Westchester towns.
          </h2>
          <p style={{fontSize: 16, lineHeight: 1.7, marginTop: 16, color: "var(--slate-600)", maxWidth: 480}}>
            Same crew, same standard, coast-to-coast across the I-684 corridor. If your ZIP isn't on the list, ask — we cover Putnam and parts of Fairfield too.
          </p>
          <div style={{display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "6px 20px", marginTop: 24, maxWidth: 440}}>
            {towns.map(t => (
              <a key={t} href="#" style={{
                display: "flex", alignItems: "center", gap: 8, padding: "11px 0",
                borderBottom: "1px solid var(--n-200)",
                textDecoration: "none", color: "var(--ink-900)", fontSize: 14, fontWeight: 600,
              }}>
                <Icon name="mapPin" size={14} stroke={1.5} color="var(--turf-700)"/>
                {t}
              </a>
            ))}
          </div>
        </div>
        <div style={{position: "relative", aspectRatio: "4/5", borderRadius: 6, overflow: "hidden", border: "1px solid var(--n-200)", background: "var(--n-50)"}}>
          <svg viewBox="0 0 400 500" width="100%" height="100%" style={{display: "block"}}>
            <defs>
              <pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                <path d="M 20 0 L 0 0 0 20" fill="none" stroke="var(--n-200)" strokeWidth="0.5"/>
              </pattern>
            </defs>
            <rect width="400" height="500" fill="url(#grid)"/>

            {/* Projection: lat 40.88–41.56, lon -74.00 to -73.46. Putnam north, Westchester south narrowing. */}
            {(() => {
              // viewBox: x 60–340 (280 wide), y 40–470 (430 tall)
              // lon -74.00 → x 60, lon -73.46 → x 340  (280 / 0.54)
              // lat 41.56 → y 40, lat 40.88 → y 470    (430 / 0.68)
              const X = lon => 60 + (lon + 74.00) * (280 / 0.54);
              const Y = lat => 40 + (41.56 - lat) * (430 / 0.68);

              // Putnam County — rectangular-ish, Hudson jag on SW, CT straight edge east
              // rough boundary (lon, lat) clockwise from NW corner
              const putnam = [
                [-73.96, 41.53], [-73.88, 41.54], [-73.78, 41.55], [-73.68, 41.54],
                [-73.55, 41.52], [-73.53, 41.48], [-73.54, 41.42], [-73.54, 41.38],
                [-73.55, 41.34], [-73.56, 41.32],
                // south edge (this is the Putnam/Westchester boundary — roughly lat 41.32)
                [-73.62, 41.32], [-73.72, 41.33], [-73.82, 41.33], [-73.92, 41.33],
                // west edge (Hudson, jagged)
                [-73.95, 41.36], [-73.97, 41.40], [-73.94, 41.43], [-73.96, 41.47],
                [-73.98, 41.50], [-73.96, 41.53],
              ];

              // Westchester County — wider at top, narrows to Bronx point at south
              // real shape: top edge at lat 41.32, west edge Hudson (jagged), east edge CT mostly straight,
              // narrows dramatically south of ~lat 41.05 to a thin strip, terminating ~lat 40.88 (Yonkers/Bronx)
              const westchester = [
                // north edge (border with Putnam)
                [-73.92, 41.33], [-73.82, 41.33], [-73.72, 41.33], [-73.62, 41.32], [-73.55, 41.32],
                // east edge (CT border — straight, angles slightly SW)
                [-73.54, 41.28], [-73.53, 41.22], [-73.52, 41.16], [-73.52, 41.10],
                [-73.55, 41.06], [-73.60, 41.03], [-73.66, 41.00], [-73.72, 40.98],
                [-73.76, 40.96], [-73.80, 40.94], [-73.83, 40.92], [-73.85, 40.90],
                // southern tip (Yonkers/Kingsbridge point)
                [-73.88, 40.89], [-73.91, 40.90],
                // west edge going north (Hudson — jagged coastline)
                [-73.92, 40.94], [-73.89, 40.98], [-73.90, 41.03], [-73.88, 41.08],
                [-73.90, 41.13], [-73.92, 41.18], [-73.88, 41.22], [-73.90, 41.26],
                [-73.93, 41.30], [-73.92, 41.33],
              ];

              const toPath = pts => "M " + pts.map(([lon, lat]) => `${X(lon).toFixed(1)} ${Y(lat).toFixed(1)}`).join(" L ") + " Z";

              const towns = [
                {lat: 41.275, lon: -73.785, n: "Yorktown Heights", a: "end",   dx: -9,  dy: 4},
                {lat: 41.328, lon: -73.692, n: "Somers",           a: "start", dx: 9,   dy: -2},
                {lat: 41.262, lon: -73.685, n: "Katonah",          a: "start", dx: 9,   dy: 4},
                {lat: 41.200, lon: -73.640, n: "Bedford",          a: "start", dx: 9,   dy: 4},
                {lat: 41.205, lon: -73.728, n: "Mt Kisco",         a: "end",   dx: -9,  dy: 4},
                {lat: 41.160, lon: -73.770, n: "Chappaqua",        a: "middle",   dx: 0,  dy: -8},
                {lat: 41.127, lon: -73.714, n: "Armonk",           a: "start", dx: 9,   dy: 4},
                {lat: 41.135, lon: -73.790, n: "Pleasantville",    a: "end",   dx: -9,  dy: 14},
                {lat: 41.165, lon: -73.862, n: "Ossining",         a: "end",   dx: -9,  dy: 4},
              ];

              return (
                <>
                  <path d={toPath(putnam)} fill="rgba(31, 90, 58, 0.04)" stroke="var(--turf-600)" strokeWidth="1" strokeLinejoin="round"/>
                  <path d={toPath(westchester)} fill="rgba(31, 90, 58, 0.18)" stroke="var(--turf-800)" strokeWidth="1.8" strokeLinejoin="round"/>

                  <text x={X(-73.75)} y={Y(41.45)} fontSize="11" fontFamily="Inter Tight" fill="var(--slate-500)" fontWeight="700" letterSpacing="3" textAnchor="middle">PUTNAM</text>
                  <text x={X(-73.82)} y={Y(40.97)} fontSize="11" fontFamily="Inter Tight" fill="var(--turf-800)" fontWeight="700" letterSpacing="3" textAnchor="middle">WESTCHESTER</text>
                  <text x={X(-73.82)} y={Y(40.97)} fontSize="8" fontFamily="Inter Tight" fill="var(--slate-500)" fontWeight="500" letterSpacing="2" textAnchor="middle" dy="12">COUNTY · NY</text>

                  {/* Hudson */}
                  <text x={X(-73.98)} y={Y(41.05)} fontSize="9" fontFamily="Inter Tight" fill="var(--slate-400)" fontStyle="italic" textAnchor="middle" transform={`rotate(-88 ${X(-73.98)} ${Y(41.05)})`}>Hudson River</text>
                  {/* CT */}
                  <text x={X(-73.495)} y={Y(41.20)} fontSize="9" fontFamily="Inter Tight" fill="var(--slate-400)" textAnchor="middle" transform={`rotate(90 ${X(-73.495)} ${Y(41.20)})`}>Connecticut</text>

                  {towns.map((t, i) => {
                    const cx = X(t.lon), cy = Y(t.lat);
                    return (
                      <g key={i}>
                        <circle cx={cx} cy={cy} r="4.5" fill="var(--white)" stroke="var(--turf-700)" strokeWidth="2"/>
                        <text x={cx + t.dx} y={cy + t.dy} fontSize="10.5" fontFamily="Inter Tight" fill="var(--ink-900)" fontWeight="600" textAnchor={t.a}>{t.n}</text>
                      </g>
                    );
                  })}
                </>
              );
            })()}

            {/* Compass */}
            <g transform="translate(360 60)">
              <circle r="14" fill="var(--white)" stroke="var(--n-200)" strokeWidth="1"/>
              <path d="M 0 -9 L 3 0 L 0 9 L -3 0 Z" fill="var(--turf-700)"/>
              <text y="-16" fontSize="8" fontFamily="Inter Tight" fill="var(--slate-600)" fontWeight="700" textAnchor="middle">N</text>
            </g>
          </svg>
        </div>
      </div>
    </section>
  );
}
window.ServiceArea = ServiceArea;