/* global React, Reveal, SectionHeader */
const PROJECTS = [
  "Snowy 2.0",
  "Northern Connector",
  "T2T",
  "Superway",
  "Oaklands Rail",
  "RAAF Base",
  "Major Adelaide Intersection Upgrades",
  "SA Water Frameworks",
];

function ProjectExperience() {
  return (
    <section id="projects" className="pc-section pc-section--projects">
      <div className="pc-container">
        <SectionHeader
          num="02"
          label="Project experience"
          title={<>Experience built on <em>major infrastructure work.</em></>}
          lead="Pathway Civil is operator-led by Josh Clarke, who brings 17 years of civil construction experience across major infrastructure, water, transport, defence and construction environments. Experience across major projects including:"
        />
        <Reveal className="pc-projects-list">
          <ul>
            {PROJECTS.map((p) => (
              <li key={p}>
                <span className="pc-mono pc-projects-list__tick">—</span>
                <span className="pc-projects-list__name">{p}</span>
              </li>
            ))}
          </ul>
          <p className="pc-projects-list__note">
            Listed projects represent operator experience gained while working with prior employers and contractors.
            Pathway Civil does not claim company-level scope, contract value or completion of these works.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

window.ProjectExperience = ProjectExperience;