// ScrollJob — Remaining public screens
// Discovery (Company, Category, Location, Remote), Stats (Market, Salaries, Trends),
// Misc (Contacts, API Docs)

// ─────────────────────────────────────────────────────────────────────────
// Generic listing pages (Company / Category / Location / Remote)
// All four share the same shell — header + count + listing.
// ─────────────────────────────────────────────────────────────────────────
function ListingShell({ title, subtitle, badge, count, heroVariant = 'default', children }) {
  return (
    <div style={{ background: '#fff', fontFamily: SJ.font, color: SJ.ink2, minHeight: '100%' }}>
      <Header active="Browse Jobs" />
      <main style={{ maxWidth: 1200, margin: '0 auto', padding: '40px 28px 0' }}>
        {/* Hero header */}
        <div style={{
          padding: '32px 32px',
          background: heroVariant === 'remote'
            ? 'linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%)'
            : heroVariant === 'company'
            ? 'linear-gradient(135deg, #f0f9ff 0%, #faf5ff 100%)'
            : SJ.page,
          border: `1px solid ${heroVariant === 'remote' ? '#bbf7d0' : heroVariant === 'company' ? '#e0e7ff' : SJ.line}`,
          borderRadius: 20, marginBottom: 24,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20, flexWrap: 'wrap',
        }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            {badge && (
              <span style={{
                display: 'inline-block', padding: '5px 12px', marginBottom: 12,
                background: '#fff', border: `1px solid ${SJ.line}`,
                color: SJ.text, borderRadius: 999, fontSize: 11,
                fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
              }}>{badge}</span>
            )}
            <h1 style={{ fontSize: 34, fontWeight: 800, color: SJ.ink, margin: '0 0 8px', letterSpacing: '-0.02em', lineHeight: 1.15 }}>
              {title}
            </h1>
            <p style={{ fontSize: 16, color: SJ.muted, margin: 0 }}>
              <strong style={{ color: SJ.ink }}>{count}</strong> {subtitle}
            </p>
          </div>
          {heroVariant === 'company' && (
            <div style={{
              width: 84, height: 84, borderRadius: 20,
              background: `linear-gradient(135deg, ${SJ.heroFrom}, ${SJ.heroTo})`,
              color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 36, fontWeight: 800, flexShrink: 0,
              boxShadow: '0 12px 24px rgba(118,75,162,0.25)',
            }}>M</div>
          )}
          {heroVariant === 'remote' && (
            <div style={{
              fontSize: 64, opacity: 0.7, flexShrink: 0,
            }}>🏠</div>
          )}
        </div>

        {children}
      </main>
      <Footer />
    </div>
  );
}

function ListingJobRow({ job, withTag }) {
  return (
    <a style={{
      display: 'block', background: '#fff', border: `1px solid ${SJ.line}`,
      borderRadius: 16, padding: 22, marginBottom: 14,
      textDecoration: 'none', color: 'inherit',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, marginBottom: 12 }}>
        <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start', minWidth: 0, flex: 1 }}>
          <div style={{
            width: 48, height: 48, borderRadius: 12,
            background: `linear-gradient(135deg, ${SJ.blueRing}, ${SJ.blueSoft})`,
            color: SJ.blueDark, display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 19, fontWeight: 800, flexShrink: 0,
          }}>{job.mark}</div>
          <div style={{ minWidth: 0 }}>
            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: SJ.ink2 }}>{job.title}</h2>
            <div style={{ fontSize: 14, color: SJ.ink, marginTop: 4, fontWeight: 600 }}>{job.co}</div>
          </div>
        </div>
        {withTag && (
          <span style={{
            padding: '4px 10px', background: '#f3f4f6', color: '#4b5563',
            borderRadius: 6, fontSize: 12, fontWeight: 500,
          }}>{job.src}</span>
        )}
      </div>
      <div style={{ display: 'flex', gap: 16, color: SJ.muted, fontSize: 13.5, marginBottom: 10, flexWrap: 'wrap' }}>
        <span>📍 {job.loc}</span>
        {job.salary && <span>💰 {job.salary}</span>}
        {job.remote && <span>🏠 Remote</span>}
        <span>🕒 {job.date}</span>
      </div>
      {job.desc && (
        <p style={{ color: '#4b5563', margin: '0 0 12px', fontSize: 14, lineHeight: 1.55 }}>{job.desc}</p>
      )}
      <div style={{ display: 'flex', gap: 8, paddingTop: 10, borderTop: `1px solid #f3f4f6`, flexWrap: 'wrap' }}>
        <span style={{ padding: '5px 10px', background: SJ.blueSoft, color: '#1e40af', borderRadius: 6, fontSize: 12, fontWeight: 600 }}>{job.type}</span>
        {job.cat && <span style={{ padding: '5px 10px', background: '#f3f4f6', color: '#4b5563', borderRadius: 6, fontSize: 12, fontWeight: 600 }}>{job.cat}</span>}
        {job.tagExtra && <span style={{ padding: '5px 10px', background: SJ.greenBg, color: SJ.green, borderRadius: 6, fontSize: 12, fontWeight: 600 }}>{job.tagExtra}</span>}
      </div>
    </a>
  );
}

const COMPANY_JOBS = [
  { mark: 'M', title: 'Senior Python Engineer', co: 'Monzo Bank', loc: 'London, UK',
    salary: '£90–120k', remote: true, date: '13.05.2026', type: 'Full-time', cat: 'Engineering',
    src: 'monzo-careers', desc: 'Platform team — async-first Python services, sensible PostgreSQL, deep observability.' },
  { mark: 'M', title: 'Staff Engineer · Platform', co: 'Monzo Bank', loc: 'London · Hybrid',
    salary: '£140–170k', remote: false, date: '12.05.2026', type: 'Full-time', cat: 'Engineering', src: 'monzo-careers',
    desc: 'Set technical direction across the Platform org. 8+ years experience.' },
  { mark: 'M', title: 'Engineering Manager · Payments', co: 'Monzo Bank', loc: 'London, UK',
    salary: '£120–160k', remote: false, date: '11.05.2026', type: 'Full-time', cat: 'Engineering', src: 'monzo-careers',
    desc: 'Lead a pod of 6 engineers working on the card auth stack.' },
  { mark: 'M', title: 'Product Designer · Lending', co: 'Monzo Bank', loc: 'London · Hybrid',
    salary: '£80–105k', remote: false, date: '10.05.2026', type: 'Full-time', cat: 'Design', src: 'monzo-careers',
    desc: 'Shape the lending product end-to-end with research and engineering.' },
  { mark: 'M', title: 'Data Engineer', co: 'Monzo Bank', loc: 'Remote, UK',
    salary: '£85–110k', remote: true, date: '09.05.2026', type: 'Full-time', cat: 'Data', src: 'monzo-careers',
    desc: 'Own the data infrastructure that the analytics and ML teams rely on.' },
];

