/* CareersSwipe - the homepage "Where do you want to take your career?" section,
   rebuilt as the interactive "Would you like this job?" swipe the user chose.
   Flows inline at container width (no scaled frame), matches the site's section
   header / type / color system. Endless deck + live shortlist that takes your
   own typed goals and saves to a profile.

   Data: real CAREERS (content.jsx) merged with CAREER_META enrichment.
   Roles keep their dummy photo at img/<id>.jpg - swap the file for a real shot. */

/* tone → swatch, from each career's tagTone */
const csBg = (t) => (t === "amber" ? "var(--tr-amber-100)" : t === "neutral" ? "var(--tr-paper-3)" : "var(--tr-brand-100)");
const csFg = (t) => (t === "amber" ? "var(--tr-amber-700)" : t === "neutral" ? "var(--tr-fg-2)" : "var(--tr-brand-700)");
function splitPay(pay) {
  const unit = /\/session$/.test(pay) ? "/session" : /\/mo$/.test(pay) ? "/mo" : "";
  return { main: pay.replace(/\/(mo|session)$/, ""), unit };
}

/* ── card photo (dummy image, swappable) ── */
function CSPhoto({ role, height, children }) {
  return (
    <div style={{ position: "relative", height, overflow: "hidden", background: "var(--tr-brand-900)" }}>
      <img src={(window.TR_CONTENT.photoUrl(role.id, 760) || ("img/" + role.id + ".jpg"))} alt="" draggable="false"
        onError={(e) => { if (!e.target.dataset.fb) { e.target.dataset.fb = "1"; e.target.src = "img/" + role.id + ".jpg"; } }}
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      <span style={{ position: "absolute", bottom: 12, left: 12, width: 34, height: 34, borderRadius: 10, background: "rgba(255,255,255,0.16)", backdropFilter: "blur(6px)", border: "1px solid rgba(255,255,255,0.28)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", pointerEvents: "none" }}>
        <Icon name={role.icon} size={18} />
      </span>
      <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>{children}</div>
    </div>
  );
}

/* ── shortlist → save my list → sign up ── */
function CSHandoff({ count }) {
  const [mode, setMode] = React.useState("menu");
  const has = count > 0;
  if (mode === "menu") {
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
        <p style={{ fontSize: 12.5, lineHeight: 1.45, color: "var(--tr-fg-muted)", margin: 0 }}>
          Save your shortlist to a free profile - we'll keep prices current and pick up where you left off.
        </p>
        <button onClick={() => has && setMode("save")} disabled={!has}
          style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8, padding: "12px 16px", borderRadius: 11, border: "none", cursor: has ? "pointer" : "default", background: has ? "var(--tr-brand-500)" : "var(--tr-paper-3)", color: has ? "#fff" : "var(--tr-fg-faint)", fontWeight: 700, fontSize: 14.5, transition: "background .2s" }}>
          <Icon name="badge-check" size={17} /> Save my list
        </button>
      </div>
    );
  }
  if (mode === "save") {
    return (
      <div style={{ animation: "cs-in .3s var(--tr-ease-out) both" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }}>
          <div style={{ fontFamily: "var(--tr-font-display)", fontWeight: 700, fontSize: 14.5, color: "var(--tr-ink)" }}>Create your free profile</div>
          <button onClick={() => setMode("menu")} style={{ border: "none", background: "transparent", color: "var(--tr-fg-muted)", cursor: "pointer", padding: 4 }}><Icon name="x" size={16} /></button>
        </div>
        <div style={{ fontSize: 12, color: "var(--tr-fg-muted)", marginBottom: 12 }}>Saving {count} {count === 1 ? "item" : "items"} from your shortlist.</div>
        <button onClick={() => setMode("saved")} style={{ width: "100%", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 9, padding: "11px 16px", borderRadius: 11, border: "1.5px solid var(--tr-line)", background: "#fff", color: "var(--tr-ink)", fontWeight: 600, fontSize: 14, cursor: "pointer", marginBottom: 8 }}>
          <span style={{ fontFamily: "var(--tr-font-display)", fontWeight: 800, fontSize: 15 }}>G</span> Continue with Google
        </button>
        <div style={{ display: "flex", alignItems: "center", gap: 10, margin: "8px 0", color: "var(--tr-fg-faint)", fontSize: 11.5 }}>
          <span style={{ flex: 1, height: 1, background: "var(--tr-line)" }}></span> or <span style={{ flex: 1, height: 1, background: "var(--tr-line)" }}></span>
        </div>
        <form onSubmit={(e) => { e.preventDefault(); setMode("saved"); }} style={{ display: "flex", gap: 8 }}>
          <input className="tr-input" type="email" placeholder="you@email.com" required style={{ flex: 1, padding: "10px 12px", fontSize: 13.5 }} />
          <button type="submit" className="tr-btn tr-btn-primary tr-btn-sm">Save</button>
        </form>
      </div>
    );
  }
  return (
    <div style={{ textAlign: "center", padding: "8px 4px", animation: "cs-pop .4s var(--tr-ease-spring) both" }}>
      <div style={{ width: 46, height: 46, borderRadius: "50%", margin: "0 auto 10px", background: "var(--tr-brand-500)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="badge-check" size={24} /></div>
      <div style={{ fontFamily: "var(--tr-font-display)", fontWeight: 700, fontSize: 16, color: "var(--tr-ink)" }}>Shortlist saved</div>
      <div style={{ fontSize: 13, color: "var(--tr-fg-2)", marginTop: 3 }}>It'll be here next time, with prices kept up to date.</div>
      <button onClick={() => setMode("menu")} style={{ marginTop: 12, border: "none", background: "transparent", color: "var(--tr-brand-700)", fontWeight: 600, fontSize: 13, cursor: "pointer" }}>Back</button>
    </div>
  );
}

/* ── small stat cell (module scope so cards don't remount on every render) ── */
function CSStat({ k, children }) {
  return (
    <div>
      <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--tr-fg-muted)", marginBottom: 3 }}>{k}</div>
      <div style={{ fontFamily: "var(--tr-font-display)", fontWeight: 700, fontSize: 16, color: "var(--tr-ink)", lineHeight: 1.1, whiteSpace: "nowrap" }}>{children}</div>
    </div>
  );
}

