/* inner.jsx — KASAU inner pages. Exports to window. */
const { Placeholder: IPH, Btn: IB, Kicker: IK, Reveal: IR } = window;

function PageHead({ kicker, title, intro, tvName = "hero-title", node }) {
  return (
    <header className="page-head wrap" data-node={node || "ENTRY"}>
      <div className="page-head-grid">
        <div>
          <div className="ph-kicker"><span className="bar"></span><span className="kicker">{kicker}</span></div>
          <h1 className="display page-title" style={{ viewTransitionName: tvName }}>{title}</h1>
          {intro && <p className="lead page-intro">{intro}</p>}
        </div>
        <div className="page-head-net hero-window hero-net-wrap">
          <span className="tick tl"></span><span className="tick tr"></span>
          <span className="tick bl"></span><span className="tick br"></span>
          <span className="hw-id">NET·{(node || "ENTRY").slice(0, 3)}</span>
          <window.HeroNet id={"PH" + (node || "E")} />
          <span className="hw-tag">LIVE // KASAU</span>
        </div>
      </div>
    </header>
  );
}

/* ---------------- SERVICES ---------------- */
function ServicesPage() {
  return (
    <div className="page">
      <PageHead
        node="SERVICES"
        kicker="Capabilities"
        title="SERVICES"
        intro="Eight practices that span the full lifecycle of intelligent systems — from frontier-model integration to self-hosted, fine-tuned models, and the classical mathematics underneath it all."
      />
      <section className="section light">
        <div className="wrap">
        <div className="svc-rows">
          {window.SERVICES.map((s, i) => (
            <IR className="svc-rowx" key={s.no} delay={(i % 2) * 80}>
              <div className="rx-no">#{s.no} / {s.tag}</div>
              <h3>{s.title}</h3>
              <div className="rx-body">
                <p>{s.blurb}</p>
                <div className="rx-tags">
                  {s.tags.map((t) => <span className="tag" key={t}>{t}</span>)}
                </div>
              </div>
            </IR>
          ))}
        </div>
        </div>
      </section>
      <section className="section light" style={{ paddingTop: 0 }}>
        <div className="wrap">
        <IK>Where we work</IK>
        <h2 className="display" style={{ fontSize: "clamp(32px,4.5vw,64px)", margin: "16px 0 14px" }}>Industries we've worked across.</h2>
        <p className="lead" style={{ maxWidth: "44ch", marginTop: 0, marginBottom: 30 }}>A few examples of where our teams have shipped.</p>
        <div className="dom-grid">
          {window.DOMAINS.map((d) => (
            <div className="dom-cell" key={d.n}>
              <span className="dn">{d.n}</span>
              <div>
                <h4>{d.t}</h4>
                <p>{d.d}</p>
              </div>
            </div>
          ))}
        </div>
        </div>
      </section>
      <MiniCTA />
    </div>
  );
}

/* ---------------- EXPERTISE ---------------- */
function ExpertisePage() {
  return (
    <div className="page">
      <PageHead
        node="EXPERTISE"
        kicker="Why teams pick us"
        title="EXPERTISE"
        intro="Mid-senior and above, across the whole stack of modern AI. Deep where it counts — agents, safety, prediction, and the mathematics most teams skip."
      />
      <section className="section wrap" style={{ paddingTop: 0 }}>
        <div className="statement-grid">
          <div className="label-col">
            <span className="mono" style={{ color: "var(--ink-3)" }}>[ 01 ]</span>
            <span className="mono" style={{ color: "var(--ink-3)" }}>Depth</span>
          </div>
          <IR className="statement-body">
            Senior people who've shipped the hard parts. We go deep where it
            matters — and we know the difference between a system that
            <span className="em"> demos </span> and one that
            <span className="em"> holds</span>.
          </IR>
        </div>
      </section>
      <section className="section wrap" style={{ paddingTop: 0 }}>
        <div className="svc-rows">
          {window.DEPTH.map((d, i) => (
            <IR className="svc-rowx" key={d.no} delay={(i % 2) * 80}>
              <div className="rx-no">#{d.no} / DEPTH</div>
              <h3>{d.title}</h3>
              <div className="rx-body">
                <p>{d.blurb}</p>
                <div className="rx-tags">
                  {d.tags.map((t) => <span className="tag" key={t}>{t}</span>)}
                </div>
              </div>
            </IR>
          ))}
        </div>
      </section>
      <section className="section wrap" style={{ paddingTop: 0 }}>
        <div className="statement-grid">
          <div className="label-col">
            <span className="mono" style={{ color: "var(--ink-3)" }}>[ 02 ]</span>
            <span className="mono" style={{ color: "var(--ink-3)" }}>Seniority</span>
          </div>
          <IR className="statement-body">
            Every engineer we place is <span className="em">mid-senior or above</span> —
            people who have shipped real systems into production, not juniors
            learning on your problem.
          </IR>
        </div>
      </section>
      <MiniCTA />
    </div>
  );
}

