// About.jsx — Lulius About page, Palantir-style.
// Sourced from luli.us/about-us/ — real team and advisory board.

const { useState: useAS, useEffect: useAE } = React;

// Personnel ("04 / Personnel") is driven by content/team.json — editable via
// the admin panel. Fetched once at runtime and cached in-memory.
let __teamCache = null;
let __teamPromise = null;
function loadTeam() {
  if (__teamCache) return Promise.resolve(__teamCache);
  if (__teamPromise) return __teamPromise;
  __teamPromise = fetch("content/team.json")
    .then((r) => { if (!r.ok) throw new Error("Failed to load team.json: " + r.status); return r.json(); })
    .then((data) => { __teamCache = (data && data.people) || []; return __teamCache; });
  return __teamPromise;
}

// ───────────────────────── data ─────────────────────────
const SPECIALTIES = [
  { n: "01", title: "Application & Technology Implementation", slug: "capability-app-dev",
    body: "We design and develop software applications to specific operational requirements. Our developers move with the framework — and our teams are routinely embedded in systems integration and data center operations." },
  { n: "02", title: "Information Technology Risk Management", slug: "capability-it-risk-management",
    body: "Risk management is one of the most underutilized disciplines in Federal IT. We treat it as a leadership concern, not a checklist — surfacing the unknowns around the nation's most critical data." },
  { n: "03", title: "Information Security Auditing", slug: "capability-infosec-audit",
    body: "FISMA. CCRI. NIST. OMB. We help customers stay ahead of the regulatory cycle while keeping the data-protection program strong — not just compliant." },
  { n: "04", title: "Information Technology Design & Strategy", slug: "capability-it-strategy",
    body: "Independent counsel on technology investments. Our bench includes former Federal CIOs and well-known application specialists — paired with leadership to translate intent into capability." },
];

const VISUALS = [
  { id: "viz-maintenance", title: "Maintenance",          eyebrow: "01 · VISUALIZE",  desc: "Realtime visibility across fielded fleet maintenance.", src: "media/about/viz-maintenance.jpg" },
  { id: "viz-flights",     title: "Flights",              eyebrow: "02 · MOBILE",     desc: "Schedule, status, and assignment — in the hands of the crew.", src: "media/about/viz-flights.jpg" },
  { id: "viz-training",    title: "Training",             eyebrow: "03 · OPERATIONS", desc: "Training programs and records, integrated with the operating picture.", src: "media/about/viz-training.jpg" },
];

// ───────────────────────── components ─────────────────────────

function PersonCard({ p }) {
  return (
    <article style={{
      border: "1px solid var(--line)",
      background: "var(--ink-2)",
      transition: "border-color .25s ease, transform .25s ease",
      display: "flex", flexDirection: "column",
    }} className="person-card">
      <div style={{ aspectRatio: "1 / 1", background: "#0A0A0A", position: "relative", borderBottom: "1px solid var(--line)" }}>
        <MediaImg src={p.img} alt={p.name} position="50% 30%" />
        {p.linkedin && (
          <a href={p.linkedin} target="_blank" rel="noopener"
            style={{
              position: "absolute", top: 12, right: 12,
              width: 40, height: 40,
              border: "1px solid rgba(255,255,255,.45)",
              background: "rgba(5,5,5,.6)",
              backdropFilter: "blur(8px)",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              fontFamily: "var(--f-mono)", fontSize: 12, letterSpacing: "0",
              color: "var(--paper)",
            }} aria-label={`${p.name} on LinkedIn`}>
            in
          </a>
        )}
      </div>
      <div style={{ padding: "18px 18px 22px", display: "flex", flexDirection: "column", gap: 4 }}>
        <div className="eyebrow mute" style={{ fontSize: 12 }}>{p.role}</div>
        <div style={{ fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 17, letterSpacing: "-0.01em", lineHeight: 1.2 }}>{p.name}</div>
      </div>
      <style>{`
        .person-card:hover { border-color: var(--accent) !important; }
      `}</style>
    </article>
  );
}

