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

const { useState: useAS } = React;

// ───────────────────────── data ─────────────────────────
const ADVISORY = [
  { name: "COL(Ret) Lou Cabrera",        role: "Board Chair",   img: "media/team/lou.jpg",         linkedin: "https://www.linkedin.com/in/lou-cabrera-57406927/" },
  { name: "GEN(Ret) Joe Lengyel",        role: "Board Member",  img: "media/team/joe-lengyel.jpg", linkedin: "https://www.linkedin.com/in/jllengyel" },
  { name: "GEN(Ret) \u201CJD\u201D Thurman", role: "Board Member",  img: "media/team/jd-thurman.jpg",  linkedin: "https://www.linkedin.com/in/james-thurman-44056149/" },
  { name: "BG(Ret) Ray Davis",            role: "Board Member",  img: "media/team/ray-davis.jpg",   linkedin: "https://www.linkedin.com/in/davisjray" },
  { name: "Brent Carlson",                role: "Board Member",  img: "media/team/brent.jpg",       linkedin: "https://www.linkedin.com/in/jbcarlson/" },
];

const TEAM = [
  { name: "Rich Ferguson",         role: "CTO / Founder",            img: "media/team/rich.jpg",      linkedin: "https://www.linkedin.com/in/richfergus/" },
  { name: "COL(Ret) George Ferido", role: "Director, Federal Programs", img: "media/team/george.jpg",  linkedin: "https://www.linkedin.com/in/george-ferido-26232289/" },
  { name: "John Pettibone",         role: "CFO",                       img: "media/team/john.jpg",     linkedin: "https://www.linkedin.com/in/john-pettibone-9384a251/" },
  { name: "COL(Ret) Steve Weigel",  role: "Solutions Architect",       img: "media/team/steve.jpg",    linkedin: "https://www.linkedin.com/in/weigel-steve/" },
  { name: "COL(Ret) James Rae",     role: "Business Development",      img: "media/team/james-rae.jpg", linkedin: "https://www.linkedin.com/in/james-rae-24a2742" },
  { name: "Ariel Castro",           role: "Senior Developer",          img: "media/team/ariel.jpg",    linkedin: "https://www.linkedin.com/in/arielmcastro/" },
  { name: "Karen Brown",   role: "HR Manager",          img: "media/team/karen.jpg",    linkedin: "https://www.linkedin.com/in/karen-brown-86196149/" },
  { name: "Jillian Archer",         role: "Administrative",            img: "media/team/jillian.jpg",  linkedin: "https://www.linkedin.com/in/jill-archer-3656b63b8/" },
];

const SPECIALTIES = [
  { n: "01", title: "Application & Technology Implementation",
    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",
    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",
    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",
    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: 28, height: 28,
              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: 11, 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: 10 }}>{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 visible =
    filter === "board" ? ADVISORY
    : filter === "team" ? TEAM
    : [...ADVISORY, ...TEAM];

  return (
    <main>
      {/* breadcrumb */}
      <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>
            <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</span> and built around people who have shipped in conditions where the work has to hold up. A four-star general sits on our board. The U.S. Army puts our software in the field.
            </p>
            <p className="lede mute" style={{ marginTop: 32, maxWidth: "60ch" }}>
              We've been operating from Reno, Nevada since 2014 — quietly, consistently,
              and on engagements where deep experience compounds.
            </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) => (
              <div key={s.n} style={{
                display: "grid",
                gridTemplateColumns: "100px 1.2fr 1.5fr",
                gap: 32, padding: "44px 0",
                borderBottom: "1px solid var(--line)",
                alignItems: "start",
              }} className="spec-row">
                <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>
                <p className="lede mute" style={{ fontSize: 16 }}>{s.body}</p>
              </div>
            ))}
          </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 · ${ADVISORY.length + TEAM.length}`],
                ["board", `Advisory · ${ADVISORY.length}`],
                ["team",  `Team · ${TEAM.length}`],
              ].map(([key, label]) => (
                <button
                  key={key}
                  onClick={() => setFilter(key)}
                  style={{
                    padding: "12px 18px",
                    fontFamily: "var(--f-mono)", fontSize: 11, 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>

          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
            gap: 16,
          }}>
            {visible.map((p) => <PersonCard key={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>{`
        @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 0 !important; }
          .spec-row > p { 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;