/* ---------------- ENGAGEMENT ---------------- */
function EngagementPage() {
  return (
    <div className="page">
      <PageHead
        node="ENGAGEMENT"
        kicker="How we work"
        title="ENGAGEMENT"
        intro="Two ways to bring us in. Both staffed by the same senior engineers, held to the same standard — embedded in your team, or owning the problem end-to-end."
      />
      <section className="section wrap" style={{ paddingTop: 0 }}>
        <div className="engage-rows">
          {window.ENGAGEMENTS.map((e, i) => (
            <IR className="svc-rowx" key={e.k} delay={(i % 2) * 80}>
              <div className="rx-no">{e.mode.toUpperCase()} / {e.k}</div>
              <h3>{e.t}</h3>
              <div className="rx-body">
                <p>{e.d}</p>
                <div className="rx-tags">
                  {e.tags.map((t) => <span className="tag" key={t}>{t}</span>)}
                </div>
              </div>
            </IR>
          ))}
        </div>
      </section>
      <section className="section wrap" style={{ paddingTop: 0 }}>
        <IK>The process</IK>
        <h2 className="display" style={{ fontSize: "clamp(32px,4.5vw,64px)", margin: "16px 0 30px" }}>Frame. Prototype. Harden. Operate.</h2>
        <div className="steps">
          {window.STEPS.map((s, i) => (
            <IR className="step" key={s.n} delay={(i % 4) * 70}>
              <div className="sn">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </IR>
          ))}
        </div>
      </section>
      <section className="section wrap" style={{ paddingTop: 0 }}>
        <div className="statement-grid">
          <div className="label-col">
            <span className="mono" style={{ color: "var(--ink-3)" }}>[ 02 ]</span>
            <span className="mono" style={{ color: "var(--ink-3)" }}>Standard</span>
          </div>
          <IR className="statement-body">
            Every model we ship assumes the inputs will <span className="em">drift</span>,
            an adversary will <span className="em">probe</span> it, and the person on
            call won't have us next to them. That assumption is the standard.
          </IR>
        </div>
      </section>
      <MiniCTA />
    </div>
  );
}

