// service.jsx, shared template for the six "What We Do" detail pages.
// Each HTML page sets window.POLARIS_SERVICE = "<slug>" before this loads;
// the page reuses the same Nav, Footer, RequestForm and theme/tweak wiring.

const SERVICE_DETAIL = {
  "lawn-care": {
    ic: "scissors",
    title: "Lawn Care",
    intro: "Weekly upkeep that keeps your turf thick, green, and clean from the first mow of spring through the last leaf of fall.",
    includes: [
      { ic: "scissors", h: "Weekly Mowing", p: "Cut at the right height for the season, with clean passes and freshly trimmed edges on every visit." },
      { ic: "brush", h: "String Trimming & Edging", p: "Crisp lines along beds, walks, and fences so the whole property reads finished, not just mowed." },
      { ic: "leaf", h: "Leaf Care", p: "Regular fall clearing so leaves never pile up and smother the lawn, ending the season with a deep cleanup." },
      { ic: "sprout", h: "Core Aeration", p: "Pulling small plugs to relieve compaction and let water, air, and nutrients reach the roots." },
      { ic: "sprout", h: "Overseeding", p: "Fresh seed worked in after aeration to thicken the turf and crowd out weeds over time." },
      { ic: "wind", h: "Seasonal Cleanups", p: "Spring and fall resets that clear debris and get your beds ready for what comes next." },
    ],
  },
  "hardscaping": {
    ic: "layers",
    title: "Hardscaping",
    intro: "Patios, walls, and walkways built on a proper base so they stay level, drain well, and last for years.",
    includes: [
      { ic: "layers", h: "Paver Patios", p: "Custom patios set on a compacted, well-drained base so they stay flat and even season after season." },
      { ic: "layers", h: "Retaining Walls", p: "Structural walls that hold back slopes, carve out usable space, and add definition to a yard." },
      { ic: "footprints", h: "Walkways & Steps", p: "Safe, attractive paths and steps that connect the spaces you use most." },
      { ic: "home", h: "Seating & Fire Features", p: "Built-in seating walls and fire features that extend your time outdoors into the evening." },
      { ic: "wind", h: "Drainage & Grading", p: "Proper slope and drainage so water moves away from your home and hardscape, not toward it." },
    ],
  },
  "flower-bed-care": {
    ic: "flower",
    title: "Flower Bed Care",
    intro: "Clean, healthy beds all season, from fresh mulch and edging to the plantings that bring color back each year.",
    includes: [
      { ic: "layers", h: "Mulch Installation", p: "Fresh mulch that locks in moisture, slows weeds, and gives every bed a clean, finished surface." },
      { ic: "flower", h: "Weeding", p: "Ongoing weed control, hand-pulled or treated, so beds stay crisp between visits." },
      { ic: "sprout", h: "Perennials & Annuals", p: "Plant selection and installation for color that returns each year and refreshes each season." },
      { ic: "brush", h: "Bed Edging", p: "Clean, cut edges that define each bed and keep mulch where it belongs." },
      { ic: "brush", h: "Trimming & Pruning", p: "Shrubs and perennials shaped on schedule for healthy growth and tidy lines." },
    ],
  },
  "landscape-design": {
    ic: "tree",
    title: "Landscape Design",
    intro: "A plan built around your property, your light, and your style, then installed by the same team that maintains it.",
    includes: [
      { ic: "tree", h: "Planting Design", p: "A plan matched to your light, soil, and taste, layered for interest in every season." },
      { ic: "home", h: "Property Makeovers", p: "Full front- or backyard transformations, taken from first concept to finished install." },
      { ic: "flower", h: "Seasonal Color", p: "Rotating displays that keep entries and focal points looking their best year-round." },
      { ic: "sprout", h: "Plant & Tree Installation", p: "Right plant, right place installs done to last, from perennials to shade trees." },
      { ic: "text", h: "Layout & Consultation", p: "A walkthrough and clear plan so you can picture the result before any work begins." },
    ],
  },
  "commercial-services": {
    ic: "home",
    title: "Commercial Services",
    intro: "Dependable grounds care for HOAs, office campuses, and managed properties, handled by one team on a set schedule.",
    includes: [
      { ic: "users", h: "HOAs & Communities", p: "Consistent care across common areas, entries, and amenities that residents notice." },
      { ic: "home", h: "Office & Corporate Campuses", p: "Polished landscapes that make the right first impression every single day." },
      { ic: "layers", h: "Grounds Management", p: "One team handling mowing, beds, trees, and seasonal work on a schedule you can count on." },
      { ic: "flower", h: "Enhancements & Seasonal Color", p: "Planned upgrades and color rotations that keep properties looking fresh." },
      { ic: "user", h: "Single Point of Contact", p: "One manager and one invoice across every site you oversee." },
    ],
  },
  "winter-services": {
    ic: "snow",
    title: "Winter Services",
    intro: "Around-the-clock snow and ice management that keeps your property safe and open all winter long.",
    includes: [
      { ic: "snow", h: "Snow Plowing", p: "Lots, drives, and access lanes cleared on a trigger you set, around the clock during a storm." },
      { ic: "footprints", h: "Shoveling & Walkways", p: "Hand-clearing for entries, walks, and stairs so people can move safely." },
      { ic: "snow", h: "Salting & De-icing", p: "Pre-treatment and follow-up applications to fight ice and reduce slip liability." },
      { ic: "wind", h: "Storm Monitoring", p: "We watch the forecast and dispatch crews so you never have to make the call." },
      { ic: "checkc", h: "Seasonal Contracts", p: "Per-event or full-season coverage, from the first snow through the spring thaw." },
    ],
  },
};

