// RolesTabs.jsx — Horizontal tabs + role detail card for the Careers page.
// Tabs map to the 13 roles in Appendix E of the Acerti Playbook.
// Detail card preserves the playbook's visual structure but uses Acerti's
// warm-editorial palette layered on top of the role's tier color.

const ROLES = (typeof window !== "undefined" && window.ACERTI_ROLES) || [];

// Compact tag chip used in the Technical Skills section
const SkillChip = ({ color, children }) => (
  <span
    style={{
      display: "inline-block",
      padding: "4px 12px",
      borderRadius: 999,
      fontSize: 12,
      fontWeight: 500,
      color: color,
      background: color + "12",
      border: "1px solid " + color + "33",
      margin: "3px 3px 0 0",
      lineHeight: 1.4,
    }}
  >
    {children}
  </span>
);

const Pill = ({ children }) => (
  <span
    style={{
      display: "inline-flex",
      alignItems: "center",
      gap: 6,
      background: "rgba(255,255,255,0.18)",
      border: "1px solid rgba(255,255,255,0.22)",
      color: "white",
      padding: "5px 12px",
      borderRadius: 999,
      fontSize: 12.5,
      fontWeight: 500,
      letterSpacing: "0.1px",
      whiteSpace: "nowrap",
    }}
  >
    {children}
  </span>
);

// All-roles benefits package (lifted from Appendix E, restyled for cream canvas)
const BENEFITS = [
  "100% Remote — work from anywhere in LATAM",
  "USD-denominated monthly compensation",
  "$500 equipment stipend at onboarding",
  "$200 annual equipment refresh allowance",
  "$30–50/month internet subsidy",
  "$1,500/year learning & certification budget",
  "100% certification exam fees covered by Acerti",
  "AI-powered personalized career growth path",
  "5–15% performance bonus (paid annually)",
  "Monthly Spotlight recognition award ($200)",
  "Annual Excellence Award ($1,000+)",
  "3 mental health sessions/year fully covered",
  "8 co-working day passes/month in major cities",
  "Quarterly team social events",
  "Annual company all-hands (virtual)",
  "Transparent promotion criteria — 20% internal rate",
];

const ENGAGEMENT = [
  ["Location", "Remote — LATAM countries"],
  ["Hours", "~160 hrs/month (40 hrs/week)"],
  ["Equipment", "Own laptop + internet required"],
  ["Training", "Acerti onboarding program (first 14 days)"],
];

