// Aviation.jsx — Aviation Status Dashboard + AviationMax deep-dive page.

function AviationPage({ onNavigate }) {
  const [activeFeature, setActiveFeature] = React.useState(null);

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

  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()}>Platform</a>
            <span className="sep">/</span>
            <span className="curr">Aviation Status</span>
          </div>
          <div className="eyebrow mute tabular">DOC · LI-PF-001 · REV 4</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> FIELDED PLATFORM · U.S. ARMY AVIATION
          </div>
          <h1 className="display" style={{ marginBottom: 32, fontSize: "clamp(48px, 8.5vw, 140px)" }}>
            Aviation Status<br/>Dashboard.
          </h1>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 60, alignItems: "end" }} className="av-hero-grid">
            <p className="lede">
              Field-proven aviation readiness and workflow automation. ASD gives commanders, staff, and maintainers a single, realtime view of the fleet, wherever the fleet happens to be.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "flex-end" }}>
              <a href="https://www.avnstatus.com" target="_blank" rel="noopener" className="btn">
                Live deployment <span className="arrow">↗</span>
              </a>
              <a href="#/contact" onClick={(e) => { e.preventDefault(); onNavigate("/contact"); }} className="btn ghost">
                Brief us
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ─────── hero image full-bleed ─────── */}
      <section style={{ borderBottom: "1px solid var(--line)" }}>
        <div style={{ position: "relative", aspectRatio: "16 / 9", background: "#0A0A0A" }}>
          <VideoBg
            src="media/aviation-hero.mp4"
            webm="media/aviation-hero.webm"
            poster="media/aviation-hero-poster.jpg"
            slotId="av-hero"
            slotPlaceholder="Drop media/aviation-hero.mp4 to replace this placeholder."
          />
        </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">
          {[
            ["DEPLOYMENT",   "Production"],
            ["INTERFACE",    "Web + Mobile"],
            ["DATA",         "Realtime"],
            ["LOCATION",     "Fielded · CONUS"],
          ].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 U.S. Army can now see its data in <span className="accent">realtime.</span>
              </p>
              <p className="lede mute" style={{ marginTop: 32 }}>
                ASD replaces brittle spreadsheets, slow emails, and end-of-day status reports with live fleet visibility. Maintainers update once; staff and commanders see it immediately. The platform was built alongside operators, not in spite of them.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ─────── capabilities, grouped by app mode ─────── */}
      <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> Capabilities</div>
            <div>
              <h2 className="h1">Integrated for the unit.<br/>Not separate and unruly.</h2>
              <p className="lede mute" style={{ marginTop: 24 }}>
                Every surface in ASD shares a single source of truth. Flight scheduling, maintenance, records, reporting, and aircrew currency all read from and write to the same data, so a maintainer's update reaches the commander's dashboard without anyone having to ask.
              </p>
            </div>
          </div>

          <div style={{ marginTop: 80 }}>
          {[
            {
              eyebrow: "OPERATIONAL PROFILE",
              name: "Units",
              blurb: "Shared by National Guard, Active Army, Reserves, Deployed, and Stand Alone units. Sub-mode tweaks only. Most features are identical across the five.",
              features: [
                { t: "Operations", b: "Operations Dashboard, flight scheduling with calendar integrations, Flying Hour Program tracking, aircraft parking.",
                  more: "The center of gravity for a Units install. Operations Dashboard surfaces today's flight schedule, current aircraft status, and Flying Hour Program posture in one view. Calendar integrations push the schedule out to Google and Microsoft Teams; aircraft parking renders the flight line so plans walk in pre-loaded. Built for the surface a duty officer lives on." },
                { t: "Aircraft maintenance", b: "Aircraft Status, Aircraft Detail, Phase Flow & Inspections, multi-database integration (ACN / ACNLUH), Hoist & Rescue Equipment, Readiness Assessment.",
                  more: "Every aircraft has a status, a history, and a phase to chase. ASD tracks status changes with sign-off lineage, surfaces the Aircraft Detail Page with full inspection history, and walks aircraft through Phase Flow with the right inspections at the right gates. ACN / ACNLUH multi-database integration means tail numbers stay consistent across the systems the Army actually fields. Hoist & Rescue Equipment and Readiness Assessment round out the lifecycle picture." },
                { t: "Equipment & logistics", b: "Equipment Inventory, Check-Out / Check-In, Mission Sets.",
                  more: "Track what's on the property book and where it is. Equipment Inventory plus Check-Out / Check-In replaces the paper hand-receipt churn; Mission Sets bundle the gear-and-people configurations that recur, so a repeating mission doesn't require repeating spin-up." },
                { t: "Fiscal & budget", b: "Program Funding, Cost Management, Pay & Compensation, UIC Management.",
                  more: "Program Funding ties dollar amounts to the programs spending them; Cost Management tracks burn against budget; Pay & Compensation handles the unit's pay-affecting events; UIC Management keeps the Unit Identification Code structure clean. Built so the S-8 isn't reconciling against five spreadsheets at end of month." },
                { t: "Aircrew Information Reading File (AIRF)", b: "AIRF management, distribution & tracking, collaboration, admin oversight.",
                  more: "Standing orders, technical bulletins, and unit guidance need a place that isn't a shared drive nobody can find. The Aircrew Information Reading File (AIRF) manages document distribution, tracks who has read what, supports collaboration on revisions, and gives admins control over which files reach which roles. Audit-grade. Every read event is recorded." },
                { t: "Flight records", b: "Flight Records Hub, IFRF (DA Form 759), IATF (Initial Aircrew Training Form), Flight Pack Scan, DA Form 2408.",
                  more: "The Army's flight records system, fielded the way operators actually use it. Flight Records Hub centralizes IFRF (DA Form 759), IATF, Flight Pack Scan, and DA Form 2408 entries; data flows once and surfaces everywhere it's needed. Replaces the paperwork pile-up at the end of a flying day with a tablet-friendly capture flow." },
                { t: "AFTP management", b: "List & filtering, detail & workflows, tracking & reporting, authorize / strict mode.",
                  more: "Aircrew Flight Training Program tracking from list view through detail workflow to reporting and authorization. Strict Mode locks down the AFTP for installs that need posture-grade audit; tracking and reporting roll up across the unit so commanders can see currency and gaps at a glance." },
                { t: "Aircrew management", b: "Aircrew Roster, currency tracking (day / night / NVG), training requirements (RCM / NRCM), medical readiness with CAFRS flag.",
                  more: "Every aircrew member has a roster entry, currency requirements per type (day / night / NVG), training requirements (RCM / NRCM), and a medical readiness state. ASD watches all four (currency expiring, training overdue, medical upslip or exam date approaching) and pulls the CAFRS flag for cross-validation. Surfaces the gap before it becomes a no-go." },
                { t: "Reporting", b: "Commander's WAR Report, Daily Activity Reports (payer, certifier, aircraft status, DOMOPs), Metrics & Data Quality, SAAO Reports, AI-powered analysis.",
                  more: "The Army's reporting cadence built into the system that generates it. Commander's WAR Report rolls up weekly activity; DAR variants (payer, certifier, aircraft status, DOMOPs) cover daily detail; Metrics & Data Quality surfaces where the data has gaps; SAAO Reports satisfy the safety-and-aviation-operations cadence. AI-powered analysis summarizes trends so commanders read insight, not raw rows." },
              ],
            },
            {
              eyebrow: "TRAINING PROFILE",
              name: "Schoolhouse",
              blurb: "Training-focused install. Operational Units features are hidden; the dashboard, sidebar, and roles are training-specific.",
              features: [
                { t: "Schoolhouse dashboard", b: "Training-focused dashboard distinct from Units operations.",
                  more: "The schoolhouse-mode equivalent of the Units Operations Dashboard. Surfaces what's running today at the school house (courses in session, classes by phase, students by status) at the granularity a training facility cares about, not the operational unit detail that would be noise here." },
                { t: "Course management", b: "Course list, course detail sheet, class detail sheet, class phase detail, edit class dialog.",
                  more: "Every level of the course hierarchy gets a first-class surface. Course list to see the catalog; course detail sheet for the syllabus and outcomes; class detail sheet to manage a specific cohort; class phase detail to track progression; edit class dialog to handle the changes that always come up mid-course." },
                { t: "Course builder", b: "Inline course creation wizard, glideslope chart at course and class level, curriculum library integration.",
                  more: "Stand up a new course inline without leaving the schoolhouse. The wizard walks an authoring user through the steps; the glideslope chart visualizes progression at both course and class level so over- and under-loaded weeks are obvious; the curriculum library plugs in shared modules so course authors don't reinvent every component." },
                { t: "Curriculum library", b: "Reusable curriculum modules, training materials, course assignment.",
                  more: "Reusable building blocks for course authoring. Modules and training materials live once and get assigned to courses that need them. When a curriculum module changes, every course referencing it picks up the update. Means course authors share work instead of duplicating it." },
                { t: "Training materials", b: "Document library tied to courses.",
                  more: "A document library scoped to courses. Reading material, slide decks, reference cards: everything a student needs for a course lives where the course lives, accessible per role. Less hunting, more learning." },
                { t: "Student management", b: "Student roster, AM / PM flight period distribution, student reading files.",
                  more: "Roster, AM / PM flight period assignment, and per-student reading files. Tracks where every student is in the program and what they've absorbed, so instructors and the course manager have shared situational awareness without a daily sync meeting." },
                { t: "Instructor management", b: "Instructor assignment sheets, instructor capacity tracking.",
                  more: "Assignment sheets tie instructors to classes and periods; capacity tracking shows where the instructor bench is loaded and where it has room. A course manager can rebalance assignments before a week becomes impossible." },
                { t: "Academic scheduling", b: "Schoolhouse-specific scheduling distinct from Units flight scheduling.",
                  more: "Schoolhouse scheduling has different constraints than Units flight scheduling: class periods, instructor availability, simulator vs aircraft slots, weather contingencies. The platform models these directly rather than forcing them into the operational scheduling surface." },
                { t: "Performance & grading", b: "Grade tracking and performance review.",
                  more: "Grade tracking per student, per task, per phase. Performance review surfaces a student's full arc so an instructor or course manager can see trends before they become end-of-course problems. Audit-grade. Every grade and review event is signed and retrievable." },
                { t: "Schoolhouse roles", b: "Flight Student, Course Manager, and Schoolhouse Commander roles with dedicated permissions.",
                  more: "Flight Student, Course Manager, and Schoolhouse Commander each get a role-tailored surface: students see their progress and materials, course managers see roster and capacity, commanders see the schoolhouse's overall posture. RBAC enforces the boundaries; useRolePermissions hooks ensure UI matches authorization throughout the schoolhouse experience." },
              ],
            },
          ].map((mode, mIdx) => (
            <div key={mode.name} style={{ marginTop: mIdx === 0 ? 0 : 64 }}>
              {/* mode header strip */}
              <div className="av-mode-header" style={{
                display: "grid",
                gridTemplateColumns: "1fr 1.6fr",
                gap: 40,
                padding: "0 0 24px",
                borderBottom: "1px solid var(--line)",
                alignItems: "end",
              }}>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 12 }}>
                    <span className="dot"></span>{mode.eyebrow}
                  </div>
                  <h2 className="h2" style={{ margin: 0 }}>{mode.name}</h2>
                </div>
                {mode.blurb && (
                  <p className="mute" style={{ fontSize: 15, lineHeight: 1.6, margin: 0 }}>
                    {mode.blurb}
                  </p>
                )}
              </div>

              {/* feature grid for this mode — each tile opens a details dialog */}
              <div className="av-caps" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0 }}>
                {mode.features.map((f, i) => (
                  <button
                    key={f.t}
                    type="button"
                    className="av-tile"
                    onClick={() => setActiveFeature({ modeEyebrow: mode.eyebrow, modeName: mode.name, feature: f })}
                    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",
                      transition: "background .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">{f.t}</div>
                    <p className="mute" style={{ fontSize: 14, lineHeight: 1.55, marginTop: 4, flex: 1 }}>{f.b}</p>
                    <div style={{
                      fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: ".16em",
                      color: "var(--accent)", marginTop: 14,
                    }}>
                      DETAILS →
                    </div>
                  </button>
                ))}
              </div>
            </div>
          ))}
          </div>
        </div>
      </section>

      {/* ─────── how it works ─────── */}
      <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> Architecture</div>
            <div>
              <h2 className="h1">Built to be fielded.<br/>Not demoed.</h2>
              <p className="lede mute" style={{ marginTop: 24 }}>
                ASD runs on a hardened web + mobile stack with a documented API, sign-off audit trail, and the option to deploy disconnected. The interface assumes its users are wearing flight suits, working night shifts, and don't have time to relearn another portal.
              </p>
            </div>
          </div>

          <div style={{ marginTop: 80, position: "relative", aspectRatio: "16 / 9", border: "1px solid var(--line)", background: "var(--ink-2)" }}>
            <MediaFrame src="media/av-architecture.html" title="ASD architecture" />
            {/* <div style={{
              position: "absolute", top: 16, left: 16,
              padding: "6px 10px", border: "1px solid var(--accent)",
              fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase",
              color: "var(--accent)",
            }}></div> */}
          </div>
        </div>
      </section>

      {/* ─────── AviationMax 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">04 /</span> Next stage</div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>
                <span className="dot"></span>AVIATIONMAX · 2026
              </div>
              <h2 className="h1" style={{ marginBottom: 24 }}>
                From a tool that<br/>
                works for the unit, to a <span className="accent-text">platform</span><br/>
                that works for the force.
              </h2>
              <p className="lede mute">
                AviationMax represents the next stage of the Lulius aviation effort: moving from strong local workflow into a federated platform. Multi-unit operations, shared standards, and the same field discipline ASD is known for.
              </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">CURRENT STATUS</div>
                  <div className="h3" style={{ marginTop: 4 }}>In active development · partner units engaged</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>

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

      {/* ─────── feature details dialog ─────── */}
      {activeFeature && (
        <div
          role="dialog"
          aria-modal="true"
          aria-labelledby="av-feature-title"
          onClick={() => setActiveFeature(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: 760, 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={() => setActiveFeature(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>{activeFeature.modeEyebrow} · {activeFeature.modeName}
            </div>
            <h2 id="av-feature-title" className="h2" style={{ margin: "0 0 24px", paddingRight: 48 }}>
              {activeFeature.feature.t}
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, marginBottom: 22, color: "var(--paper)" }}>
              {activeFeature.feature.b}
            </p>
            {activeFeature.feature.more && (
              <p className="mute" style={{ fontSize: 15, lineHeight: 1.7, margin: 0 }}>
                {activeFeature.feature.more}
              </p>
            )}
          </div>
        </div>
      )}

      <style>{`
        .av-tile:hover { background: rgba(200, 164, 92, .05); }
        .av-tile:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; background: rgba(200, 164, 92, .05); }
        @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 > div { border-right: none !important; }
          .av-mode-header { grid-template-columns: 1fr !important; gap: 16px !important; align-items: start !important; }
        }
      `}</style>
    </main>
  );
}

window.AviationPage = AviationPage;