// service-areas.jsx, overview of the Chicagoland communities Polaris serves.
// Cards link to each per-suburb landing page. Data from b-suburbs.js.

function ServiceAreasHero() {
  return (
    <section className="about-hero">
      <div className="wrap">
        <nav className="crumb">
          <a href="/">Home</a>
          <Icon name="chevron" />
          <span>Service Areas</span>
        </nav>
        <div className="about-hero-inner">
          <div className="eyebrow">Where We Work</div>
          <h1>Serving Chicagoland from our Westmont yard.</h1>
          <p className="about-hero-sub">Polaris cares for residential and commercial properties across DuPage, Cook, and Will counties. Find your community below, or call and we will tell you exactly when our crews are nearby.</p>
          <div className="about-hero-cta">
            <a className="btn btn-amber btn-upper" href="/#request">Get a quote <Icon name="arrow" /></a>
            <a className="btn btn-ghost" href={TEL}><Icon name="phone" />{PHONE}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function ServiceAreasGrid() {
  const subs = window.POLARIS_SUBURBS || [];
  return (
    <section className="block about-values">
      <div className="wrap">
        <div className="sec-center reveal">
          <div className="divider"></div>
          <h2>Communities we serve</h2>
          <p className="sub">Local crews, tuned to each town. Tap a community for the details.</p>
        </div>
        <div className="areas-grid">
          {subs.map((s) => (
            <a className="area-card reveal" href={"/service-areas/" + s.slug} key={s.slug}>
              <div className="area-top">
                <span className="area-ic"><Icon name="pin" /></span>
                <span>
                  <b>{s.name}</b>
                  <small>{s.county}</small>
                </span>
              </div>
              <p>{s.headline}</p>
              <div className="area-foot">
                <span>{s.activeProperties}+ active properties</span>
                <Icon name="arrow" />
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceAreasPage() {
  useReveal();
  React.useEffect(() => { document.title = "Service Areas · Polaris Landscape"; }, []);
  return (
    <React.Fragment>
      <Nav />
      <ServiceAreasHero />
      <ServiceAreasGrid />
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ServiceAreasPage />);