// ScrollJob — Job List, Job Detail, Swipe screens
// Color tokens come from SJ (defined in screens.jsx) which loads first.

// ─────────────────────────────────────────────────────────────────────────
// JOB LIST
// ─────────────────────────────────────────────────────────────────────────
const SAMPLE_JOBS = [
  {
    id: 1, title: 'Senior Python Engineer', company: 'Monzo', companyMark: 'M',
    location: 'London, UK', posted: '2 hours', views: 142, remote: true,
    salary: '£90k – £120k', type: 'Full-time', boosted: true,
    summary: 'Join the platform team building the rails of a digital bank. We process millions of daily transactions on a Python/PostgreSQL stack with strong observability culture.',
  },
  {
    id: 2, title: 'Staff Product Designer', company: 'Wise', companyMark: 'W',
    location: 'London, UK · Hybrid', posted: '8 hours', views: 89, remote: false,
    salary: '£110k – £140k + equity', type: 'Full-time',
    summary: 'Own end-to-end design for cross-border money movement. Partner with research, content and engineering to take ambiguous bets to ship in 6-week cycles.',
  },
  {
    id: 3, title: 'Frontend Engineer (React)', company: 'Octopus Energy', companyMark: 'O',
    location: 'Remote, UK', posted: '1 day', views: 218, remote: true,
    salary: '£75k – £95k', type: 'Full-time',
    summary: 'Help us hit net-zero. Build customer-facing experiences in React + TypeScript with a deliberate focus on accessibility, performance and energy literacy.',
  },
  {
    id: 4, title: 'DevOps / SRE', company: 'Cleo AI', companyMark: 'C',
    location: 'London, UK', posted: '1 day', views: 76, remote: false,
    salary: '£100k – £130k', type: 'Full-time',
    summary: 'Reduce toil and keep our AI infrastructure fast and reliable. Kubernetes, Terraform, GCP. We invest in deep work and reasonable on-call.',
  },
  {
    id: 5, title: 'Data Scientist — Pricing', company: 'Bulb', companyMark: 'B',
    location: 'Remote, UK', posted: '2 days', views: 51, remote: true,
    salary: '£80k – £100k', type: 'Full-time',
    summary: 'Build pricing models that balance fairness for customers with business sustainability. Strong stats + Python + comfort with messy real-world data.',
  },
  {
    id: 6, title: 'Engineering Manager', company: 'Deliveroo', companyMark: 'D',
    location: 'London, UK · Hybrid', posted: '3 days', views: 134, remote: false,
    salary: '£130k – £160k', type: 'Full-time',
    summary: 'Lead the consumer search team — 7 engineers across two pods. We hire for craft, taste and the ability to make a small team punch above its weight.',
  },
];

function Tag({ tone, children }) {
  const styles = {
    full: { background: SJ.blueSoft, color: '#1e40af' },
    remote: { background: SJ.greenBg, color: SJ.green },
    salary: { background: SJ.yellowBg, color: SJ.yellow },
    plain: { background: '#f3f4f6', color: '#4b5563' },
    boost: { background: 'linear-gradient(135deg, #ede9fe, #dbeafe)', color: '#5b21b6', border: '1px solid #c4b5fd' },
  };
  return (
    <span style={{
      padding: '6px 12px', borderRadius: 8, fontSize: 13, fontWeight: 600,
      display: 'inline-flex', alignItems: 'center', gap: 6, ...styles[tone],
    }}>{children}</span>
  );
}

