// Careers.jsx — open positions, driven by content/entries.json (kind: "career").
//
// Route:  #/careers
//
// Postings are managed in the admin panel (Careers tab) exactly like Dispatch
// entries. Each posting is a full entry: this page lists the open ones and
// links to the standard entry page at #/entry/<slug>. Location/Type render
// from the entry's meta pairs; archived = position closed (hidden here, direct
// URL still works).

const { useState: useSCr, useEffect: useECr } = React;

// The footer/drawer "Programs" links land on this page — keep these in sync
// with Footer.jsx / Drawer.jsx.
const CAREER_PROGRAMS = [
  { n: "01", title: "DOD SkillBridge", body: "Transitioning service members can spend their final months of service embedded with our team — real work on fielded software, not a shadow program." },
  { n: "02", title: "Software Internship", body: "Hands-on development on production systems, mentored by engineers who ship to aviation and defense users." },
  { n: "03", title: "Project Management", body: "Program and project management placements supporting government and defense delivery." },
  { n: "04", title: "Product Marketing", body: "Positioning and communicating operational software to the people who fly, fix, and field it." },
];

function CareersPage({ onNavigate }) {
  const [jobs, setJobs] = useSCr(null); // null = loading, [] = loaded/failed

  useECr(() => {
    let dead = false;
    if (!window.LuliusContent) { setJobs([]); return; }
    window.LuliusContent.byKind("career")
      .then((es) => { if (!dead) setJobs(es || []); })
      .catch(() => { if (!dead) setJobs([]); });
    return () => { dead = true; };
  }, []);

  // Hide archived (closed), newest first — same rules as the Dispatch list.
  const open = (jobs || [])
    .filter((e) => !e.archived)
    .sort((a, b) => String(b.date || "").localeCompare(String(a.date || "")));

  // Pull a display value out of the entry's meta pairs, e.g. metaVal(e, "location").
  const metaVal = (e, key) =>
    ((e.meta || []).find(([k]) => String(k || "").trim().toLowerCase() === key) || [])[1];

  const go = (path) => (e) => { e.preventDefault(); onNavigate(path); };

  return (
    <main>
      <PageHeader
        idx="07 / CAREERS"
        title={<>Do work that<br/>has to hold up.</>}
        lede="Lulius hires engineers and operators to build software for the field — and runs DOD SkillBridge placements and internships across development, project management, and product marketing."
      />

      {/* open positions */}
      <section className="section">
        <div className="wrap">
          <div className="idx" style={{ marginBottom: 40 }}><span className="num">01 /</span> Open positions</div>

          {jobs === null && (
            <div className="eyebrow mute"><span className="dot"></span>LOADING POSITIONS</div>
          )}

          {jobs !== null && open.length === 0 && (
            <div style={{ padding: "56px 0", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
              <div className="eyebrow mute" style={{ marginBottom: 16 }}>STATUS · NO OPEN REQUISITIONS</div>
              <p className="lede mute" style={{ maxWidth: "55ch" }}>
                No open positions right now. We're always interested in hearing from
                operators and engineers — introduce yourself and we'll keep you on file.
              </p>
              <a href="#/contact" onClick={go("/contact")} className="btn" style={{ marginTop: 28 }}>
                Introduce yourself <span className="arrow">→</span>
              </a>
            </div>
          )}

          {open.length > 0 && (
            <div style={{ borderTop: "1px solid var(--line)" }}>
              {open.map((e) => (
                <a key={e.slug}
                  href={`#/entry/${e.slug}`}
                  onClick={go(`/entry/${e.slug}`)}
                  className="career-row"
                  style={{
                    display: "grid",
                    gridTemplateColumns: "140px 140px 1fr 60px",
                    gap: 32,
                    padding: "28px 0",
                    borderBottom: "1px solid var(--line)",
                    alignItems: "baseline",
                    color: "inherit", textDecoration: "none",
                  }}>
                  <div className="eyebrow mute tabular">{metaVal(e, "location") || e.dateLabel || "—"}</div>
                  <div className="eyebrow accent-text">{metaVal(e, "type") || e.tag || "Open role"}</div>
                  <div>
                    <div className="h3" style={{ marginBottom: 6 }}>{e.title}</div>
                    <div className="mute" style={{ fontSize: 14 }}>{e.subtitle || e.lede}</div>
                  </div>
                  <div style={{ textAlign: "right", fontFamily: "var(--f-mono)", fontSize: 18, color: "var(--mute-2)" }}>→</div>
                </a>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* programs — the footer "Programs" links land here */}
      <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">02 /</span> Programs</div>
          <div className="careers-programs" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            {CAREER_PROGRAMS.map((p) => (
              <div key={p.n} className="tile">
                <div className="num">{p.n} ——</div>
                <div className="h3" style={{ margin: 0 }}>{p.title}</div>
                <p className="mute" style={{ fontSize: 14, lineHeight: 1.6, margin: 0 }}>{p.body}</p>
                <a href="#/contact" onClick={go("/contact")} className="eyebrow accent-text" style={{ marginTop: "auto", textDecoration: "none" }}>
                  Get in touch →
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      <ContactCTA onNavigate={onNavigate} />

      <style>{`
        .career-row { transition: padding-left .2s ease, background .2s ease; }
        .career-row:hover { padding-left: 16px !important; background: rgba(200,164,92,.04); }
        @media (max-width: 760px) {
          .career-row { grid-template-columns: 1fr 1fr !important; row-gap: 8px; }
          .career-row > div:nth-child(3) { grid-column: 1 / -1; }
          .career-row > div:nth-child(4) { display: none; }
          .careers-programs { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </main>
  );
}

window.CareersPage = CareersPage;