/* ---------------- CONTACT ---------------- */
function ContactForm() {
  const [form, setForm] = React.useState({ name: "", company: "", email: "", need: "", message: "" });
  const [status, setStatus] = React.useState("idle"); // idle | submitting | sent | error
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    if (status === "submitting") return;
    setStatus("submitting");
    Promise.resolve(window.submitContact ? window.submitContact(form) : { ok: true })
      .then(() => setStatus("sent"))
      .catch(() => setStatus("error"));
  };

  return (
    <div className="contact-grid">
      <form onSubmit={submit} noValidate>
        {status === "sent" ? (
          <div style={{ padding: "30px 0" }}>
            <p className="form-sent">Thanks — message received.</p>
            <p style={{ color: "var(--ink-2)", marginTop: 12 }}>We'll be in touch within one business day.</p>
          </div>
        ) : (
          <React.Fragment>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
              <div className="field"><label>Name</label><input required value={form.name} onChange={set("name")} placeholder="Jane Doe" /></div>
              <div className="field"><label>Company</label><input value={form.company} onChange={set("company")} placeholder="Your company" /></div>
            </div>
            <div className="field"><label>Work email</label><input type="email" required value={form.email} onChange={set("email")} placeholder="jane@company.com" /></div>
            <div className="field">
              <label>What do you need?</label>
              <select value={form.need} onChange={set("need")}>
                <option value="" disabled>Select a practice…</option>
                {window.SERVICES.map((s) => <option key={s.no}>{s.title}</option>)}
                <option>Outstaff — embedded engineers</option>
                <option>Outsource — end-to-end delivery</option>
                <option>Not sure yet</option>
              </select>
            </div>
            <div className="field"><label>Tell us more</label><textarea value={form.message} onChange={set("message")} placeholder="The system, the timeline, the constraints…"></textarea></div>
            {status === "error" && (
              <p className="af-error mono-sm">Something went wrong sending that. Try again, or email <a href="mailto:hello@kasau.ai">hello@kasau.ai</a>.</p>
            )}
            <div style={{ marginTop: 8 }}><IB type="submit" arrow disabled={status === "submitting"}>{status === "submitting" ? "Sending…" : "Send message"}</IB></div>
          </React.Fragment>
        )}
      </form>
      <aside className="contact-aside">
        <div className="ca-block">
          <h5>Engagement</h5>
          <p>Outstaff — embedded senior engineers.</p>
          <p>Outsource — end-to-end delivery.</p>
        </div>
        <div className="ca-block">
          <h5>What to expect</h5>
          <p>A senior engineer replies, not a salesperson.</p>
          <p>The first call is technical.</p>
        </div>
        <div className="ca-block">
          <h5>Discretion</h5>
          <p>NDA-first. Your data, IP, and edge stay yours.</p>
        </div>
      </aside>
    </div>
  );
}
window.ContactForm = ContactForm;

function ContactPage() {
  return (
    <div className="page">
      <PageHead
        node="CONTACT"
        kicker="Start a project"
        title="CONTACT"
        intro="Tell us what you're building and where it hurts. A senior engineer — not a salesperson — replies within one business day."
      />
      <section className="section wrap" data-node="MESSAGE" style={{ paddingTop: 0 }}>
        <ContactForm />
      </section>
    </div>
  );
}

