/* global React */

/* ============================================================
   <Section> — reusable section header (eyebrow + number + h2 + lead)
============================================================ */
function SectionHead({ num, eyebrow, h2, lead, id }) {
  return (
    <div className="section-head reveal">
      <div className="section-head-l">
        <span className="section-num"><span className="dash" />{num}</span>
        <span className="eyebrow">{eyebrow}</span>
      </div>
      <div>
        <h2 className="section-h2 reveal">{h2}</h2>
        {lead && <p className="section-lead" style={{ marginTop: 24 }}>{lead}</p>}
      </div>
    </div>
  );
}

/* ============================================================
   <WhyThis> — three reason cards (matches lithosquare layout)
============================================================ */
function WhyThis() {
  const items = [
    { n: "01", h: "Every breakthrough needs a rock.",       p: "AI compute, electrified transport, and rebuilt grids are all bottlenecked on the same handful of elements: lithium, copper, cobalt, nickel, the rare earths. The curve for each one is vertical. The pipeline behind it isn't." },
    { n: "02", h: "Today's reserves were charted for yesterday.", p: "The world's known deposits were mapped for a 20th-century economy. They were never sized for the next one, and the easy ones are spoken for. Net-new discovery is the only way the numbers reconcile." },
    { n: "03", h: "Budgets doubled. Hit rates didn't.",     p: "Exploration capital has roughly doubled this century while discovery success has roughly halved. The constraint isn't money or boots on the ground anymore; it's the signal you point them at." },
  ];
  return (
    <section className="section" id="why" data-screen-label="02 Why">
      <SectionHead
        num="§ 01 · CONTEXT"
        eyebrow="Why this matters"
        h2={<>The next tech boom<br/>runs on metal we<br/>haven't found yet.</>}
        lead="The energy transition and the AI build-out share one quiet dependency: a new wave of mineral discovery that legacy methods can't deliver fast enough."
      />
      <div className="why reveal">
        {items.map(it => (
          <div className="why-card" key={it.n}>
            <span className="why-card-n">{it.n}</span>
            <p className="why-card-p">{it.p}</p>
            <h3 className="why-card-h">{it.h}</h3>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ============================================================
   <Process> — Target → Discover → Delineate (3 big steps)
============================================================ */
function Process() {
  const steps = [
    {
      n: "01",
      name: "Surface",
      p: "Every relevant dataset in your jurisdiction (magnetics, radiometrics, geochem, drillhole history, artisanal-mining activity) lands as a layer in the same workspace. No more CSVs in a shared drive. No more proprietary file formats nobody can open.",
      tags: ["H3 hex grids", "Geophysics ingest", "ASM signal", "Tenure & permits"],
    },
    {
      n: "02",
      name: "Score",
      p: "Per-jurisdiction discovery models read every layer and rank every hex on the map. Each score comes with an explanation a geologist can defend in a meeting: which signals fired, which didn't, and how confident the model is about the call.",
      tags: ["Per-jurisdiction models", "Explainable outputs", "Confidence bands", "Continuous retraining"],
    },
    {
      n: "03",
      name: "Sequence",
      p: "Ranked targets get turned into a field plan: where to walk first, where to sample, where to drill. Logistics, terrain, water, and access scores fold in automatically so a high-prospectivity hex you can't actually reach drops down the list.",
      tags: ["Campaign planner", "Logistics overlay", "Offline-first capture", "Live model update"],
    },
  ];
  return (
    <section className="section" id="process" data-screen-label="03 Process">
      <SectionHead
        num="§ 01 · METHOD"
        eyebrow="How it works"
        h2={<>Surface every signal.<br/>Score every hex.<br/>Move on the best ones.</>}
        lead="One workflow from the data you already have to the holes you're about to drill. Built so the same hex you score on Monday is the hex your crew is standing on next quarter."
      />
      <div className="process reveal">
        {steps.map(s => (
          <div className="process-step" key={s.n}>
            <div className="process-step-n">{s.n} / {steps.length.toString().padStart(2,"0")}</div>
            <h3 className="process-step-h">{s.name}.</h3>
            <div className="process-step-r">
              <p className="process-step-p">{s.p}</p>
              <div className="process-step-features">
                {s.tags.map(t => <span className="process-tag" key={t}>{t}</span>)}
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.SectionHead = SectionHead;
window.WhyThis = WhyThis;
window.Process = Process;