// AIEdge.jsx — "AI at the Edge" platform deep-dive.
// Route: #/platform/ai-edge

function AIEdgePage({ onNavigate }) {
  const [activeArea, setActiveArea] = React.useState(null);

  React.useEffect(() => {
    if (!activeArea) return;
    const onKey = (e) => { if (e.key === "Escape") setActiveArea(null); };
    window.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
    };
  }, [activeArea]);

  // 11 ARMS functional focus areas
  const armsAreas = [
    { t: "Aviation Safety Program",
      b: "Command safety support, hazard reporting, and mishap prevention.",
      more: "The inference engine cross-checks the unit's safety posture against the current command safety program requirements — hazard reporting workflows, mishap-prevention measures, and the documentation an evaluator expects to see — flagging gaps before they become findings." },
    { t: "Aircraft Maintenance",
      b: "Standardization, production control, and repair / recovery operations.",
      more: "Trained on the maintenance standardization and production-control criteria, the model reviews the unit's maintenance program for the conditions ARMS evaluators assess — from production control board discipline to repair and recovery procedures." },
    { t: "Flight Operations",
      b: "Aircrew training, currency, and flight scheduling.",
      more: "Reads the unit's training and currency picture against regulation and surfaces aircrew approaching non-currency, training gaps, and scheduling conflicts that would draw scrutiny during a survey." },
    { t: "Supply & Logistics",
      b: "Command Supply Discipline Program (CSDP), tool room procedures, hazardous material management.",
      more: "Evaluates the unit against CSDP requirements, tool room control procedures, and hazardous material handling and storage standards — the high-frequency finding areas in any logistics review." },
    { t: "Quality Control",
      b: "Technical manual compliance and component tracking.",
      more: "Checks technical manual currency and compliance and validates component tracking against the records an evaluator will pull, surfacing discrepancies before the inspection does." },
    { t: "Physical Security",
      b: "Arms, ammunition, and explosive (AAE) storage regulations.",
      more: "Assesses arms, ammunition, and explosives storage and accountability against the governing physical security regulations — one of the most consequential and tightly-scored survey areas." },
    { t: "Petroleum, Oils & Lubricants",
      b: "Spill response plans and FARP operations.",
      more: "Reviews POL handling, spill response planning, and Forward Arming and Refueling Point (FARP) operations against environmental and operational standards." },
    { t: "Avionics & Calibration",
      b: "TMDE compliance and system inspections.",
      more: "Validates Test, Measurement, and Diagnostic Equipment (TMDE) calibration currency and avionics system inspection compliance against the calibration cycle the survey enforces." },
    { t: "Fire & Crash Rescue",
      b: "Alarm system tests and pre-accident plans.",
      more: "Confirms alarm system test records and the currency and adequacy of the unit's pre-accident plan against the standards evaluators verify." },
    { t: "Standardized Checklists",
      b: "Aircrew read-do / flow-verify sequences across all mission flight phases.",
      more: "Compares the unit's aircrew checklists — read-do and flow-verify sequences across every mission phase — against the approved standardized references, flagging deviations and out-of-date procedures." },
    { t: "Weight & Balance Program",
      b: "Verification of aircraft weighing procedures and documentation.",
      more: "Audits aircraft weighing procedures and weight-and-balance documentation for the currency and completeness an ARMS evaluator requires." },
  ];

  const compare = [
    ["Where it runs",   "Embedded in the ASD application tier",                 "On dedicated edge inference units, alongside any system"],
    ["Scope of knowledge", "ASD's own data, workflows, and records",            "Regulations, standards, and inspection criteria, force-wide"],
    ["Primary job",     "Summarize and analyze the unit's live operating data", "Assess the unit against approved doctrine and criteria"],
    ["Connectivity",    "Runs wherever ASD runs, including disconnected",        "Disconnected by design — inference never leaves the edge"],
    ["Output",          "Insight on what the unit is doing now",                 "Findings on where the unit stands against the standard"],
  ];

  return (
    <main>
      {/* ─────── breadcrumb / sticky meta ─────── */}
      <div style={{ paddingTop: 100 }}>
        <div className="wrap" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "24px var(--pad-x)" }}>
          <div className="crumb">
            <a href="#/" onClick={(e) => { e.preventDefault(); onNavigate("/"); }}>Index</a>
            <span className="sep">/</span>
            <a href="#/platform/aviation" onClick={(e) => { e.preventDefault(); onNavigate("/platform/aviation"); }}>Platform</a>
            <span className="sep">/</span>
            <span className="curr">AI at the Edge</span>
          </div>
          <div className="eyebrow mute tabular">DOC · LI-PF-003 · REV 1</div>
        </div>
      </div>

      {/* ─────── hero ─────── */}
      <section style={{ padding: "60px 0 80px", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 28 }}>
            <span className="dot"></span> PLATFORM AI · INFERENCE AT THE EDGE
          </div>
          <h1 className="display" style={{ marginBottom: 32, fontSize: "clamp(44px, 8vw, 132px)" }}>
            AI at<br/>the edge.
          </h1>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 60, alignItems: "end" }} className="av-hero-grid">
            <p className="lede">
              LLMs trained on Army regulations, standards, and inspection criteria, deployed on AI-enabled edge processing units. The result is the most sophisticated, knowledgeable, and approved inference engine ever fielded at the unit — analysis that runs where the mission is, not in a cloud the unit can't reach.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "flex-end" }}>
              <a href="#/contact" onClick={(e) => { e.preventDefault(); onNavigate("/contact"); }} className="btn">
                Brief us <span className="arrow">→</span>
              </a>
              <a href="#/platform/aviation" onClick={(e) => { e.preventDefault(); onNavigate("/platform/aviation"); }} className="btn ghost">
                See ASD
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ─────── hero media full-bleed ─────── */}
      <section style={{ borderBottom: "1px solid var(--line)" }}>
        <div style={{ position: "relative", aspectRatio: "16 / 9", background: "#0A0908" }}>
          {/* Spaces in the filename must be URL-encoded (%20) — nginx 404s on raw
              spaces. Same pattern as the Rapid Prototyping Loop hero. */}
          <MediaFrame src="media/AI%20at%20the%20Edge%20_standalone_.html" title="AI at the Edge — on-device inference" />
        </div>
        <div className="wrap" style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
          borderBottom: "1px solid var(--line)",
        }} className="av-meta">
          {[
            ["DEPLOYMENT",   "On-device"],
            ["MODELS",       "Army-trained LLMs"],
            ["CONNECTIVITY", "Disconnected-capable"],
            ["USE",          "Unit self-assessment"],
          ].map(([k, v], i) => (
            <div key={k} style={{
              padding: "24px 24px",
              borderRight: i < 3 ? "1px solid var(--line)" : "none",
              borderTop: "1px solid var(--line)",
            }}>
              <div className="eyebrow mute" style={{ marginBottom: 8 }}>{k}</div>
              <div className="h3" style={{ margin: 0 }}>{v}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ─────── overview ─────── */}
      <section className="section">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 60 }} className="av-overview">
            <div className="idx"><span className="num">01 /</span> Overview</div>
            <div>
              <p className="pull">
                The standard, <span className="accent">on-device.</span> The inspector's knowledge, before the inspection.
              </p>
              <p className="lede mute" style={{ marginTop: 32 }}>
                Edge processing units running models trained on regulatory text, doctrinal standards, and inspection criteria put an approved inference engine inside the unit — no connectivity required, no sensitive data leaving the perimeter. The unit can ask the regulation directly, and get an answer grounded in the criteria it will actually be measured against.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ─────── how it works ─────── */}
      <section className="section tight" style={{ background: "var(--ink-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 60 }} className="av-overview">
            <div className="idx"><span className="num">02 /</span> How it works</div>
            <div>
              <h2 className="h1">Trained on the<br/>standard itself.</h2>
              <p className="lede mute" style={{ marginTop: 24 }}>
                The models are trained and grounded on the regulations, standards, and inspection criteria that govern Army aviation — not general internet text. Inference runs locally on edge hardware, so the analysis is fast, private, and available in the disconnected conditions units actually operate in. Every answer traces back to an approved source.
              </p>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 0, marginTop: 48, borderTop: "1px solid var(--line)" }} className="aie-steps">
                {[
                  ["01", "Ground", "Models trained on regulations, standards, and inspection criteria."],
                  ["02", "Deploy", "Inference runs on AI-enabled edge units at the unit, disconnected-capable."],
                  ["03", "Assess", "The unit queries the standard and assesses itself before the evaluator arrives."],
                ].map(([n, t, b], i) => (
                  <div key={n} style={{
                    padding: "28px 24px 32px",
                    borderRight: i < 2 ? "1px solid var(--line)" : "none",
                    borderBottom: "1px solid var(--line)",
                    display: "flex", flexDirection: "column", gap: 12,
                  }}>
                    <div className="num" style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: ".14em", color: "var(--accent)" }}>{n} ——</div>
                    <div className="h3">{t}</div>
                    <p className="mute" style={{ fontSize: 14, lineHeight: 1.55 }}>{b}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ─────── ARMS self-assessment ─────── */}
      <section className="section">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 60 }} className="av-overview">
            <div className="idx"><span className="num">03 /</span> ARMS self-assessment</div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>
                <span className="dot"></span>AVIATION RESOURCE MANAGEMENT SURVEY
              </div>
              <h2 className="h1" style={{ marginBottom: 24 }}>
                Assess yourself<br/>before the <span className="accent-text">survey.</span>
              </h2>
              <p className="lede mute">
                The Aviation Resource Management Survey (ARMS) evaluates aviation units and support facilities against FORSCOM and USACRC standards — roughly 600 to 700 items across 11 functional core areas. The official tools live on the U.S. Army Combat Readiness Center and JTDI, behind CAC. Lulius edge models, trained on those same standards, let a unit run the assessment on itself first — finding the gaps while there is still time to fix them.
              </p>

              <div style={{ display: "flex", gap: 28, flexWrap: "wrap", marginTop: 36 }}>
                <div className="stat" style={{ minWidth: 120 }}>
                  <div className="n">600<span className="u">–700</span></div>
                  <div className="lbl">Checklist items</div>
                </div>
                <div className="stat" style={{ minWidth: 120 }}>
                  <div className="n">11</div>
                  <div className="lbl">Functional core areas</div>
                </div>
                <div className="stat" style={{ minWidth: 120 }}>
                  <div className="n">2</div>
                  <div className="lbl">Standards bodies · FORSCOM · USACRC</div>
                </div>
              </div>
            </div>
          </div>

          {/* 11 functional areas grid */}
          <div className="av-caps" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, marginTop: 72, borderTop: "1px solid var(--line)" }}>
            {armsAreas.map((a, i) => (
              <button
                key={a.t}
                type="button"
                className="av-tile"
                onClick={() => setActiveArea(a)}
                style={{
                  appearance: "none", background: "transparent",
                  borderTop: "none", borderLeft: "none",
                  borderRight: (i % 3 !== 2) ? "1px solid var(--line)" : "none",
                  borderBottom: "1px solid var(--line)",
                  padding: "30px 26px 26px",
                  color: "inherit", font: "inherit", textAlign: "left",
                  display: "flex", flexDirection: "column", gap: 12,
                  cursor: "pointer", position: "relative",
                  transition: "background .18s ease, box-shadow .18s ease",
                }}
              >
                <div className="num" style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: ".14em", color: "var(--accent)" }}>
                  {String(i + 1).padStart(2, "0")} ——
                </div>
                <div className="h3" style={{ fontSize: 19 }}>{a.t}</div>
                <p className="mute" style={{ fontSize: 13.5, lineHeight: 1.55, marginTop: 4, flex: 1 }}>{a.b}</p>
                <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: ".16em", color: "var(--accent)", marginTop: 12 }}>
                  DETAILS →
                </div>
              </button>
            ))}
          </div>
          <p className="mute" style={{ marginTop: 24, fontSize: 12.5, fontFamily: "var(--f-mono)", letterSpacing: ".04em" }}>
            * Checklist content is tailored to a unit's mission set. Official ARMS tools require CAC access via USACRC / JTDI.
          </p>
        </div>
      </section>

      {/* ─────── Platform AI vs ASD AI ─────── */}
      <section className="section tight" style={{ background: "var(--ink-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 60, marginBottom: 56 }} className="av-overview">
            <div className="idx"><span className="num">04 /</span> Two engines</div>
            <div>
              <h2 className="h1">Platform AI,<br/>and ASD AI.</h2>
              <p className="lede mute" style={{ marginTop: 24 }}>
                ASD already has an LLM at the edge built in — it reads the unit's own live data and turns it into insight. Platform AI inference is a different engine: trained on the regulations and inspection criteria themselves, it measures the unit against the standard. The two work together — one tells you what you're doing, the other tells you where you stand.
              </p>
            </div>
          </div>

          <div style={{ borderTop: "1px solid var(--line-2)" }} className="amx-compare">
            <div className="amx-row amx-head" style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr 1.3fr", gap: 24, padding: "18px 0", borderBottom: "1px solid var(--line-2)" }}>
              <div className="eyebrow mute"></div>
              <div className="eyebrow mute">ASD AI · BUILT IN</div>
              <div className="eyebrow accent-text">PLATFORM AI · AT THE EDGE</div>
            </div>
            {compare.map(([k, asd, plat]) => (
              <div key={k} className="amx-row" style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr 1.3fr", gap: 24, padding: "22px 0", borderBottom: "1px solid var(--line)", alignItems: "baseline" }}>
                <div className="eyebrow mute" style={{ letterSpacing: ".1em" }}>{k}</div>
                <div className="mute" style={{ fontSize: 15 }}>{asd}</div>
                <div style={{ fontSize: 15, color: "var(--paper)" }}>{plat}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─────── why edge / posture ─────── */}
      <section className="section">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 60 }} className="av-overview">
            <div className="idx"><span className="num">05 /</span> Why the edge</div>
            <div>
              <h2 className="h1" style={{ marginBottom: 24 }}>
                Approved. Private.<br/>Always available.
              </h2>
              <p className="lede mute">
                Putting inference on the edge is a posture decision, not just a performance one. The model is approved and grounded on authoritative sources, sensitive data never leaves the unit, and the analysis is available in exactly the disconnected, degraded conditions where a cloud service is not. It is the same field discipline that defines every Lulius system — applied to AI.
              </p>

              <div style={{ marginTop: 40, padding: "24px 28px", border: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
                <div>
                  <div className="eyebrow mute">BRING IT TO YOUR UNIT</div>
                  <div className="h3" style={{ marginTop: 4 }}>See edge inference assess against the standard</div>
                </div>
                <a href="#/contact" onClick={(e) => { e.preventDefault(); onNavigate("/contact"); }} className="btn">
                  Request a briefing <span className="arrow">→</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <ContactCTA onNavigate={onNavigate} />

      {/* ─────── ARMS area details dialog ─────── */}
      {activeArea && (
        <div
          role="dialog" aria-modal="true" aria-labelledby="aie-area-title"
          onClick={() => setActiveArea(null)}
          style={{
            position: "fixed", inset: 0, zIndex: 1000,
            background: "rgba(0,0,0,.78)",
            display: "flex", alignItems: "center", justifyContent: "center",
            padding: 24, backdropFilter: "blur(4px)", WebkitBackdropFilter: "blur(4px)",
          }}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            style={{
              maxWidth: 720, width: "100%", maxHeight: "85vh",
              background: "var(--ink)", border: "1px solid var(--accent)",
              padding: "clamp(28px, 4vw, 48px)", overflowY: "auto",
              position: "relative", boxShadow: "0 30px 80px rgba(0,0,0,.5)",
            }}
          >
            <button
              type="button" onClick={() => setActiveArea(null)} aria-label="Close"
              style={{
                position: "absolute", top: 16, right: 16, width: 38, height: 38,
                background: "transparent", border: "1px solid var(--line-2)",
                color: "var(--paper)", fontFamily: "var(--f-mono)", fontSize: 20,
                lineHeight: 1, cursor: "pointer",
              }}
            >×</button>
            <div className="eyebrow" style={{ marginBottom: 18, color: "var(--accent)" }}>
              <span className="dot"></span>ARMS · FUNCTIONAL CORE AREA
            </div>
            <h2 id="aie-area-title" className="h2" style={{ margin: "0 0 24px", paddingRight: 48 }}>
              {activeArea.t}
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, marginBottom: 22, color: "var(--paper)" }}>
              {activeArea.b}
            </p>
            {activeArea.more && (
              <p className="mute" style={{ fontSize: 15, lineHeight: 1.7, margin: 0 }}>
                {activeArea.more}
              </p>
            )}
          </div>
        </div>
      )}

      <style>{`
        .av-tile:hover { background: rgba(200,164,92,.05); box-shadow: 0 0 24px rgba(200,164,92,.28), inset 0 0 0 1px rgba(200,164,92,.45); z-index: 1; }
        .av-tile:focus-visible { outline: none; background: rgba(200,164,92,.05); box-shadow: 0 0 24px rgba(200,164,92,.28), inset 0 0 0 1px rgba(200,164,92,.45); z-index: 1; }
        @media (max-width: 880px) {
          .av-hero-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
          .av-overview { grid-template-columns: 1fr !important; gap: 24px !important; }
          .av-meta { grid-template-columns: 1fr 1fr !important; }
          .av-meta > div { border-right: none !important; }
          .av-caps { grid-template-columns: 1fr !important; }
          .av-caps > button { border-right: none !important; }
          .aie-steps { grid-template-columns: 1fr !important; }
          .aie-steps > div { border-right: none !important; }
          .amx-row { grid-template-columns: 1fr 1fr !important; }
          .amx-row > div:first-child { grid-column: 1 / -1; margin-bottom: 4px; }
          .amx-head > div:first-child { display: none; }
        }
      `}</style>
    </main>
  );
}

window.AIEdgePage = AIEdgePage;
