// AviationMax.jsx — AviationMax enterprise-platform deep-dive.
// Sibling to AviationPage (ASD). Route: #/platform/aviationmax

function AviationMaxPage({ onNavigate }) {
  const [activePillar, setActivePillar] = React.useState(null);

  React.useEffect(() => {
    if (!activePillar) return;
    const onKey = (e) => { if (e.key === "Escape") setActivePillar(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;
    };
  }, [activePillar]);

  const pillars = [
    { t: "Federated data model",
      b: "Multi-unit, multi-echelon data with unit-scoped permissions. Common standards roll up; local detail stays local.",
      more: "AviationMax keeps each unit's data sovereign while elevating the common fields to an enterprise tier. A brigade can see across its battalions without forcing every battalion onto an identical workflow. Standard schemas carry unit-level overrides — the framework bends, the data stays consistent." },
    { t: "Multi-echelon visibility",
      b: "Commander, staff, and enterprise views that surface decisions, not just rows. The same picture at every level, scoped to role.",
      more: "Readiness rolls from the flight line to the battalion to the brigade and above without anyone rekeying it. Each echelon sees the resolution it needs: a maintainer sees aircraft, a commander sees the unit, an enterprise staff sees the force. Role-based access enforces the boundaries throughout." },
    { t: "Shared standards, local autonomy",
      b: "Enterprise-wide reporting cadence and data definitions, without flattening how individual units actually operate.",
      more: "The hardest part of scaling a unit tool is not losing what made it work for the unit. AviationMax publishes shared standards (report formats, status codes, data definitions) as a baseline that units inherit, then permits scoped overrides where doctrine or mission demands. Standardization where it helps; flexibility where it matters." },
    { t: "Federated identity",
      b: "Integrates with existing CAC / SSO infrastructure. One identity, correct authorization at every echelon.",
      more: "AviationMax plugs into the identity infrastructure the Army already fields — CAC and existing SSO — rather than minting another credential. Authorization follows the user across units and echelons, so access is correct by construction and auditable end to end." },
    { t: "Cross-unit analytics",
      b: "Surface patterns no single unit can see. Fleet-wide trends, comparative readiness, and AI-assisted summaries.",
      more: "With many units on a common tier, the enterprise can finally ask enterprise questions: where is readiness trending, which units are carrying gaps, what's common across a fleet-wide issue. AI-assisted analysis turns the aggregate into narrative so leaders read insight, not spreadsheets." },
    { t: "Air-gappable deployment",
      b: "Operates in environments without consistent connectivity. Delayed-sync federation for disconnected operations.",
      more: "The same field discipline ASD is known for. AviationMax federates across connectivity it cannot assume — units operate disconnected and reconcile on a delayed-sync model when the link returns. Built for the realities of distributed and deployed operations, not just garrison." },
  ];

  const comparison = [
    ["Scope",         "Single unit",                 "Multi-unit · multi-echelon"],
    ["Data model",    "Unit source of truth",        "Federated, unit-sovereign tier"],
    ["Visibility",    "Commander & staff of the unit", "Enterprise roll-up across units"],
    ["Standards",     "Per-install configuration",   "Shared baseline + scoped overrides"],
    ["Identity",      "Local Attribution / CAC ",    "Federated Blockchain / SSO"],
    ["Analytics",     "Unit metrics & reports",      "Cross-unit, fleet-wide, AI-assisted"],
  ];

  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">AviationMax</span>
          </div>
          <div className="eyebrow mute tabular">DOC · LI-PF-002 · 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> NEXT STAGE · ENTERPRISE AVIATION PLATFORM
          </div>
          <h1 className="display" style={{ marginBottom: 32, fontSize: "clamp(48px, 8.5vw, 140px)" }}>
            AviationMax.
          </h1>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 60, alignItems: "end" }} className="av-hero-grid">
            <p className="lede">
              From a tool that works for the unit, to a platform that works for the force. AviationMax federates Lulius aviation software across units and echelons, without losing the field discipline that made it work in the first place.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "flex-end" }}>
              <a href="#/contact" onClick={(e) => { e.preventDefault(); onNavigate("/contact"); }} className="btn">
                Become a partner unit <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" }}>
          <MediaImg src="media/aviationmax-hero.jpg" alt="AviationMax — federated multi-unit operations" />
        </div>
        {/* under-image meta strip */}
        <div className="wrap" style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 0,
          borderBottom: "1px solid var(--line)",
        }} className="av-meta">
          {[
            ["STAGE",     "In development"],
            ["SCOPE",     "Multi-unit"],
            ["MODEL",     "Federated"],
            ["LINEAGE",   "Aviation Status Dashboard"],
          ].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">
                One unit proved it. Now the <span className="accent">whole force</span> can see it.
              </p>
              <p className="lede mute" style={{ marginTop: 32 }}>
                The Aviation Status Dashboard succeeded by giving a single unit a single source of truth. As adoption grew, a new requirement surfaced: commanders wanted to see across units, staffs wanted to compare, and standards needed to propagate without breaking what worked locally. AviationMax is the answer — the next stage of the Lulius aviation effort.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ─────── why now ─────── */}
      <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> Why now</div>
            <div>
              <h2 className="h1">Scale, without<br/>losing the unit's voice.</h2>
              <p className="lede mute" style={{ marginTop: 24 }}>
                The hardest part of scaling a unit tool is not losing what made it work for the unit. AviationMax preserves the flight-line workflow ASD users rely on, while elevating common data to an enterprise tier that respects unit autonomy and operational classification.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ─────── pillars ─────── */}
      <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> Platform pillars</div>
            <div>
              <h2 className="h1">Federated by design.</h2>
              <p className="lede mute" style={{ marginTop: 24 }}>
                Six pillars carry AviationMax from a strong local install to an enterprise platform. Each preserves unit-level reality while making force-level questions answerable.
              </p>
            </div>
          </div>

          <div className="av-caps" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, marginTop: 72, borderTop: "1px solid var(--line)" }}>
            {pillars.map((p, i) => (
              <button
                key={p.t}
                type="button"
                className="av-tile"
                onClick={() => setActivePillar(p)}
                style={{
                  appearance: "none", background: "transparent",
                  borderTop: "none", borderLeft: "none",
                  borderRight: (i % 3 !== 2) ? "1px solid var(--line)" : "none",
                  borderBottom: "1px solid var(--line)",
                  padding: "32px 28px 28px",
                  color: "inherit", font: "inherit", textAlign: "left",
                  display: "flex", flexDirection: "column", gap: 14,
                  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">{p.t}</div>
                <p className="mute" style={{ fontSize: 14, lineHeight: 1.55, marginTop: 4, flex: 1 }}>{p.b}</p>
                <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: ".16em", color: "var(--accent)", marginTop: 14 }}>
                  DETAILS →
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* ─────── ASD → AviationMax comparison ─────── */}
      <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> The step up</div>
            <div>
              <h2 className="h1">ASD, federated.</h2>
              <p className="lede mute" style={{ marginTop: 24 }}>
                Everything ASD does for a unit, AviationMax does for many — connected, standardized, and still sovereign at the edge.
              </p>
            </div>
          </div>

          {/* comparison table */}
          <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 · TODAY</div>
              <div className="eyebrow accent-text">AVIATIONMAX · NEXT</div>
            </div>
            {comparison.map(([k, asd, amx]) => (
              <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)" }}>{amx}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─────── status / roadmap ─────── */}
      <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> Status</div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>
                <span className="dot"></span>IN ACTIVE DEVELOPMENT · 2026
              </div>
              <h2 className="h1" style={{ marginBottom: 24 }}>
                Partner units<br/>are engaged.
              </h2>
              <p className="lede mute">
                Initial deployments are scoped for 2026. Lulius is selectively accepting additional partner units who can contribute requirements and operational feedback during the development cycle — the same way ASD was built alongside the operators who fly and fix the fleet.
              </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">PARTNER PROGRAM</div>
                  <div className="h3" style={{ marginTop: 4 }}>Shape the platform before it fields</div>
                </div>
                <a href="#/contact" onClick={(e) => { e.preventDefault(); onNavigate("/contact"); }} className="btn">
                  Become a partner unit <span className="arrow">→</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ─────── ASD lineage cross-promo ─────── */}
      <section className="section" style={{ borderTop: "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">06 /</span> Lineage</div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>
                <span className="dot"></span>AVIATION STATUS DASHBOARD · FIELDED
              </div>
              <h2 className="h1" style={{ marginBottom: 24 }}>
                Built on a system<br/>that already <span className="accent-text">holds up.</span>
              </h2>
              <p className="lede mute">
                AviationMax inherits five operational years of ASD lessons — audit-grade history, role-tailored views, mobile-first maintenance, and air-gappable deployment. The federation is new; the field discipline is proven.
              </p>
              <a href="#/platform/aviation" onClick={(e) => { e.preventDefault(); onNavigate("/platform/aviation"); }} className="btn ghost" style={{ marginTop: 32 }}>
                Inside Aviation Status Dashboard <span className="arrow">→</span>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ─────── CTA ─────── */}
      <ContactCTA onNavigate={onNavigate} />

      {/* ─────── pillar details dialog ─────── */}
      {activePillar && (
        <div
          role="dialog" aria-modal="true" aria-labelledby="amx-pillar-title"
          onClick={() => setActivePillar(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={() => setActivePillar(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>AVIATIONMAX · PLATFORM PILLAR
            </div>
            <h2 id="amx-pillar-title" className="h2" style={{ margin: "0 0 24px", paddingRight: 48 }}>
              {activePillar.t}
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, marginBottom: 22, color: "var(--paper)" }}>
              {activePillar.b}
            </p>
            {activePillar.more && (
              <p className="mute" style={{ fontSize: 15, lineHeight: 1.7, margin: 0 }}>
                {activePillar.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; }
          .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.AviationMaxPage = AviationMaxPage;