// Programs.jsx — standing career programs, one page per program.
//
// Routes: #/programs/dod-skillbridge
//         #/programs/project-management
//         #/programs/product-marketing
//
// These are hardcoded pages (like the platform pages), not content entries:
// programs are permanent offerings, not open requisitions, so they must not
// appear in the Careers "Open positions" list. The Careers tiles, footer
// "Programs" column, and drawer all link here — keep those in sync.
// An unknown slug renders the program directory instead of a 404.

const PROGRAMS = {
  "dod-skillbridge": {
    idx: "07.1 / DOD SKILLBRIDGE",
    title: <>From service to<br/><span className="accent-text">shipping software.</span></>,
    lede: "DOD SkillBridge lets transitioning service members spend up to their final 180 days of service embedded with Lulius — military pay and benefits continue while you do real work on software the field actually uses.",
    aboutHead: "The program",
    about: [
      "SkillBridge is the Department of Defense program that lets you spend the last months of your service — up to 180 days — working full-time with an industry partner while your military pay and benefits continue. Your job in that window is to learn the work, do the work, and decide whether it's the career you want.",
      "At Lulius, that window is not a shadow program. You're embedded with a veteran-owned team building software that aviation units, defense programs, and government organizations run every day. Real tickets, real users, real consequences when it ships.",
      "Most of us wore the uniform. We know what your experience is worth, and we know how to put it to work.",
    ],
    facts: [
      ["DURATION", "Up to 180 days"],
      ["PAY", "Military pay & benefits continue"],
      ["COST TO YOU", "None"],
      ["APPROVAL", "Unit commander sign-off"],
      ["HOME STATION", "Reno, NV"],
    ],
    workHead: "What you'll work on",
    work: [
      { t: "Fielded software", b: "Production systems like Aviation Status and AviationMax — used by the people who fly, fix, and schedule aircraft." },
      { t: "A track that fits", b: "Placements run across the disciplines we staff: software engineering, project management, and product marketing." },
      { t: "Mentorship with intent", b: "You work beside engineers and operators who ship — with a plan for what you'll be able to do by the end of the placement." },
      { t: "A shot at the team", b: "SkillBridge carries no hiring obligation on either side. We host placements because we're building a bench — and the best outcome is you staying." },
    ],
    whoHead: "Who it's for",
    who: "You're inside roughly 180 days of separation or retirement, your command is willing to approve a placement, and you want to find out whether building technology for the mission is your next chapter.",
    whoPoints: [
      "Aviation maintainers, aircrew, and operations backgrounds feel at home here — our products serve the flight line.",
      "Engineers, comms, intel, logistics — the disciplines translate further than you think.",
      "Not every track needs a computer-science degree. Judgment, standards, and follow-through are non-negotiable.",
    ],
    ctaTitle: <>Your next mission can start<br/>before your last one ends.</>,
    applyNote: "Apply with your resume and note DOD SkillBridge — plus your separation window — in the message. We'll take it from there.",
  },

  "project-management": {
    idx: "07.2 / PROJECT MANAGEMENT",
    title: <>Keep the mission<br/>on <span className="accent-text">schedule.</span></>,
    lede: "Program and project management placements supporting government and defense delivery — where a slipped date isn't a dashboard color, it's someone in the field waiting on capability.",
    aboutHead: "The discipline",
    about: [
      "Software for defense and government moves through requirements, reviews, and milestones — and still has to ship. Our project managers sit at that intersection: close enough to the code to be honest, close enough to the customer to be trusted.",
      "This is delivery management, not ceremony. You'll scope work with engineers, keep the customer's picture current, and make sure that what was promised is what ships.",
    ],
    facts: [
      ["DISCIPLINE", "Program & project delivery"],
      ["CUSTOMERS", "Government · Defense · Aviation"],
      ["ELIGIBLE", "Direct hire & DOD SkillBridge"],
      ["HOME STATION", "Reno, NV"],
      ["STATUS", "Accepting interest"],
    ],
    workHead: "The work",
    work: [
      { t: "Delivery cadence", b: "Milestones, sprint plans, and reviews that reflect reality — and hold." },
      { t: "Customer trust", b: "Program status a commander can act on: plain language, current numbers, no surprises." },
      { t: "Scope discipline", b: "Translate operator needs into work engineers can estimate, build, and ship." },
      { t: "Risk on the table", b: "Surface schedule and dependency risk early, while it's still cheap to fix." },
    ],
    whoHead: "Who it's for",
    who: "Veterans who ran maintenance programs, flight schedules, or deployments already know this job — the tooling is the easy part. Civilian PMs who want their schedule to mean something feel the same pull.",
    whoPoints: [
      "You've owned a schedule other people depended on.",
      "You can hold a standard without holding a meeting.",
      "Certifications (PMP, Agile) are welcome — judgment weighs more.",
    ],
    ctaTitle: <>Run programs<br/>that ship.</>,
    applyNote: "Apply with your resume and note Project Management in the message, along with the programs you've run.",
  },

  "product-marketing": {
    idx: "07.3 / PRODUCT MARKETING",
    title: <>Say what it does.<br/>Prove it <span className="accent-text">holds up.</span></>,
    lede: "Positioning and communicating operational software to the people who fly, fix, and field it. Buzzwords don't survive contact with a flight line — clear writing does.",
    aboutHead: "The discipline",
    about: [
      "Our users are maintainers, schedulers, program officers, and commanders. They don't read marketing; they read whether you understand their problem. Product marketing at Lulius is the craft of earning that read.",
      "You'll shape how Aviation Status, AviationMax, and the work of the company are positioned and explained — on the site, in the Dispatch, and in front of customers.",
    ],
    facts: [
      ["DISCIPLINE", "Positioning & communication"],
      ["AUDIENCE", "Operators · Programs · Commands"],
      ["ELIGIBLE", "Direct hire & DOD SkillBridge"],
      ["HOME STATION", "Reno, NV"],
      ["STATUS", "Accepting interest"],
    ],
    workHead: "The work",
    work: [
      { t: "Positioning", b: "Sharpen what each platform is, who it serves, and why it wins — in words the field would use." },
      { t: "The Dispatch", b: "Case studies, releases, and posts that read like reporting, not press." },
      { t: "Launch material", b: "Briefs, one-pagers, and demos that hold up in a program office." },
      { t: "Voice discipline", b: "One voice across the site, the product, and the inbox — plain, specific, earned." },
    ],
    whoHead: "Who it's for",
    who: "Public affairs, communications, journalism, or marketing backgrounds — military or civilian — who would rather be specific than loud.",
    whoPoints: [
      "You write clearly under a style, and you cut what doesn't earn its place.",
      "You can interview an engineer or an operator and come back with the story.",
      "Portfolio beats pedigree — bring writing you're proud of.",
    ],
    ctaTitle: <>Help the field<br/>hear us.</>,
    applyNote: "Apply with your resume and note Product Marketing in the message — include a link to writing you're proud of.",
  },
};