/* ---------------- CAREERS ---------------- */
function CareersPage() {
  const fmtDate = (iso) => {
    const d = new Date(iso + "T00:00:00");
    return d.toLocaleDateString("en-GB", { day: "2-digit", month: "short" }).toUpperCase();
  };
  const [state, setState] = React.useState({ status: "loading", data: [] });
  React.useEffect(() => {
    let alive = true;
    Promise.resolve(window.fetchOpenings ? window.fetchOpenings() : [])
      .then((d) => { if (alive) setState({ status: (d && d.length) ? "ready" : "empty", data: d || [] }); })
      .catch(() => { if (alive) setState({ status: "error", data: [] }); });
    return () => { alive = false; };
  }, []);

  const { status, data } = state;
  const count = status === "ready" ? `${data.length} open` : status === "loading" ? "Loading…" : status === "error" ? "Unavailable" : "0 open";

  return (
    <div className="page">
      <PageHead
        node="CAREERS"
        kicker="Open roles"
        title="CAREERS"
        intro="Senior AI, ML, and data engineers who'd rather build systems that hold than ones that demo. Remote-first, senior-only, and accountable for what ships."
      />
      <section className="section wrap" data-node="POSITIONS" style={{ paddingTop: 0 }}>
        <div className="ops-bar">
          <span className="mono-sm" style={{ color: "var(--ink-3)" }}>All positions</span>
          <span className="ops-count mono-sm" aria-live="polite">{count}</span>
        </div>

        <div className="ops-list">
          {status === "loading" && [0, 1, 2, 3].map((i) => (
            <div className="op-row op-skel" key={"sk" + i} aria-hidden="true">
              <div className="sk sk-idx"></div>
              <div className="op-main">
                <div className="sk sk-title"></div>
                <div className="sk sk-line"></div>
                <div className="sk sk-line short"></div>
              </div>
              <div className="op-side"><div className="sk sk-btn"></div></div>
            </div>
          ))}

          {status === "error" && (
            <div className="ops-note">
              Couldn't load roles right now. Email{" "}
              <a href="mailto:careers@kasau.ai">careers@kasau.ai</a> and we'll take it from there.
            </div>
          )}

          {status === "empty" && (
            <div className="ops-note">
              No open roles at the moment — but we still read every speculative application.{" "}
              <a href="mailto:careers@kasau.ai">Introduce yourself →</a>
            </div>
          )}

          {status === "ready" && data.map((o, i) => (
            <IR className="op-row" key={o.id} delay={(i % 4) * 60}
                role="link" tabIndex={0}
                onClick={() => window.__navigate("job/" + o.id)}
                onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); window.__navigate("job/" + o.id); } }}>
              <div className="op-idx mono">{String(i + 1).padStart(2, "0")}</div>
              <div className="op-main">
                <h3 className="op-role">{o.role}</h3>
                <p className="op-sum">{o.summary}</p>
                <div className="op-tags">
                  {o.tags.map((t) => <span className="tag" key={t}>{t}</span>)}
                </div>
              </div>
              <div className="op-side">
                <div className="op-facts mono-sm">
                  <span className="op-disc">{o.discipline} · {o.level}</span>
                  <span>{o.type} · {o.mode}</span>
                  <span>{o.location}</span>
                  <span className="op-posted">Posted {fmtDate(o.posted)}</span>
                </div>
                <a className="op-apply" href={"#/job/" + o.id}
                   onClick={(e) => { e.preventDefault(); e.stopPropagation(); window.__navigate("job/" + o.id); }}>
                  View role <span className="arrow">→</span>
                </a>
              </div>
            </IR>
          ))}
        </div>
      </section>

      <section className="cta-band" data-node="OPEN APPLICATION">
        <div className="cta-inner wrap">
          <span className="kicker">Don't see your role?</span>
          <h2 className="cta-h">Tell us what<br/>you'd build.</h2>
          <p className="lead" style={{ maxWidth: "46ch", marginTop: 22, color: "var(--dark-ink-2, rgba(255,255,255,0.7))" }}>
            We read every speculative application. Send the work you're proudest of and the
            problems you want to be solving.
          </p>
          <div className="hero-actions" style={{ marginTop: 36 }}>
            <a className="btn" href="mailto:careers@kasau.ai?subject=Speculative%20application">
              Introduce yourself <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------------- JOB APPLICATION FORM ----------------
   Self-contained. Collects name, email, resume (file), LinkedIn / GitHub /
   Kaggle links, and a cover letter, then calls window.submitApplication(id, data).
   Knows nothing about the specific role beyond its id + title. */