function JobCard({ job, onClick, highlight }) {
  return (
    <article style={{
      background: '#fff',
      border: `1px solid ${highlight ? SJ.blue : SJ.line}`,
      borderRadius: 16, padding: 24, marginBottom: 16,
      transition: 'all 0.2s ease',
      position: 'relative',
      cursor: 'pointer',
      boxShadow: highlight ? '0 8px 24px rgba(37,99,235,0.10)' : 'none',
    }} onClick={onClick}>
      {job.boosted && (
        <div style={{
          position: 'absolute', top: -10, left: 24,
          padding: '4px 10px', borderRadius: 999,
          background: '#fff', border: `1px solid #c4b5fd`,
          color: '#6d28d9', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
        }}>★ Premium</div>
      )}
      <button style={{
        position: 'absolute', top: 18, right: 18, width: 38, height: 38,
        borderRadius: 10, border: 'none', background: 'transparent',
        color: SJ.faint, cursor: 'pointer', fontSize: 16,
      }} aria-label="Save job">♡</button>

      <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start', marginBottom: 14, paddingRight: 52 }}>
        <div style={{
          width: 54, height: 54, borderRadius: 14,
          background: `linear-gradient(135deg, ${SJ.blueRing}, ${SJ.blueSoft})`,
          color: SJ.blueDark, display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 22, fontWeight: 800, flexShrink: 0,
          boxShadow: 'inset 0 0 0 1px rgba(37,99,235,0.12)',
        }}>{job.companyMark}</div>
        <div style={{ minWidth: 0, flex: 1 }}>
          <h2 style={{ fontSize: 20, fontWeight: 700, color: SJ.ink2, margin: '0 0 4px', letterSpacing: '-0.01em' }}>{job.title}</h2>
          <div style={{ fontSize: 15, color: SJ.ink, fontWeight: 600 }}>{job.company}</div>
        </div>
        <div style={{ fontSize: 13, color: SJ.muted, fontWeight: 600, whiteSpace: 'nowrap', flexShrink: 0, paddingTop: 4 }}>
          {job.posted} ago
        </div>
      </div>

      <div style={{ display: 'flex', gap: 16, color: SJ.muted, fontSize: 13.5, marginBottom: 12, flexWrap: 'wrap' }}>
        <span>📍 {job.location}</span>
        <span>👁️ {job.views} views</span>
      </div>

      <p style={{ color: '#4b5563', fontSize: 14.5, lineHeight: 1.6, margin: '0 0 14px' }}>{job.summary}</p>

      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', paddingTop: 12, borderTop: `1px solid #f3f4f6` }}>
        <Tag tone="full">{job.type}</Tag>
        {job.remote && <Tag tone="remote">Remote</Tag>}
        <Tag tone="salary">💰 {job.salary}</Tag>
      </div>
    </article>
  );
}

