/* global React, Placeholder */

const towns = [
  { name: "Murphys", miles: "HQ", featured: true },
  { name: "Angels Camp", miles: "9 mi" },
  { name: "Arnold", miles: "16 mi" },
  { name: "Avery", miles: "12 mi" },
  { name: "Vallecito", miles: "5 mi" },
  { name: "Douglas Flat", miles: "3 mi" },
  { name: "San Andreas", miles: "18 mi" },
  { name: "Forest Meadows", miles: "4 mi" },
  { name: "Dorrington", miles: "23 mi" },
  { name: "Copperopolis", miles: "22 mi" },
  { name: "Mountain Ranch", miles: "21 mi" },
  { name: "Mokelumne Hill", miles: "19 mi" },
];

const ServiceArea = () => {
  return (
    <section className="section service-area" id="service-area" data-screen-label="07 Service Area">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Where we work</div>
            <h2>Calaveras County and the Highway 4 corridor.</h2>
          </div>
          <p className="lede">
            We work everywhere from Copperopolis to Bear Valley. If you're outside this area
            but think we'd be a fit, give us a call — we'll let you know honestly.
          </p>
        </div>

        <div className="area-grid">
          <div className="area-copy">
            <h3 style={{fontFamily: "var(--serif)", fontSize: "20px", marginBottom: "8px"}}>Towns we serve</h3>
            <p style={{color: "var(--ink-2)", fontSize: "14.5px"}}>Driving distance from our shop on Big Trees Road.</p>
            <ul>
              {towns.map(t => (
                <li key={t.name} className={t.featured ? "featured" : ""}>
                  <span>{t.name}</span>
                  <span className="miles">{t.miles}</span>
                </li>
              ))}
            </ul>
            <p style={{marginTop: "20px", color: "var(--ink-2)", fontSize: "14px"}}>
              Don't see your town? <a href="#quote" style={{color: "var(--clay-deep)", fontWeight: 600}}>Ask us anyway →</a>
            </p>
          </div>
          <div className="area-map">
            <Placeholder kind="map" />
          </div>
        </div>
      </div>
    </section>
  );
};

window.ServiceArea = ServiceArea;