function JobApplyForm({ job }) {
  const [form, setForm] = React.useState({ name: "", email: "", linkedin: "", github: "", kaggle: "", coverLetter: "" });
  const [resume, setResume] = React.useState(null);
  const [status, setStatus] = React.useState("idle"); // idle | submitting | done | error
  const fileRef = React.useRef(null);

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const onFile = (e) => setResume(e.target.files && e.target.files[0] ? e.target.files[0] : null);

  const submit = (e) => {
    e.preventDefault();
    if (status === "submitting") return;
    setStatus("submitting");
    Promise.resolve(window.submitApplication ? window.submitApplication(job.id, { ...form, resume }) : { ok: true })
      .then(() => setStatus("done"))
      .catch(() => setStatus("error"));
  };

  if (status === "done") {
    return (
      <div className="apply-done">
        <span className="ad-mark">✓</span>
        <h3 className="form-sent">Application received.</h3>
        <p className="ad-sub">Thanks, {form.name.split(" ")[0] || "there"} — your application for <strong>{job.role}</strong> is in. A senior engineer reads every one; expect a reply within a few business days.</p>
        <a className="ac-alt mono-sm" href="#/careers" onClick={(e) => { e.preventDefault(); window.__navigate("careers"); }}>Browse other roles →</a>
      </div>
    );
  }

  const fileName = resume ? resume.name : "";

  return (
    <form className="apply-form" onSubmit={submit} noValidate>
      <div className="af-grid-2">
        <div className="field"><label>Full name *</label>
          <input required value={form.name} onChange={set("name")} placeholder="Jane Doe" /></div>
        <div className="field"><label>Email *</label>
          <input type="email" required value={form.email} onChange={set("email")} placeholder="jane@email.com" /></div>
      </div>

      <div className="field">
        <label>Résumé / CV</label>
        <input ref={fileRef} type="file" className="af-file-input"
               accept=".pdf,.doc,.docx,.txt,.rtf" onChange={onFile} />
        <button type="button" className={"af-file" + (resume ? " has" : "")} onClick={() => fileRef.current && fileRef.current.click()}>
          <span className="aff-icon">{resume ? "▣" : "＋"}</span>
          <span className="aff-text">{fileName || "Attach a file — PDF, DOC, DOCX"}</span>
          {resume && <span className="aff-clear" onClick={(e) => { e.stopPropagation(); setResume(null); if (fileRef.current) fileRef.current.value = ""; }}>Remove</span>}
        </button>
      </div>

      <div className="af-grid-3">
        <div className="field"><label>LinkedIn</label>
          <input type="url" value={form.linkedin} onChange={set("linkedin")} placeholder="linkedin.com/in/…" /></div>
        <div className="field"><label>GitHub</label>
          <input type="url" value={form.github} onChange={set("github")} placeholder="github.com/…" /></div>
        <div className="field"><label>Kaggle</label>
          <input type="url" value={form.kaggle} onChange={set("kaggle")} placeholder="kaggle.com/…" /></div>
      </div>

      <div className="field">
        <label>Cover letter</label>
        <textarea value={form.coverLetter} onChange={set("coverLetter")}
          placeholder={"Why this role, and the work you're proudest of. A few honest paragraphs beat a generic letter."}
          style={{ minHeight: 150 }}></textarea>
      </div>

      {status === "error" && (
        <p className="af-error mono-sm">Something went wrong sending that. Try again, or email <a href="mailto:careers@kasau.ai">careers@kasau.ai</a>.</p>
      )}

      <div className="af-actions">
        <button type="submit" className="btn" disabled={status === "submitting"}>
          {status === "submitting" ? "Sending…" : <React.Fragment>Submit application <span className="arrow">→</span></React.Fragment>}
        </button>
        <span className="af-note mono-sm">Name + email required · the rest helps us read you faster.</span>
      </div>
    </form>
  );
}

/* ---------------- JOB DETAIL (single dynamic page: #/job/<id>) ----------------
   Renders ANY opening. Reads one record from window.fetchOpening(id); the
   shape — not the specific role — is all this component knows about, so new
   roles or new fields flow through with no code change. */