const RoleCard = ({ role, onApply }) => {
  if (!role) return null;
  const tier = role.bg || "#1F5C8B";

  return (
    <article className="role-card reveal" key={role.code}>
      {/* Header banner */}
      <header
        className="role-card__head"
        style={{
          background: `linear-gradient(135deg, ${tier} 0%, ${tier}dd 100%)`,
        }}
      >
        <div className="role-card__head-left">
          <div className="role-card__code">{role.code}</div>
          <div>
            <h3 className="role-card__title">{role.title}</h3>
            <div className="role-card__subtitle">{role.subtitle}</div>
          </div>
        </div>
        <div className="role-card__pills">
          <Pill>Remote — LATAM</Pill>
          <Pill>Full-time</Pill>
          <Pill>Long-term engagement</Pill>
        </div>
      </header>

      {/* Body — left/right split */}
      <div className="role-card__body">
        <div className="role-card__main">
          <h4 className="role-card__h">Role Overview</h4>
          <p className="role-card__lede">{role.overview}</p>

          {role.warning && (
            <div className="role-card__warning">{role.warning}</div>
          )}

          <h4 className="role-card__h">What you&rsquo;ll do</h4>
          <ul className="role-card__list">
            {role.duties.map((d, i) => <li key={i}>{d}</li>)}
          </ul>

          <h4 className="role-card__h">Requirements</h4>
          <ul className="role-card__list">
            {role.requirements.map((r, i) => <li key={i}>{r}</li>)}
          </ul>

          {role.niceToHave && role.niceToHave.length > 0 && (
            <>
              <h4 className="role-card__h role-card__h--muted">Nice to have</h4>
              <ul className="role-card__list role-card__list--muted">
                {role.niceToHave.map((n, i) => <li key={i}>{n}</li>)}
              </ul>
            </>
          )}
        </div>

        <aside className="role-card__side">
          <div className="role-card__side-block">
            <div className="role-card__h">English requirement</div>
            <span className="role-card__english" style={{ background: tier }}>
              {role.english}
            </span>
          </div>

          <div className="role-card__side-block">
            <div className="role-card__h">Technical skills</div>
            <div>
              {role.skills.map((s) => (
                <SkillChip key={s} color={tier}>{s}</SkillChip>
              ))}
            </div>
          </div>

          <div className="role-card__divider" />

          <div className="role-card__side-block">
            <div className="role-card__h role-card__h--sm">Engagement details</div>
            <dl className="role-card__engagement">
              {ENGAGEMENT.map(([k, v]) => (
                <div key={k}>
                  <dt>{k}</dt>
                  <dd>{v}</dd>
                </div>
              ))}
            </dl>
          </div>
        </aside>
      </div>

      {/* Benefits */}
      <div className="role-card__benefits">
        <div className="role-card__benefits-title">
          Acerti benefits package — all roles
        </div>
        <ul className="role-card__benefits-grid">
          {BENEFITS.map((b) => (
            <li key={b}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path d="M5 12l4.5 4.5L19 7" stroke="var(--accent-teal)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
              <span>{b}</span>
            </li>
          ))}
        </ul>
      </div>

      {/* Apply CTA strip */}
      <div className="role-card__apply" style={{ background: tier }}>
        <div>
          <div className="role-card__apply-title">Ready to apply?</div>
          <div className="role-card__apply-meta">
            Remote — LATAM &nbsp;·&nbsp; Full-time &nbsp;·&nbsp; Long-term engagement
          </div>
        </div>
        <button
          type="button"
          className="role-card__apply-btn"
          onClick={() => onApply(role)}
          style={{ color: tier }}
        >
          Apply Now &rarr;
        </button>
      </div>
    </article>
  );
};

// Short, tab-friendly labels for the role buttons.
// Falls back to the role's full title if no override is given.
const TAB_LABEL_OVERRIDES = {
  "C3": "Team Lead",
  "C4": "Solution Architect",
  "E5": "ERP Sr. Consultant",
};
const tabLabelFor = (r) =>
  TAB_LABEL_OVERRIDES[r.code] || r.title.replace(/\s*\(.+\)\s*$/, "");

// One-line hooks per role for the welcome-state mini-cards.
// Kept short enough to feel like an "elevator pitch" preview.
const ROLE_TEASERS = {
  C1: "Most senior client-facing role. Own delivery for 2–4 US/Canadian enterprise accounts.",
  C2: "Run the daily delivery rhythm — sprints, status, the client cadence.",
  C3: "Hands-on tech lead for a 3–8 dev squad. Code, review, mentor, ship.",
  C4: "Dual track — design the architecture or build the cloud platform under it.",
  C5: "Experienced IC dev. Own user stories end-to-end with real autonomy.",
  C6: "Mid-level dev path. Real client work, clear road to C5 in 12–18 months.",
  C7: "Lead an 8–15 person team running an AI-augmented call center campaign.",
  C8: "Human in the loop for the 20% of calls AI escalates. Edge cases only.",
  E3: "Lead the full ERP implementation — plan, team, stakeholders, go-live.",
  E4: "Solution architect for ERP. ADRs, integrations, technical governance.",
  E5: "Own a functional module from fit-gap to UAT to user training.",
  E6: "Mid-level ERP implementer on a clear path to E5 in 18–24 months.",
  E7: "Entry-level ERP analyst. Process maps, testing, structured exposure.",
};

