/* global React, Reveal, SectionHeader, CivilIcon */
const POINTS = [
  { n: "01", icon: "clock",           h: "17 years of civil experience.", p: "Operator-led by Josh Clarke, with 17 years on civil construction and major infrastructure scopes across South Australia." },
  { n: "02", icon: "hard-hat",        h: "Major project background.", p: "Operator experience across water, transport, defence and major Adelaide civil works informs every job — the standards transfer down to a one-day wet hire." },
  { n: "03", icon: "gauge",           h: "Technical operating ability.", p: "Comfortable on plant from skid steer to 70-tonne excavator, with attachments matched to scope on dispatch." },
  { n: "04", icon: "ruler",           h: "Attention to detail.", p: "Set-outs, levels, depths and finishes done to spec the first time. The next trade should not have to fix yesterday's machine work." },
  { n: "05", icon: "calendar-days",   h: "Flexibility.", p: "Scope changes, programme shifts and on-site adjustments are part of civil work. Wet hire stays useful when the day changes." },
  { n: "06", icon: "truck",           h: "Short-term wet hire focus.", p: "Built around 1–2 day jobs and short scopes. Operator, machine and float together — ready when the call comes in." },
  { n: "07", icon: "phone",           h: "Clear communication.", p: "Direct line, direct reply. Quotes, scope confirmation and on-site updates handled by the operator running the work." },
  { n: "08", icon: "arrow-up-right",  h: "Easy enquiry process.", p: "Send the scope, the location and the timeframe. You get a direct response — not a sales process or a long form." },
];

function WhyPathway() {
  return (
    <section id="why" className="pc-section pc-section--why">
      <div className="pc-container">
        <SectionHeader
          num="04"
          label="Why Pathway Civil"
          title={<>Capable. Direct. <em>Easy hire.</em></>}
          lead="Three things matter when a machine arrives on your site: the operator, how easy it is to engage, and whether the work gets done. Pathway Civil is built around all three — across South Australia."
        />
        <div className="pc-why pc-why--4col pc-why--rows-2">
          {POINTS.map((p, i) => (
            <Reveal as="article" key={p.n} className="pc-why__item" delay={i * 50}>
              <CivilIcon name={p.icon} className="pc-why__icon" />
              <span className="pc-why__num pc-mono">{p.n}</span>
              <h3 className="pc-h4 pc-why__head">{p.h}</h3>
              <p className="pc-why__body">{p.p}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.WhyPathway = WhyPathway;