/* ============================================================
   KERAUNOS — HOME (enterprise)
   ============================================================ */
const { useState: useS, useEffect: useE } = React;

/* hero ---------------------------------------------------------- */
function Hero() {
  return (
    <section className="panel" data-theme="tint" style={{ position: "relative", overflow: "hidden", borderBottom: "1px solid var(--line)" }}>
      <div className="gridlines" />
      <div className="glow" style={{ width: 720, height: 720, top: -300, right: -160, background: "var(--accent)", opacity: 0.18 }} />
      <div className="glow" style={{ width: 480, height: 480, bottom: -260, left: -120, background: "#2DD4BF", opacity: 0.06 }} />

      <div className="wrap" style={{ position: "relative", paddingTop: "clamp(140px,18vh,210px)", paddingBottom: "clamp(60px,8vw,110px)" }}>
        <Reveal><Eyebrow>Vertically integrated AI compute · South America</Eyebrow></Reveal>
        <Reveal delay={70}>
          <h1 className="h1 balance" style={{ marginTop: 24, maxWidth: "16ch" }}>
            AI infrastructure, powered by South America's clean energy.
          </h1>
        </Reveal>
        <Reveal delay={140}>
          <p className="lead balance" style={{ marginTop: 28, maxWidth: "56ch" }}>
            Keraunos designs, finances, builds and operates AI datacenters across Argentina, Brasil and Paraguay — integrated from power generation to GPU compute.
          </p>
        </Reveal>
        <Reveal delay={210}>
          <div style={{ display: "flex", gap: 12, marginTop: 38, flexWrap: "wrap" }}>
            <Button href="company.html#contact" variant="primary">Get in touch</Button>
            <Button href="approach.html" variant="secondary" arrow="ur">Explore the platform</Button>
          </div>
        </Reveal>
      </div>

      {/* trust strip */}
      <div style={{ borderTop: "1px solid var(--line)" }}>
        <div className="wrap trust" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 20, paddingTop: 30, paddingBottom: 30 }}>
          {window.KDATA.counts.map((c, i) => (
            <Reveal key={i} delay={i * 70} style={{ borderLeft: i ? "1px solid var(--line)" : "none", paddingLeft: i ? "clamp(14px,2vw,28px)" : 0 }}>
              <div style={{ fontWeight: 600, fontSize: "clamp(26px,3vw,40px)", letterSpacing: "-0.03em", lineHeight: 1 }}>{c.to}{c.suffix}</div>
              <div style={{ fontSize: 13.5, marginTop: 9, fontWeight: 500 }}>{c.k}</div>
              <div className="faint mono" style={{ fontSize: 11.5, marginTop: 5 }}>{c.note}</div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`@media(max-width:760px){ .trust{ grid-template-columns:1fr 1fr !important; gap:24px 0 !important;} }`}</style>
    </section>
  );
}

/* image band ---------------------------------------------------- */
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,600px)", position: "relative" }}>
        <img src="assets/footprint.png" alt="Keraunos energy infrastructure — substation and wind generation in 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 style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
                <div className="h3" style={{ maxWidth: "24ch", fontWeight: 500 }}>Energy-backed datacenters, designed, built and operated across South America.</div>
                <span className="mono" style={{ fontSize: 12, letterSpacing: "0.08em", color: "var(--fg)" }}>100% RENEWABLE-ANCHORED</span>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

