function Services() {
  const services = [
    { num: "01", icon: <Icon.Kitchen />, title: "Outdoor Kitchens", desc: "Built-in grills, granite countertops, and full kitchen setups for true outdoor cooking and entertaining.", img: "assets/outdoor-kitchen-hero.jpg", href: "services/outdoor-kitchens.html" },
    { num: "02", icon: <Icon.Pool />, title: "Pools", desc: "Custom pool decks, surrounds, and full pool-area builds — from travertine to natural stone.", img: "assets/pool-4.jpg", href: "services/pools.html" },
    { num: "03", icon: <Icon.Pergola />, title: "Pergolas & Shade Structures", desc: "Cedar, aluminum, and louvered pergolas to extend shade and outdoor season year-round.", img: "assets/service-pergola.jpg", bgPos: "center top", href: "services/pergolas.html" },
    { num: "04", icon: <Icon.Deck />, title: "Custom Decks", desc: "Composite, hardwood, and pressure-treated decks engineered to last decades in any climate.", img: "assets/deck-hero.jpg", href: "services/custom-decks.html" },
  ];

  return (
    <section className="vp-section cream" id="services">
      <div className="vp-section-head">
        <div className="eyebrow">Our Services</div>
        <h2>What We <span className="vp-underlined">Do</span></h2>
        <p className="sub">From single-feature additions to full backyard transformations, every project is built by craftsmen who care about the details.</p>
      </div>
      <div className="vp-services-grid four">
        {services.map((s, i) => (
          <a key={i} href={s.href} className="vp-service-card vp-service-card-link">
            <div className="vp-service-image" style={s.img ? { backgroundImage: `url(${s.img})`, backgroundSize: "cover", backgroundPosition: s.bgPos || "center" } : undefined}>
              {!s.img && <span className="vp-img-pill">{s.title} photo</span>}
            </div>
            <div className="vp-service-body">
              <span className="num">{s.num}</span>
              <div className="icon-box">{s.icon}</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <span className="vp-service-link">Learn more <Icon.ArrowRight size={14} /></span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}
window.Services = Services;