/* ============================================================
   KERAUNOS — PLATFORM (approach)
   ============================================================ */

/* the stack ----------------------------------------------------- */
function StackSection() {
  const stack = window.KDATA.stack;
  const iconFor = { "06": "globe", "05": "compute", "04": "ops", "03": "build", "02": "land", "01": "power" };
  return (
    <section className="panel sec" data-theme="dark">
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "0.8fr 1.2fr", gap: "clamp(36px,5vw,80px)", alignItems: "start" }} className="stk-grid">
          <div style={{ position: "sticky", top: 100 }} className="stk-aside">
            <Head eyebrow="The stack" title={<>The stack, owned end to end.</>}
              lead="AI infrastructure runs on seven layers, from power generation to customer offtake. Keraunos develops and operates across all of them, rather than renting the parts it can't control." max="20ch" />
          </div>
          <div>
            {stack.map((l, i) => (
              <Reveal key={l.n} delay={i * 50}>
                <div style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: "clamp(16px,2.4vw,28px)", alignItems: "center", padding: "clamp(20px,2.4vw,28px) 0", borderTop: "1px solid var(--line)", borderBottom: i === stack.length - 1 ? "1px solid var(--line)" : "none" }}>
                  <span style={{ display: "grid", placeItems: "center", width: 44, height: 44, borderRadius: 11, background: l.tone === "energy" ? "var(--accent)" : "var(--bg-elev)", border: "1px solid " + (l.tone === "energy" ? "var(--accent)" : "var(--line)"), color: l.tone === "energy" ? "#fff" : (l.tone === "accent" ? "var(--accent)" : "var(--muted)") }}><Icon kind={iconFor[l.n]} size={20} /></span>
                  <div>
                    <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
                      <span className="mono faint" style={{ fontSize: 12 }}>{l.n}</span>
                      <span className="h3" style={{ fontSize: "clamp(19px,2vw,25px)" }}>{l.t}</span>
                    </div>
                    <div className="body" style={{ fontSize: 14.5, marginTop: 5, maxWidth: "46ch" }}>{l.d}</div>
                  </div>
                  <span className="mono" style={{ fontSize: 11.5, letterSpacing: "0.1em", textTransform: "uppercase", flex: "none", color: l.tone === "energy" ? "var(--accent)" : "var(--faint)" }}>Owned</span>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
      <style>{`@media(max-width:880px){ .stk-grid{ grid-template-columns:1fr !important; gap:40px !important;} .stk-aside{ position:static !important;} }`}</style>
    </section>
  );
}