/* what we own --------------------------------------------------- */
function WhatWeOwn() {
  const cards = [
    { icon: "power", t: "Power", d: "Long-tenor access to clean, low-cost hydro and wind generation across the region." },
    { icon: "land", t: "Sites & datacenters", d: "Powered land, substations and datacenter campuses, developed and operated in-region." },
    { icon: "compute", t: "Compute", d: "NVIDIA GPU capacity, delivered via a certified NVIDIA Cloud Partner and brought in-house over time." },
  ];
  return (
    <section className="panel sec" data-theme="dark">
      <div className="wrap">
        <Head eyebrow="What we own" title={<>An integrated stack, owned end to end.</>}
          lead="From power generation through datacenters to GPU compute — designed, financed, built and operated by one company." max="22ch" />
        <div className="grid-3" style={{ marginTop: "clamp(40px,5vw,64px)" }}>
          {cards.map((c, i) => (
            <Reveal key={i} delay={i * 80}>
              <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: 24 }}>{c.t}</h3>
                <p className="body" style={{ marginTop: 12 }}>{c.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* model comparison (light) -------------------------------------- */
function Model() {
  const { layers, cols } = window.KDATA.model;
  return (
    <section className="panel sec" data-theme="light">
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(28px,4vw,64px)", alignItems: "end", marginBottom: "clamp(36px,4vw,56px)" }} className="mdl-head">
          <Head eyebrow="The model" title={<>Own the supply, own the margin.</>} max="16ch" />
          <p className="body balance" style={{ maxWidth: "46ch" }}>The most valuable AI-infrastructure companies pushed down the stack toward compute. Keraunos pushes all the way down — to the generation itself.</p>
        </div>
        <Reveal>
          <div className="card" style={{ padding: 0, overflow: "hidden" }}>
            <div style={{ overflowX: "auto" }}>
              <table className="tbl" style={{ minWidth: 640 }}>
                <thead><tr>
                  <th style={{ width: "36%" }}>Stack layer</th>
                  {cols.map((col, i) => { const k = i === cols.length - 1; return <th key={i} style={{ textAlign: "center", color: k ? "var(--accent)" : "var(--faint)", fontSize: k ? 13 : 11.5 }}>{col.name}</th>; })}
                </tr></thead>
                <tbody>
                  {layers.map((layer, r) => (
                    <tr key={r}>
                      <td style={{ fontWeight: 500, fontSize: 15.5 }}>{layer}</td>
                      {cols.map((col, ci) => { const owned = col.own[r], k = ci === cols.length - 1; return (
                        <td key={ci} style={{ textAlign: "center", background: k ? "var(--accent-soft)" : "transparent" }}>
                          {owned
                            ? <span style={{ display: "inline-grid", placeItems: "center", width: 24, height: 24, borderRadius: 6, background: k ? "var(--accent)" : "color-mix(in srgb, var(--fg) 12%, transparent)", color: k ? "#fff" : "var(--fg)" }}><Icon kind="check" size={14} /></span>
                            : <span className="faint">—</span>}
                        </td>); })}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </Reveal>
        <p className="faint mono" style={{ fontSize: 12, marginTop: 16 }}>The model we build toward — at each site, ownership tracks what is built, signed and live.</p>
      </div>
      <style>{`@media(max-width:820px){ .mdl-head{ grid-template-columns:1fr !important; gap:18px !important;} }`}</style>
    </section>
  );
}

/* energy cost proof (dark) -------------------------------------- */
function EnergyProof() {
  const rows = [
    { r: "Paraguay · hydro", lo: 0.037, hi: 0.046, ours: true },
    { r: "Argentina · wind", lo: 0.055, hi: 0.065, ours: true },
    { r: "US · hyperscale", lo: 0.09, hi: 0.14, ours: false },
    { r: "Malaysia · Johor", lo: 0.13, hi: 0.13, ours: false },
  ];
  const MAX = 0.15;
  return (
    <section className="panel sec" data-theme="dark" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: "clamp(32px,5vw,72px)", alignItems: "center" }} className="ep-grid">
          <Head eyebrow="Energy economics" title={<>Power costs the economics run on.</>}
            lead="Energy is 50–60% of the cost of running AI compute. South American clean power is materially cheaper than the markets these workloads are built in today." max="20ch" />
          <Reveal delay={80}>
            <div className="card">
              <div className="mono faint" style={{ fontSize: 11.5, letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 24 }}>Indicative delivered energy · $/kWh</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
                {rows.map((x, i) => (
                  <div key={i}>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12, marginBottom: 10 }}>
                      <span style={{ fontSize: 13.5, fontWeight: 500, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", color: x.ours ? "var(--fg)" : "var(--muted)" }}>{x.r}</span>
                      <span className="mono" style={{ fontSize: 12.5, flex: "none", color: x.ours ? "var(--accent)" : "var(--faint)" }}>${x.lo.toFixed(3)}{x.hi !== x.lo ? "–" + x.hi.toFixed(3) : ""}</span>
                    </div>
                    <div style={{ height: 8, borderRadius: 5, background: "var(--bg-elev-2)", overflow: "hidden" }}>
                      <div style={{ height: "100%", width: (x.hi / MAX * 100) + "%", borderRadius: 5, background: x.ours ? "var(--accent)" : "color-mix(in srgb, var(--fg) 24%, transparent)" }} />
                    </div>
                  </div>
                ))}
              </div>
              <div className="faint mono" style={{ fontSize: 11, marginTop: 22 }}>Indicative all-in delivered energy · per source documents</div>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`@media(max-width:820px){ .ep-grid{ grid-template-columns:1fr !important; gap:32px !important;} }`}</style>
    </section>
  );
}

/* manifesto / why-us pitch band ---------------------------------- */
function Manifesto() {
  const r = window.KDATA.record;
  return (
    <section className="panel sec" data-theme="tint" style={{ position: "relative", overflow: "hidden", borderTop: "1px solid var(--line)" }}>
      <div className="glow" style={{ width: 560, height: 560, top: -260, left: -160, background: "var(--accent)", opacity: 0.12 }} />
      <div className="wrap" style={{ position: "relative" }}>
        <Reveal><Eyebrow>Why us</Eyebrow></Reveal>
        <Reveal delay={70}>
          <h2 className="h2 balance" style={{ marginTop: 22, maxWidth: "26ch" }}>The next decade of AI will be won at the intersection of cheap clean energy, sovereign compute and cross-border capital. We've spent our careers there.</h2>
        </Reveal>
        <Reveal delay={140}>
          <p className="lead balance" style={{ marginTop: 24, maxWidth: "56ch" }}>We are not learning how to build datacenters with our investors' capital. We apply the mission-critical standards of oil & gas to make compute infrastructure bankable, resilient and profitable.</p>
        </Reveal>
        <div className="grid-4" style={{ marginTop: "clamp(40px,5vw,64px)", borderTop: "1px solid var(--line)", paddingTop: "clamp(28px,3vw,40px)" }}>
          {r.map((x, i) => (
            <Reveal key={i} delay={i * 70}>
              <div>
                <div style={{ fontWeight: 600, fontSize: "clamp(28px,3vw,42px)", letterSpacing: "-0.04em", lineHeight: 1, color: "var(--accent)" }}>{x.v}</div>
                <div style={{ fontSize: 14, marginTop: 10, fontWeight: 500 }}>{x.k}</div>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={120}>
          <div style={{ marginTop: "clamp(32px,4vw,48px)" }}>
            <Button href="company.html" variant="secondary" arrow="ur">Meet the operators</Button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* footprint preview (light) ------------------------------------- */
function FootprintPreview() {
  const c = window.KDATA.countries;
  return (
    <section className="panel sec" data-theme="light" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap", marginBottom: "clamp(36px,4vw,56px)" }}>
          <Head eyebrow="Footprint" title={<>Three countries. One platform.</>} max="16ch" />
          <Button href="footprint.html" variant="ghost" arrow="ur" style={{ color: "var(--accent)" }}>See the footprint</Button>
        </div>
        <div className="grid-3">
          {c.map((x, i) => (
            <Reveal key={i} delay={i * 80}>
              <a href="footprint.html" className="card card--hover" style={{ display: "block", height: "100%" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                  <h3 className="h3">{x.name}</h3>
                  <span className="mono accent" style={{ fontSize: 13 }}>{x.code}</span>
                </div>
                <div className="eyebrow eyebrow--muted" style={{ marginTop: 14, fontSize: 11.5 }}>{x.tag}</div>
                <p className="body" style={{ marginTop: 16, fontSize: 15.5 }}>{x.lead}</p>
                <div className="mono faint" style={{ fontSize: 12, letterSpacing: "0.04em", marginTop: 20, paddingTop: 14, borderTop: "1px solid var(--line)" }}>{x.framework}</div>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* CTA ----------------------------------------------------------- */
function CTA() {
  return (
    <section id="contact" className="panel" data-theme="tint" style={{ position: "relative", overflow: "hidden", borderTop: "1px solid var(--line)" }}>
      <div className="glow" style={{ width: 700, height: 700, bottom: -360, left: "50%", transform: "translateX(-50%)", background: "var(--accent)", opacity: 0.16 }} />
      <div className="wrap sec" style={{ position: "relative", textAlign: "center" }}>
        <Reveal><Eyebrow style={{ justifyContent: "center" }}>Get in touch</Eyebrow></Reveal>
        <Reveal delay={70}><h2 className="h1 balance" style={{ marginTop: 22, maxWidth: "16ch", marginInline: "auto" }}>Let's talk.</h2></Reveal>
        <Reveal delay={140}><p className="lead balance" style={{ marginTop: 24, maxWidth: "52ch", marginInline: "auto" }}>Whether you need capacity, want to deploy capital, or have power and sites to bring — start the conversation.</p></Reveal>
        <Reveal delay={200}>
          <div style={{ display: "flex", gap: 12, marginTop: 36, justifyContent: "center", flexWrap: "wrap" }}>
            <Button href="mailto:daniel@keraunoscompute.com" variant="primary">daniel@keraunoscompute.com</Button>
            <Button href="company.html#careers" variant="secondary" arrow="ur">We're hiring</Button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function App() {
  const [t, setTweak] = useTweaks({ accent: "#5B8CFF" });
  useE(() => {
    const a2 = { "#5B8CFF": "#87A9FF", "#2DD4BF": "#5EEAD4", "#A78BFA": "#C4B5FD", "#FF8A4C": "#FFB07A" }[t.accent] || t.accent;
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.style.setProperty("--accent-2", a2);
    try { localStorage.setItem("k_accent", t.accent); localStorage.setItem("k_accent2", a2); } catch (e) {}
  }, [t.accent]);
  useE(() => { rescan(); }, []);
  return (
    <React.Fragment>
      <Nav current="" />
      <main>
        <Hero />
        <ImageBand />
        <WhatWeOwn />
        <EnergyProof />
        <Manifesto />
        <FootprintPreview />
        <CTA />
      </main>
      <Footer />
      <TweaksPanel>
        <TweakSection label="Accent" />
        <TweakColor label="Brand color" value={t.accent} options={["#5B8CFF", "#2DD4BF", "#A78BFA", "#FF8A4C"]} onChange={(v) => setTweak("accent", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
