// sections.jsx, What We Do, Stats, Reviews, Seasonal timeline, Footer
const SERVICES = [
  { ic: "scissors", slug: "lawn-care", h: "Lawn Care", items: ["Mowing", "Leaf Care", "Aeration", "Overseeding"] },
  { ic: "layers", slug: "hardscaping", h: "Hardscaping", items: ["Paver Patios", "Retaining Walls", "Walkways"] },
  { ic: "flower", slug: "flower-bed-care", h: "Flower Bed Care", items: ["Mulch Installation", "Weeding", "Perennials"] },
  { ic: "tree", slug: "landscape-design", h: "Landscape Design", items: ["Planting Design", "Property Makeovers", "Seasonal Color"] },
  { ic: "home", slug: "commercial-services", h: "Commercial Services", items: ["HOAs & Communities", "Office Campuses", "Grounds Management"] },
  { ic: "snow", slug: "winter-services", h: "Winter Services", items: ["Snow Removal", "Salting & De-icing"] },
];

function WhatWeDo() {
  return (
    <section className="block" id="services">
      <div className="wrap">
        <div className="sec-center reveal">
          <div className="divider"></div>
          <h2>What We Do</h2>
          <p className="sub">Everything your property needs, handled by one team you can count on.</p>
        </div>
        <div className="cards">
          {SERVICES.map((s, i) => (
            <div className="scard reveal" key={i}>
              <div className="head">
                <div className="ic"><Icon name={s.ic} /></div>
                <h3>{s.h}</h3>
              </div>
              <ul>{s.items.map((it, j) => <li key={j}>{it}</li>)}</ul>
              <a className="link-more" href={"/" + s.slug}>Learn more <Icon name="arrow" /></a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Animated count-up, fires once when scrolled into view.
function CountUp({ target, suffix = "", duration = 1500 }) {
  const ref = React.useRef(null);
  const [val, setVal] = React.useState(0);
  const done = React.useRef(false);

  React.useEffect(() => {
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) { setVal(target); return; }
    const el = ref.current;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !done.current) {
          done.current = true;
          const start = performance.now();
          const tick = (now) => {
            const p = Math.min((now - start) / duration, 1);
            const eased = 1 - Math.pow(1 - p, 3); // easeOutCubic
            setVal(Math.round(target * eased));
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [target, duration]);

  return <span ref={ref}>{val.toLocaleString()}{suffix}</span>;
}

function Stats() {
  const stats = [
    { ic: "users", target: 1000, suffix: "+", v: "Clients Served" },
    { ic: "building", target: 240, suffix: "+", v: "Active Properties" },
    { ic: "spark", target: 15, suffix: "", v: "Years in Business" },
  ];
  return (
    <section className="block" style={{ paddingTop: 30 }}>
      <div className="wrap">
        <div className="sec-center reveal">
          <div className="divider"></div>
          <h2>Polaris by the Numbers</h2>
        </div>
        <div className="stats">
          {stats.map((s, i) => (
            <div className="stat reveal" key={i}>
              <div className="chip"><Icon name={s.ic} /></div>
              <div className="k"><CountUp target={s.target} suffix={s.suffix} /></div>
              <div className="v">{s.v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const REVIEWS = [
  { nm: "Michael Stahl", q: "Great work by the whole Polaris team, highly recommend!", ago: "7 weeks ago" },
  { nm: "Katie Johnson", q: "On time every week and the lawn has never looked better. Easy to work with.", ago: "8 weeks ago" },
  { nm: "Allison DiLiberto", q: "Good service and helpful with our landscaping project. High quality, and if something isn't right they fix it.", ago: "10 weeks ago" },
  { nm: "Noreen Fitzgerald", q: "Terrific job cleaning up my flower beds and laying down mulch. Happy to have a beautiful backyard back!", ago: "11 weeks ago" },
  { nm: "Dana Reilly", q: "They redesigned our whole backyard and still mow it every week. One call handles everything.", ago: "14 weeks ago" },
  { nm: "Sheri Reditsch", q: "We've worked with Polaris for years because they always do an excellent job. The team is fantastic.", ago: "15 weeks ago" },
];

function Reviews() {
  return (
    <section className="block reviews">
      <div className="wrap">
        <div className="ghead reveal">
          <div className="g"><GoogleG /> 4.9 on Google</div>
          <div className="score"><b>4.9</b><span className="stars"><Stars /></span></div>
          <div className="cnt">(243 reviews) · <a href="#">Leave a review</a></div>
        </div>
        <div className="rtrack">
          {REVIEWS.map((r, i) => {
            const initials = r.nm.split(" ").map(w => w[0]).join("").slice(0, 2);
            return (
              <div className="rcard" key={i}>
                <div className="top">
                  <div className="av">{initials}</div>
                  <div className="meta"><div className="nm">{r.nm}</div><div className="stars"><Stars /></div></div>
                </div>
                <p>“{r.q}”</p>
                <div className="ago">{r.ago}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ── Seasonal timeline ──
const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const TL_ROWS = [
  { ic: "scissors", name: "Weekly Mowing", color: "#6aa84f", bars: [{ s: 4, e: 11, soft: true }, { s: 5, e: 11 }] },
  { ic: "sprout", name: "Aeration + Overseeding", color: "#6aa84f", bars: [{ s: 3, e: 5 }, { s: 9, e: 10 }] },
  { ic: "layers", name: "Mulch Installation", color: "#b5722e", bars: [{ s: 3, e: 11, soft: true }, { s: 4, e: 6 }] },
  { ic: "brush", name: "Trimming & Pruning", color: "#6aa84f", bars: [{ s: 5, e: 10, soft: true }, { s: 6, e: 7 }] },
  { ic: "wind", name: "Spring / Fall Cleanup", color: "#6aa84f", bars: [{ s: 2, e: 4 }, { s: 9, e: 12 }] },
  { ic: "leaf", name: "Leaf Care", color: "#e08a2b", bars: [{ s: 10, e: 12 }] },
  { ic: "snow", name: "Snow Removal", color: "#5b86b3", bars: [{ s: 1, e: 3 }, { s: 11, e: 13, soft0: 11 }] },
];

function Timeline() {
  return (
    <section className="block" style={{ background: "#fff" }}>
      <div className="wrap">
        <div className="sec-center reveal" style={{ marginBottom: 40 }}>
          <div className="eyebrow">Property Care</div>
          <h2 style={{ marginTop: 10 }}>Year-round, right on time.</h2>
          <p className="sub">Different seasons, different services, same crew showing up consistently. Here's how the year breaks down.</p>
        </div>
        <div className="timeline reveal">
          <div className="tl-grid">
            <div className="tl-seasons">
              <div></div>
              <div className="s winter"><Icon name="snow" />Winter</div>
              <div className="s spring"><Icon name="sprout" />Spring</div>
              <div className="s summer"><Icon name="spark" />Summer</div>
              <div className="s fall"><Icon name="leaf" />Fall</div>
            </div>
            <div className="tl-months">
              <div className="lbl">Our Services</div>
              {MONTHS.map(m => <div className="m" key={m}>{m}</div>)}
            </div>
            {TL_ROWS.map((row, i) => (
              <div className="tl-row" key={i}>
                <div className="name"><Icon name={row.ic} />{row.name}</div>
                {row.bars.map((b, j) => (
                  <div key={j} className={"tl-bar" + (b.soft ? " soft" : "")}
                    style={{ gridColumn: `${b.s + 1} / ${b.e + 1}`, background: row.color, gridRow: 1, marginLeft: 2, marginRight: 2 }}></div>
                ))}
              </div>
            ))}
          </div>
          <div className="tl-legend">
            <div className="lg"><span className="sw"></span>Primary season</div>
            <div className="lg"><span className="sw soft"></span>Flexible window</div>
            <div className="lg note">Windows shift slightly with weather.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot" id="careers">
      <div className="wrap">
        <div className="top">
          <div className="brand-col">
            <div className="brand"><LogoMark /><img className="logo-word foot-word" src="/assets/polaris-wordmark.svg" alt="Polaris Landscape" /></div>
            <p className="tagline">Designing, building, and maintaining beautiful Chicagoland properties since 2011.</p>
          </div>
          <div className="col"><h4>Services</h4><a href="/#services">Lawn Care</a><a href="/#services">Hardscaping</a><a href="/#services">Flower Beds</a><a href="/#services">Snow Removal</a></div>
          <div className="col"><h4>Company</h4><a href="/about">About</a><a href="/commercial-services">Commercial</a><a href="/#request">Get a Quote</a><a href="#">Client Hub</a></div>
          <div className="col"><h4>Contact</h4><a href={TEL}>{PHONE}</a><a href="mailto:hello@polarislandscape.com">hello@polarislandscape.com</a><a href="#">Serving DuPage &amp; greater Chicago</a></div>
        </div>
        <div className="base">
          <span>© 2026 Polaris Landscape · Licensed &amp; insured</span>
          <span>polarislandscape.com</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { WhatWeDo, Stats, CountUp, Reviews, Timeline, Footer });