/* ============================================================
   KERAUNOS — shared UI (enterprise primitives)
   ============================================================ */
const { useState, useEffect, useRef } = React;

const K_EMAIL = "daniel@keraunoscompute.com";
const K_LI = {
  daniel: "https://www.linkedin.com/in/daniel-velloso-68586a306/",
  fabian: "https://www.linkedin.com/in/fabian-s-8a258a268/",
};

const NAV = [
  ["Platform", "approach.html"],
  ["Footprint", "footprint.html"],
  ["Company", "company.html"],
];

/* reveal — class only; fx.js observer drives it (works for React nodes) */
function Reveal({ children, as = "div", delay = 0, className = "", style = {}, ...rest }) {
  const Tag = as;
  return <Tag className={"reveal " + className} data-delay={delay || undefined} style={style} {...rest}>{children}</Tag>;
}

/* logo mark — refined geometric bolt */
function Mark({ size = 22, color = "var(--accent)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true" style={{ display: "block" }}>
      <path d="M13.6 2.5 5 13.4h5.4L9.3 21.5 19 10.2h-5.7l1.3-7.7Z" fill={color} />
    </svg>
  );
}

function Eyebrow({ children, muted = false, className = "", style = {} }) {
  return <span className={"eyebrow" + (muted ? " eyebrow--muted" : "") + " " + className} style={style}>{children}</span>;
}

function LIcon({ size = 14 }) {
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style={{ display: "block" }}><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29ZM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12ZM7.12 20.45H3.56V9h3.56v11.45ZM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0Z"/></svg>;
}

function Arrow({ size = 16 }) {
  return <svg className="ic" width={size} height={size} viewBox="0 0 16 16" fill="none"><path d="M3 8h9M8.5 3.5 13 8l-4.5 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>;
}
function ArrowUR({ size = 16 }) {
  return <svg className="ic" width={size} height={size} viewBox="0 0 16 16" fill="none"><path d="M5 11 11 5M5.5 5H11v5.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>;
}

/* clean line icons */
function Icon({ kind, size = 24 }) {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "power":   return <svg {...p}><path d="M13 2 5 13h6l-1 9 8-12h-6l1-8Z"/></svg>;
    case "land":    return <svg {...p}><path d="M3 20h18M5 20V10l7-5 7 5v10M9 20v-5h6v5"/></svg>;
    case "compute": return <svg {...p}><rect x="6" y="6" width="12" height="12" rx="1.5"/><path d="M9.5 3v3M14.5 3v3M9.5 18v3M14.5 18v3M3 9.5h3M3 14.5h3M18 9.5h3M18 14.5h3"/></svg>;
    case "grid":    return <svg {...p}><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>;
    case "build":   return <svg {...p}><rect x="4" y="4" width="16" height="4.5" rx="1"/><rect x="4" y="10" width="16" height="4.5" rx="1"/><rect x="4" y="16" width="16" height="4" rx="1"/></svg>;
    case "ops":     return <svg {...p}><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="2.5"/><path d="M12 4v2M12 18v2M4 12h2M18 12h2"/></svg>;
    case "finance": return <svg {...p}><path d="M3 20h18M6 20V9M11 20V5M16 20v-8M21 20V11"/></svg>;
    case "globe":   return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.6 2.4 4 5.6 4 9s-1.4 6.6-4 9c-2.6-2.4-4-5.6-4-9s1.4-6.6 4-9Z"/></svg>;
    case "shield":  return <svg {...p}><path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6l7-3Z"/><path d="m9 12 2 2 4-4"/></svg>;
    case "wind":    return <svg {...p}><path d="M3 8h11a3 3 0 1 0-3-3M3 16h7a3 3 0 1 1-3 3M3 12h15a3 3 0 1 0-3-3"/></svg>;
    case "bolt":    return <svg {...p}><path d="M13 2 5 13h6l-1 9 8-12h-6l1-8Z"/></svg>;
    case "check":   return <svg {...p}><path d="m4 12 5 5L20 6"/></svg>;
    default: return null;
  }
}

function Button({ href, variant = "primary", children, arrow = "right", magnetic, ...rest }) {
  const Ar = arrow === "ur" ? ArrowUR : Arrow;
  return (
    <a href={href} className={"btn btn--" + variant} {...rest}>
      {children}{arrow && <Ar />}
    </a>
  );
}

function Stat({ value, label, sub }) {
  return (
    <div>
      <div style={{ fontWeight: 600, fontSize: "clamp(34px,4.4vw,56px)", letterSpacing: "-0.04em", lineHeight: 0.95 }}>{value}</div>
      <div style={{ fontSize: 15, marginTop: 12, fontWeight: 500 }}>{label}</div>
      {sub && <div className="faint mono" style={{ fontSize: 12, marginTop: 6, whiteSpace: "nowrap" }}>{sub}</div>}
    </div>
  );
}