const SERVICE_ORDER = [
  "lawn-care", "hardscaping", "flower-bed-care",
  "landscape-design", "commercial-services", "winter-services",
];

function ServiceHero({ slug, svc }) {
  return (
    <section className="svc-hero">
      <div className="wrap">
        <nav className="crumb">
          <a href="/">Home</a>
          <Icon name="chevron" />
          <a href="/#services">Services</a>
          <Icon name="chevron" />
          <span>{svc.title}</span>
        </nav>
        <div className="svc-hero-row">
          <div className="svc-hero-ic"><Icon name={svc.ic} /></div>
          <div>
            <div className="eyebrow">What We Do</div>
            <h1>{svc.title}</h1>
          </div>
        </div>
        <p className="svc-intro">{svc.intro}</p>
        <div className="svc-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>
    </section>
  );
}

function ServiceIncludes({ svc }) {
  return (
    <section className="block svc-includes">
      <div className="wrap">
        <div className="sec-center reveal">
          <div className="divider"></div>
          <h2>What's included</h2>
          <p className="sub">Everything that comes with {svc.title.toLowerCase()} from Polaris, all handled by one team.</p>
        </div>
        <div className="inc-grid">
          {svc.includes.map((it, i) => (
            <div className="inc-card reveal" key={i}>
              <div className="inc-ic"><Icon name={it.ic} /></div>
              <div className="inc-body">
                <h3>{it.h}</h3>
                <p>{it.p}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceOther({ slug }) {
  const others = SERVICE_ORDER.filter((s) => s !== slug);
  return (
    <section className="block svc-other">
      <div className="wrap">
        <div className="sec-center reveal">
          <div className="divider"></div>
          <h2>Explore more services</h2>
        </div>
        <div className="other-row">
          {others.map((s) => {
            const o = SERVICE_DETAIL[s];
            return (
              <a className="other-card reveal" href={"/" + s} key={s}>
                <div className="other-ic"><Icon name={o.ic} /></div>
                <span>{o.title}</span>
                <Icon name="arrow" />
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ServiceCTA({ svc }) {
  return (
    <section className="svc-cta" id="request-band">
      <div className="wrap">
        <div className="svc-cta-grid">
          <div className="svc-cta-copy">
            <div className="eyebrow">Ready when you are</div>
            <h2>Let's get {svc.title.toLowerCase()} on your schedule.</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" />Free, no-obligation estimate</li>
              <li><Icon name="checkc" />Local crews serving DuPage &amp; greater Chicago</li>
              <li><Icon name="checkc" />Licensed &amp; insured since 2011</li>
            </ul>
          </div>
          <RequestForm />
        </div>
      </div>
    </section>
  );
}

function ServicePage() {
  useReveal();

  const slug = (typeof window !== "undefined" && window.POLARIS_SERVICE) || "lawn-care";
  const svc = SERVICE_DETAIL[slug] || SERVICE_DETAIL["lawn-care"];

  React.useEffect(() => { document.title = `${svc.title} · Polaris Landscape`; }, [svc.title]);

  return (
    <React.Fragment>
      <Nav />
      <ServiceHero slug={slug} svc={svc} />
      <ServiceIncludes svc={svc} />
      <ServiceCTA svc={svc} />
      <ServiceOther slug={slug} />
      <Footer />
    </React.Fragment>
  );
}

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