// Tabs are arranged in three rows by Acerti's career series.
const ROLE_ROWS = [
  { id: "c-dev",    label: "C-Series · Software development", codes: ["C1", "C2", "C3", "C4", "C5", "C6"] },
  { id: "e-erp",    label: "E-Series · ERP consulting",        codes: ["E3", "E4", "E5", "E6", "E7"] },
  { id: "c-callcenter", label: "C-Series · AI call center",   codes: ["C7", "C8"] },
];

// Welcome-state highlights — what makes the Acerti contractor deal different.
const WELCOME_HIGHLIGHTS = [
  {
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
        <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6"/>
      </svg>
    ),
    title: "Real US & Canada enterprise work",
    body: "You're embedded on engagements with Fortune 1000 IT and CTO teams — S/4HANA migrations, AI voice deployments, multi-tenant rebuilds. North-American depth, your timezone.",
  },
  {
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M20.5 17.5L13 10l-2.5 2.5L3.5 5.5M14 21l3-3M14 21h7v-7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
    title: "Travel to client sites when it matters",
    body: "Quarterly business reviews, kickoff workshops, go-live week — Acerti funds on-site travel to client offices across the US and Canada when the engagement needs it.",
  },
  {
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M4 7h16M4 12h16M4 17h10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
        <circle cx="18" cy="17" r="3" stroke="currentColor" strokeWidth="1.6"/>
      </svg>
    ),
    title: "Remote-first, by design",
    body: "100% remote across LATAM, with an equipment stipend, internet subsidy, co-working passes, and a $1,500/year learning budget. The setup is built for you to work well, anywhere.",
  },
  {
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M12 3v18M5 8l7-5 7 5M5 16l7 5 7-5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
    title: "A real career ladder",
    body: "Transparent C1–C8 and E3–E7 progression. 20% internal promotion rate, AI-powered growth paths, 100% certification fees covered. You'll know what's next, and how to get there.",
  },
];

const WelcomePanel = ({ onSelect }) => (
  <section className="roles-welcome">
    <div className="roles-welcome__hero">
      <div className="eyebrow"><span className="mark"/>WELCOME</div>
      <h3 className="roles-welcome__title">
        Senior consulting work for North America&rsquo;s biggest companies &mdash;
        from anywhere in LATAM.
      </h3>
      <p className="roles-welcome__lede">
        Acerti is a LATAM-based consultancy that delivers enterprise software,
        ERP, and AI call center engagements for US and Canadian clients. We
        hire at thirteen role profiles &mdash; from delivery directors to
        entry-level analysts &mdash; with a clear progression path between them.
      </p>
      <p className="roles-welcome__lede">
        Pick a role below to see the full profile, the skills we look for,
        and what we expect from you. Apply directly from the role page.
      </p>
    </div>

    <div className="roles-welcome__highlights">
      {WELCOME_HIGHLIGHTS.map((h) => (
        <div className="roles-welcome__highlight" key={h.title}>
          <div className="roles-welcome__highlight-icon">{h.icon}</div>
          <div className="roles-welcome__highlight-title">{h.title}</div>
          <p className="roles-welcome__highlight-body">{h.body}</p>
        </div>
      ))}
    </div>

    <div className="roles-welcome__rolesheader">
      <h4 className="roles-welcome__roleshead">The thirteen roles we hire</h4>
      <p className="roles-welcome__roleshint">Click any role above &mdash; or any card below &mdash; for the full profile.</p>
    </div>

    <div className="roles-welcome__rolesgrid">
      {ROLES.map((r, i) => (
        <button
          key={r.code}
          type="button"
          className="roles-welcome__rolecard"
          onClick={() => onSelect(i)}
          style={{ "--tier": r.bg }}
        >
          <div className="roles-welcome__rolecard-top">
            <span className="roles-welcome__rolecard-code" style={{ background: r.bg }}>
              {r.code}
            </span>
          </div>
          <div className="roles-welcome__rolecard-title">{tabLabelFor(r)}</div>
          <p className="roles-welcome__rolecard-teaser">{ROLE_TEASERS[r.code]}</p>
          <div className="roles-welcome__rolecard-cta">
            See role <span aria-hidden="true">&rarr;</span>
          </div>
        </button>
      ))}
    </div>
  </section>
);