function CompanyListScreen() {
  return (
    <ListingShell
      title="Careers at Monzo Bank"
      subtitle="open positions at Monzo Bank · UK-based digital bank with 8m+ customers"
      count="18"
      heroVariant="company"
    >
      <div style={{ marginBottom: 18 }}>
        <h2 style={{ fontSize: 18, fontWeight: 700, color: SJ.ink2, margin: '0 0 16px' }}>About Monzo Bank</h2>
        <p style={{ fontSize: 15, color: '#4b5563', lineHeight: 1.7, margin: 0, maxWidth: '72ch' }}>
          Monzo is a UK-based digital bank, headquartered in London. Engineering culture is centered on async writing,
          small autonomous teams, and clear ownership. The bank processes millions of customer transactions every day
          across a Python/Go microservices stack.
        </p>
      </div>

      {/* Filter chips */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 22, flexWrap: 'wrap' }}>
        {[['All', 18, true], ['Engineering', 12], ['Design', 2], ['Product', 2], ['Operations', 2], ['Remote-friendly', 8]].map(([t, n, on]) => (
          <button key={t} style={{
            padding: '8px 14px', borderRadius: 999, fontSize: 13, fontWeight: 600,
            border: `1px solid ${on ? SJ.blue : SJ.line}`,
            background: on ? SJ.blueSoft : '#fff',
            color: on ? SJ.blueDark : SJ.text,
            cursor: 'pointer', fontFamily: SJ.font,
            display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>{t} <span style={{ fontSize: 11, opacity: 0.7 }}>{n}</span></button>
        ))}
      </div>

      {COMPANY_JOBS.map((j, i) => <ListingJobRow key={i} job={j} withTag />)}
    </ListingShell>
  );
}

function CategoryListScreen() {
  const jobs = [
    { mark: 'M', title: 'Senior Python Engineer', co: 'Monzo Bank', loc: 'London, UK', salary: '£90–120k', remote: true, date: '13.05.2026', type: 'Full-time', cat: 'Engineering', src: 'monzo-careers', desc: 'Platform team — async-first Python services.' },
    { mark: 'W', title: 'Senior iOS Engineer (Swift)', co: 'Wise', loc: 'London · Hybrid', salary: '£95–125k', remote: false, date: '13.05.2026', type: 'Full-time', cat: 'Engineering', src: 'greenhouse', desc: 'Mobile platform team, deep on Swift and tooling.' },
    { mark: 'D', title: 'Engineering Manager · Search', co: 'Deliveroo', loc: 'London, UK', salary: '£130–160k', remote: false, date: '12.05.2026', type: 'Full-time', cat: 'Engineering', src: 'workable', desc: 'Lead the consumer search team — 7 engineers across two pods.' },
    { mark: 'S', title: 'Backend Engineer · Python',   co: 'Starling Bank', loc: 'London, UK', salary: '£85–105k', remote: false, date: '12.05.2026', type: 'Full-time', cat: 'Engineering', src: 'greenhouse', desc: 'Core banking services, strong on Python and Postgres.' },
    { mark: 'C', title: 'Senior Python Engineer', co: 'Cleo AI', loc: 'London, UK', salary: '£100–130k', remote: false, date: '11.05.2026', type: 'Full-time', cat: 'Engineering', src: 'lever', desc: 'AI infrastructure team. Reduce toil, keep inference fast.' },
    { mark: 'O', title: 'Frontend Engineer (React)', co: 'Octopus Energy', loc: 'Remote, UK', salary: '£75–95k', remote: true, date: '11.05.2026', type: 'Full-time', cat: 'Engineering', src: 'greenhouse', desc: 'Customer-facing React + TS with a focus on accessibility.' },
  ];
  return (
    <ListingShell title="Engineering Jobs" subtitle="open Engineering positions across all regions" count="4,218" badge="Category">
      {/* Sub-categories pills */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 22, flexWrap: 'wrap' }}>
        {['Backend', 'Frontend', 'Mobile', 'DevOps · SRE', 'Engineering Management', 'Data Engineering', 'ML · AI', 'QA · Testing'].map((c, i) => (
          <a key={c} style={{
            padding: '8px 14px', borderRadius: 999,
            background: i === 0 ? SJ.blueSoft : '#fff',
            border: `1px solid ${i === 0 ? SJ.blue : SJ.line}`,
            color: i === 0 ? SJ.blueDark : SJ.text,
            fontSize: 13, fontWeight: 600, textDecoration: 'none',
          }}>{c}</a>
        ))}
      </div>
      {jobs.map((j, i) => <ListingJobRow key={i} job={j} withTag />)}
    </ListingShell>
  );
}

function LocationListScreen() {
  const jobs = [
    { mark: 'M', title: 'Senior Python Engineer',     co: 'Monzo Bank',     loc: 'London, UK',      salary: '£90–120k', remote: true,  date: '13.05.2026', type: 'Full-time', cat: 'Engineering', src: 'monzo-careers', desc: 'Platform team — async-first Python services.' },
    { mark: 'W', title: 'Staff Product Designer',     co: 'Wise',           loc: 'London · Hybrid', salary: '£110–140k', remote: false, date: '13.05.2026', type: 'Full-time', cat: 'Design',       src: 'greenhouse',     desc: 'Own end-to-end design for cross-border money.' },
    { mark: 'D', title: 'Engineering Manager · Search', co: 'Deliveroo',    loc: 'London, UK',      salary: '£130–160k', remote: false, date: '12.05.2026', type: 'Full-time', cat: 'Engineering',  src: 'workable',       desc: 'Lead a 7-engineer search team.' },
    { mark: 'C', title: 'Senior Python Engineer',     co: 'Cleo AI',        loc: 'London, UK',      salary: '£100–130k', remote: false, date: '11.05.2026', type: 'Full-time', cat: 'Engineering',  src: 'lever',          desc: 'AI infrastructure team.' },
    { mark: 'R', title: 'iOS Engineer (Swift)',       co: 'Revolut',        loc: 'London · Hybrid', salary: '£95–125k',  remote: false, date: '10.05.2026', type: 'Full-time', cat: 'Engineering',  src: 'greenhouse',     desc: 'Consumer app, deep Swift.' },
    { mark: 'B', title: 'Senior Risk Analyst',        co: 'Babylon Health', loc: 'London, UK',      salary: '£80–100k',  remote: false, date: '10.05.2026', type: 'Full-time', cat: 'Operations',    src: 'workable',       desc: 'Operational risk analysis for a digital-first health service.' },
  ];
  return (
    <ListingShell title="Jobs in London" subtitle="open positions in London — Greater London + commutable zones" count="1,824" badge="Location">
      <div style={{
        background: SJ.page, border: `1px solid ${SJ.line}`, borderRadius: 14,
        padding: 18, marginBottom: 22, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18,
      }}>
        <LocStat label="Total roles"        value="1,824" />
        <LocStat label="Remote-friendly"    value="612" sub="34% of total" />
        <LocStat label="Median salary"      value="£82,500" />
        <LocStat label="Top hiring company" value="Monzo · 18 roles" tone={SJ.blue} />
      </div>
      <h2 style={{ fontSize: 18, fontWeight: 700, color: SJ.ink2, margin: '0 0 14px' }}>Latest jobs in London</h2>
      {jobs.map((j, i) => <ListingJobRow key={i} job={j} withTag />)}
    </ListingShell>
  );
}

