/* ============================================================
   KERAUNOS — FOOTPRINT
   ============================================================ */

function ImageBand() {
  return (
    <section className="panel" data-theme="tint" style={{ borderBottom: "1px solid var(--line)" }}>
      <div className="media media--cinematic" style={{ borderRadius: 0, border: "none", height: "clamp(360px,52vh,580px)", position: "relative" }}>
        <img src="assets/footprint.png" alt="Energy infrastructure across South America" />
        <div className="media__scrim" />
        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "flex-end" }}>
          <div className="wrap" style={{ width: "100%", paddingBottom: "clamp(28px,4vw,52px)" }}>
            <Reveal><div className="h2 balance" style={{ maxWidth: "20ch" }}>We build where the power already is.</div></Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function Why() {
  const why = window.KDATA.why;
  return (
    <section className="panel sec" data-theme="dark">
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(28px,4vw,72px)", alignItems: "end", marginBottom: "clamp(40px,5vw,64px)" }} className="why-head">
          <Head eyebrow="Why South America, why now" title={<>The power exists. The demand exists.</>} max="16ch" />
          <p className="body balance" style={{ maxWidth: "46ch" }}>We chose the Southern Cone for one reason: it holds the largest concentration of cheap, clean, under-used power on the planet — exactly when intelligence became power-bound.</p>
        </div>
        <div className="grid-4">
          {why.map((p, i) => (
            <Reveal key={i} delay={i * 70}>
              <div style={{ borderTop: "2px solid var(--accent)", paddingTop: 22, height: "100%" }}>
                <div className="mono faint" style={{ fontSize: 12 }}>0{i + 1}</div>
                <h3 className="h3" style={{ fontSize: 20, marginTop: 14 }}>{p.h}</h3>
                <p className="body" style={{ fontSize: 14.5, marginTop: 12 }}>{p.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Countries() {
  const c = window.KDATA.countries;
  return (
    <section className="panel sec" data-theme="light">
      <div className="wrap">
        <Head eyebrow="The platform" title={<>Three countries. One platform.</>}
          lead="One platform across Argentina, Brasil and Paraguay — each selected for the same thing: cheap, clean, abundant power in an investment-ready jurisdiction." max="20ch" />
        <div style={{ marginTop: "clamp(40px,5vw,60px)", display: "flex", flexDirection: "column", gap: 16 }}>
          {c.map((country, i) => (
            <Reveal key={i} delay={i * 60}>
              <div className="card" style={{ display: "grid", gridTemplateColumns: "0.8fr 1.2fr", gap: "clamp(20px,3vw,48px)", alignItems: "center" }} className="ctry">
                <div>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 14 }}>
                    <h3 style={{ fontSize: "clamp(28px,3.4vw,44px)", fontWeight: 600, letterSpacing: "-0.03em" }}>{country.name}</h3>
                    <span className="mono accent" style={{ fontSize: 14 }}>{country.code}</span>
                  </div>
                  <div className="eyebrow eyebrow--muted" style={{ marginTop: 14, fontSize: 11.5 }}>{country.tag}</div>
                </div>
                <div>
                  <p style={{ fontSize: "clamp(17px,1.7vw,21px)", fontWeight: 500, letterSpacing: "-0.01em", lineHeight: 1.3 }}>{country.lead}</p>
                  <p className="body" style={{ fontSize: 15, marginTop: 12, maxWidth: "48ch" }}>{country.note}</p>
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 16, flexWrap: "wrap", marginTop: 22, paddingTop: 16, borderTop: "1px solid var(--line)" }}>
                    <span className="mono" style={{ fontSize: 12.5, letterSpacing: "0.04em", color: "var(--fg)", whiteSpace: "nowrap" }}>{country.framework}</span>
                    <span className="mono" style={{ fontSize: 12.5, letterSpacing: "0.04em", color: "var(--faint)", whiteSpace: "nowrap" }}>{country.sources.join(" · ").toUpperCase()}</span>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
        <p className="faint mono" style={{ fontSize: 12, marginTop: 20 }}>Specific sites, capacities and counterparties are disclosed under NDA.</p>
      </div>
      <style>{`@media(max-width:760px){ .ctry{ grid-template-columns:1fr !important; gap:18px !important;} }`}</style>
    </section>
  );
}

function Sources() {
  const s = window.KDATA.sources;
  const icons = ["wind", "wind", "power", "bolt"];
  return (
    <section className="panel sec" data-theme="dark" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <Head eyebrow="The energy mix" title={<>Clean where we can. Firm where we must.</>} max="18ch" />
        <div className="grid-4" style={{ marginTop: "clamp(40px,5vw,60px)" }}>
          {s.map((x, i) => (
            <Reveal key={i} delay={i * 60}>
              <div className="card card--hover" style={{ height: "100%" }}>
                <div className="accent" style={{ display: "inline-flex" }}><Icon kind={i === 0 ? "power" : icons[i]} size={26} /></div>
                <h3 className="h3" style={{ marginTop: 20, fontSize: 23 }}>{x.t}</h3>
                <p className="body" style={{ fontSize: 14.5, marginTop: 12 }}>{x.d}</p>
                <div className="mono faint" style={{ fontSize: 11, marginTop: 18, letterSpacing: "0.06em", textTransform: "uppercase" }}>{x.tag}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function NextLink() {
  return (
    <section className="panel" data-theme="light" style={{ borderTop: "1px solid var(--line)" }}>
      <a href="company.html" className="wrap" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 20, paddingTop: "clamp(48px,6vw,84px)", paddingBottom: "clamp(48px,6vw,84px)" }}>
        <div>
          <div className="eyebrow eyebrow--muted" style={{ marginBottom: 16 }}>Next · 03</div>
          <div className="h2">Company</div>
        </div>
        <span style={{ color: "var(--accent)" }}><ArrowUR size={40} /></span>
      </a>
    </section>
  );
}

function App() {
  React.useEffect(() => { rescan(); }, []);
  return (
    <React.Fragment>
      <Nav current="Footprint" />
      <main>
        <PageHero eyebrow="Footprint" title={<>Where the power is.</>}
          lead="Argentina, Brasil and Paraguay form one contiguous basin of cheap, clean, under-used power — three jurisdictions selected for the same thing, exactly when intelligence became power-bound." />
        <ImageBand />
        <Countries />
        <Sources />
        <NextLink />
      </main>
      <Footer />
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