function JobListScreen() {
  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' }}>
        <div style={{ marginBottom: 22 }}>
          <h1 style={{ fontSize: 30, fontWeight: 700, color: SJ.ink, margin: '0 0 4px', letterSpacing: '-0.02em' }}>
            Results for "Senior Python"
          </h1>
          <p style={{ color: SJ.muted, fontSize: 15, margin: 0 }}>248 jobs available</p>
        </div>

        {/* Search bar */}
        <div style={{
          background: SJ.page, padding: 16, borderRadius: 14, marginBottom: 28,
          border: `1px solid #eef2f7`, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap',
        }}>
          <div style={{ position: 'relative', flex: 2, minWidth: 240 }}>
            <span style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: SJ.faint, fontSize: 14 }}>🔍</span>
            <input defaultValue="Senior Python" style={{
              width: '100%', padding: '11px 14px 11px 40px',
              border: `2px solid ${SJ.line}`, borderRadius: 8, fontSize: 14,
              outline: 'none', background: '#fff', fontFamily: SJ.font,
            }} />
          </div>
          <input defaultValue="London" placeholder="Location" style={{
            flex: 1, minWidth: 180, padding: '11px 14px',
            border: `2px solid ${SJ.line}`, borderRadius: 8, fontSize: 14,
            outline: 'none', background: '#fff', fontFamily: SJ.font,
          }} />
          <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 14, fontWeight: 500, color: SJ.text, padding: '0 8px' }}>
            <input type="checkbox" defaultChecked style={{ width: 16, height: 16, accentColor: SJ.blue }} /> Remote
          </label>
          <button style={{
            padding: '11px 28px', background: SJ.blue, color: '#fff', border: 'none',
            borderRadius: 8, fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: SJ.font,
          }}>Search</button>
          <a style={{
            padding: '11px 18px', background: '#fff', color: SJ.muted,
            border: `1px solid ${SJ.line}`, borderRadius: 8, fontSize: 13, fontWeight: 500,
            textDecoration: 'none', cursor: 'pointer',
          }}>Clear</a>
        </div>

        {/* Two-column: filters + list */}
        <div style={{ display: 'grid', gridTemplateColumns: '260px minmax(0,1fr)', gap: 28, alignItems: 'start' }}>
          {/* Filters sidebar */}
          <aside style={{
            background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16, padding: 22,
            position: 'sticky', top: 90,
          }}>
            <h3 style={{ fontSize: 11, fontWeight: 700, color: SJ.faint, textTransform: 'uppercase', letterSpacing: '0.08em', margin: '0 0 14px' }}>
              Filters
            </h3>
            <FilterGroup label="Employment type" items={[['Full-time', 184], ['Contract', 42], ['Part-time', 12], ['Internship', 10]]} checkedIdx={0} />
            <FilterGroup label="Experience" items={[['Entry', 18], ['Mid-level', 96], ['Senior', 102], ['Staff+', 32]]} checkedIdx={2} />
            <FilterGroup label="Salary range" items={[['£50k+', 218], ['£80k+', 148], ['£100k+', 86], ['£130k+', 28]]} checkedIdx={1} />
            <FilterGroup label="Posted within" items={[['Last 24h', 14], ['Last 3 days', 58], ['Last week', 138], ['Last month', 248]]} checkedIdx={1} />
          </aside>

          {/* Job list */}
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                <Chip>Senior Python ✕</Chip>
                <Chip>London ✕</Chip>
                <Chip>Remote ✕</Chip>
                <Chip>£80k+ ✕</Chip>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: SJ.muted, fontSize: 14 }}>
                Sort by
                <select style={{
                  padding: '8px 12px', border: `1px solid ${SJ.line}`, borderRadius: 8,
                  fontSize: 13, color: SJ.ink, background: '#fff', fontFamily: SJ.font, outline: 'none',
                }} defaultValue="best">
                  <option value="best">Best match</option>
                  <option>Newest</option>
                  <option>Salary high → low</option>
                </select>
              </div>
            </div>

            {SAMPLE_JOBS.map((j, i) => <JobCard key={j.id} job={j} highlight={i === 0} />)}

            <div style={{ textAlign: 'center', padding: '20px 0' }}>
              <button style={{
                padding: '12px 28px', background: '#fff', color: SJ.blue,
                border: `2px solid ${SJ.blueRing}`, borderRadius: 10,
                fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: SJ.font,
              }}>Load more jobs</button>
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}

function Chip({ children }) {
  return (
    <span style={{
      padding: '6px 12px', background: SJ.blueSoft, color: SJ.blueDark,
      border: `1px solid ${SJ.blueRing}`, borderRadius: 999, fontSize: 12.5,
      fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 6,
    }}>{children}</span>
  );
}