function LocStat({ value, label, sub, tone }) {
  return (
    <div>
      <div style={{ fontSize: 24, fontWeight: 800, color: tone || SJ.ink, letterSpacing: '-0.02em', lineHeight: 1.1 }}>{value}</div>
      <div style={{ fontSize: 13, color: SJ.muted, marginTop: 6 }}>{label}</div>
      {sub && <div style={{ fontSize: 12, color: SJ.muted, marginTop: 2 }}>{sub}</div>}
    </div>
  );
}

function RemoteListScreen() {
  const jobs = [
    { mark: 'O', title: 'Frontend Engineer (React)', co: 'Octopus Energy', loc: 'Remote, UK',  salary: '£75–95k',  remote: true, date: '13.05.2026', type: 'Full-time', cat: 'Engineering', src: 'greenhouse',  desc: 'Customer-facing React + TS, focus on accessibility.', tagExtra: 'Worldwide' },
    { mark: 'B', title: 'Data Scientist — Pricing',   co: 'Bulb',           loc: 'Remote, UK',  salary: '£80–100k', remote: true, date: '13.05.2026', type: 'Full-time', cat: 'Data',         src: 'greenhouse',  desc: 'Pricing models, balance fairness with business sustainability.', tagExtra: 'UK only' },
    { mark: 'R', title: 'Staff Engineer · Platform',  co: 'Revolut',        loc: 'Remote, UK',  salary: '£140k',    remote: true, date: '12.05.2026', type: 'Full-time', cat: 'Engineering',  src: 'greenhouse',  desc: 'Set technical direction across the Platform org.', tagExtra: 'EU' },
    { mark: 'C', title: 'Senior Python Engineer',     co: 'Cleo AI',        loc: 'Remote, US',  salary: '$140–180k', remote: true, date: '12.05.2026', type: 'Full-time', cat: 'Engineering',  src: 'lever',       desc: 'AI infrastructure team. Reduce toil, keep inference fast.', tagExtra: 'US only' },
    { mark: 'G', title: 'Backend Engineer (Go)',      co: 'GitLab',         loc: 'Remote, EU',  salary: '€90–120k', remote: true, date: '11.05.2026', type: 'Full-time', cat: 'Engineering',  src: 'greenhouse',  desc: 'Distributed team, all-remote since day one.', tagExtra: 'Worldwide' },
    { mark: 'M', title: 'Senior Python Engineer',     co: 'Monzo Bank',     loc: 'Remote, UK',  salary: '£90–120k', remote: true, date: '11.05.2026', type: 'Full-time', cat: 'Engineering',  src: 'monzo-careers', desc: 'Platform team. Async-first culture, sensible on-call.', tagExtra: 'UK only' },
  ];
  return (
    <ListingShell
      title="Remote Jobs"
      subtitle="remote-friendly positions · work from anywhere"
      count="5,128"
      badge="🏠 Remote"
      heroVariant="remote"
    >
      <div style={{ display: 'flex', gap: 8, marginBottom: 22, flexWrap: 'wrap' }}>
        {[['All', 5128, true], ['Worldwide', 412], ['Europe only', 1842], ['UK only', 1824], ['US only', 982], ['Async-first', 1218]].map(([t, n, on]) => (
          <button key={t} style={{
            padding: '8px 14px', borderRadius: 999, fontSize: 13, fontWeight: 600,
            border: `1px solid ${on ? '#16a34a' : SJ.line}`,
            background: on ? SJ.greenBg : '#fff',
            color: on ? '#166534' : SJ.text,
            cursor: 'pointer', fontFamily: SJ.font,
            display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>{t} <span style={{ fontSize: 11, opacity: 0.7 }}>{n}</span></button>
        ))}
      </div>
      {jobs.map((j, i) => <ListingJobRow key={i} job={j} withTag />)}
    </ListingShell>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// STATS — Market, Salaries, Trends
// ─────────────────────────────────────────────────────────────────────────
function StatsTabs({ active }) {
  return (
    <div style={{ display: 'flex', gap: 8, marginBottom: 22, borderBottom: `1px solid ${SJ.line}`, paddingBottom: 0 }}>
      {[['Market Overview', 'market'], ['Salaries', 'salaries'], ['Trends', 'trends']].map(([t, k]) => (
        <a key={k} style={{
          padding: '12px 18px', borderRadius: '8px 8px 0 0',
          borderBottom: `2px solid ${active === k ? SJ.blue : 'transparent'}`,
          color: active === k ? SJ.blue : SJ.muted,
          fontWeight: active === k ? 700 : 500, fontSize: 14,
          textDecoration: 'none', marginBottom: -1,
        }}>{t}</a>
      ))}
    </div>
  );
}

function StatsMarketScreen() {
  return (
    <div style={{ background: '#fff', fontFamily: SJ.font, color: SJ.ink2, minHeight: '100%' }}>
      <Header active="" />
      <main style={{ maxWidth: 1200, margin: '0 auto', padding: '40px 28px 0' }}>
        <h1 style={{ fontSize: 30, fontWeight: 700, color: SJ.ink, margin: '0 0 6px', letterSpacing: '-0.02em' }}>
          Market Overview
        </h1>
        <p style={{ color: SJ.muted, margin: '0 0 22px', fontSize: 15 }}>
          Job market overview across 12 regions · updated nightly · sample size 12,480 active jobs.
        </p>

        <StatsTabs active="market" />

        {/* Remote vs onsite donut */}
        <div style={{
          background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16,
          padding: 28, marginBottom: 22, boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
        }}>
          <h2 style={{ fontSize: 18, fontWeight: 700, color: SJ.ink2, margin: '0 0 4px' }}>Remote vs On-site</h2>
          <p style={{ fontSize: 13, color: SJ.muted, margin: '0 0 22px' }}>
            Across all live jobs in the current region.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 36, alignItems: 'center' }}>
            <DonutChart pct={41} label="Remote" sub="5,128 jobs" color={SJ.green} />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
              <BigStat n="12,480" label="Total Jobs" />
              <BigStat n="5,128"  label="Remote" sub="41%" tone={SJ.green} />
              <BigStat n="7,352"  label="On-site" sub="59%" tone={SJ.muted} />
            </div>
          </div>
        </div>

        {/* By employment type */}
        <div style={{
          background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16,
          marginBottom: 22, boxShadow: '0 1px 3px rgba(0,0,0,0.04)', overflow: 'hidden',
        }}>
          <div style={{ padding: '14px 22px', borderBottom: `1px solid ${SJ.line}`, fontSize: 15, fontWeight: 700, color: SJ.ink2 }}>
            Jobs by Employment Type
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
            <thead>
              <tr style={{ background: SJ.page, borderBottom: `1px solid ${SJ.line}` }}>
                <th style={th()}>Type</th>
                <th style={{ ...th(), textAlign: 'right' }}>Count</th>
                <th style={th()}>Share</th>
              </tr>
            </thead>
            <tbody>
              {[
                ['Full-time',  11240, 0.901, SJ.blue],
                ['Contract',   718,   0.058, SJ.purple],
                ['Part-time',  412,   0.033, '#0891b2'],
                ['Internship', 110,   0.009, '#ca8a04'],
              ].map(([type, count, pct, color], i) => (
                <tr key={type} style={{ borderBottom: i < 3 ? `1px solid #f3f4f6` : 'none' }}>
                  <td style={td()}><strong style={{ color: SJ.ink2 }}>{type}</strong></td>
                  <td style={{ ...td(), textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>{count.toLocaleString()}</td>
                  <td style={td()}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <div style={{ flex: 1, maxWidth: 200, height: 6, background: SJ.line, borderRadius: 3, overflow: 'hidden' }}>
                        <div style={{ width: `${pct * 100}%`, height: '100%', background: color }} />
                      </div>
                      <span style={{ minWidth: 50, fontSize: 13, color: SJ.text, fontVariantNumeric: 'tabular-nums' }}>{Math.round(pct * 1000) / 10}%</span>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Jobs by region */}
        <div style={{
          background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16,
          marginBottom: 22, boxShadow: '0 1px 3px rgba(0,0,0,0.04)', overflow: 'hidden',
        }}>
          <div style={{ padding: '14px 22px', borderBottom: `1px solid ${SJ.line}`, fontSize: 15, fontWeight: 700, color: SJ.ink2 }}>
            Jobs by Region
          </div>
          <div style={{ padding: 22, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
            {[
              ['🇬🇧 United Kingdom', 4218], ['🇺🇸 United States', 3812],
              ['🇩🇪 Germany',  1184], ['🇫🇷 France',     928],
              ['🇵🇱 Poland',   612],  ['🇳🇱 Netherlands', 484],
              ['🇪🇸 Spain',    412],  ['🇮🇹 Italy',       342],
              ['🇧🇪 Belgium',  168],  ['🇧🇬 Bulgaria',    142],
              ['🇮🇳 India',    98],   ['🇷🇸 Serbia',      80],
            ].map(([t, n]) => (
              <div key={t} style={{
                padding: 14, background: SJ.page, borderRadius: 10,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                <span style={{ fontSize: 13, color: SJ.text, fontWeight: 500 }}>{t}</span>
                <span style={{ fontSize: 14, fontWeight: 700, color: SJ.ink }}>{n.toLocaleString()}</span>
              </div>
            ))}
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}

function DonutChart({ pct, label, sub, color }) {
  const r = 64, c = 2 * Math.PI * r;
  const dash = (c * pct) / 100;
  return (
    <div style={{ position: 'relative', width: 180, height: 180 }}>
      <svg width="180" height="180" viewBox="0 0 180 180">
        <circle cx="90" cy="90" r={r} stroke={SJ.line} strokeWidth="16" fill="none" />
        <circle cx="90" cy="90" r={r} stroke={color} strokeWidth="16" fill="none"
                strokeDasharray={`${dash} ${c}`} strokeLinecap="round"
                transform="rotate(-90 90 90)" />
      </svg>
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{ fontSize: 32, fontWeight: 800, color: SJ.ink, lineHeight: 1, letterSpacing: '-0.02em' }}>{pct}%</div>
        <div style={{ fontSize: 13, color: SJ.muted, marginTop: 4 }}>{label}</div>
        <div style={{ fontSize: 11, color: SJ.muted, marginTop: 2 }}>{sub}</div>
      </div>
    </div>
  );
}

function BigStat({ n, label, sub, tone }) {
  return (
    <div>
      <div style={{ fontSize: 32, fontWeight: 800, color: tone || SJ.ink, letterSpacing: '-0.02em', lineHeight: 1.1 }}>{n}</div>
      <div style={{ fontSize: 13.5, color: SJ.muted, marginTop: 6 }}>{label}</div>
      {sub && <div style={{ fontSize: 12, color: SJ.muted, marginTop: 4, fontWeight: 600 }}>{sub}</div>}
    </div>
  );
}

const th = () => ({ textAlign: 'left', padding: '12px 22px', color: SJ.muted, fontWeight: 700, fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em' });
const td = () => ({ padding: '12px 22px', color: SJ.text });

function StatsSalariesScreen() {
  return (
    <div style={{ background: '#fff', fontFamily: SJ.font, color: SJ.ink2, minHeight: '100%' }}>
      <Header active="" />
      <main style={{ maxWidth: 1200, margin: '0 auto', padding: '40px 28px 0' }}>
        <h1 style={{ fontSize: 30, fontWeight: 700, color: SJ.ink, margin: '0 0 6px', letterSpacing: '-0.02em' }}>
          Salary Statistics
        </h1>
        <p style={{ color: SJ.muted, margin: '0 0 4px', fontSize: 15 }}>
          Aggregated salary data across all live jobs in the UK region.
        </p>
        <p style={{ color: SJ.muted, margin: '0 0 22px', fontSize: 14 }}>
          Currency: <strong style={{ color: SJ.ink }}>£ GBP</strong> · updated nightly
        </p>

        <StatsTabs active="salaries" />

        {/* Salary by category */}
        <StatsCard title="Salary by Category">
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
            <thead>
              <tr style={{ background: SJ.page, borderBottom: `1px solid ${SJ.line}` }}>
                <th style={th()}>Category</th>
                <th style={{ ...th(), textAlign: 'right' }}>Avg Min</th>
                <th style={{ ...th(), textAlign: 'right' }}>Avg Max</th>
                <th style={{ ...th(), textAlign: 'right' }}>Median</th>
                <th style={{ ...th(), textAlign: 'right' }}>Jobs</th>
                <th style={{ ...th() }}>Range</th>
              </tr>
            </thead>
            <tbody>
              {[
                ['Engineering',  78000, 118000, 96000, 4218],
                ['Product',      82000, 122000, 98000, 612],
                ['Data',         72000, 108000, 88000, 482],
                ['Design',       62000, 95000,  76000, 318],
                ['Operations',   45000, 72000,  56000, 1218],
                ['Marketing',    48000, 78000,  62000, 612],
                ['Sales',        38000, 95000,  58000, 982],
              ].map((r, i, arr) => (
                <SalaryRow key={r[0]} row={r} last={i === arr.length - 1} />
              ))}
            </tbody>
          </table>
        </StatsCard>

        {/* Salary by location */}
        <StatsCard title="Salary by Location">
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
            <thead>
              <tr style={{ background: SJ.page, borderBottom: `1px solid ${SJ.line}` }}>
                <th style={th()}>Location</th>
                <th style={{ ...th(), textAlign: 'right' }}>Avg Min</th>
                <th style={{ ...th(), textAlign: 'right' }}>Avg Max</th>
                <th style={{ ...th(), textAlign: 'right' }}>Jobs</th>
              </tr>
            </thead>
            <tbody>
              {[
                ['London',     82000, 122000, 1824],
                ['Manchester', 62000, 92000,  412],
                ['Edinburgh',  68000, 98000,  248],
                ['Bristol',    65000, 95000,  218],
                ['Remote, UK', 75000, 110000, 1218],
              ].map((r, i, arr) => (
                <tr key={r[0]} style={{ borderBottom: i < arr.length - 1 ? `1px solid #f3f4f6` : 'none' }}>
                  <td style={td()}><strong style={{ color: SJ.ink2 }}>{r[0]}</strong></td>
                  <td style={{ ...td(), textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>£{r[1].toLocaleString()}</td>
                  <td style={{ ...td(), textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>£{r[2].toLocaleString()}</td>
                  <td style={{ ...td(), textAlign: 'right', fontVariantNumeric: 'tabular-nums', color: SJ.muted }}>{r[3].toLocaleString()}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </StatsCard>

        {/* Salary by job type */}
        <StatsCard title="Salary by Job Type">
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
            <thead>
              <tr style={{ background: SJ.page, borderBottom: `1px solid ${SJ.line}` }}>
                <th style={th()}>Type</th>
                <th style={{ ...th(), textAlign: 'right' }}>Avg Min</th>
                <th style={{ ...th(), textAlign: 'right' }}>Avg Max</th>
                <th style={{ ...th(), textAlign: 'right' }}>Jobs</th>
              </tr>
            </thead>
            <tbody>
              {[
                ['Full-time',  72000, 108000, 11240],
                ['Contract',   85000, 130000, 718],
                ['Part-time',  42000, 65000,  412],
                ['Internship', 22000, 35000,  110],
              ].map((r, i, arr) => (
                <tr key={r[0]} style={{ borderBottom: i < arr.length - 1 ? `1px solid #f3f4f6` : 'none' }}>
                  <td style={td()}><strong style={{ color: SJ.ink2 }}>{r[0]}</strong></td>
                  <td style={{ ...td(), textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>£{r[1].toLocaleString()}</td>
                  <td style={{ ...td(), textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>£{r[2].toLocaleString()}</td>
                  <td style={{ ...td(), textAlign: 'right', fontVariantNumeric: 'tabular-nums', color: SJ.muted }}>{r[3].toLocaleString()}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </StatsCard>
      </main>
      <Footer />
    </div>
  );
}

function SalaryRow({ row, last }) {
  const [cat, min, max, median, count] = row;
  const barMax = 140000;
  return (
    <tr style={{ borderBottom: last ? 'none' : `1px solid #f3f4f6` }}>
      <td style={td()}><strong style={{ color: SJ.ink2 }}>{cat}</strong></td>
      <td style={{ ...td(), textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>£{min.toLocaleString()}</td>
      <td style={{ ...td(), textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>£{max.toLocaleString()}</td>
      <td style={{ ...td(), textAlign: 'right', fontVariantNumeric: 'tabular-nums', fontWeight: 700, color: SJ.ink }}>£{median.toLocaleString()}</td>
      <td style={{ ...td(), textAlign: 'right', fontVariantNumeric: 'tabular-nums', color: SJ.muted }}>{count.toLocaleString()}</td>
      <td style={td()}>
        <div style={{ position: 'relative', width: '100%', height: 8, background: SJ.line, borderRadius: 4 }}>
          <div style={{
            position: 'absolute', left: `${(min / barMax) * 100}%`,
            width: `${((max - min) / barMax) * 100}%`, height: '100%',
            background: SJ.blue, borderRadius: 4,
          }} />
          <div style={{
            position: 'absolute', left: `${(median / barMax) * 100}%`,
            width: 2, height: 16, top: -4, background: SJ.ink,
          }} />
        </div>
      </td>
    </tr>
  );
}

function StatsCard({ title, children }) {
  return (
    <div style={{
      background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16,
      marginBottom: 22, boxShadow: '0 1px 3px rgba(0,0,0,0.04)', overflow: 'hidden',
    }}>
      <div style={{ padding: '14px 22px', borderBottom: `1px solid ${SJ.line}`, fontSize: 15, fontWeight: 700, color: SJ.ink2 }}>
        {title}
      </div>
      {children}
    </div>
  );
}

function StatsTrendsScreen() {
  return (
    <div style={{ background: '#fff', fontFamily: SJ.font, color: SJ.ink2, minHeight: '100%' }}>
      <Header active="" />
      <main style={{ maxWidth: 1200, margin: '0 auto', padding: '40px 28px 0' }}>
        <h1 style={{ fontSize: 30, fontWeight: 700, color: SJ.ink, margin: '0 0 6px', letterSpacing: '-0.02em' }}>
          Hiring Trends
        </h1>
        <p style={{ color: SJ.muted, margin: '0 0 22px', fontSize: 15 }}>
          Week-over-week growth, fastest-growing categories, and emerging skills.
        </p>

        <StatsTabs active="trends" />

        {/* Headline trend */}
        <div style={{
          background: 'linear-gradient(135deg, #f0f9ff 0%, #faf5ff 100%)',
          border: '1px solid #e0e7ff', borderRadius: 18,
          padding: 28, marginBottom: 22,
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 28, alignItems: 'center',
        }}>
          <div>
            <span style={{
              display: 'inline-block', padding: '6px 12px', background: '#dcfce7', color: '#166534',
              borderRadius: 999, fontSize: 12, fontWeight: 700, marginBottom: 12,
            }}>↑ Hiring is up across all 12 regions</span>
            <h2 style={{ fontSize: 26, fontWeight: 700, color: SJ.ink, margin: '0 0 12px', letterSpacing: '-0.02em' }}>
              +18% week-over-week in new postings
            </h2>
            <p style={{ fontSize: 14.5, color: '#4b5563', lineHeight: 1.6, margin: 0 }}>
              The strongest growth is in <strong>AI / ML</strong> roles (+34%) and <strong>Engineering Management</strong> (+22%). Marketing remains soft (−4%).
            </p>
          </div>
          <SparkChart />
        </div>

        {/* Week-over-week table */}
        <StatsCard title="Week-over-Week Growth">
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
            <thead>
              <tr style={{ background: SJ.page, borderBottom: `1px solid ${SJ.line}` }}>
                <th style={th()}>Week</th>
                <th style={{ ...th(), textAlign: 'right' }}>Postings</th>
                <th style={{ ...th() }}>Growth</th>
                <th style={{ ...th() }}>vs prior week</th>
              </tr>
            </thead>
            <tbody>
              {[
                ['2026-W18', 2812, +18.4],
                ['2026-W17', 2374, +6.2],
                ['2026-W16', 2235, +2.1],
                ['2026-W15', 2189, -1.4],
                ['2026-W14', 2219, +8.8],
                ['2026-W13', 2039, +12.4],
              ].map((r, i, arr) => (
                <tr key={r[0]} style={{ borderBottom: i < arr.length - 1 ? `1px solid #f3f4f6` : 'none' }}>
                  <td style={td()}><strong style={{ color: SJ.ink2 }}>{r[0]}</strong></td>
                  <td style={{ ...td(), textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>{r[1].toLocaleString()}</td>
                  <td style={{ ...td(), color: r[2] > 0 ? SJ.green : SJ.red, fontWeight: 700 }}>
                    {r[2] > 0 ? '+' : ''}{r[2]}%
                  </td>
                  <td style={td()}>
                    <DeltaBar value={r[2]} />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </StatsCard>

        {/* Fastest-growing categories */}
        <StatsCard title="Fastest-growing Categories (4-week trend)">
          <div style={{ padding: 22 }}>
            {[
              ['AI / ML Engineering',         182, +34, 'rgb(99, 102, 241)'],
              ['Engineering Management',      412, +22, 'rgb(37, 99, 235)'],
              ['Platform / DevOps',           618, +18, 'rgb(8, 145, 178)'],
              ['Product (B2B SaaS)',          218, +14, 'rgb(124, 58, 237)'],
              ['Customer Operations · Fintech', 312, +9,  'rgb(22, 163, 74)'],
              ['Marketing',                    412, -4,  'rgb(220, 38, 38)'],
            ].map(([cat, n, growth, color]) => (
              <div key={cat} style={{
                display: 'grid', gridTemplateColumns: '180px 1fr 80px 100px', alignItems: 'center',
                gap: 12, padding: '12px 0', borderBottom: '1px solid #f3f4f6',
              }}>
                <span style={{ fontSize: 14, fontWeight: 600, color: SJ.ink2 }}>{cat}</span>
                <div style={{ height: 8, background: SJ.line, borderRadius: 4, overflow: 'hidden' }}>
                  <div style={{
                    width: `${Math.min(Math.abs(growth) * 2.5, 100)}%`, height: '100%',
                    background: growth > 0 ? color : SJ.red,
                  }} />
                </div>
                <span style={{ fontSize: 13, color: SJ.muted, textAlign: 'right' }}>{n.toLocaleString()} jobs</span>
                <span style={{
                  fontSize: 14, fontWeight: 700, textAlign: 'right',
                  color: growth > 0 ? SJ.green : SJ.red,
                }}>{growth > 0 ? '↑' : '↓'} {Math.abs(growth)}%</span>
              </div>
            ))}
          </div>
        </StatsCard>

        {/* Emerging skills */}
        <StatsCard title="Emerging skills · last 90 days">
          <div style={{ padding: 24, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {[
              ['LLM Ops', 124, 'huge'], ['Rust', 84, 'big'], ['Postgres / pgvector', 62, 'big'],
              ['Async Python', 48, 'med'], ['Cloudflare Workers', 38, 'med'], ['LangChain', 32, 'med'],
              ['Temporal', 28, 'sm'], ['Modal', 24, 'sm'], ['DuckDB', 22, 'sm'],
              ['SvelteKit', 18, 'sm'], ['Astro', 18, 'sm'], ['Bun', 14, 'sm'],
              ['Cap\'n Proto', 12, 'sm'], ['HTMX', 12, 'sm'], ['edge-runtime', 10, 'sm'],
            ].map(([skill, n, size]) => {
              const fontSize = size === 'huge' ? 24 : size === 'big' ? 18 : size === 'med' ? 15 : 13;
              return (
                <span key={skill} style={{
                  padding: '8px 14px', background: SJ.page, color: SJ.ink2,
                  border: `1px solid ${SJ.line}`, borderRadius: 999,
                  fontSize, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 6,
                }}>
                  {skill}
                  <span style={{ fontSize: 11, color: SJ.green, fontWeight: 700 }}>+{n}%</span>
                </span>
              );
            })}
          </div>
        </StatsCard>
      </main>
      <Footer />
    </div>
  );
}

function SparkChart() {
  const data = [38, 42, 51, 45, 62, 58, 71, 64, 78, 82, 96, 88, 124, 142];
  const max = Math.max(...data);
  const W = 380, H = 140;
  const stepX = W / (data.length - 1);
  const points = data.map((v, i) => `${i * stepX},${H - (v / max) * (H - 12) - 6}`).join(' ');
  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%', height: 140 }}>
      <polyline points={points} fill="none" stroke={SJ.blue} strokeWidth="3" strokeLinejoin="round" />
      {data.map((v, i) => (
        <circle key={i} cx={i * stepX} cy={H - (v / max) * (H - 12) - 6} r="3" fill={SJ.blue} />
      ))}
      <text x={W - 4} y={H - (data[data.length - 1] / max) * (H - 12) - 14} textAnchor="end" fontSize="11" fill={SJ.blue} fontWeight="700">{data[data.length - 1]}</text>
    </svg>
  );
}

function DeltaBar({ value }) {
  const abs = Math.min(Math.abs(value) * 2.5, 100);
  const color = value > 0 ? SJ.green : SJ.red;
  return (
    <div style={{ position: 'relative', height: 6, background: SJ.line, borderRadius: 3 }}>
      <div style={{
        position: 'absolute', left: '50%',
        width: `${abs / 2}%`, height: '100%',
        transform: value > 0 ? 'none' : 'translateX(-100%)',
        background: color, borderRadius: 3,
      }} />
      <span style={{ position: 'absolute', left: '50%', top: -2, width: 2, height: 10, background: SJ.muted }} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// CONTACTS
// ─────────────────────────────────────────────────────────────────────────
function ContactsScreen() {
  return (
    <div style={{ background: '#fff', fontFamily: SJ.font, color: SJ.ink2, minHeight: '100%' }}>
      <Header active="" />
      <main style={{ maxWidth: 900, margin: '0 auto', padding: '60px 28px 0' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <h1 style={{ fontSize: 44, fontWeight: 800, color: SJ.ink, margin: '0 0 18px', letterSpacing: '-0.02em' }}>
            Get in touch
          </h1>
          <p style={{ fontSize: 17, color: SJ.muted, lineHeight: 1.6, maxWidth: 560, margin: '0 auto' }}>
            Questions about a posting, partnership, or how to integrate your ATS? We read every message.
          </p>
        </div>

        {/* Primary contact card */}
        <div style={{
          background: SJ.page, borderRadius: 20, padding: 48, textAlign: 'center', marginBottom: 32,
        }}>
          <div style={{ fontSize: 56, marginBottom: 22 }}>💬</div>
          <div style={{
            fontSize: 14, color: SJ.muted, marginBottom: 12,
            textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600,
          }}>Drop us a line</div>
          <div style={{ fontSize: 26, fontWeight: 700, color: SJ.blue, marginBottom: 22 }}>hello@scrolljob.org</div>
          <p style={{ fontSize: 15, color: '#4b5563', lineHeight: 1.7, maxWidth: 480, margin: '0 auto' }}>
            We aim to reply within one business day. For urgent moderation issues, mention the job ID in your subject.
          </p>
        </div>

        {/* Cards */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginBottom: 32 }}>
          {[
            { i: '💼', t: 'Post a Job',       d: 'Use the employer cabinet to submit a vacancy and track moderation.' },
            { i: '🤝', t: 'Partnerships',     d: 'Tell us about your hiring tool, ATS or job-feed integration idea.' },
            { i: '📰', t: 'Press & Media',    d: 'Stories, embargoed launches, interview requests — we respond to all of them.' },
          ].map((c) => (
            <div key={c.t} style={{
              background: '#fff', border: `2px solid ${SJ.line}`,
              borderRadius: 16, padding: '28px 22px', textAlign: 'center',
            }}>
              <div style={{ fontSize: 36, marginBottom: 14 }}>{c.i}</div>
              <h3 style={{ fontSize: 17, fontWeight: 700, color: SJ.ink2, margin: '0 0 8px' }}>{c.t}</h3>
              <p style={{ fontSize: 13.5, color: SJ.muted, lineHeight: 1.55, margin: 0 }}>{c.d}</p>
            </div>
          ))}
        </div>

        {/* Office info / SLAs */}
        <div style={{
          background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16,
          padding: 28, marginBottom: 32,
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28,
        }}>
          {[
            { t: 'Where', v: 'London · remote-first', sub: 'Registered at 18 Old Bailey, EC4M 7BP' },
            { t: 'When',  v: 'Mon–Fri · 09:00–18:00 UK', sub: 'Auto-reply outside hours' },
            { t: 'SLA',   v: '< 24 hours response', sub: 'Premium customers · 2 hour SLA' },
          ].map((b) => (
            <div key={b.t}>
              <div style={{ fontSize: 11, fontWeight: 700, color: SJ.muted, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>{b.t}</div>
              <div style={{ fontSize: 16, fontWeight: 600, color: SJ.ink, marginBottom: 4 }}>{b.v}</div>
              <div style={{ fontSize: 13, color: SJ.muted }}>{b.sub}</div>
            </div>
          ))}
        </div>
      </main>
      <Footer />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// API DOCS
// ─────────────────────────────────────────────────────────────────────────
function ApiDocsScreen() {
  return (
    <div style={{ background: '#fff', fontFamily: SJ.font, color: SJ.ink2, minHeight: '100%' }}>
      <Header active="" />
      <main style={{ maxWidth: 1200, margin: '0 auto', padding: '40px 28px 0' }}>
        {/* Hero */}
        <div style={{
          background: SJ.page, border: `1px solid ${SJ.line}`,
          borderRadius: 20, padding: 32, marginBottom: 24,
        }}>
          <span style={{
            display: 'inline-block', padding: '5px 12px', marginBottom: 14,
            background: SJ.ink, color: '#fff',
            borderRadius: 999, fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
          }}>API · v2 · stable</span>
          <h1 style={{ fontSize: 36, fontWeight: 800, color: SJ.ink, margin: '0 0 12px', letterSpacing: '-0.02em' }}>
            ScrollJob Public API
          </h1>
          <p style={{ fontSize: 16, color: '#4b5563', maxWidth: 720, margin: 0, lineHeight: 1.65 }}>
            JSON over HTTPS · API-key auth · 1,000 requests/hour by default · rate-limit headers on every response.
          </p>
          <div style={{ marginTop: 22, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a style={{
              padding: '12px 22px', background: SJ.blue, color: '#fff',
              borderRadius: 10, fontSize: 14, fontWeight: 600, textDecoration: 'none',
            }}>Get an API key</a>
            <a style={{
              padding: '12px 22px', background: '#fff', color: SJ.ink,
              border: `1px solid ${SJ.line}`, borderRadius: 10,
              fontSize: 14, fontWeight: 600, textDecoration: 'none',
            }}>OpenAPI spec ↗</a>
          </div>
        </div>

        {/* Layout: TOC + content */}
        <div style={{ display: 'grid', gridTemplateColumns: '220px minmax(0, 1fr)', gap: 28, alignItems: 'start' }}>
          {/* TOC */}
          <aside style={{
            position: 'sticky', top: 90,
            background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 14, padding: 18,
          }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: SJ.muted, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 14 }}>
              Contents
            </div>
            {[
              ['Getting started', true],
              ['Authentication'],
              ['Rate limits'],
              ['GET /jobs', 'method'],
              ['GET /jobs/:id', 'method'],
              ['GET /companies', 'method'],
              ['POST /jobs (employer)', 'method-post'],
              ['Webhooks'],
              ['Error codes'],
              ['Changelog'],
            ].map(([t, on]) => (
              <a key={t} style={{
                display: 'block', padding: '6px 10px', borderRadius: 6,
                background: on === true ? SJ.blueSoft : 'transparent',
                color: on === true ? SJ.blueDark : SJ.text,
                fontSize: 13, fontWeight: on === true ? 600 : 500, textDecoration: 'none',
                marginBottom: 2,
              }}>
                {typeof on === 'string' && on.startsWith('method') && (
                  <span style={{
                    display: 'inline-block', padding: '0 5px', borderRadius: 3,
                    background: on === 'method-post' ? '#ede9fe' : '#dcfce7',
                    color: on === 'method-post' ? '#6d28d9' : '#166534',
                    fontSize: 9, fontWeight: 800, letterSpacing: '0.04em',
                    marginRight: 6, fontFamily: 'ui-monospace, Menlo, monospace',
                  }}>{on === 'method-post' ? 'POST' : 'GET'}</span>
                )}
                {t}
              </a>
            ))}
          </aside>

          {/* Main */}
          <div>
            <h2 style={{ fontSize: 24, fontWeight: 700, color: SJ.ink, margin: '0 0 14px' }}>Getting started</h2>
            <p style={{ fontSize: 15, color: '#4b5563', lineHeight: 1.7, marginBottom: 18, maxWidth: '72ch' }}>
              All endpoints live under <code style={inlineCode}>https://api.scrolljob.org/v2/</code> and return
              JSON. Authenticate by sending your key in the <code style={inlineCode}>X-API-Key</code> header — never
              put it in URL params.
            </p>

            <CodeBlock label="Quick example · cURL">
{`curl https://api.scrolljob.org/v2/jobs?q=python&location=london \\
  -H "X-API-Key: sj_live_NwH8aP4u..."`}
            </CodeBlock>

            <h2 style={{ fontSize: 22, fontWeight: 700, color: SJ.ink, margin: '32px 0 14px' }}>
              <Method method="GET" /> /jobs
            </h2>
            <p style={{ fontSize: 15, color: '#4b5563', lineHeight: 1.7, marginBottom: 18, maxWidth: '72ch' }}>
              Search the live job index. Supports keyword, location, remote-only, employment type and pagination.
            </p>

            {/* Params table */}
            <div style={{
              background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 12,
              marginBottom: 20, overflow: 'hidden',
            }}>
              <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13.5 }}>
                <thead>
                  <tr style={{ background: SJ.page, borderBottom: `1px solid ${SJ.line}` }}>
                    {['Param', 'Type', 'Default', 'Description'].map((h) => (
                      <th key={h} style={{
                        textAlign: 'left', padding: '11px 18px',
                        color: SJ.muted, fontWeight: 700, fontSize: 11,
                        textTransform: 'uppercase', letterSpacing: '0.04em',
                      }}>{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {[
                    ['q',          'string',  '—',          'Free-text query across title, company, description.'],
                    ['location',   'string',  '—',          'City or region name. Resolved via geoname aliases.'],
                    ['remote',     'boolean', 'false',      'Restrict to remote-friendly jobs.'],
                    ['type',       'enum',    'full_time',  'One of: full_time, part_time, contract, internship.'],
                    ['region',     'enum',    'uk',         'Required for cross-region searches. us / uk / de / fr / pl / nl / be / bg / rs / es / it / in.'],
                    ['page',       'integer', '1',          'Pagination page, 50 results per page.'],
                  ].map((r, i, arr) => (
                    <tr key={r[0]} style={{ borderBottom: i < arr.length - 1 ? `1px solid #f3f4f6` : 'none' }}>
                      <td style={{ padding: '11px 18px', fontFamily: 'ui-monospace, Menlo, monospace', color: SJ.ink, fontWeight: 600 }}>{r[0]}</td>
                      <td style={{ padding: '11px 18px', color: SJ.muted, fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 12.5 }}>{r[1]}</td>
                      <td style={{ padding: '11px 18px', color: SJ.muted, fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 12.5 }}>{r[2]}</td>
                      <td style={{ padding: '11px 18px', color: SJ.text, fontSize: 13 }}>{r[3]}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <CodeBlock label="Response · 200 OK">
{`{
  "page": 1,
  "total": 4218,
  "jobs": [
    {
      "id": 14817,
      "title": "Frontend Engineer (React)",
      "company": "Octopus Energy",
      "location": "Remote, UK",
      "salary": "£75k – £95k",
      "is_remote": true,
      "employment_type": "full_time",
      "url": "https://scrolljob.org/jobs/...",
      "published_at": "2026-05-13T08:42:00Z"
    }
    // 49 more …
  ]
}`}
            </CodeBlock>

            <h2 style={{ fontSize: 22, fontWeight: 700, color: SJ.ink, margin: '32px 0 14px' }}>Error codes</h2>
            <div style={{
              background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 12,
              overflow: 'hidden', marginBottom: 32,
            }}>
              <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13.5 }}>
                <thead>
                  <tr style={{ background: SJ.page, borderBottom: `1px solid ${SJ.line}` }}>
                    <th style={th()}>HTTP</th>
                    <th style={th()}>Code</th>
                    <th style={th()}>Meaning</th>
                  </tr>
                </thead>
                <tbody>
                  {[
                    ['401', 'unauthorized',   'API key missing or invalid.'],
                    ['403', 'forbidden',      'Your key does not have permission for this endpoint.'],
                    ['404', 'not_found',      'The job, company, or place was not found.'],
                    ['429', 'rate_limited',   'Hourly request quota exhausted. Retry after Retry-After header.'],
                    ['422', 'validation_error', 'Request shape valid but field validation failed.'],
                    ['500', 'server_error',   "Something is wrong on our end. We're already paged."],
                  ].map((r, i, arr) => (
                    <tr key={r[1]} style={{ borderBottom: i < arr.length - 1 ? `1px solid #f3f4f6` : 'none' }}>
                      <td style={{ ...td(), fontFamily: 'ui-monospace, Menlo, monospace', color: SJ.ink, fontWeight: 600 }}>{r[0]}</td>
                      <td style={{ ...td(), fontFamily: 'ui-monospace, Menlo, monospace', color: SJ.red, fontSize: 12.5 }}>{r[1]}</td>
                      <td style={td()}>{r[2]}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}

const inlineCode = {
  padding: '2px 6px', background: SJ.page, border: `1px solid ${SJ.line}`,
  borderRadius: 4, fontFamily: 'ui-monospace, Menlo, monospace',
  fontSize: 13, color: SJ.ink,
};

function Method({ method }) {
  const colors = {
    GET:  { bg: '#dcfce7', fg: '#166534' },
    POST: { bg: '#ede9fe', fg: '#6d28d9' },
  };
  const c = colors[method] || colors.GET;
  return (
    <span style={{
      padding: '2px 8px', background: c.bg, color: c.fg, borderRadius: 4,
      fontSize: 13, fontWeight: 800, fontFamily: 'ui-monospace, Menlo, monospace',
      letterSpacing: '0.04em', marginRight: 6,
    }}>{method}</span>
  );
}

function CodeBlock({ label, children }) {
  return (
    <div style={{
      background: '#0f172a', borderRadius: 12,
      marginBottom: 18, overflow: 'hidden',
    }}>
      <div style={{
        padding: '10px 18px', borderBottom: '1px solid #1e293b',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <span style={{
          fontSize: 11, fontWeight: 700, color: '#94a3b8',
          textTransform: 'uppercase', letterSpacing: '0.06em',
        }}>{label}</span>
        <button style={{
          padding: '4px 10px', background: '#1e293b', color: '#94a3b8',
          border: 'none', borderRadius: 6, fontSize: 11, fontWeight: 600,
          cursor: 'pointer', fontFamily: SJ.font,
        }}>Copy</button>
      </div>
      <pre style={{
        margin: 0, padding: 18,
        fontFamily: 'ui-monospace, Menlo, monospace',
        fontSize: 13, lineHeight: 1.65,
        color: '#e2e8f0', overflow: 'auto',
      }}>{children}</pre>
    </div>
  );
}

Object.assign(window, {
  CompanyListScreen, CategoryListScreen, LocationListScreen, RemoteListScreen,
  StatsMarketScreen, StatsSalariesScreen, StatsTrendsScreen,
  ContactsScreen, ApiDocsScreen,
});
