/* global React, Reveal, SectionHeader, CivilIcon */
const CAPABILITY = [
  { n: "01", icon: "pickaxe",        name: "Excavators up to 70T", cls: "Bulk excavation · Major civil" },
  { n: "02", icon: "pickaxe",        name: "Long Reach Excavators", cls: "Drainage · Water edges" },
  { n: "03", icon: "layers",         name: "Sheet Piling",          cls: "Retention · Shoring" },
  { n: "04", icon: "triangle-alert", name: "Rock Breaker",          cls: "Breaking · Demolition" },
  { n: "05", icon: "pickaxe",        name: "Ripper",                cls: "Hard ground · Subsoil" },
  { n: "06", icon: "wrench",         name: "Tilt Rotator",          cls: "Precision grading · Trim" },
  { n: "07", icon: "wrench",         name: "Mulcher",               cls: "Vegetation clearing" },
  { n: "08", icon: "wrench",         name: "Grabs",                 cls: "Material handling · Load-out" },
  { n: "09", icon: "wrench",         name: "Vac Lifter",            cls: "Pipe · Slab placement" },
  { n: "10", icon: "wrench",         name: "Auger",                 cls: "Post holes · Piers" },
  { n: "11", icon: "truck",          name: "Skid Steer",            cls: "Detail work · Tight access" },
  { n: "12", icon: "pickaxe",        name: "Backhoe",               cls: "Services · Drainage trenches" },
  { n: "13", icon: "truck",          name: "Front End Loader",      cls: "Bulk load-out · Stockpile" },
  { n: "14", icon: "truck",          name: "Multi Combination",     cls: "Manual · Roadranger certified" },
];

const TICKETS = [
  "First Aid",
  "White Card",
  "Cert III Civil Construction (in progress)",
];

function MachineCapability() {
  return (
    <section id="capability" className="pc-section pc-section--capability">
      <div className="pc-container">
        <SectionHeader
          num="03"
          label="Machine capability"
          title={<>From skid steer to <em>70-tonne excavator.</em></>}
          lead="Pathway Civil supports wet hire and civil works using machinery Josh Clarke is licensed and capable to operate, including hired machinery arranged where the scope requires it. Specific make, model and availability confirmed at enquiry."
        />

        <div className="pc-caplist">
          {CAPABILITY.map((m, i) => (
            <Reveal key={m.n} as="div" className="pc-caplist__row" delay={i * 25}>
              <span className="pc-caplist__num pc-mono">{m.n}</span>
              <span className="pc-caplist__name">
                <CivilIcon name={m.icon} className="pc-caplist__icon" />
                {m.name}
              </span>
              <span className="pc-caplist__cls">{m.cls}</span>
            </Reveal>
          ))}
        </div>

        <Reveal className="pc-capability-foot">
          <div>
            <span className="pc-eyebrow__label">Operator tickets</span>
            <div className="pc-tickets">
              {TICKETS.map((t) => (
                <span key={t} className="pc-ticket">
                  <span className="pc-ticket__dot" />
                  <span>{t}</span>
                </span>
              ))}
            </div>
            <p>Specific machine and attachment ticket schedules confirmed on enquiry.</p>
          </div>
          <div>
            <span className="pc-eyebrow__label">Hired plant</span>
            <p>Where a job calls for plant outside the immediate fleet, Pathway Civil arranges hired machinery and operates it under wet hire — keeping the operator, scope and accountability in one place.</p>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.MachineCapability = MachineCapability;