function FilterGroup({ label, items, checkedIdx }) {
  return (
    <div style={{ marginBottom: 22 }}>
      <div style={{ fontSize: 13, fontWeight: 700, color: SJ.ink, marginBottom: 10 }}>{label}</div>
      {items.map(([name, count], i) => (
        <label key={name} style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontSize: 13.5, color: i === checkedIdx ? SJ.ink : SJ.text, marginBottom: 8,
          fontWeight: i === checkedIdx ? 600 : 400, cursor: 'pointer',
        }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <input type="checkbox" defaultChecked={i === checkedIdx} style={{ width: 15, height: 15, accentColor: SJ.blue }} />
            {name}
          </span>
          <span style={{ fontSize: 12, color: SJ.faint }}>{count}</span>
        </label>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// JOB DETAIL
// ─────────────────────────────────────────────────────────────────────────
function JobDetailScreen() {
  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: '32px 28px 0' }}>
        <a style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: SJ.muted, textDecoration: 'none', fontSize: 14, marginBottom: 18, cursor: 'pointer' }}>
          ← Back to all jobs
        </a>

        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 320px', gap: 28, alignItems: 'start' }}>
          {/* Main */}
          <div style={{ minWidth: 0 }}>
            <div style={{
              background: SJ.page, borderRadius: 20, padding: 32, marginBottom: 24,
            }}>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '6px 12px', borderRadius: 999, background: '#e0f2fe',
                color: '#0369a1', fontSize: 11, fontWeight: 700, marginBottom: 14,
                letterSpacing: '0.08em', textTransform: 'uppercase',
              }}>● Hiring · 5 days left</span>
              <div style={{ display: 'flex', gap: 20, alignItems: 'flex-start', marginBottom: 18 }}>
                <div style={{
                  width: 64, height: 64, borderRadius: 16,
                  background: `linear-gradient(135deg, ${SJ.blueRing}, ${SJ.blueSoft})`,
                  color: SJ.blueDark, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 28, fontWeight: 800, flexShrink: 0,
                }}>M</div>
                <div>
                  <h1 style={{ fontSize: 32, fontWeight: 700, color: SJ.ink, margin: '0 0 8px', lineHeight: 1.15, letterSpacing: '-0.02em' }}>
                    Senior Python Engineer
                  </h1>
                  <div style={{ color: '#4b5563', fontSize: 15, display: 'flex', flexWrap: 'wrap', gap: '8px 18px' }}>
                    <a style={{ color: SJ.blue, textDecoration: 'none', fontWeight: 600 }}>Monzo</a>
                    <span>📍 London, UK</span>
                    <span>🕐 Posted 2 hours ago</span>
                    <span>👁️ 142 views</span>
                  </div>
                </div>
              </div>

              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 18 }}>
                <Tag tone="full">Full-time</Tag>
                <Tag tone="remote">Remote OK</Tag>
                <Tag tone="salary">💰 £90k – £120k</Tag>
                <Tag tone="plain">Mid–Senior</Tag>
                <Tag tone="plain">5+ years</Tag>
              </div>

              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <a style={{
                  padding: '14px 28px', background: SJ.blue, color: '#fff',
                  borderRadius: 12, fontSize: 15, fontWeight: 700, textDecoration: 'none',
                  boxShadow: '0 10px 20px rgba(37,99,235,0.2)',
                }}>Apply on Monzo →</a>
                <button style={{
                  padding: '14px 22px', background: '#fff', color: SJ.text,
                  border: `1px solid ${SJ.line}`, borderRadius: 12, fontSize: 14, fontWeight: 600,
                  cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: SJ.font,
                }}>♡ Save job</button>
                <button style={{
                  padding: '14px 22px', background: '#fff', color: SJ.text,
                  border: `1px solid ${SJ.line}`, borderRadius: 12, fontSize: 14, fontWeight: 600,
                  cursor: 'pointer', fontFamily: SJ.font,
                }}>↗ Share</button>
              </div>
            </div>

            {/* Description */}
            <article style={{
              background: '#fff', border: `1px solid ${SJ.line}`,
              borderRadius: 20, padding: 36, lineHeight: 1.8, color: SJ.text,
            }}>
              <h2 style={{ fontSize: 22, fontWeight: 700, color: SJ.ink, margin: '0 0 16px' }}>About the role</h2>
              <p style={{ marginBottom: 16, fontSize: 15.5, maxWidth: '72ch' }}>
                Monzo runs on a Python and Go microservices stack that processes millions of customer
                transactions every day. We're hiring a Senior Python Engineer to join the Platform team —
                the team that builds the rails the rest of engineering depends on.
              </p>
              <p style={{ marginBottom: 24, fontSize: 15.5, maxWidth: '72ch' }}>
                You'll work on async-first services, internal developer tooling, and observability. Strong
                opinions on idiomatic Python, sensible SQL, and clear writing are non-negotiable.
              </p>

              <h3 style={{ fontSize: 18, fontWeight: 700, color: SJ.ink, margin: '24px 0 12px' }}>What you'll do</h3>
              <ul style={{ paddingLeft: 22, marginBottom: 24 }}>
                {[
                  'Design and ship Python services that serve thousands of requests per second.',
                  'Improve our internal SDKs and CI/CD so other teams can move faster.',
                  'Mentor mid-level engineers and contribute to hiring.',
                  'Be on call ~1 week every 6 weeks for the systems your team owns.',
                ].map((t) => (
                  <li key={t} style={{ marginBottom: 8, fontSize: 15 }}>{t}</li>
                ))}
              </ul>

              <h3 style={{ fontSize: 18, fontWeight: 700, color: SJ.ink, margin: '24px 0 12px' }}>What we're looking for</h3>
              <ul style={{ paddingLeft: 22, marginBottom: 24 }}>
                {[
                  '5+ years writing production Python at non-trivial scale.',
                  'Comfort with PostgreSQL, message queues and HTTP service design.',
                  'A bias for simple, well-tested code over clever code.',
                  'Clear written communication — we work async-first.',
                ].map((t) => (
                  <li key={t} style={{ marginBottom: 8, fontSize: 15 }}>{t}</li>
                ))}
              </ul>

              <h3 style={{ fontSize: 18, fontWeight: 700, color: SJ.ink, margin: '24px 0 12px' }}>What we offer</h3>
              <p style={{ fontSize: 15.5, maxWidth: '72ch' }}>
                £90k–£120k base + equity, flexible remote, 33 days holiday, learning budget, pension match
                up to 6%, private healthcare, and an annual offsite that's actually fun.
              </p>
            </article>
          </div>

          {/* Sidebar */}
          <aside style={{ position: 'sticky', top: 90 }}>
            <div style={{
              background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16, padding: 22, marginBottom: 14,
            }}>
              <div style={{ fontSize: 11, fontWeight: 700, color: SJ.faint, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 14 }}>
                At a glance
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 12, fontSize: 14, color: SJ.text }}>
                <SidebarRow label="Salary" value="£90k – £120k" strong />
                <SidebarRow label="Location" value="London, UK" />
                <SidebarRow label="Remote" value="OK · 2 days office" />
                <SidebarRow label="Type" value="Full-time, permanent" />
                <SidebarRow label="Team size" value="7 engineers" />
                <SidebarRow label="Tech stack" value="Python · Go · PostgreSQL" />
              </ul>
              <a style={{
                display: 'block', textAlign: 'center', marginTop: 18,
                padding: '13px 22px', background: SJ.blue, color: '#fff',
                borderRadius: 12, fontSize: 14, fontWeight: 700, textDecoration: 'none',
              }}>Apply now</a>
            </div>

            <div style={{
              background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16, padding: 22, marginBottom: 14,
            }}>
              <div style={{ fontSize: 11, fontWeight: 700, color: SJ.faint, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 14 }}>
                About Monzo
              </div>
              <p style={{ fontSize: 14, color: SJ.text, lineHeight: 1.6, margin: '0 0 10px' }}>
                UK-based digital bank with 8m+ customers, headquartered in London. Engineering culture
                centered on async writing and small autonomous teams.
              </p>
              <a style={{ fontSize: 13.5, color: SJ.blue, fontWeight: 600, textDecoration: 'none' }}>
                View all 18 jobs at Monzo →
              </a>
            </div>

            <div style={{
              background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16, padding: 22,
            }}>
              <div style={{ fontSize: 11, fontWeight: 700, color: SJ.faint, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 14 }}>
                Similar jobs
              </div>
              {[
                ['Backend Engineer · Python', 'Starling Bank'],
                ['Staff Engineer · Platform', 'Revolut'],
                ['Senior Python Engineer', 'Cleo AI'],
              ].map(([t, c]) => (
                <a key={t} style={{
                  display: 'block', padding: '10px 0', borderBottom: '1px solid #f3f4f6', textDecoration: 'none',
                }}>
                  <div style={{ fontSize: 14, fontWeight: 600, color: SJ.ink, marginBottom: 2 }}>{t}</div>
                  <div style={{ fontSize: 13, color: SJ.muted }}>{c}</div>
                </a>
              ))}
            </div>
          </aside>
        </div>
      </main>
      <Footer />
    </div>
  );
}

