/* ============================================================
   KERAUNOS — COMPANY
   ============================================================ */

function Story() {
  return (
    <section className="panel sec" data-theme="dark">
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: "clamp(36px,5vw,72px)", alignItems: "center" }} className="story-grid">
          <div>
            <Head eyebrow="Who we are" title={<>We don't study these markets. We operate in them.</>} max="18ch" />
            <p className="lead" style={{ marginTop: 24, maxWidth: "46ch" }}>Keraunos is a sovereign operator — built and led from within the region, by people whose careers and relationships are here. Generation, land, EPC, finance and regulators, with direct relationships to the AI buyers who need power now.</p>
            <p className="body" style={{ marginTop: 16, maxWidth: "46ch" }}>A decade turning stranded energy, regulatory complexity and cross-border capital into built infrastructure. That groundwork is the company.</p>
            <div style={{ display: "flex", gap: "clamp(24px,4vw,52px)", marginTop: 36, flexWrap: "wrap" }}>
              <Stat value="US$1B+" label="Project CapEx managed" sub="founding team careers" />
              <Stat value="26 MW" label="Compute built & run" sub="Paraguay · Vaca Muerta" />
              <Stat value="3" label="Countries" sub="AR · BR · PY" />
            </div>
          </div>
          <Reveal delay={80}>
            <div className="media media--cinematic" style={{ aspectRatio: "5 / 6" }}>
              <img src="assets/footprint.png" alt="Keraunos energy infrastructure" />
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`@media(max-width:860px){ .story-grid{ grid-template-columns:1fr !important; gap:40px !important;} }`}</style>
    </section>
  );
}