// Order + display names for cross-links and the directory fallback.
const PROGRAM_LIST = [
  { slug: "dod-skillbridge", title: "DOD SkillBridge" },
  { slug: "project-management", title: "Project Management" },
  { slug: "product-marketing", title: "Product Marketing" },
];

function ProgramPage({ slug, onNavigate }) {
  const go = (path) => (e) => { e.preventDefault(); onNavigate(path); };
  const p = PROGRAMS[slug];

  // Unknown or missing slug → program directory, not a dead end.
  if (!p) {
    return (
      <main>
        <PageHeader
          idx="07 / PROGRAMS"
          title={<>Standing <span className="accent-text">programs.</span></>}
          lede="Three ways in beyond an open requisition — pick the one that fits and we'll meet you there."
        />
        <section className="section">
          <div className="wrap">
            <div style={{ borderTop: "1px solid var(--line)" }}>
              {PROGRAM_LIST.map((x, i) => (
                <a key={x.slug} href={`#/programs/${x.slug}`} onClick={go(`/programs/${x.slug}`)} className="prog-dir-row"
                  style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 24, padding: "28px 0", borderBottom: "1px solid var(--line)", color: "inherit", textDecoration: "none" }}>
                  <span className="eyebrow mute tabular">0{i + 1}</span>
                  <span className="h2" style={{ flex: 1 }}>{x.title}</span>
                  <span style={{ fontFamily: "var(--f-mono)", fontSize: 18, color: "var(--mute-2)" }}>→</span>
                </a>
              ))}
            </div>
            <a href="#/careers" onClick={go("/careers")} className="btn ghost" style={{ marginTop: 40 }}>
              View open positions <span className="arrow">→</span>
            </a>
          </div>
        </section>
        <style>{`.prog-dir-row { transition: padding-left .2s ease, background .2s ease; }
                 .prog-dir-row:hover { padding-left: 16px; background: rgba(200,164,92,.04); }`}</style>
      </main>
    );
  }

  const others = PROGRAM_LIST.filter((x) => x.slug !== slug);

  return (
    <main>
      <PageHeader idx={p.idx} title={p.title} lede={p.lede} />

      {/* 01 / about + facts rail */}
      <section className="section">
        <div className="wrap">
          <div className="idx" style={{ marginBottom: 40 }}><span className="num">01 /</span> {p.aboutHead}</div>
          <div className="prog-grid" style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 60, alignItems: "start" }}>
            <div>
              {p.about.map((para, i) => (
                <p key={i} className={i === 0 ? "lede mute" : "mute"} style={{ marginTop: i === 0 ? 0 : 20, fontSize: i === 0 ? undefined : 15, lineHeight: 1.7, maxWidth: "62ch" }}>{para}</p>
              ))}
            </div>
            <div style={{ borderTop: "1px solid var(--line)" }}>
              {p.facts.map(([k, v]) => (
                <div key={k} style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16, padding: "16px 0", borderBottom: "1px solid var(--line)" }}>
                  <span className="eyebrow mute" style={{ whiteSpace: "nowrap" }}>{k}</span>
                  <span style={{ fontFamily: "var(--f-mono)", fontSize: 13, textAlign: "right", color: "var(--paper)" }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* 02 / the work */}
      <section className="section" style={{ borderTop: "1px solid var(--line)" }}>
        <div className="wrap">
          <div className="idx" style={{ marginBottom: 40 }}><span className="num">02 /</span> {p.workHead}</div>
          <div style={{ borderTop: "1px solid var(--line)" }}>
            {p.work.map((w, i) => (
              <div key={w.t} className="prog-row" style={{ display: "grid", gridTemplateColumns: "90px 280px 1fr", gap: 32, padding: "26px 0", borderBottom: "1px solid var(--line)", alignItems: "baseline" }}>
                <div className="eyebrow mute tabular">0{i + 1}</div>
                <div className="h3" style={{ margin: 0 }}>{w.t}</div>
                <p className="mute" style={{ fontSize: 15, lineHeight: 1.65, margin: 0, maxWidth: "58ch" }}>{w.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 03 / who it's for */}
      <section className="section" style={{ background: "var(--ink-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <div className="idx" style={{ marginBottom: 40 }}><span className="num">03 /</span> {p.whoHead}</div>
          <div className="prog-grid" style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 60, alignItems: "start" }}>
            <div>
              <p className="lede mute" style={{ marginTop: 0, maxWidth: "58ch" }}>{p.who}</p>
              <ul style={{ listStyle: "none", padding: 0, margin: "28px 0 0" }}>
                {p.whoPoints.map((pt) => (
                  <li key={pt} className="mute" style={{ fontSize: 15, lineHeight: 1.65, padding: "12px 0", borderTop: "1px solid var(--line)", display: "flex", gap: 14 }}>
                    <span className="accent-text" style={{ fontFamily: "var(--f-mono)", fontSize: 13, paddingTop: 2 }}>—</span>
                    <span>{pt}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <div className="eyebrow mute" style={{ marginBottom: 12 }}>QUESTIONS FIRST?</div>
              <p className="mute" style={{ fontSize: 14, lineHeight: 1.65, margin: 0 }}>
                Not sure you fit? Ask. <a href="#/contact" onClick={go("/contact")} className="accent-text" style={{ textDecoration: "underline", textUnderlineOffset: 4 }}>Open a file</a> or write{" "}
                <a href="mailto:info@luli.us" className="accent-text" style={{ textDecoration: "none" }}>info@luli.us</a> and we'll give you a straight answer.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* apply CTA */}
      <section className="section">
        <div className="wrap">
          <div className="eyebrow accent-text" style={{ marginBottom: 20 }}><span className="dot"></span>PROGRAM · ACCEPTING INTEREST</div>
          <h2 className="h1" style={{ margin: 0 }}>{p.ctaTitle}</h2>
          <p className="mute" style={{ marginTop: 20, fontSize: 15, lineHeight: 1.7, maxWidth: "58ch" }}>{p.applyNote}</p>
          <div style={{ display: "flex", gap: 16, flexWrap: "wrap", marginTop: 32 }}>
            <a href="#/apply" onClick={go("/apply")} className="btn">Apply now <span className="arrow">→</span></a>
            <a href="#/correspondence?src=careers" onClick={go("/correspondence?src=careers")} className="btn ghost">Join our correspondence <span className="arrow">→</span></a>
          </div>

          {/* cross-links */}
          <div style={{ marginTop: 56, paddingTop: 24, borderTop: "1px solid var(--line)", display: "flex", gap: "12px 32px", flexWrap: "wrap", alignItems: "baseline" }}>
            <span className="eyebrow mute">ALSO SEE</span>
            {others.map((x) => (
              <a key={x.slug} href={`#/programs/${x.slug}`} onClick={go(`/programs/${x.slug}`)} className="eyebrow accent-text" style={{ textDecoration: "none" }}>
                {x.title} →
              </a>
            ))}
            <a href="#/careers" onClick={go("/careers")} className="eyebrow accent-text" style={{ textDecoration: "none" }}>
              Open positions →
            </a>
          </div>
        </div>
      </section>

      <style>{`
        @media (max-width: 880px) {
          .prog-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
        @media (max-width: 760px) {
          .prog-row { grid-template-columns: 60px 1fr !important; row-gap: 8px; }
          .prog-row > p { grid-column: 2 / -1; }
        }
      `}</style>
    </main>
  );
}

window.ProgramPage = ProgramPage;