function SidebarRow({ label, value, strong }) {
  return (
    <li style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
      <span style={{ color: SJ.muted, fontSize: 13 }}>{label}</span>
      <span style={{ color: SJ.ink, fontWeight: strong ? 700 : 500, textAlign: 'right' }}>{value}</span>
    </li>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// SWIPE (mobile)
// ─────────────────────────────────────────────────────────────────────────
const SWIPE_JOBS = [
  { mark: 'M', title: 'Senior Python Engineer', company: 'Monzo', loc: 'London, UK', remote: true, salary: '£90k–£120k', type: 'Full-time',
    desc: 'Join the Platform team building rails for a digital bank with 8m+ customers. Async-first culture, sensible on-call.' },
  { mark: 'W', title: 'Staff Product Designer', company: 'Wise', loc: 'London · Hybrid', remote: false, salary: '£110k–£140k', type: 'Full-time',
    desc: 'Own end-to-end design for cross-border money movement. Ship in 6-week cycles with research and engineering partners.' },
  { mark: 'O', title: 'Frontend Engineer (React)', company: 'Octopus Energy', loc: 'Remote, UK', remote: true, salary: '£75k–£95k', type: 'Full-time',
    desc: 'Help us hit net-zero with accessible, performant React + TS interfaces.' },
];

function SwipeScreen() {
  return (
    <div style={{
      background: '#fff', fontFamily: SJ.font, color: SJ.ink2,
      minHeight: '100%', display: 'flex', flexDirection: 'column',
    }}>
      {/* Compact mobile-style top bar */}
      <header style={{
        padding: '18px 20px 14px', borderBottom: `1px solid ${SJ.line}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        background: '#fff',
      }}>
        <a style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: SJ.blue, textDecoration: 'none', fontSize: 19, fontWeight: 700 }}>
          <img src="assets/logo.jpg" alt="" style={{ height: 28, width: 28, borderRadius: 6, objectFit: 'cover' }} />
          ScrollJob
        </a>
        <button style={{ width: 36, height: 36, borderRadius: 10, border: 'none', background: SJ.page, fontSize: 16, cursor: 'pointer' }}>☰</button>
      </header>

      <div style={{ padding: '24px 20px 16px', textAlign: 'center' }}>
        <h1 style={{ fontSize: 24, fontWeight: 700, color: SJ.ink, margin: '0 0 4px', letterSpacing: '-0.01em' }}>Swipe Jobs</h1>
        <p style={{ color: SJ.muted, fontSize: 14, margin: 0 }}>Swipe right to save · left to skip</p>
      </div>

      {/* Card stack */}
      <div style={{
        position: 'relative', width: '100%', maxWidth: 380,
        height: 460, margin: '0 auto 20px', flex: '0 0 auto',
      }}>
        {/* Stacked back cards */}
        <SwipeCardBack offset={2} job={SWIPE_JOBS[2]} />
        <SwipeCardBack offset={1} job={SWIPE_JOBS[1]} />
        <SwipeCardFront job={SWIPE_JOBS[0]} />
      </div>

      {/* Actions */}
      <div style={{ display: 'flex', gap: 24, alignItems: 'center', justifyContent: 'center', paddingBottom: 14 }}>
        <SwipeButton kind="skip" icon="✕" label="Skip" />
        <SwipeButton kind="info" icon="ⓘ" label="Info" tiny />
        <SwipeButton kind="save" icon="♥" label="Save" />
      </div>

      <div style={{ marginTop: 14, marginBottom: 24, fontSize: 12, color: SJ.faint, textAlign: 'center' }}>
        <kbd style={kbd}>←</kbd> skip &nbsp; <kbd style={kbd}>→</kbd> save &nbsp; <kbd style={kbd}>↑</kbd> details
      </div>

      <div style={{ flex: 1 }} />

      {/* Bottom tab bar — mobile chrome */}
      <nav style={{
        borderTop: `1px solid ${SJ.line}`, padding: '12px 0 16px',
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', background: '#fff',
      }}>
        {[
          ['🔍', 'Browse', false],
          ['🔥', 'Swipe', true],
          ['❤', 'Saved', false],
          ['👤', 'Me', false],
        ].map(([icon, label, active]) => (
          <a key={label} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
            color: active ? SJ.blue : SJ.muted, fontSize: 11, fontWeight: 600, textDecoration: 'none',
          }}>
            <span style={{ fontSize: 18 }}>{icon}</span>
            {label}
          </a>
        ))}
      </nav>
    </div>
  );
}

const kbd = {
  padding: '2px 7px', background: '#f3f4f6', border: '1px solid #d1d5db',
  borderRadius: 4, fontFamily: 'inherit', fontSize: 11, color: SJ.text,
};

function SwipeCardBack({ offset, job }) {
  return (
    <div style={{
      position: 'absolute', top: offset * 8, left: 0, right: 0, height: '100%',
      background: '#fff', border: `1px solid ${SJ.line}`,
      borderRadius: 22, padding: 26, transform: `scale(${1 - offset * 0.04})`,
      transformOrigin: 'top center', opacity: 1 - offset * 0.25,
      zIndex: 10 - offset, pointerEvents: 'none',
      boxShadow: '0 4px 16px rgba(0,0,0,0.06)',
    }} />
  );
}

function SwipeCardFront({ job }) {
  return (
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0, height: '100%',
      background: '#fff', border: `1px solid ${SJ.line}`,
      borderRadius: 22, padding: 28, zIndex: 20,
      display: 'flex', flexDirection: 'column',
      boxShadow: '0 12px 36px rgba(0,0,0,0.10)',
      transform: 'rotate(-2deg)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
        <div style={{
          width: 52, height: 52, borderRadius: 14,
          background: `linear-gradient(135deg, ${SJ.blueRing}, ${SJ.blueSoft})`,
          color: SJ.blueDark, display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 22, fontWeight: 800,
        }}>{job.mark}</div>
        <span style={{ fontSize: 12, fontWeight: 700, color: SJ.muted, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
          2h ago
        </span>
      </div>
      <h2 style={{ fontSize: 22, fontWeight: 700, color: SJ.ink, margin: '0 0 6px', letterSpacing: '-0.01em', lineHeight: 1.2 }}>{job.title}</h2>
      <div style={{ fontSize: 15, color: '#4b5563', fontWeight: 600, marginBottom: 14 }}>
        {job.company} · {job.loc}
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 16 }}>
        <span style={{ padding: '4px 10px', background: SJ.greenBg, color: SJ.green, borderRadius: 6, fontSize: 12, fontWeight: 600 }}>Remote</span>
        <span style={{ padding: '4px 10px', background: SJ.yellowBg, color: SJ.yellow, borderRadius: 6, fontSize: 12, fontWeight: 600 }}>💰 {job.salary}</span>
        <span style={{ padding: '4px 10px', background: '#f3f4f6', color: '#4b5563', borderRadius: 6, fontSize: 12, fontWeight: 600 }}>{job.type}</span>
      </div>
      <p style={{ flex: 1, fontSize: 14, color: SJ.muted, lineHeight: 1.6, margin: 0 }}>{job.desc}</p>

      <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: `1px solid #f3f4f6`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <a style={{ color: SJ.blue, fontSize: 13, fontWeight: 700, textDecoration: 'none' }}>View details →</a>
        <span style={{ fontSize: 12, color: SJ.faint }}>1 of 24 today</span>
      </div>

      {/* SAVE overlay — gives the visual hint of an in-progress right-swipe */}
      <div style={{
        position: 'absolute', top: 28, right: 24,
        padding: '6px 12px', border: `3px solid ${'#22c55e'}`, color: '#22c55e',
        borderRadius: 8, fontSize: 16, fontWeight: 800, letterSpacing: 2,
        transform: 'rotate(14deg)', opacity: 0.92,
      }}>SAVE</div>
    </div>
  );
}

function SwipeButton({ kind, icon, label, tiny }) {
  const map = {
    skip: { color: '#ef4444', border: '#fecaca', bg: '#fff' },
    save: { color: '#22c55e', border: '#bbf7d0', bg: '#fff' },
    info: { color: SJ.blue, border: SJ.blueRing, bg: '#fff' },
  };
  const m = map[kind];
  const size = tiny ? 44 : 60;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
      <button style={{
        width: size, height: size, borderRadius: '50%',
        border: `2px solid ${m.border}`, background: m.bg,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: tiny ? 18 : 26, color: m.color, cursor: 'pointer',
        boxShadow: '0 4px 12px rgba(0,0,0,0.06)',
      }}>{icon}</button>
      <span style={{ fontSize: 11, color: SJ.muted, fontWeight: 600 }}>{label}</span>
    </div>
  );
}

Object.assign(window, { JobListScreen, JobDetailScreen, SwipeScreen });