function AboutPage({ onNavigate }) {
  const [filter, setFilter] = useAS("all"); // all | board | team
  const [people, setPeople] = useAS(null);

  useAE(() => {
    loadTeam().then(setPeople).catch(() => setPeople([]));
  }, []);

  const loaded = people || [];
  const live = loaded.filter((p) => !p.archived);
  const advisory = live.filter((p) => p.group === "advisory");
  const team = live.filter((p) => p.group === "team");

  const visible =
    filter === "board" ? advisory
    : filter === "team" ? team
    : live;

  return (
    <main>
      {/* breadcrumb */}
      <div style={{ paddingTop: 100 }}>
        <div className="wrap doc-head" 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>
            <span className="curr">Company</span>
          </div>
          <div className="eyebrow mute tabular">DOC · LI-CO-001 · REV 7</div>
        </div>
      </div>

      {/* hero — terse statement */}
      <section style={{ padding: "60px 0 100px", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 28 }}><span className="dot"></span>05 / COMPANY</div>
          <h1 className="display" style={{ fontSize: "clamp(44px, 7.5vw, 120px)", marginBottom: 36 }}>
            A small firm,<br/>built around operators.
          </h1>
          <p className="lede" style={{ maxWidth: "62ch" }}>
            Lulius Innovation is a Veteran-owned company focused on software development
            and IT consulting. Our employees are some of the industry's most experienced.
            Our customers fly aircraft, run programs, and answer to commanders.
          </p>
        </div>
      </section>

      {/* posture */}
      <section className="section">
        <div className="wrap ab-hero" style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 60 }}>
          <div className="idx"><span className="num">01 /</span> Posture</div>
          <div>
            <p className="pull">
              We are <span className="accent">veteran-owned and mission-built</span>, with a team that understands Army aviation from the inside. We work as partners to the mission, delivering software that holds up in real operational conditions.
            </p>
            <p className="lede mute" style={{ marginTop: 32, maxWidth: "60ch" }}>
              The Army sees what we see: aviation units are being asked to do more with less. This platform gives leaders the visibility and automation to meet that demand.
            </p>
          </div>
        </div>
      </section>

      {/* four specialties */}
      <section className="section" style={{ borderTop: "1px solid var(--line)" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 60, marginBottom: 64 }} className="ab-head">
            <div className="idx"><span className="num">02 /</span> Niche</div>
            <div>
              <h2 className="h1" style={{ marginTop: 0 }}>Four specialties.<br/>Deep bench.</h2>
              <p className="lede mute" style={{ marginTop: 20 }}>
                We do not try to be all things to all customers. We specialize where
                experience compounds — and our customers feel that on day one.
              </p>
            </div>
          </div>

          <div style={{ borderTop: "1px solid var(--line)" }}>
            {SPECIALTIES.map((s) => (
              <a
                key={s.n}
                href={`#/entry/${s.slug}`}
                onClick={(e) => { e.preventDefault(); onNavigate(`/entry/${s.slug}`); }}
                className="spec-row"
                style={{
                  display: "grid",
                  gridTemplateColumns: "100px 1.2fr 1.5fr",
                  gap: 32, padding: "44px 28px",
                  borderBottom: "1px solid var(--line)",
                  alignItems: "start",
                  color: "inherit",
                  textDecoration: "none",
                  position: "relative",
                  transition: "background .2s ease, box-shadow .2s ease",
                }}>
                <div className="num" style={{ fontFamily: "var(--f-mono)", fontSize: 12, color: "var(--accent)", letterSpacing: ".14em" }}>{s.n} ——</div>
                <h3 className="h2" style={{ margin: 0, fontSize: "clamp(22px, 2.4vw, 30px)" }}>{s.title}</h3>
                <div>
                  <p className="lede mute" style={{ fontSize: 16, margin: 0 }}>{s.body}</p>
                  <div style={{ fontFamily: "var(--f-mono)", fontSize: 12, letterSpacing: ".16em", color: "var(--accent)", marginTop: 16 }}>
                    READ MORE →
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* visualize triptych */}
      <section className="section" style={{ background: "var(--ink-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 60, marginBottom: 56 }} className="ab-head">
            <div className="idx"><span className="num">03 /</span> Field</div>
            <div>
              <h2 className="h1" style={{ marginTop: 0 }}>What it looks like<br/>in operation.</h2>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }} className="viz-grid">
            {VISUALS.map((v) => (
              <article key={v.id} style={{ border: "1px solid var(--line)", background: "var(--ink)", display: "flex", flexDirection: "column" }}>
                <div style={{ aspectRatio: "4 / 3", background: "#0A0A0A", borderBottom: "1px solid var(--line)" }}>
                  <MediaImg src={v.src} alt={v.title} />
                </div>
                <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 8 }}>
                  <div className="eyebrow accent-text">{v.eyebrow}</div>
                  <div className="h3" style={{ margin: 0 }}>{v.title}</div>
                  <div className="mute" style={{ fontSize: 14 }}>{v.desc}</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* team */}
      <section className="section">
        <div className="wrap">
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "end",
            marginBottom: 56, gap: 40, flexWrap: "wrap",
          }} className="team-head">
            <div>
              <div className="idx" style={{ marginBottom: 20 }}><span className="num">04 /</span> Personnel</div>
              <h2 className="h1" style={{ margin: 0 }}>The people who<br/>do the work.</h2>
            </div>

            <div style={{ display: "flex", border: "1px solid var(--line-2)" }}>
              {[
                ["all",   `All · ${live.length}`],
                ["board", `Advisory · ${advisory.length}`],
                ["team",  `Team · ${team.length}`],
              ].map(([key, label]) => (
                <button
                  key={key}
                  onClick={() => setFilter(key)}
                  style={{
                    padding: "14px 18px",
                    fontFamily: "var(--f-mono)", fontSize: 12, letterSpacing: ".12em",
                    textTransform: "uppercase",
                    borderRight: key !== "team" ? "1px solid var(--line-2)" : "none",
                    background: filter === key ? "var(--accent)" : "transparent",
                    color: filter === key ? "var(--ink)" : "var(--paper)",
                    cursor: "pointer",
                  }}
                >{label}</button>
              ))}
            </div>
          </div>

          {people === null ? (
            <div className="mute" style={{ fontFamily: "var(--f-mono)", fontSize: 12, letterSpacing: ".14em", padding: "24px 0" }}>
              <span className="dot"></span>LOADING PERSONNEL
            </div>
          ) : (
            <div style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
              gap: 16,
            }}>
              {visible.map((p) => <PersonCard key={p.id || p.name} p={p} />)}
            </div>
          )}

          <p className="mute" style={{ marginTop: 40, fontSize: 13, fontFamily: "var(--f-mono)" }}>
            * Veteran-owned · multiple flag officers and senior O-6s on the bench.
          </p>
        </div>
      </section>

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

      <style>{`
        .spec-row:hover,
        .spec-row:focus-visible {
          background: rgba(200, 164, 92, .04);
          box-shadow: 0 0 24px rgba(200, 164, 92, .28), inset 0 0 0 1px rgba(200, 164, 92, .45);
          z-index: 1;
          outline: none;
        }
        @media (max-width: 880px) {
          .ab-hero, .ab-head { grid-template-columns: 1fr !important; gap: 24px !important; }
          .spec-row { grid-template-columns: 60px 1fr !important; gap: 16px !important; padding: 28px 20px !important; }
          .spec-row > div:last-child { grid-column: 1 / -1 !important; }
          .viz-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 560px) {
          .team-head { flex-direction: column !important; align-items: flex-start !important; }
        }
      `}</style>
    </main>
  );
}

// Override the previously-registered AboutPage with this richer one.
window.AboutPage = AboutPage;