/* global React, Reveal, SectionHeader, CivilIcon */
const SERVICES = [
  { n: "01", icon: "truck",          t: "Wet machine hire",     d: "Operator, machine, fuel and float — by the day or by the project." },
  { n: "02", icon: "compass",        t: "Site preparation",     d: "Set-out, strip, cut to spec, batter, pad ready for slab." },
  { n: "03", icon: "pickaxe",        t: "Trenching",            d: "Service trenches at depth and slope — comms, water, sewer, stormwater." },
  { n: "04", icon: "droplets",       t: "Drainage & stormwater",d: "Sub-soil and stormwater systems for residential, subdivision and commercial sites." },
  { n: "05", icon: "layers",         t: "Civil earthworks",     d: "Bulk and detail earthworks for builders, trades and construction teams." },
  { n: "06", icon: "truck",          t: "Roadworks support",    d: "Operator support on road construction, widening and reinstatement scopes." },
  { n: "07", icon: "ruler",          t: "Kerbing support",      d: "Excavation and prep for kerb-and-channel and pram-ramp installation." },
  { n: "08", icon: "hard-hat",       t: "Concrete preparation", d: "Pad prep, cut-off, trim and box-out ready for slab and footing pours." },
  { n: "09", icon: "map-pin",        t: "Subdivisions",         d: "Operator support across subdivision earthworks, services and drainage scopes." },
  { n: "10", icon: "truck",          t: "Plant hire",           d: "Short-term plant supplied with experienced operator. Hired plant arranged where required." },
  { n: "11", icon: "hard-hat",       t: "Project support",      d: "Wet hire support for builders, trades, councils and construction teams as scope demands." },
  { n: "12", icon: "calendar-days",  t: "Project management",   d: "Coordination and on-site management for civil scopes within larger construction programmes." },
];

function ServiceCard({ s, idx }) {
  return (
    <Reveal as="article" className="pc-service" delay={idx * 35}>
      <div className="pc-service__num"><span className="pc-mono">{s.n}</span></div>
      <div className="pc-service__body">
        <CivilIcon name={s.icon} className="pc-service__civil-icon" />
        <h3 className="pc-h3 pc-service__title">{s.t}</h3>
        <p className="pc-service__desc">{s.d}</p>
      </div>
      <svg className="pc-service__icon-arrow" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M7 17 17 7" /><path d="M9 7h8v8" />
      </svg>
    </Reveal>
  );
}

function Services() {
  return (
    <section id="services" className="pc-section pc-section--services">
      <div className="pc-container">
        <SectionHeader
          num="01"
          label="Services"
          title={<>Civil earthworks &amp; <em>wet hire support.</em></>}
          lead="Twelve service lines, one operator, one direct line. Scope what you need — Pathway Civil quotes the work, the machine and the timeframe."
        />
        <div className="pc-services-grid">
          {SERVICES.map((s, i) => <ServiceCard key={s.n} s={s} idx={i} />)}
        </div>
      </div>
    </section>
  );
}

window.Services = Services;