/* global React, SectionHead */

const DRILLHOLES = [
  { id: "KAD-001", region: "Kaduna, Nigeria", mineral: "Lithium pegmatite", conf: 92, status: "Active",   updated: "2 min" },
  { id: "SA-003",  region: "South Africa",    mineral: "PGM (Bushveld)",    conf: 94, status: "Active",   updated: "8 min" },
  { id: "KAD-007", region: "Kaduna, Nigeria", mineral: "Gold (orogenic)",   conf: 84, status: "Staging",  updated: "47 min" },
  { id: "SA-008",  region: "South Africa",    mineral: "Chromite seam",     conf: 88, status: "Active",   updated: "1 hr" },
  { id: "KAD-012", region: "Kaduna, Nigeria", mineral: "Tantalum-Nb",       conf: 78, status: "Review",   updated: "3 hr" },
  { id: "SA-014",  region: "South Africa",    mineral: "Copper porphyry",   conf: 76, status: "Review",   updated: "5 hr" },
];

function Drillholes() {
  return (
    <section className="section" id="drillholes" data-screen-label="07 Drillholes">
      <SectionHead
        num="§ 05 · LIVE"
        eyebrow="Active drillholes · Pilot regions"
        h2={<>What's in<br/>the ground.</>}
        lead="Every active hole across both pilot programs. Updates stream from field-team apps into the same console you use to plan the next campaign."
      />

      <div className="tbl-wrap reveal">
        <table className="tbl">
          <thead>
            <tr>
              <th>Hole ID</th>
              <th>Region</th>
              <th>Target mineral</th>
              <th>Grade confidence</th>
              <th>Status</th>
              <th>Last update</th>
            </tr>
          </thead>
          <tbody>
            {DRILLHOLES.map(d => (
              <tr key={d.id}>
                <td><span className="tbl-id">{d.id}</span></td>
                <td>{d.region}</td>
                <td style={{ color: "var(--fg-5)" }}>{d.mineral}</td>
                <td>
                  <div className="cbar">
                    <div className="cbar-track"><div className="cbar-fill" style={{ width: d.conf + "%" }} /></div>
                    <span className="cbar-num">{d.conf}%</span>
                  </div>
                </td>
                <td>
                  <span className={"pill" + (d.status === "Active" ? " on" : "")}>
                    <span className="pill-dot" />{d.status}
                  </span>
                </td>
                <td className="mono" style={{ color: "var(--fg-5)", fontSize: "12px" }}>{d.updated} ago</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}

window.Drillholes = Drillholes;