/* section heading block */
function Head({ eyebrow, title, lead, align = "left", max = "20ch", style = {} }) {
  return (
    <div style={{ textAlign: align, ...style }}>
      {eyebrow && <Reveal><Eyebrow>{eyebrow}</Eyebrow></Reveal>}
      {title && <Reveal delay={60}><h2 className="h2 balance" style={{ marginTop: 18, maxWidth: max, marginInline: align === "center" ? "auto" : 0 }}>{title}</h2></Reveal>}
      {lead && <Reveal delay={120}><p className="lead balance" style={{ marginTop: 20, maxWidth: "58ch", marginInline: align === "center" ? "auto" : 0 }}>{lead}</p></Reveal>}
    </div>
  );
}

/* ---- NAV + MENU ---- */
function Nav({ current }) {
  return (
    <React.Fragment>
      <header className="nav">
        <div className="nav__in">
          <a href="index.html" className="brand"><Mark size={22} /> Keraunos <span className="brand__tag">COMPUTE</span></a>
          <nav className="nav__links">
            {NAV.map(([t, h]) => <a key={t} href={h} className="nav__link" aria-current={current === t ? "page" : undefined}>{t}</a>)}
          </nav>
          <div className="nav__right">
            <a href="company.html#contact" className="btn btn--primary nav__cta" style={{ padding: "10px 18px", fontSize: 14 }}>Get in touch <Arrow /></a>
            <button className="nav__burger" aria-label="Open menu"><i /><i /></button>
          </div>
        </div>
      </header>
      <div className="menu" id="menu">
        <div className="menu__top">
          <a href="index.html" className="brand"><Mark size={22} /> Keraunos <span className="brand__tag">COMPUTE</span></a>
          <button className="menu__close" aria-label="Close menu">✕</button>
        </div>
        <div className="menu__links">
          <a href="index.html" className="menu__link">Home <span className="mono">00</span></a>
          {NAV.map(([t, h], i) => <a key={t} href={h} className="menu__link">{t} <span className="mono">0{i + 1}</span></a>)}
        </div>
        <a href="company.html#contact" className="btn btn--primary" style={{ marginTop: 28, alignSelf: "flex-start", padding: "14px 22px" }}>Get in touch <Arrow /></a>
      </div>
    </React.Fragment>
  );
}

/* ---- FOOTER ---- */
function Footer() {
  return (
    <footer className="foot panel" data-theme="tint">
      <div className="wrap">
        <div className="foot__grid">
          <div className="foot__col foot__col--brand">
            <a href="index.html" className="brand" style={{ marginBottom: 18, display: "flex", width: "fit-content" }}><Mark size={22} /> Keraunos <span className="brand__tag">COMPUTE</span></a>
            <p className="body" style={{ maxWidth: "34ch", marginTop: 4 }}>Vertically integrated AI compute, anchored to some of the cheapest clean power on Earth.</p>
            <div className="mono faint" style={{ fontSize: 12, letterSpacing: "0.05em", marginTop: 20 }}>ARGENTINA · BRASIL · PARAGUAY</div>
          </div>
          <div className="foot__col">
            <h4>Explore</h4>
            <a href="index.html">Home</a>
            <a href="approach.html">Platform</a>
            <a href="footprint.html">Footprint</a>
            <a href="company.html">Company</a>
          </div>
          <div className="foot__col">
            <h4>Contact</h4>
            <a href={"mailto:" + K_EMAIL}>{K_EMAIL}</a>
            <span className="body" style={{ fontSize: 13, display: "block", padding: "5px 0", color: "var(--faint)" }}>Investors · partners · capacity</span>
          </div>
        </div>
        <div className="foot__bottom">
          <span>© 2026 Keraunos Compute · keraunoscompute.com</span>
          <span>Where power becomes compute</span>
        </div>
      </div>
    </footer>
  );
}

/* page hero (subpages) */
function PageHero({ eyebrow, title, lead }) {
  return (
    <section className="panel" data-theme="tint" style={{ position: "relative", overflow: "hidden", borderBottom: "1px solid var(--line)" }}>
      <div className="glow" style={{ width: 620, height: 620, top: -260, right: -120, background: "var(--accent)", opacity: 0.16 }} />
      <div className="wrap" style={{ position: "relative", paddingTop: "clamp(128px,16vh,184px)", paddingBottom: "clamp(56px,7vw,96px)" }}>
        <Reveal><Eyebrow>{eyebrow}</Eyebrow></Reveal>
        <Reveal delay={70}><h1 className="h1 balance" style={{ marginTop: 22, maxWidth: "16ch" }}>{title}</h1></Reveal>
        {lead && <Reveal delay={140}><p className="lead balance" style={{ marginTop: 26, maxWidth: "60ch" }}>{lead}</p></Reveal>}
      </div>
    </section>
  );
}

function rescan() { if (window.__kScan) window.__kScan(); }

Object.assign(window, { Reveal, Mark, Eyebrow, Arrow, ArrowUR, Icon, LIcon, Button, Stat, Head, Nav, Footer, PageHero, NAV, K_EMAIL, K_LI, rescan });