function JobPage({ id, onNav }) {
  const nav = onNav || window.__navigate;
  const fmtDate = (iso) => {
    const d = new Date(iso + "T00:00:00");
    return d.toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" }).toUpperCase();
  };
  const [state, setState] = React.useState({ status: "loading", job: null });
  React.useEffect(() => {
    let alive = true;
    setState({ status: "loading", job: null });
    Promise.resolve(window.fetchOpening ? window.fetchOpening(id) : null)
      .then((job) => { if (alive) setState({ status: job ? "ready" : "notfound", job }); })
      .catch(() => { if (alive) setState({ status: "error", job: null }); });
    return () => { alive = false; };
  }, [id]);

  const { status, job } = state;

  const Back = () => (
    <a className="job-back mono-sm" href="#/careers"
       onClick={(e) => { e.preventDefault(); nav("careers"); }}>
      <span className="arrow back">←</span> All open roles
    </a>
  );

  if (status === "loading") {
    return (
      <div className="page">
        <header className="page-head wrap" data-node="ROLE">
          <Back />
          <div className="job-head-grid">
            <div>
              <div className="sk sk-kick" style={{ marginTop: 26 }}></div>
              <div className="sk sk-jtitle"></div>
              <div className="sk sk-line" style={{ maxWidth: 460, marginTop: 22 }}></div>
              <div className="sk sk-line short"></div>
            </div>
          </div>
        </header>
        <section className="section wrap" data-node="DETAIL" style={{ paddingTop: "clamp(38px,5vw,72px)" }}>
          <div className="sk sk-line" style={{ maxWidth: 560 }}></div>
          <div className="sk sk-line" style={{ maxWidth: 620, marginTop: 14 }}></div>
          <div className="sk sk-line short" style={{ marginTop: 14 }}></div>
        </section>
      </div>
    );
  }

  if (status === "error") {
    return (
      <div className="page">
        <header className="page-head wrap" data-node="ROLE">
          <Back />
          <h1 className="display page-title job-title" style={{ marginTop: 18 }}>UNAVAILABLE</h1>
        </header>
        <section className="section wrap" data-node="DETAIL" style={{ paddingTop: 0 }}>
          <p className="ops-note">
            We couldn't load this role right now. Email{" "}
            <a href="mailto:careers@kasau.ai">careers@kasau.ai</a> and we'll send it straight over.
          </p>
        </section>
      </div>
    );
  }

  if (status === "notfound") {
    return (
      <div className="page">
        <header className="page-head wrap" data-node="ROLE">
          <Back />
          <div className="ph-kicker" style={{ marginTop: 26 }}><span className="bar"></span><span className="kicker">404 · Role</span></div>
          <h1 className="display page-title job-title">ROLE CLOSED</h1>
          <p className="lead page-intro">This position isn't open anymore — or the link is out of date. The current openings are all on the careers page.</p>
        </header>
        <section className="section wrap" data-node="DETAIL" style={{ paddingTop: 0 }}>
          <div className="hero-actions">
            <IB to="careers" arrow>See open roles</IB>
            <a className="btn btn-ghost" href="mailto:careers@kasau.ai?subject=Speculative%20application">Introduce yourself</a>
          </div>
        </section>
      </div>
    );
  }

  // ── ready ──
  const scrollToApply = () => {
    const el = document.getElementById("apply-form");
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 88, behavior: "smooth" });
  };
  const fact = (label, value) => value ? (
    <div className="jf-row">
      <span className="jf-k mono-sm">{label}</span>
      <span className="jf-v">{value}</span>
    </div>
  ) : null;

  const Section = ({ n, title, items, children }) => (
    <IR className="job-sec">
      <div className="job-sec-head">
        <span className="js-n mono-sm">{n}</span>
        <h2 className="js-title">{title}</h2>
      </div>
      {items ? (
        <ul className="job-list">
          {items.map((it, i) => <li key={i}>{it}</li>)}
        </ul>
      ) : children}
    </IR>
  );

  return (
    <div className="page">
      <header className="page-head wrap" data-node="ROLE">
        <Back />
        <div className="job-head-grid">
          <div className="job-head-main">
            <div className="ph-kicker"><span className="bar"></span><span className="kicker">{job.discipline}</span></div>
            <h1 className="display page-title job-title" style={{ viewTransitionName: "job-" + job.id }}>{job.role}</h1>
            <p className="lead page-intro">{job.summary}</p>
            <div className="job-meta">
              <span className="jm-chip">{job.level}</span>
              <span className="jm-chip">{job.type}</span>
              <span className="jm-chip">{job.mode}</span>
              <span className="jm-loc mono-sm">{job.location}</span>
            </div>
          </div>
          <div className="page-head-net hero-window hero-net-wrap job-head-net">
            <span className="tick tl"></span><span className="tick tr"></span>
            <span className="tick bl"></span><span className="tick br"></span>
            <span className="hw-id">ROLE·{job.id.slice(0, 3).toUpperCase()}</span>
            <window.HeroNet id={"JOB" + job.id} />
            <span className="hw-tag">OPEN // KASAU</span>
          </div>
        </div>
      </header>

      <section className="section wrap" data-node="DETAIL" style={{ paddingTop: "clamp(40px,5vw,76px)" }}>
        <div className="job-body">
          <div className="job-content">
            {job.about && job.about.length > 0 && (
              <IR className="job-sec">
                <div className="job-sec-head">
                  <span className="js-n mono-sm">/ 00</span>
                  <h2 className="js-title">About the role</h2>
                </div>
                <div className="job-prose">
                  {job.about.map((p, i) => <p key={i}>{p}</p>)}
                </div>
              </IR>
            )}
            {job.responsibilities && <Section n="/ 01" title="What you'll do" items={job.responsibilities} />}
            {job.requirements && <Section n="/ 02" title="What we're looking for" items={job.requirements} />}
            {job.niceToHave && job.niceToHave.length > 0 && <Section n="/ 03" title="Bonus" items={job.niceToHave} />}
            {job.tags && job.tags.length > 0 && (
              <IR className="job-sec">
                <div className="job-sec-head">
                  <span className="js-n mono-sm">/ 04</span>
                  <h2 className="js-title">Stack &amp; skills</h2>
                </div>
                <div className="op-tags">
                  {job.tags.map((t) => <span className="tag" key={t}>{t}</span>)}
                </div>
              </IR>
            )}
          </div>

          <aside className="job-aside">
            <div className="apply-card">
              <span className="ac-eyebrow mono-sm">Apply</span>
              <h3 className="ac-title">Think it's you?</h3>
              <p className="ac-sub">A senior engineer reads every application. The first conversation is technical, not a screening call.</p>
              <button type="button" className="btn ac-btn" onClick={scrollToApply}>Apply for this role <span className="arrow">→</span></button>
              <div className="ac-facts">
                {fact("Discipline", job.discipline)}
                {fact("Seniority", job.level)}
                {fact("Type", job.type)}
                {fact("Mode", job.mode)}
                {fact("Location", job.location)}
                {fact("Compensation", job.comp)}
                {fact("Posted", fmtDate(job.posted))}
                {fact("Ref", job.id.toUpperCase())}
              </div>
              <a className="ac-alt mono-sm" href="mailto:careers@kasau.ai?subject=Question%20about%20a%20role">
                Questions first? Email us →
              </a>
            </div>
          </aside>
        </div>
      </section>

      <section className="section wrap apply-section" data-node="APPLY" id="apply-form">
        <div className="apply-intro">
          <div className="ph-kicker"><span className="bar"></span><span className="kicker">Apply · {job.id.toUpperCase()}</span></div>
          <h2 className="display apply-h">Apply for this role.</h2>
          <p className="lead" style={{ maxWidth: "48ch", marginTop: 16 }}>
            One form — résumé, your links, and a few honest words. A senior engineer reads every application personally.
          </p>
        </div>
        <JobApplyForm job={job} />
        <div className="apply-foot">
          <a className="ac-alt mono-sm" href="#/careers" onClick={(e) => { e.preventDefault(); nav("careers"); }}>← Back to all open roles</a>
        </div>
      </section>
    </div>
  );
}

/* ---------------- shared mini CTA ---------------- */
function MiniCTA() {
  return (
    <section className="cta-band" data-node="NEXT STEP">
      <div className="cta-inner wrap">
        <span className="kicker">Next step</span>
        <h2 className="cta-h">Bring us the<br/>hard problem.</h2>
        <div className="hero-actions" style={{ marginTop: 40 }}>
          <IB to="contact" arrow>Start a project</IB>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ServicesPage, ExpertisePage, EngagementPage, ContactPage, CareersPage, JobPage, ContactForm });