function ServiceSplit() {
  const services = [
    {
      icon: "seedling", eyebrow: "Lawn care",
      title: "A lawn that holds up through August",
      body: "Weekly maintenance, fertilization programs, aeration and overseeding — all run by NYSDEC-licensed applicators.",
      cta: "See lawn care",
      accent: "var(--turf-700)",
      link: "services/lawn-care/index.html",
    },
    {
      icon: "droplet", eyebrow: "Irrigation",
      title: "Smart irrigation, zoned for your property",
      body: "Sprinkler design, install and service — Hunter and Rain Bird systems with weather-aware controllers and seasonal start-ups.",
      cta: "See irrigation",
      accent: "var(--slate-600)",
      link: "services/irrigation/index.html",
    },
    {
      icon: "bug", eyebrow: "Pest & tick",
      title: "Safe perimeter treatment, disclosed fully",
      body: "Targeted mosquito and tick programs under the Neighbor Notification Law. Every visit is documented.",
      cta: "See pest control",
      accent: "var(--slate-600)",
      link: "services/pest-tick/index.html",
    },
    {
      icon: "layers", eyebrow: "Hardscaping",
      title: "Patios, driveways, walls — built to last",
      body: "ICPI/CMHA-certified installation on Unilock, Techo-Bloc, and Belgard systems, with a lifetime workmanship warranty.",
      cta: "See hardscape",
      accent: "var(--turf-700)",
      link: "services/paver-hardscaping/index.html",
    },
  ];
  return (
    <section id="services" style={{background: "var(--n-50)", padding: "96px 32px"}}>
      <div style={{maxWidth: 1200, margin: "0 auto"}}>
        <div style={{maxWidth: 760, marginBottom: 48}}>
          <span className="eyebrow">What we do</span>
          <h2 style={{fontFamily: "var(--font-display)", fontSize: 44, fontWeight: 800, letterSpacing: "-0.02em", lineHeight: 1.02, marginTop: 12, textTransform: "uppercase"}}>
            Four programs. One crew. One point of contact.
          </h2>
        </div>
        <div style={{display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20}}>
          {services.map((s, i) => (
            <a key={i} href={s.link || "#"} style={{
              textDecoration: "none", color: "inherit", borderRadius: 6, overflow: "hidden",
              border: "1px solid var(--n-200)", background: "var(--white)",
              display: "flex", flexDirection: "column",
            }}>
              <div style={{height: 8, background: s.accent}}/>
              <div style={{padding: 28, display: "flex", flexDirection: "column", flex: 1}}>
                <Icon name={s.icon} size={28} stroke={1.5} color="var(--turf-700)"/>
                <span className="eyebrow" style={{marginTop: 20}}>{s.eyebrow}</span>
                <h3 style={{fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 800, lineHeight: 1.15, letterSpacing: "-0.01em", marginTop: 8, textTransform: "uppercase"}}>{s.title}</h3>
                <p style={{fontSize: 15, color: "var(--slate-600)", lineHeight: 1.6, marginTop: 12, flex: 1}}>{s.body}</p>
                <span style={{marginTop: 22, display: "inline-flex", alignItems: "center", gap: 6, fontWeight: 700, fontSize: 13, letterSpacing: "0.04em", textTransform: "uppercase"}}>
                  {s.cta} <Icon name="arrowRight" size={14}/>
                </span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.ServiceSplit = ServiceSplit;