/* hydrate liked-role ids + custom goals from the shared tr_shortlist store
   (so a saved/pulled shortlist repopulates the rail on load) */
function csHydrate(CAREERS) {
  const careers = [], goals = [];
  const ids = (CAREERS || []).map((c) => c.id);
  try {
    JSON.parse(localStorage.getItem("tr_shortlist") || "[]").forEach((x) => {
      if (x.type === "career" && ids.indexOf(x.id) > -1) careers.push(x.id);
      else if (x.type === "goal") goals.push({ id: x.id, text: x.name });
    });
  } catch (e) {}
  return { careers, goals };
}

/* ── real sign-in panel (Google / password / magic link) → window.TRAuth ── */
function CSAuthPanel({ count, onClose }) {
  const A = window.TRAuth;
  const [email, setEmail] = React.useState("");
  const [pw, setPw] = React.useState("");
  const [creating, setCreating] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [msg, setMsg] = React.useState(null); // { kind: "err"|"ok", text }

  function fail(t) { setBusy(false); setMsg({ kind: "err", text: t }); }
  function google() {
    if (!A) return fail("Sign-in unavailable - check your connection.");
    setMsg(null);
    A.signInWithGoogle().then((r) => { if (r.error) fail(r.error.message); });
  }
  function magic() {
    if (!A) return fail("Sign-in unavailable - check your connection.");
    if (!email) return fail("Enter your email first.");
    setBusy(true); setMsg(null);
    A.signInWithMagicLink(email).then((r) => {
      if (r.error) return fail(r.error.message);
      setBusy(false); setMsg({ kind: "ok", text: "Check your inbox for a sign-in link." });
    });
  }
  function submit(e) {
    e.preventDefault();
    if (!A) return fail("Sign-in unavailable - check your connection.");
    setBusy(true); setMsg(null);
    const op = creating ? A.signUp(email, pw) : A.signInWithPassword(email, pw);
    op.then((r) => {
      if (r.error) return fail(r.error.message);
      if (creating && r.data && !r.data.session) {
        setBusy(false); setCreating(false);
        setMsg({ kind: "ok", text: "Account created - check your email to confirm, then sign in." });
        return;
      }
      // success with a live session: parent's TRAuth.onChange flips to "saved"
    });
  }

  const linkBtn = { border: "none", background: "transparent", color: "var(--tr-brand-700)", fontWeight: 600, fontSize: 12.5, cursor: "pointer", padding: 0 };

  return (
    <React.Fragment>
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 10, marginBottom: 4 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
          <span style={{ width: 34, height: 34, borderRadius: 9, background: "var(--tr-brand-50)", color: "var(--tr-brand-600)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon name="lock" size={17} /></span>
          <div style={{ fontFamily: "var(--tr-font-display)", fontWeight: 700, fontSize: 16, color: "var(--tr-ink)", lineHeight: 1.1 }}>{creating ? "Create your free profile" : "Sign in to save"}</div>
        </div>
        <button onClick={onClose} aria-label="Close" style={{ border: "none", background: "transparent", color: "var(--tr-fg-muted)", cursor: "pointer", padding: 4, marginTop: -2 }}><Icon name="x" size={17} /></button>
      </div>
      <div style={{ fontSize: 12.5, color: "var(--tr-fg-muted)", margin: "0 0 14px" }}>Keep your {count} {count === 1 ? "pick" : "picks"} and live prices across devices.</div>

      <button onClick={google} disabled={busy} style={{ width: "100%", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 9, padding: "12px 16px", borderRadius: 11, border: "1.5px solid var(--tr-line)", background: "#fff", color: "var(--tr-ink)", fontWeight: 600, fontSize: 14.5, cursor: "pointer", marginBottom: 10 }}><span style={{ fontFamily: "var(--tr-font-display)", fontWeight: 800, fontSize: 16 }}>G</span> Continue with Google</button>

      <div style={{ display: "flex", alignItems: "center", gap: 10, margin: "2px 0 10px", color: "var(--tr-fg-faint)", fontSize: 11.5 }}><span style={{ flex: 1, height: 1, background: "var(--tr-line)" }}></span> or <span style={{ flex: 1, height: 1, background: "var(--tr-line)" }}></span></div>

      <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        <input className="tr-input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@email.com" required style={{ padding: "11px 12px", fontSize: 13.5 }} />
        <input className="tr-input" type="password" value={pw} onChange={(e) => setPw(e.target.value)} placeholder="Password (6+ chars)" required minLength={6} style={{ padding: "11px 12px", fontSize: 13.5 }} />
        <button type="submit" className="tr-btn tr-btn-primary" disabled={busy} style={{ width: "100%" }}>{busy ? "One sec…" : creating ? "Create account" : "Sign in"}</button>
      </form>

      {msg && (<div style={{ marginTop: 10, fontSize: 12.5, lineHeight: 1.4, color: msg.kind === "err" ? "var(--tr-danger)" : "var(--tr-brand-700)" }}>{msg.text}</div>)}

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10, marginTop: 12 }}>
        <button type="button" onClick={() => { setCreating((c) => !c); setMsg(null); }} style={linkBtn}>{creating ? "Have an account? Sign in" : "New here? Create account"}</button>
        <button type="button" onClick={magic} disabled={busy} style={linkBtn}>Email me a link instead</button>
      </div>
    </React.Fragment>
  );
}