const RolesTabs = ({ onApply }) => {
  // `null` = welcome panel state. Indices 0..ROLES.length-1 = role detail.
  const [active, setActive] = React.useState(null);

  const role = active != null ? ROLES[active] : null;

  const onKey = (e, i) => {
    if (e.key === "ArrowRight") { e.preventDefault(); setActive(((i ?? -1) + 1) % ROLES.length); }
    else if (e.key === "ArrowLeft") { e.preventDefault(); setActive(((i ?? 0) - 1 + ROLES.length) % ROLES.length); }
    else if (e.key === "Home") { e.preventDefault(); setActive(0); }
    else if (e.key === "End") { e.preventDefault(); setActive(ROLES.length - 1); }
  };

  return (
    <div className="roles-tabs">
      {/* Section header banner */}
      <div className="roles-tabs__banner reveal">
        <div className="roles-tabs__banner-inner">
          {role ? (
            <button
              type="button"
              className="roles-tabs__banner-eyebrow roles-tabs__banner-eyebrow--btn"
              onClick={() => setActive(null)}
              aria-label="Back to Open Roles overview"
            >
              Acerti Careers
            </button>
          ) : (
            <span className="roles-tabs__banner-eyebrow">Acerti Careers</span>
          )}
          <h2 className="roles-tabs__banner-title">Open Roles</h2>
          <p className="roles-tabs__banner-sub">
            Thirteen consultant profiles &mdash; six in software development,
            five in ERP, two in AI call center. All fully remote across LATAM.
          </p>
        </div>
      </div>

      {/* Tab rows */}
      <div className="roles-tabs__rows reveal" role="tablist" aria-label="Open roles">
        {ROLE_ROWS.map((row) => (
          <div className="roles-tabs__row" key={row.id} aria-label={row.label}>
            {row.codes.map((code) => {
              const r = ROLES.find((x) => x.code === code);
              if (!r) return null;
              const idx = ROLES.indexOf(r);
              const isActive = idx === active;
              return (
                <button
                  key={r.code}
                  role="tab"
                  aria-selected={isActive}
                  tabIndex={isActive ? 0 : -1}
                  onClick={() => setActive(idx)}
                  onKeyDown={(e) => onKey(e, idx)}
                  className={"roles-tabs__tab" + (isActive ? " is-active" : "")}
                  style={{ "--tier": r.bg, background: r.bg }}
                  title={`${r.code} — ${r.title}`}
                >
                  <span className="roles-tabs__tab-title">{tabLabelFor(r)}</span>
                </button>
              );
            })}
          </div>
        ))}
      </div>

      {/* Detail card or welcome panel */}
      <div className="roles-tabs__card" key={role ? role.code : "__welcome__"}>
        {role
          ? <RoleCard role={role} onApply={onApply} />
          : <WelcomePanel onSelect={(i) => setActive(i)} />
        }
      </div>

      <style>{`
        .roles-tabs { margin-top: 12px; }

        /* ── Section header banner ──────────────── */
        .roles-tabs__banner {
          background: var(--surface-dark);
          color: var(--on-dark);
          border-radius: 16px;
          padding: 36px 40px 38px;
          margin-bottom: 18px;
          position: relative;
          overflow: hidden;
        }
        .roles-tabs__banner::before {
          content: "";
          position: absolute;
          inset: 0;
          background:
            radial-gradient(circle at 88% 0%, rgba(244,144,30,0.22), transparent 55%),
            radial-gradient(circle at 0% 100%, rgba(62,138,125,0.16), transparent 50%);
          pointer-events: none;
        }
        .roles-tabs__banner-inner {
          position: relative;
          max-width: 760px;
        }
        .roles-tabs__banner-eyebrow {
          display: inline-block;
          font-size: 12px;
          font-weight: 600;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          color: var(--primary);
          margin-bottom: 12px;
        }
        .roles-tabs__banner-eyebrow--btn {
          appearance: none;
          background: transparent;
          border: 0;
          padding: 0;
          font-family: var(--font-body);
          cursor: pointer;
          text-decoration: none;
          border-bottom: 1px solid transparent;
          transition: border-color var(--duration-fast) var(--ease-standard);
        }
        .roles-tabs__banner-eyebrow--btn:hover,
        .roles-tabs__banner-eyebrow--btn:focus-visible {
          border-bottom-color: var(--primary);
          outline: none;
        }
        .roles-tabs__banner-title {
          font-family: var(--font-display);
          font-weight: 500;
          font-size: 56px;
          line-height: 1.05;
          letter-spacing: -1.2px;
          color: var(--on-dark);
          margin: 0 0 14px 0;
        }
        .roles-tabs__banner-sub {
          font-size: 16px;
          line-height: 1.6;
          color: var(--on-dark-soft);
          margin: 0;
        }
        @media (max-width: 640px) {
          .roles-tabs__banner { padding: 26px 22px 28px; }
          .roles-tabs__banner-title { font-size: 40px; letter-spacing: -0.8px; }
        }

        /* ── Welcome panel ──────────────────────── */
        .roles-welcome {
          background: var(--canvas);
          border: 1px solid var(--hairline);
          border-radius: 16px;
          overflow: hidden;
          box-shadow: var(--shadow-card);
          animation: roleCardIn 320ms var(--ease-emphatic);
        }
        .roles-welcome__hero {
          padding: 36px 40px 28px;
          border-bottom: 1px solid var(--hairline);
          background: var(--surface-soft);
        }
        .roles-welcome__title {
          font-family: var(--font-display);
          font-weight: 500;
          font-size: 36px;
          line-height: 1.15;
          letter-spacing: -0.5px;
          color: var(--ink);
          margin: 14px 0 16px 0;
          text-wrap: pretty;
          max-width: 780px;
        }
        .roles-welcome__lede {
          font-size: 16px;
          line-height: 1.65;
          color: var(--body);
          margin: 0 0 10px 0;
          max-width: 760px;
        }
        .roles-welcome__lede + .roles-welcome__lede { margin-top: 6px; }

        .roles-welcome__highlights {
          padding: 32px 40px;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 22px;
          border-bottom: 1px solid var(--hairline);
        }
        @media (max-width: 960px) {
          .roles-welcome__highlights { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 560px) {
          .roles-welcome__highlights { grid-template-columns: 1fr; padding: 22px; }
        }
        .roles-welcome__highlight {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }
        .roles-welcome__highlight-icon {
          width: 36px; height: 36px;
          display: flex; align-items: center; justify-content: center;
          border-radius: 8px;
          background: var(--primary-soft);
          color: var(--accent-deep);
        }
        .roles-welcome__highlight-title {
          font-family: var(--font-body);
          font-size: 15px;
          font-weight: 600;
          color: var(--ink);
          line-height: 1.35;
        }
        .roles-welcome__highlight-body {
          font-size: 13.5px;
          line-height: 1.55;
          color: var(--body);
          margin: 0;
        }

        .roles-welcome__rolesheader {
          padding: 30px 40px 16px;
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          gap: 16px;
          flex-wrap: wrap;
        }
        .roles-welcome__roleshead {
          font-family: var(--font-display);
          font-weight: 500;
          font-size: 26px;
          letter-spacing: -0.3px;
          color: var(--ink);
          margin: 0;
        }
        .roles-welcome__roleshint {
          font-size: 13.5px;
          color: var(--muted);
          margin: 0;
        }

        .roles-welcome__rolesgrid {
          padding: 0 40px 36px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 14px;
        }
        @media (max-width: 960px) {
          .roles-welcome__rolesgrid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 560px) {
          .roles-welcome__rolesgrid { grid-template-columns: 1fr; padding: 0 22px 26px; }
          .roles-welcome__rolesheader { padding: 22px 22px 12px; }
          .roles-welcome__hero { padding: 26px 22px 22px; }
          .roles-welcome__title { font-size: 28px; }
        }

        .roles-welcome__rolecard {
          --tier: #1F5C8B;
          appearance: none;
          background: var(--canvas);
          border: 1px solid var(--hairline);
          border-left: 3px solid var(--tier);
          border-radius: 10px;
          padding: 16px 18px 18px;
          text-align: left;
          cursor: pointer;
          display: flex; flex-direction: column; gap: 8px;
          transition:
            transform var(--duration-fast) var(--ease-standard),
            box-shadow var(--duration-fast) var(--ease-standard),
            border-color var(--duration-fast) var(--ease-standard);
        }
        .roles-welcome__rolecard:hover {
          transform: translateY(-2px);
          border-color: var(--tier);
          box-shadow: 0 8px 22px rgba(20,20,19,0.10);
        }
        .roles-welcome__rolecard:focus-visible {
          outline: 2px solid var(--primary);
          outline-offset: 3px;
        }
        .roles-welcome__rolecard-top {
          display: flex; align-items: center; justify-content: space-between;
        }
        .roles-welcome__rolecard-code {
          display: inline-flex; align-items: center; justify-content: center;
          min-width: 34px;
          height: 24px;
          padding: 0 9px;
          border-radius: 5px;
          color: white;
          font-family: var(--font-body);
          font-size: 12px;
          font-weight: 600;
          letter-spacing: 0.3px;
        }
        .roles-welcome__rolecard-pay {
          font-family: var(--font-body);
          font-size: 12.5px;
          font-weight: 500;
          color: var(--ink);
        }
        .roles-welcome__rolecard-title {
          font-family: var(--font-display);
          font-weight: 500;
          font-size: 19px;
          letter-spacing: -0.2px;
          color: var(--ink);
          line-height: 1.2;
        }
        .roles-welcome__rolecard-teaser {
          font-size: 13.5px;
          line-height: 1.5;
          color: var(--body);
          margin: 0;
          flex: 1;
        }
        .roles-welcome__rolecard-cta {
          font-family: var(--font-body);
          font-size: 13px;
          font-weight: 500;
          color: var(--tier);
          margin-top: 4px;
        }
        .roles-welcome__rolecard:hover .roles-welcome__rolecard-cta {
          color: var(--primary);
        }

        /* ── Tab rows ───────────────────────────── */
        .roles-tabs__rows {
          display: flex;
          flex-direction: column;
          align-items: stretch;
          gap: 8px;
          margin-bottom: 36px;
        }
        .roles-tabs__row {
          display: flex;
          flex-wrap: nowrap;
          justify-content: stretch;
          gap: 8px;
          width: 100%;
        }

        .roles-tabs__tab {
          --tier: #1F5C8B;
          flex: 1 1 0;
          min-width: 0;
          appearance: none;
          border: 0;
          color: white;
          background: var(--tier);
          padding: 14px 18px;
          border-radius: 10px 10px 4px 4px;
          font-family: var(--font-body);
          font-size: 14px;
          font-weight: 500;
          line-height: 1.2;
          letter-spacing: 0.1px;
          cursor: pointer;
          min-height: 52px;
          text-align: center;
          box-shadow: 0 1px 2px rgba(20,20,19,0.10);
          opacity: 0.78;
          transform: translateY(0);
          transition:
            opacity var(--duration-fast) var(--ease-standard),
            transform var(--duration-fast) var(--ease-standard),
            box-shadow var(--duration-fast) var(--ease-standard);
        }
        .roles-tabs__tab:hover {
          opacity: 0.94;
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(20,20,19,0.14);
        }
        .roles-tabs__tab:focus-visible {
          outline: 2px solid var(--primary);
          outline-offset: 3px;
        }
        .roles-tabs__tab.is-active {
          opacity: 1;
          transform: translateY(-2px);
          box-shadow:
            0 8px 22px rgba(20,20,19,0.22),
            inset 0 0 0 2px rgba(255,255,255,0.32);
        }
        .roles-tabs__tab-title {
          display: inline-block;
          max-width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        @media (max-width: 640px) {
          .roles-tabs__row { flex-wrap: wrap; }
          .roles-tabs__tab {
            flex: 1 1 calc(50% - 8px);
            padding: 10px 12px;
            font-size: 13px;
            min-height: 44px;
          }
        }

        /* ── Role card (mirrors the playbook layout) ─ */
        .role-card {
          background: var(--canvas);
          border: 1px solid var(--hairline);
          border-radius: 16px;
          overflow: hidden;
          box-shadow: var(--shadow-card);
          animation: roleCardIn 320ms var(--ease-emphatic);
        }
        @keyframes roleCardIn {
          from { opacity: 0; transform: translateY(8px); }
          to   { opacity: 1; transform: none; }
        }

        .role-card__head {
          display: flex; align-items: center; justify-content: space-between;
          gap: 16px; flex-wrap: wrap;
          padding: 20px 28px;
          color: white;
        }
        .role-card__head-left { display: flex; align-items: center; gap: 16px; }
        .role-card__code {
          background: rgba(255,255,255,0.22);
          border-radius: 10px;
          padding: 10px 16px;
          font-family: var(--font-body);
          font-size: 22px;
          font-weight: 600;
          line-height: 1;
          letter-spacing: 0.4px;
        }
        .role-card__title {
          font-family: var(--font-display);
          font-weight: 500;
          font-size: 26px;
          line-height: 1.15;
          color: white;
          margin: 0 0 4px 0;
          letter-spacing: -0.3px;
        }
        .role-card__subtitle {
          font-size: 13px;
          color: rgba(255,255,255,0.82);
        }
        .role-card__pills { display: flex; gap: 8px; flex-wrap: wrap; }

        .role-card__body {
          display: grid;
          grid-template-columns: 1fr 340px;
        }
        @media (max-width: 900px) {
          .role-card__body { grid-template-columns: 1fr; }
        }
        .role-card__main {
          padding: 28px 30px;
          border-right: 1px solid var(--hairline);
        }
        @media (max-width: 900px) {
          .role-card__main { border-right: 0; border-bottom: 1px solid var(--hairline); }
        }
        .role-card__side {
          padding: 28px 28px;
          background: var(--surface-soft);
        }
        .role-card__side-block { margin-bottom: 18px; }

        .role-card__h {
          font-family: var(--font-body);
          font-size: 13px;
          font-weight: 600;
          letter-spacing: 0.5px;
          text-transform: uppercase;
          color: var(--ink);
          margin: 0 0 10px 0;
        }
        .role-card__h--muted { color: var(--muted); margin-top: 18px; }
        .role-card__h--sm { font-size: 12px; }

        .role-card__lede {
          font-size: 15px; line-height: 1.65; color: var(--body);
          margin: 0 0 18px 0;
        }

        .role-card__warning {
          background: #faefdc;
          border-left: 3px solid var(--accent-deep);
          color: var(--body-strong);
          font-size: 14px;
          line-height: 1.55;
          padding: 12px 14px;
          border-radius: 0 6px 6px 0;
          margin: 0 0 20px 0;
        }

        .role-card__list {
          padding: 0;
          margin: 0 0 18px 0;
          list-style: none;
          display: flex; flex-direction: column; gap: 8px;
        }
        .role-card__list li {
          font-size: 14px;
          line-height: 1.55;
          color: var(--body);
          position: relative;
          padding-left: 18px;
        }
        .role-card__list li::before {
          content: "";
          position: absolute;
          left: 0; top: 10px;
          width: 6px; height: 6px;
          border-radius: 3px;
          background: var(--primary);
        }
        .role-card__list--muted li { color: var(--muted); }
        .role-card__list--muted li::before { background: var(--muted-soft); }

        .role-card__pay {
          background: var(--ink);
          color: var(--on-dark);
          border-radius: 10px;
          padding: 14px 18px;
          text-align: center;
        }
        .role-card__pay-amt {
          font-family: var(--font-display);
          font-weight: 500;
          font-size: 28px;
          letter-spacing: -0.4px;
          line-height: 1.1;
          color: var(--primary);
        }
        .role-card__pay-detail {
          font-size: 12px;
          color: var(--on-dark-soft);
          margin-top: 4px;
        }
        .role-card__english {
          display: inline-block;
          color: white;
          padding: 5px 14px;
          border-radius: 999px;
          font-size: 13px;
          font-weight: 500;
        }

        .role-card__divider {
          height: 1px;
          background: var(--hairline);
          margin: 18px 0;
        }
        .role-card__engagement {
          margin: 0;
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
        .role-card__engagement > div {
          display: grid;
          grid-template-columns: 110px 1fr;
          gap: 8px;
          font-size: 13px;
          line-height: 1.45;
        }
        .role-card__engagement dt {
          color: var(--muted);
          margin: 0;
        }
        .role-card__engagement dd {
          color: var(--body-strong);
          margin: 0;
        }

        .role-card__benefits {
          background: var(--surface-card);
          padding: 22px 30px;
          border-top: 1px solid var(--hairline);
        }
        .role-card__benefits-title {
          font-family: var(--font-body);
          font-size: 13px;
          font-weight: 600;
          letter-spacing: 0.5px;
          text-transform: uppercase;
          color: var(--ink);
          margin-bottom: 14px;
        }
        .role-card__benefits-grid {
          margin: 0; padding: 0;
          list-style: none;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px 32px;
        }
        @media (max-width: 720px) {
          .role-card__benefits-grid { grid-template-columns: 1fr; }
        }
        .role-card__benefits-grid li {
          display: flex; align-items: start; gap: 10px;
          font-size: 13.5px; line-height: 1.5;
          color: var(--body);
        }
        .role-card__benefits-grid li svg { flex: 0 0 14px; margin-top: 4px; }

        .role-card__apply {
          display: flex; align-items: center; justify-content: space-between;
          flex-wrap: wrap; gap: 14px;
          padding: 18px 30px;
          color: white;
        }
        .role-card__apply-title {
          font-family: var(--font-display);
          font-weight: 500;
          font-size: 22px;
          letter-spacing: -0.2px;
          color: white;
        }
        .role-card__apply-meta {
          font-size: 13px;
          color: rgba(255,255,255,0.82);
          margin-top: 2px;
        }
        .role-card__apply-btn {
          background: white;
          padding: 11px 22px;
          border-radius: 999px;
          font-family: var(--font-body);
          font-size: 14px;
          font-weight: 600;
          border: 0;
          cursor: pointer;
          transition: transform var(--duration-fast) var(--ease-standard),
                      box-shadow var(--duration-fast) var(--ease-standard);
        }
        .role-card__apply-btn:hover {
          transform: translateY(-1px);
          box-shadow: 0 6px 20px rgba(0,0,0,0.18);
        }

        @media (max-width: 640px) {
          .role-card__head { padding: 16px 18px; }
          .role-card__title { font-size: 22px; }
          .role-card__main, .role-card__side, .role-card__benefits { padding: 22px 18px; }
          .role-card__apply { padding: 16px 18px; }
        }
      `}</style>
    </div>
  );
};

Object.assign(window, { RolesTabs });