// suburb.jsx, simplified per-suburb local-SEO landing page.
// Each /service-areas/<slug>.html sets window.POLARIS_SUBURB = "<slug>" before
// this loads; data comes from b-suburbs.js (window.getSuburb). Reuses the
// shared Nav, Footer, RequestForm, and the About page's visual system.

function SuburbHero({ s }) {
  return (
    <section className="about-hero">
      <div className="wrap">
        <nav className="crumb">
          <a href="/">Home</a>
          <Icon name="chevron" />
          <a href="/service-areas">Service Areas</a>
          <Icon name="chevron" />
          <span>{s.name}</span>
        </nav>
        <div className="about-hero-inner">
          <div className="eyebrow">Landscaping in {s.name}, {s.state}</div>
          <h1>{s.headline}</h1>
          <p className="about-hero-sub">{s.sub}</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 SuburbFacts({ s }) {
  const facts = [
    { k: s.driveMinutes === 0 ? "HQ" : s.driveMinutes + " min", v: s.driveMinutes === 0 ? "Our headquarters" : "From our Westmont yard" },
    { k: s.activeProperties + "+", v: "Active properties" },
    { k: s.zips.length, v: s.zips.length === 1 ? "ZIP code served" : "ZIP codes served" },
    { k: s.county.replace(" County", "").replace(/ \/ .*/, ""), v: "County" },
  ];
  return (
    <section className="about-statband">
      <div className="wrap">
        <div className="statband-grid">
          {facts.map((f, i) => (
            <div className="sb reveal" key={i}>
              <div className="sb-k">{f.k}</div>
              <div className="sb-v">{f.v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SuburbBody({ s }) {
  return (
    <section className="block about-story">
      <div className="wrap">
        <div className="story-grid">
          <div className="story-main reveal">
            <div className="divider" style={{ margin: "0 0 22px" }}></div>
            <h2>Local crews, {s.name} standards</h2>
            <p>{s.localContext}</p>
            <p>{s.proximityNote} From lawn care and flower beds to hardscaping, landscape design, and snow &amp; ice management, one Polaris team handles your whole property, on a schedule you can count on.</p>
            <h3 style={{ fontSize: 20, margin: "26px 0 0" }}>Neighborhoods &amp; areas we serve</h3>
            <ul className="chip-list">
              {s.neighborhoods.map((n, i) => <li key={i}>{n}</li>)}
            </ul>
          </div>
          <aside className="story-facts reveal">
            <h3>Property mix in {s.name}</h3>
            <ul>
              {s.propertyMix.map((p, i) => (
                <li key={i}><span className="fk">{p.label}</span><span className="fv">{p.share}</span></li>
              ))}
            </ul>
            <a className="btn btn-green btn-block" href="#request">Get a {s.name} quote <Icon name="arrow" /></a>
          </aside>
        </div>
      </div>
    </section>
  );
}

function SuburbServices({ s }) {
  const ICONS = { "Property Maintenance": "scissors", "Landscape Construction & Design": "tree", "Site Enhancements": "flower", "Snow & Ice Management": "snow" };
  return (
    <section className="block about-diff">
      <div className="wrap">
        <div className="sec-center reveal">
          <div className="divider"></div>
          <h2>What we do in {s.name}</h2>
        </div>
        <div className="diff-grid">
          {s.services.map((svc, i) => (
            <div className="diff-card reveal" key={i}>
              <div className="diff-ic"><Icon name={ICONS[svc] || "leaf"} /></div>
              <div>
                <h3>{svc}</h3>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SuburbCTA({ s }) {
  return (
    <section className="svc-cta" id="request-band">
      <div className="wrap">
        <div className="svc-cta-grid">
          <div className="svc-cta-copy">
            <div className="eyebrow">Serving {s.name}, {s.state}</div>
            <h2>Get a quote for your {s.name} property.</h2>
            <p>Tell us about your property and a Polaris estimator will follow up within one business day. No pressure, no obligation.</p>
            <ul className="cta-points">
              <li><Icon name="checkc" />Local crews based in Westmont</li>
              <li><Icon name="checkc" />Residential &amp; commercial properties</li>
              <li><Icon name="checkc" />Licensed &amp; insured since 2011</li>
            </ul>
          </div>
          <RequestForm />
        </div>
      </div>
    </section>
  );
}

function SuburbPage() {
  useReveal();
  const slug = (typeof window !== "undefined" && window.POLARIS_SUBURB) || "westmont";
  const s = (window.getSuburb && window.getSuburb(slug)) || window.POLARIS_SUBURBS[0];

  React.useEffect(() => {
    document.title = `Landscaping in ${s.name}, ${s.state} · Polaris Landscape`;
  }, [s]);

  return (
    <React.Fragment>
      <Nav />
      <SuburbHero s={s} />
      <SuburbFacts s={s} />
      <SuburbBody s={s} />
      <SuburbServices s={s} />
      <SuburbCTA s={s} />
      <Footer />
    </React.Fragment>
  );
}

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