/* ── the section ── */
function CareersSwipe({ onBrowse }) {
  const { CAREERS, CAREER_META } = window.TR_CONTENT;
  const ROLES = React.useMemo(() => CAREERS.map((c) => ({ ...c, ...(CAREER_META[c.id] || {}), tone: c.tagTone })), [CAREERS, CAREER_META]);
  const N = ROLES.length;

  const [idx, setIdx] = React.useState(0);
  const initial = React.useMemo(() => csHydrate(CAREERS), [CAREERS]);
  const [liked, setLiked] = React.useState(initial.careers);
  const [customs, setCustoms] = React.useState(initial.goals);
  const [draft, setDraft] = React.useState("");
  const [exit, setExit] = React.useState(null);
  const [saveMode, setSaveMode] = React.useState("menu");
  const [user, setUser] = React.useState(window.TRAuth ? window.TRAuth.user : null);

  // Shared shortlist bridge: mirror likes/goals into localStorage (preserving any
  // courses saved over in compare.html). auth.js observes this write and syncs it
  // to the user's cloud row when signed in - so Compare Courses and other devices
  // stay in sync.
  React.useEffect(() => {
    const careers = liked.map((id) => { const r = ROLES.find((x) => x.id === id); return { type: "career", id, name: r ? r.name : id }; });
    const goals = customs.map((c) => ({ type: "goal", id: c.id, name: c.text }));
    let existing = [];
    try { existing = JSON.parse(localStorage.getItem("tr_shortlist") || "[]"); } catch (e) {}
    const courses = existing.filter((x) => x.type === "course");
    localStorage.setItem("tr_shortlist", JSON.stringify([...careers, ...goals, ...courses]));
  }, [liked, customs, ROLES]);

  // Track the signed-in user; when sign-in completes from the save modal, flip
  // straight to the "saved" confirmation.
  React.useEffect(() => {
    if (!window.TRAuth) return;
    return window.TRAuth.onChange((u) => {
      setUser(u);
      if (u) setSaveMode((m) => (m === "save" ? "saved" : m));
    });
  }, []);

  // Remote shortlist arrived (after login merge) - re-hydrate the rail from it.
  React.useEffect(() => {
    function onPull() { const h = csHydrate(CAREERS); setLiked(h.careers); setCustoms(h.goals); }
    window.addEventListener("tr-shortlist-pulled", onPull);
    return () => window.removeEventListener("tr-shortlist-pulled", onPull);
  }, [CAREERS]);

  function choose(kind) {
    if (exit) return;
    setExit(kind);
    const role = ROLES[idx % N];
    setTimeout(() => {
      if (kind === "yes" && !liked.includes(role.id)) setLiked((l) => [...l, role.id]);
      setIdx((i) => i + 1);
      setExit(null);
    }, 320);
  }
  const removeRole = (id) => setLiked((l) => l.filter((x) => x !== id));
  const removeCustom = (id) => setCustoms((c) => c.filter((x) => x.id !== id));
  function addCustom(e) { e.preventDefault(); const t = draft.trim(); if (!t) return; setCustoms((c) => [...c, { id: Date.now(), text: t }]); setDraft(""); }

  const likedRoles = liked.map((id) => ROLES.find((r) => r.id === id));
  const total = liked.length + customs.length;

  return (
    <section id="careers" style={{ background: "var(--tr-paper-2)" }}>
      <div className="container" style={{ padding: "88px var(--tr-gutter)" }}>
        <div className="tr-section-head reveal">
          <div>
            <div className="tr-eyebrow-row">Pick your lane</div>
            <h2>Where do you want to take your career?</h2>
            <p style={{ fontSize: 16, color: "var(--tr-fg-2)", margin: "10px 0 0", maxWidth: 560 }}>
              Swipe through the roles the UAE is hiring for. Keep the ones that feel like you - we'll line up the courses that get you there.
            </p>
          </div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 13.5, color: "var(--tr-fg-muted)", whiteSpace: "nowrap" }}>
            <Icon name="star" size={15} style={{ color: "var(--tr-amber-500)" }} /> {total} shortlisted
          </div>
        </div>

        <div className="cs-grid" style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) 340px", gap: 22, alignItems: "start" }}>
          {/* endless deck */}
          <div className="cs-deckcol" style={{ minWidth: 0, display: "flex", flexDirection: "column" }}>
          <div className="cs-deck" style={{ position: "relative", height: 520 }}>
            {[0, 1, 2].map((off) => {
              const pos = idx + off;
              const r = ROLES[pos % N];
              const isTop = off === 0;
              const cls = isTop && exit ? (exit === "yes" ? "cs-card cs-yes" : "cs-card cs-no") : "cs-card";
              const pay = splitPay(r.pay);
              const chip = { display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, fontWeight: 600, color: "var(--tr-fg)", background: "var(--tr-paper-2)", border: "1px solid var(--tr-line)", padding: "6px 11px", borderRadius: 999, whiteSpace: "nowrap" };
              return (
                <div key={pos} className={cls} style={{ position: "absolute", inset: 0, transform: "translateY(" + (off * 12) + "px) scale(" + (1 - off * 0.035) + ")", zIndex: 10 - off, opacity: off > 1 ? 0 : 1, transition: "transform .32s var(--tr-ease-out), opacity .32s var(--tr-ease-out)" }}>
                  <div className="cs-deckcard-inner" style={{ height: "100%", background: "#fff", border: "1px solid var(--tr-line)", borderRadius: 20, boxShadow: isTop ? "var(--tr-shadow-lg)" : "var(--tr-shadow-sm)", overflow: "hidden", display: "flex", flexDirection: "column" }}>
                    <CSPhoto role={r} height={190}>
                      <span style={{ position: "absolute", top: 14, left: 14, background: "#fff", color: csFg(r.tone), fontWeight: 700, fontSize: 11.5, letterSpacing: "0.03em", textTransform: "uppercase", padding: "5px 11px", borderRadius: 999, whiteSpace: "nowrap" }}>{r.tag}</span>
                      <span style={{ position: "absolute", top: 14, right: 14, display: "inline-flex", alignItems: "center", gap: 6, background: "rgba(0,0,0,0.45)", backdropFilter: "blur(4px)", color: "#fff", fontWeight: 600, fontSize: 12, padding: "5px 11px", borderRadius: 999, whiteSpace: "nowrap" }}>
                        <span className="live-dot" style={{ width: 6, height: 6, background: "var(--tr-amber-400)" }}></span> {r.hiring} jobs open now
                      </span>
                    </CSPhoto>
                    <div style={{ padding: "18px 24px 22px", flex: 1, display: "flex", flexDirection: "column" }}>
                      <h3 style={{ fontFamily: "var(--tr-font-display)", fontWeight: 700, fontSize: 25, letterSpacing: "-0.02em", color: "var(--tr-ink)", margin: 0, lineHeight: 1.05, textWrap: "balance" }}>{r.name}</h3>
                      <div style={{ fontSize: 13, color: "var(--tr-fg-muted)", marginTop: 4, fontWeight: 500 }}>{r.vibe}</div>

                      <div className="cs-stats" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, margin: "16px 0", padding: "16px 0", borderTop: "1px solid var(--tr-line-2)", borderBottom: "1px solid var(--tr-line-2)" }}>
                        <CSStat k="Typical pay">{pay.main}<span style={{ fontSize: 11, fontWeight: 500, color: "var(--tr-fg-muted)" }}>{pay.unit}</span></CSStat>
                        <CSStat k="Start with">{r.start}</CSStat>
                        <CSStat k="Qualify in">~{r.weeks} wks</CSStat>
                        <div>
                          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--tr-fg-muted)", marginBottom: 5 }}>Demand</div>
                          <div style={{ height: 8, borderRadius: 999, background: "var(--tr-paper-3)", overflow: "hidden", marginBottom: 3 }}>
                            <div style={{ height: "100%", width: r.demand + "%", borderRadius: 999, background: "linear-gradient(90deg, var(--tr-brand-500), var(--tr-brand-400))" }}></div>
                          </div>
                          <div style={{ fontFamily: "var(--tr-font-mono)", fontSize: 11, color: "var(--tr-fg-muted)" }}>{r.demand}/100</div>
                        </div>
                      </div>

                      <div className="cs-chips" style={{ margin: "16px 0" }}>
                        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                          <span style={chip}><Icon name="wallet" size={14} style={{ color: "var(--tr-brand-500)" }} /> {pay.main}{pay.unit}</span>
                          <span style={chip}><Icon name="clock" size={14} style={{ color: "var(--tr-brand-500)" }} /> ~{r.weeks} wks</span>
                          <span style={chip}><Icon name="graduation-cap" size={14} style={{ color: "var(--tr-brand-500)" }} /> {r.start}</span>
                        </div>
                        <div style={{ marginTop: 12 }}>
                          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 5 }}>
                            <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--tr-fg-muted)" }}>Demand</span>
                            <span style={{ fontFamily: "var(--tr-font-mono)", fontSize: 11, color: "var(--tr-fg-muted)" }}>{r.demand}/100</span>
                          </div>
                          <div style={{ height: 8, borderRadius: 999, background: "var(--tr-paper-3)", overflow: "hidden" }}>
                            <div style={{ height: "100%", width: r.demand + "%", borderRadius: 999, background: "linear-gradient(90deg, var(--tr-brand-500), var(--tr-brand-400))" }}></div>
                          </div>
                        </div>
                      </div>

                      <div style={{ display: "flex", gap: 9, alignItems: "flex-start" }}>
                        <Icon name="clock" size={15} style={{ color: "var(--tr-brand-500)", marginTop: 2, flexShrink: 0 }} />
                        <span style={{ fontSize: 13.5, lineHeight: 1.45, color: "var(--tr-fg-2)" }}><b style={{ color: "var(--tr-ink)" }}>A day in it:</b> {r.day}</span>
                      </div>

                      <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: "auto", paddingTop: 16, flexWrap: "wrap" }}>
                        <span style={{ fontSize: 11.5, fontWeight: 600, color: "var(--tr-fg-muted)" }}>Hiring now:</span>
                        {(r.employers || []).map((e) => (
                          <span key={e} style={{ fontSize: 12, fontWeight: 600, color: "var(--tr-fg-2)", background: "var(--tr-paper-2)", border: "1px solid var(--tr-line)", padding: "4px 10px", borderRadius: 999, whiteSpace: "nowrap" }}>{e}</span>
                        ))}
                      </div>
                    </div>
                  </div>
                  {isTop && (
                    <React.Fragment>
                      <span className="cs-stamp cs-stamp-yes">That's me</span>
                      <span className="cs-stamp cs-stamp-no">Not for me</span>
                    </React.Fragment>
                  )}
                </div>
              );
            })}
          </div>

            {/* swipe controls - directly under the deck (above the shortlist on mobile) */}
            <div className="cs-controls" style={{ display: "flex", alignItems: "center", gap: 16, marginTop: 18, justifyContent: "center" }}>
              <button onClick={() => choose("no")} title="Not for me" className="cs-btn-no" style={{ width: 54, height: 54, borderRadius: "50%", border: "1.5px solid var(--tr-line)", background: "#fff", color: "var(--tr-fg-2)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "var(--tr-shadow-sm)", cursor: "pointer" }}>
                <Icon name="x" size={24} stroke={2.4} />
              </button>
              <button onClick={() => choose("yes")} className="cs-btn-yes" style={{ display: "inline-flex", alignItems: "center", gap: 9, height: 52, padding: "0 26px", borderRadius: 999, border: "none", background: "var(--tr-brand-500)", color: "#fff", fontWeight: 700, fontSize: 16, whiteSpace: "nowrap", boxShadow: "var(--tr-shadow-md)", cursor: "pointer" }}>
                <Icon name="check" size={21} stroke={2.6} /> Yes, that's me
              </button>
            </div>
          </div>

          {/* shortlist rail */}
          <div className="cs-rail" style={{ position: "relative", background: "#fff", border: "1px solid var(--tr-line)", borderRadius: 18, padding: 18, height: 520, display: "flex", flexDirection: "column" }}>
            <div className="cs-rail-body" style={{ display: "flex", flexDirection: "column", flex: 1, minHeight: 0, filter: saveMode !== "menu" ? "blur(3px)" : "none", transition: "filter .25s var(--tr-ease-out)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 3 }}>
              <Icon name="star" size={16} style={{ color: "var(--tr-amber-500)" }} />
              <span style={{ fontFamily: "var(--tr-font-display)", fontWeight: 700, fontSize: 15.5, color: "var(--tr-ink)" }}>Your shortlist</span>
              <span style={{ marginLeft: "auto", fontFamily: "var(--tr-font-mono)", fontSize: 13, color: "var(--tr-fg-muted)" }}>{total}</span>
            </div>
            <p style={{ fontSize: 12, color: "var(--tr-fg-muted)", margin: "0 0 12px" }}>Tap ✓ on a role, or add a goal of your own.</p>

            <div style={{ flex: 1, minHeight: 0, overflowY: "auto", display: "flex", flexDirection: "column", gap: 8 }}>
              {total === 0 ? (
                <div style={{ flex: 1, border: "1.5px dashed var(--tr-line)", borderRadius: 12, display: "flex", alignItems: "center", justifyContent: "center", textAlign: "center", color: "var(--tr-fg-faint)", fontSize: 13, padding: 18 }}>
                  Nothing yet - swipe right, or type what you're after below.
                </div>
              ) : (
                <React.Fragment>
                  {likedRoles.map((r) => {
                    const pay = splitPay(r.pay);
                    return (
                      <div key={r.id} className="cs-pick" style={{ display: "flex", alignItems: "center", gap: 11, background: "var(--tr-brand-50)", border: "1px solid var(--tr-brand-100)", borderRadius: 11, padding: "9px 11px", animation: "cs-pop .35s var(--tr-ease-spring)" }}>
                        <div style={{ width: 30, height: 30, borderRadius: 8, background: "#fff", color: csFg(r.tone), display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon name={r.icon} size={16} /></div>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ fontFamily: "var(--tr-font-display)", fontWeight: 700, fontSize: 13.5, color: "var(--tr-ink)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{r.name}</div>
                          <div style={{ fontSize: 11, color: "var(--tr-fg-muted)", fontFamily: "var(--tr-font-mono)" }}>{pay.main}{pay.unit} · {r.hiring} jobs</div>
                        </div>
                        <a href={`compare.html?career=${r.id}`} title="See the courses for this role" style={{ display: "inline-flex", alignItems: "center", gap: 3, fontSize: 11.5, fontWeight: 700, color: "var(--tr-brand-600)", textDecoration: "none", flexShrink: 0, whiteSpace: "nowrap" }}>Courses <Icon name="arrow-right" size={13} /></a>
                        <button onClick={() => removeRole(r.id)} style={{ border: "none", background: "transparent", color: "var(--tr-fg-faint)", cursor: "pointer", padding: 3, flexShrink: 0 }}><Icon name="x" size={15} /></button>
                      </div>
                    );
                  })}
                  {customs.map((c) => (
                    <div key={c.id} className="cs-pick" style={{ display: "flex", alignItems: "center", gap: 11, background: "var(--tr-amber-100)", border: "1px solid var(--tr-amber-300)", borderRadius: 11, padding: "9px 11px", animation: "cs-pop .35s var(--tr-ease-spring)" }}>
                      <div style={{ width: 30, height: 30, borderRadius: 8, background: "#fff", color: "var(--tr-amber-700)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon name="sparkles" size={15} /></div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 13, color: "var(--tr-ink)", fontWeight: 600, lineHeight: 1.3 }}>{c.text}</div>
                        <div style={{ fontSize: 10.5, color: "var(--tr-amber-700)", fontWeight: 700, letterSpacing: "0.04em", textTransform: "uppercase" }}>Your own goal</div>
                      </div>
                      <button onClick={() => removeCustom(c.id)} style={{ border: "none", background: "transparent", color: "var(--tr-amber-700)", cursor: "pointer", padding: 3, flexShrink: 0 }}><Icon name="x" size={15} /></button>
                    </div>
                  ))}
                </React.Fragment>
              )}
            </div>

            <div style={{ borderTop: "1px solid var(--tr-line)", marginTop: 12, paddingTop: 14 }}>
              <form onSubmit={addCustom} className="cs-goal" style={{ display: "flex", alignItems: "center", gap: 7, border: "1.5px solid var(--tr-line)", borderRadius: 999, padding: "4px 4px 4px 14px", marginBottom: 14 }}>
                <Icon name="sparkles" size={15} style={{ color: "var(--tr-amber-500)", flexShrink: 0 }} />
                <input value={draft} onChange={(e) => setDraft(e.target.value)} placeholder="Type a goal of your own…" style={{ flex: 1, minWidth: 0, border: "none", outline: "none", background: "transparent", fontFamily: "var(--tr-font-text)", fontSize: 13.5, color: "var(--tr-ink)" }} />
                <button type="submit" disabled={!draft.trim()} aria-label="Add goal" style={{ flexShrink: 0, width: 30, height: 30, borderRadius: "50%", border: "none", background: draft.trim() ? "var(--tr-brand-500)" : "var(--tr-paper-3)", color: draft.trim() ? "#fff" : "var(--tr-fg-faint)", display: "flex", alignItems: "center", justifyContent: "center", cursor: draft.trim() ? "pointer" : "default", transition: "background .2s" }}>
                  <Icon name="plus" size={16} stroke={2.4} />
                </button>
              </form>
              <p style={{ fontSize: 12.5, lineHeight: 1.45, color: "var(--tr-fg-muted)", margin: "0 0 9px" }}>Save your shortlist to a free profile - we'll keep prices current and pick up where you left off.</p>
              <button onClick={() => { if (!total) return; if (user) { if (window.TRAuth) window.TRAuth.save(); setSaveMode("saved"); } else setSaveMode("save"); }} disabled={!total} style={{ width: "100%", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8, padding: "12px 16px", borderRadius: 11, border: "none", cursor: total ? "pointer" : "default", background: total ? "var(--tr-brand-500)" : "var(--tr-paper-3)", color: total ? "#fff" : "var(--tr-fg-faint)", fontWeight: 700, fontSize: 14.5, whiteSpace: "nowrap", transition: "background .2s" }}><Icon name="badge-check" size={17} /> {user ? "Update my saved list" : "Save my list"}</button>
              <button onClick={() => { if (onBrowse) onBrowse(); window.location.href = "compare.html"; }} style={{ width: "100%", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6, padding: "10px 16px", borderRadius: 11, border: "1px solid var(--tr-line)", background: "transparent", color: "var(--tr-fg-2)", fontWeight: 600, fontSize: 13.5, cursor: "pointer", marginTop: 8, transition: "background .15s, color .15s" }}
                onMouseEnter={e => { e.currentTarget.style.background = "var(--tr-paper-2)"; e.currentTarget.style.color = "var(--tr-ink)"; }}
                onMouseLeave={e => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--tr-fg-2)"; }}>
                Browse &amp; compare all courses <Icon name="arrow-right" size={15} />
              </button>
            </div>
            </div>
            {saveMode !== "menu" && (
              <div onClick={(e) => { if (e.target === e.currentTarget && saveMode === "save") setSaveMode("menu"); }} style={{ position: "absolute", inset: 0, borderRadius: 18, background: "rgba(28,42,37,0.10)", backdropFilter: "blur(1px)", WebkitBackdropFilter: "blur(1px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 16, animation: "cs-in .2s var(--tr-ease-out) both" }}>
                <div style={{ width: "100%", background: "#fff", border: "1px solid var(--tr-line)", borderRadius: 16, boxShadow: "var(--tr-shadow-lg)", padding: 18, animation: "cs-pop .32s var(--tr-ease-spring) both" }}>
                  {saveMode === "save" ? (
                    <CSAuthPanel count={total} onClose={() => setSaveMode("menu")} />
                  ) : (
                    <div style={{ textAlign: "center", padding: "2px 4px" }}>
                      <div style={{ width: 48, height: 48, borderRadius: "50%", margin: "0 auto 10px", background: "var(--tr-brand-500)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="badge-check" size={25} /></div>
                      <div style={{ fontFamily: "var(--tr-font-display)", fontWeight: 700, fontSize: 17, color: "var(--tr-ink)" }}>Shortlist saved</div>
                      <div style={{ fontSize: 13, color: "var(--tr-fg-2)", marginTop: 3, lineHeight: 1.45 }}>{user ? ("Synced to " + (user.email || "your account") + " - it'll follow you across devices.") : "It'll be here next time, with prices kept up to date."}</div>
                      <button onClick={() => setSaveMode("menu")} style={{ marginTop: 14, width: "100%", padding: "11px 16px", borderRadius: 11, border: "none", background: "var(--tr-brand-500)", color: "#fff", fontWeight: 700, fontSize: 14.5, cursor: "pointer" }}>Done</button>
                      {user && (<button onClick={() => { if (window.TRAuth) window.TRAuth.signOut(); setSaveMode("menu"); }} style={{ marginTop: 8, border: "none", background: "transparent", color: "var(--tr-fg-muted)", fontWeight: 600, fontSize: 12.5, cursor: "pointer" }}>Sign out</button>)}
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>

        <div style={{ textAlign: "center", marginTop: 20 }}></div>
      </div>

      <style>{`
        @keyframes cs-in { from { transform: translateY(6px); } to { transform: none; } }
        @keyframes cs-pop { from { transform: translateY(6px) scale(0.97); } to { transform: none; } }
        .cs-goal:focus-within { border-color: var(--tr-brand-500); box-shadow: var(--tr-ring-focus); }
        .cs-btn-no:hover { border-color: var(--tr-danger); color: var(--tr-danger); }
        .cs-btn-yes:hover { background: var(--tr-brand-600); }
        .cs-card.cs-yes { transform: translate(118%, -24px) rotate(13deg) !important; opacity: 0 !important; transition: transform .34s var(--tr-ease-in), opacity .34s !important; }
        .cs-card.cs-no  { transform: translate(-118%, -24px) rotate(-13deg) !important; opacity: 0 !important; transition: transform .34s var(--tr-ease-in), opacity .34s !important; }
        .cs-stamp { position: absolute; top: 24px; font-family: var(--tr-font-display); font-weight: 800; font-size: 21px; letter-spacing: 0.02em; text-transform: uppercase; padding: 5px 14px; border-radius: 10px; border: 3px solid; opacity: 0; transition: opacity .16s; pointer-events: none; z-index: 5; }
        .cs-stamp-yes { right: 24px; transform: rotate(11deg); color: var(--tr-brand-500); border-color: var(--tr-brand-500); background: rgba(255,255,255,0.9); }
        .cs-stamp-no  { left: 24px; transform: rotate(-11deg); color: var(--tr-danger); border-color: var(--tr-danger); background: rgba(255,255,255,0.9); }
        .cs-card.cs-yes .cs-stamp-yes { opacity: 1; }
        .cs-card.cs-no .cs-stamp-no { opacity: 1; }
        .cs-chips { display: none; }
        .cs-pick { transition: transform .22s cubic-bezier(0.45, 0, 0.15, 1), box-shadow .22s cubic-bezier(0.45, 0, 0.15, 1); }
        .cs-pick:hover { transform: translateY(-2px); box-shadow: var(--tr-shadow-md); }
        .cs-deckcard-inner { transition: transform .26s cubic-bezier(0.45, 0, 0.15, 1); }
        .cs-deck .cs-card:first-child:hover .cs-deckcard-inner { transform: translateY(-6px) scale(1.012); }
        @media (max-width: 880px) {
          .cs-grid { grid-template-columns: 1fr !important; }
          .cs-deck { height: 560px !important; }
          .cs-rail { height: auto !important; min-height: 360px; }
          .cs-controls { padding-right: 0 !important; }
          .cs-stats { display: none !important; }
          .cs-chips { display: block !important; }
        }
      `}</style>
    </section>
  );
}

window.CareersSwipe = CareersSwipe;