/* economics ----------------------------------------------------- */
function Economics() {
  const e = window.KDATA.economics;
  return (
    <section className="panel sec" data-theme="light">
      <div className="wrap">
        <Head eyebrow="Why integration wins" title={<>Owning the supply is the business model.</>} max="18ch" />
        <div className="grid-3" style={{ marginTop: "clamp(40px,5vw,60px)" }}>
          {e.map((x, i) => (
            <Reveal key={i} delay={i * 70}>
              <div className="card" style={{ height: "100%" }}>
                <div className="mono accent" style={{ fontSize: 13 }}>0{i + 1}</div>
                <h3 className="h3" style={{ marginTop: 18 }}>{x.h}</h3>
                <p className="body" style={{ marginTop: 12, fontSize: 15.5 }}>{x.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* what we deliver ----------------------------------------------- */
function Deliver() {
  const cards = [
    { icon: "compute", t: "GPU compute", d: "NVIDIA-based GPU capacity for training and inference, delivered via a certified NVIDIA Cloud Partner." },
    { icon: "build", t: "Colocation", d: "Powered, cooled rack space in owned datacenter campuses, operated to enterprise standards." },
    { icon: "land", t: "Powered land", d: "Shovel-ready sites with secured generation and interconnection, ready for hyperscale build-out." },
  ];
  return (
    <section className="panel sec" data-theme="dark">
      <div className="wrap">
        <Head eyebrow="What we deliver" title={<>Compute, colocation, or powered land.</>}
          lead="We meet demand in whatever form fits the project — from managed GPU clusters to shovel-ready powered sites." max="20ch" />
        <div className="grid-3" style={{ marginTop: "clamp(40px,5vw,60px)" }}>
          {cards.map((c, i) => (
            <Reveal key={i} delay={i * 70}>
              <div className="card card--hover" style={{ height: "100%" }}>
                <div style={{ width: 46, height: 46, borderRadius: 11, background: "var(--accent-soft)", border: "1px solid var(--accent-line)", display: "grid", placeItems: "center", color: "var(--accent)" }}><Icon kind={c.icon} size={22} /></div>
                <h3 className="h3" style={{ marginTop: 22 }}>{c.t}</h3>
                <p className="body" style={{ marginTop: 12, fontSize: 15 }}>{c.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ecosystems ---------------------------------------------------- */
function Ecosystems() {
  const eco = window.KDATA.ecosystems;
  const icons = ["bolt", "build", "ops", "finance", "compute"];
  return (
    <section className="panel sec" data-theme="light">
      <div className="wrap">
        <Head eyebrow="How we operate" title={<>Five domains, one operator.</>}
          lead="Integration is a set of relationships as much as assets. Keraunos operates across five domains — energy, infrastructure, operations, finance and compute." max="22ch" />
        <div className="grid-3" style={{ marginTop: "clamp(40px,5vw,60px)" }}>
          {eco.map((e, i) => (
            <Reveal key={i} delay={i * 60}>
              <div className="card card--hover" style={{ height: "100%" }}>
                <div style={{ width: 46, height: 46, borderRadius: 11, background: "var(--accent-soft)", border: "1px solid var(--accent-line)", display: "grid", placeItems: "center", color: "var(--accent)" }}><Icon kind={icons[i]} size={22} /></div>
                <h3 className="h3" style={{ marginTop: 22 }}>{e.n}</h3>
                <p className="body" style={{ marginTop: 12, fontSize: 15 }}>{e.d}</p>
                <div style={{ marginTop: 20, display: "flex", flexDirection: "column", gap: 9 }}>
                  {e.items.map((it, j) => <div key={j} style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 13.5, color: "var(--muted)" }}><span className="accent" style={{ display: "inline-flex" }}><Icon kind="check" size={15} /></span>{it}</div>)}
                </div>
              </div>
            </Reveal>
          ))}
          <Reveal delay={eco.length * 60}>
            <div className="card" style={{ height: "100%", background: "var(--accent)", borderColor: "var(--accent)", color: "#fff", display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 220 }}>
              <Icon kind="bolt" size={30} />
              <div>
                <div className="h3" style={{ color: "#fff", marginTop: 24 }}>One operator, accountable for the entire stack.</div>
                <a href="company.html#contact" className="ul" style={{ marginTop: 18, fontSize: 14, color: "#fff" }}>Build with us <ArrowUR /></a>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* engage -------------------------------------------------------- */
function Engage() {
  const e = window.KDATA.engage;
  return (
    <section className="panel sec" data-theme="dark">
      <div className="wrap">
        <Head eyebrow="How to work with us" title={<>One stack. Three ways in.</>} max="16ch" />
        <div className="grid-3" style={{ marginTop: "clamp(40px,5vw,60px)" }}>
          {e.map((x, i) => (
            <Reveal key={i} delay={i * 70}>
              <div className="card" style={{ height: "100%", display: "flex", flexDirection: "column" }}>
                <div className="eyebrow" style={{ marginBottom: 24 }}>{x.who}</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 16, flex: 1 }}>
                  {x.steps.map((st, j) => (
                    <div key={j} style={{ display: "flex", gap: 14, alignItems: "baseline" }}>
                      <span className="mono accent" style={{ fontSize: 12.5, flex: "none" }}>0{j + 1}</span>
                      <span style={{ fontSize: 16, fontWeight: 500, letterSpacing: "-0.01em" }}>{st}</span>
                    </div>
                  ))}
                </div>
                <a href={x.cta[1]} className="btn btn--secondary" style={{ marginTop: 26, alignSelf: "flex-start" }}>{x.cta[0]} <Arrow /></a>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* next ---------------------------------------------------------- */
function NextLink({ label, href, n }) {
  return (
    <section className="panel" data-theme="light" style={{ borderTop: "1px solid var(--line)" }}>
      <a href={href} 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 · {n}</div>
          <div className="h2">{label}</div>
        </div>
        <span style={{ color: "var(--accent)" }}><ArrowUR size={40} /></span>
      </a>
    </section>
  );
}

function App() {
  React.useEffect(() => { rescan(); }, []);
  return (
    <React.Fragment>
      <Nav current="Platform" />
      <main>
        <PageHero eyebrow="Platform" title={<>An integrated approach to AI infrastructure.</>}
          lead="We design, finance, build and operate the full chain — from power generation to GPU compute — with one company accountable across every layer." />
        <StackSection />
        <Deliver />
        <Ecosystems />
        <NextLink label="Footprint" href="footprint.html" n="02" />
      </main>
      <Footer />
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