function Record() {
  const r = window.KDATA.record;
  return (
    <section className="panel sec" data-theme="tint" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <Head eyebrow="Track record" title={<>We've built this before.</>}
          lead="Proof from the founding team's careers — critical infrastructure delivered in environments where the margin for error is zero." max="18ch" />
        <div className="grid-2" style={{ marginTop: "clamp(40px,5vw,60px)" }}>
          {r.map((x, i) => (
            <Reveal key={i} delay={i * 70}>
              <div className="card card--hover" style={{ height: "100%" }}>
                <div style={{ fontWeight: 600, fontSize: "clamp(34px,3.6vw,50px)", letterSpacing: "-0.04em", lineHeight: 0.95, color: "var(--accent)" }}>{x.v}</div>
                <h3 className="h3" style={{ fontSize: 19, marginTop: 18 }}>{x.k}</h3>
                <p className="body" style={{ fontSize: 15, marginTop: 10 }}>{x.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Leadership() {
  const team = window.KDATA.team;
  return (
    <section className="panel sec" data-theme="light">
      <div className="wrap">
        <Head eyebrow="Leadership" title={<>Operators at the top.</>} max="16ch" />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(20px,3vw,40px)", marginTop: "clamp(40px,5vw,60px)", maxWidth: 860 }} className="lead-grid">
          {team.map((m, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="person" style={{ height: "100%", display: "flex", flexDirection: "column" }}>
                <div className="media media--person" style={{ aspectRatio: "4 / 5" }}>
                  <img src={m.img} alt={m.name} />
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, marginTop: 22 }}>
                  <h3 className="h3" style={{ fontSize: 25 }}>{m.name}</h3>
                  <a href={m.li} target="_blank" rel="noopener noreferrer" className="li-link" aria-label={m.name + " on LinkedIn"}><LIcon size={13} /> LinkedIn</a>
                </div>
                <div className="eyebrow eyebrow--muted" style={{ marginTop: 12, fontSize: 11.5 }}>{m.role}</div>
                <p className="body" style={{ fontSize: 15, marginTop: 16 }}>{m.bio}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`@media(max-width:560px){ .lead-grid{ grid-template-columns:1fr !important; max-width:360px;} }`}</style>
    </section>
  );
}

function Partners() {
  const p = window.KDATA.partners;
  return (
    <section className="panel sec" data-theme="dark">
      <div className="wrap">
        <Head eyebrow="Partners, principals & counsel" title={<>Depth on the ground.</>}
          lead="Keraunos is backed by an ecosystem of energy engineers, regional operators and counsel with decades in the markets we build in." max="22ch" />
        <div style={{ marginTop: "clamp(40px,5vw,56px)", borderTop: "1px solid var(--line)" }}>
          {p.map((x, i) => (
            <Reveal key={i} delay={i * 50}>
              <div style={{ display: "grid", gridTemplateColumns: "0.8fr 1fr 1.1fr", gap: "clamp(16px,3vw,40px)", alignItems: "center", padding: "clamp(20px,2.4vw,28px) 0", borderBottom: "1px solid var(--line)" }} className="ptr">
                <h3 style={{ fontSize: "clamp(19px,2vw,26px)", fontWeight: 600, letterSpacing: "-0.02em" }}>{x.name}</h3>
                <div className="mono" style={{ fontSize: 13, color: "var(--muted)" }}>{x.org}</div>
                <p className="body" style={{ fontSize: 14.5, maxWidth: "42ch" }}>{x.note}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`@media(max-width:760px){ .ptr{ grid-template-columns:1fr !important; gap:6px !important;} }`}</style>
    </section>
  );
}

function Principles() {
  const p = window.KDATA.principles;
  return (
    <section className="panel sec" data-theme="light">
      <div className="wrap">
        <Head eyebrow="What we hold to" title={<>Principles.</>} max="14ch" />
        <div style={{ marginTop: "clamp(36px,4vw,56px)", borderTop: "1px solid var(--line)" }}>
          {p.map((x, i) => (
            <Reveal key={i} delay={i * 50}>
              <div style={{ display: "grid", gridTemplateColumns: "auto 0.7fr 1.3fr", gap: "clamp(16px,3vw,44px)", alignItems: "baseline", padding: "clamp(20px,2.4vw,30px) 0", borderBottom: "1px solid var(--line)" }} className="prn">
                <span className="mono accent" style={{ fontSize: 13 }}>0{i + 1}</span>
                <h3 className="h3" style={{ fontSize: "clamp(20px,2.2vw,30px)" }}>{x.n}</h3>
                <p className="body" style={{ fontSize: 16, maxWidth: "48ch" }}>{x.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`@media(max-width:760px){ .prn{ grid-template-columns:auto 1fr !important; } .prn > p{ grid-column:1 / -1;} }`}</style>
    </section>
  );
}

function Careers() {
  const roles = window.KDATA.roles;
  return (
    <section id="careers" 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(36px,4vw,56px)" }} className="car-head">
          <Head eyebrow="Careers" title={<>We're building the team the next phase needs.</>} max="18ch" />
          <p className="body balance" style={{ maxWidth: "46ch" }}>{window.KDATA.careersIntro}</p>
        </div>
        <div style={{ borderTop: "1px solid var(--line)" }}>
          {roles.map((r, i) => (
            <Reveal key={i} delay={i * 40}>
              <a href={"mailto:daniel@keraunoscompute.com?subject=" + encodeURIComponent(r.t)} style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr auto auto", gap: "clamp(14px,2vw,32px)", alignItems: "center", padding: "clamp(18px,2.2vw,26px) 0", borderBottom: "1px solid var(--line)" }} className="role">
                <h3 className="h3" style={{ fontSize: "clamp(20px,2.2vw,30px)" }}>{r.t}</h3>
                <span className="mono muted" style={{ fontSize: 13 }}>{r.loc}</span>
                <span className="mono" style={{ fontSize: 11.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--accent)", flex: "none", whiteSpace: "nowrap" }}>{r.type}</span>
                <span style={{ color: "var(--accent)", flex: "none" }}><ArrowUR size={20} /></span>
              </a>
            </Reveal>
          ))}
        </div>
        <p className="body" style={{ fontSize: 15, marginTop: 26, maxWidth: "52ch" }}>Don't see your role? If you can bring power, land, capital or buyers — <a href="mailto:daniel@keraunoscompute.com" className="ul accent">daniel@keraunoscompute.com</a>.</p>
      </div>
      <style>{`@media(max-width:820px){ .car-head{ grid-template-columns:1fr !important; gap:22px !important;} .role{ grid-template-columns:1fr auto !important; row-gap:6px;} .role > span.mono{ grid-column:1 / -1; order:3;} }`}</style>
    </section>
  );
}

function Contact() {
  return (
    <section id="contact" className="panel" data-theme="tint" style={{ position: "relative", overflow: "hidden", borderTop: "1px solid var(--line)" }}>
      <div className="glow" style={{ width: 680, height: 680, bottom: -360, left: "50%", transform: "translateX(-50%)", background: "var(--accent)", opacity: 0.15 }} />
      <div className="wrap sec" style={{ position: "relative" }}>
        <div style={{ textAlign: "center" }}>
          <Reveal><Eyebrow style={{ justifyContent: "center" }}>Start the conversation</Eyebrow></Reveal>
          <Reveal delay={70}><h2 className="h1 balance" style={{ marginTop: 22, maxWidth: "18ch", marginInline: "auto" }}>Power is the new compute. We own both.</h2></Reveal>
          <Reveal delay={140}><p className="lead balance" style={{ marginTop: 24, maxWidth: "52ch", marginInline: "auto" }}>Capacity, capital, power or sites — one address, straight to the founder.</p></Reveal>
          <Reveal delay={200}>
            <div style={{ marginTop: 36 }}><Button href="mailto:daniel@keraunoscompute.com" variant="primary">daniel@keraunoscompute.com</Button></div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function App() {
  React.useEffect(() => { rescan(); }, []);
  return (
    <React.Fragment>
      <Nav current="Company" />
      <main>
        <PageHero eyebrow="Company" title={<>Operators, not tourists.</>}
          lead="A team with a working portfolio of Latin American energy and infrastructure relationships — and direct demand from the AI buyers who need power now." />
        <Story />
        <Record />
        <Leadership />
        <Partners />
        <Careers />
        <Contact />
      </main>
      <Footer />
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
