// about.jsx, dedicated About page. Reuses Nav, Footer, CountUp, theme + tweaks.
// Draft copy is editable; founder name / specific history are placeholders to confirm.

const ABOUT_VALUES = [
  { ic: "checkc", h: "Show up, every time", p: "The same crew, on the same day, doing what we said we would. Reliability is the whole job, and we treat it that way." },
  { ic: "sprout", h: "Care for the details", p: "Clean edges, healthy plants, and a property that looks finished, not just mowed. The small things are what people notice." },
  { ic: "users", h: "One team, one contact", p: "From the first quote to every visit after, you work with people who know your property by name, not a call center." },
  { ic: "phone", h: "Answer the phone", p: "When something comes up, you reach a real person who can act on it. Good communication is rare in this trade, so we lead with it." },
];

const ABOUT_DIFF = [
  { ic: "calendar", h: "Year-round, not seasonal", p: "Mowing, plantings, hardscape, and snow under one roof, so your property is cared for in every season by the same team." },
  { ic: "badge", h: "Built on referrals", p: "Most of our growth has come from neighbors and property managers passing our name along. We work to keep earning it." },
  { ic: "shield", h: "Licensed & insured", p: "Fully covered for residential and commercial work, with documentation available whenever you need it." },
];

function AboutHero() {
  return (
    <section className="about-hero">
      <div className="wrap">
        <nav className="crumb">
          <a href="/">Home</a>
          <Icon name="chevron" />
          <span>About</span>
        </nav>
        <div className="about-hero-inner">
          <div className="eyebrow">About Polaris Landscape</div>
          <h1>Rooted in Chicagoland since 2011.</h1>
          <p className="about-hero-sub">We are a local landscape company built on a simple idea: do excellent work, show up when we say we will, and treat every property like it is our own. Fifteen years later, that is still how we run.</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 AboutStory() {
  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>Our story</h2>
            <p>Polaris Landscape was started in 2011 by Brendan Lockerby, in a Chicago suburb, with a push mower and a few neighbors who needed their grass cut. He founded the business as <strong>Cut Right Landscaping</strong>, kept showing up, and the lawns kept multiplying. By the end of high school it was a real operation: equipment, a truck, repeat clients, and standards.</p>
            <figure className="story-photo">
              <img src="/assets/cut-right-trailer.jpg" alt="Brendan with the Cut Right Landscaping trailer, the name Polaris operated under until 2025." loading="lazy" />
              <figcaption>Brendan with the original Cut Right rig in 2020, the name we ran under from 2011 until the 2025 rebrand to Polaris.</figcaption>
            </figure>
            <p>In 2018, Brendan enrolled in the Landscape Architecture program at the University of Illinois at Urbana–Champaign, pairing nearly a decade of in-the-field practice with the design, plant science, and site engineering that separate a landscape company from a landscape firm. He graduated in 2022, and the business expanded sharply: maintenance crews scaled, snow &amp; ice operations matured, design-build and enhancements joined the offering, and the Westmont headquarters opened.</p>
            <p>In 2025, Cut Right rebranded to <strong>Polaris Landscape</strong>, a more comprehensive name for a fully comprehensive firm. Same crews, same standard, broader scope. Today, Polaris cares for 240+ commercial, HOA, residential, and industrial properties across Chicagoland.</p>
          </div>
          <aside className="story-facts reveal">
            <h3>Quick facts</h3>
            <ul>
              <li><span className="fk">Founded</span><span className="fv">2011</span></li>
              <li><span className="fk">Headquarters</span><span className="fv">Westmont, IL</span></li>
              <li><span className="fk">Service area</span><span className="fv">Greater Chicagoland</span></li>
              <li><span className="fk">Serves</span><span className="fv">Residential &amp; commercial</span></li>
              <li><span className="fk">Status</span><span className="fv">Licensed &amp; insured</span></li>
            </ul>
            <a className="btn btn-green btn-block" href="/commercial-services">Commercial services <Icon name="arrow" /></a>
          </aside>
        </div>
      </div>
    </section>
  );
}

function AboutStats() {
  const stats = [
    { target: 1000, suffix: "+", v: "Clients Served" },
    { target: 240, suffix: "+", v: "Active Properties" },
    { target: 15, suffix: "", v: "Years in Business" },
    { target: 100, suffix: "%", v: "Licensed & Insured" },
  ];
  return (
    <section className="about-statband">
      <div className="wrap">
        <div className="statband-grid">
          {stats.map((s, i) => (
            <div className="sb reveal" key={i}>
              <div className="sb-k"><CountUp target={s.target} suffix={s.suffix} /></div>
              <div className="sb-v">{s.v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutValues() {
  return (
    <section className="block about-values">
      <div className="wrap">
        <div className="sec-center reveal">
          <div className="divider"></div>
          <h2>What we stand for</h2>
          <p className="sub">Four things we will not compromise on, no matter how busy the season gets.</p>
        </div>
        <div className="values-grid">
          {ABOUT_VALUES.map((v, i) => (
            <div className="value-card reveal" key={i}>
              <div className="value-ic"><Icon name={v.ic} /></div>
              <h3>{v.h}</h3>
              <p>{v.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutDiff() {
  return (
    <section className="block about-diff">
      <div className="wrap">
        <div className="sec-center reveal">
          <div className="divider"></div>
          <h2>Why people stay with Polaris</h2>
        </div>
        <div className="diff-grid">
          {ABOUT_DIFF.map((d, i) => (
            <div className="diff-card reveal" key={i}>
              <div className="diff-ic"><Icon name={d.ic} /></div>
              <div>
                <h3>{d.h}</h3>
                <p>{d.p}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutCTA() {
  return (
    <section className="about-cta">
      <div className="wrap">
        <div className="about-cta-inner reveal">
          <div className="eyebrow">Let's work together</div>
          <h2>See what Polaris can do for your property.</h2>
          <p>Tell us what you need and a member of our team will follow up within one business day. No pressure, no obligation.</p>
          <div className="about-cta-row">
            <a className="btn btn-amber btn-upper" href="/#request">Get a quote <Icon name="arrow" /></a>
            <a className="btn btn-ghost-dark" href={TEL}><Icon name="phone" />{PHONE}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutPage() {
  useReveal();
  React.useEffect(() => { document.title = "About · Polaris Landscape"; }, []);

  return (
    <React.Fragment>
      <Nav />
      <AboutHero />
      <AboutStory />
      <AboutStats />
      <AboutValues />
      <AboutDiff />
      <AboutCTA />
      <Footer />
    </React.Fragment>
  );
}

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