// ScrollJob — Mobile screens (iPhone 14 viewport 390×844)
// Re-renders of key flows for mobile — same SJ tokens as desktop, dense layouts.

// ─── Mobile chrome ───────────────────────────────────────────────────────
const M_W = 390;
const STATUS_BAR_H = 44;
const TAB_BAR_H = 78;

function MobileShell({ children, hideTabs, hideStatus, tab }) {
  return (
    <div style={{
      width: M_W, height: '100%', background: '#fff',
      fontFamily: SJ.font, color: SJ.ink2,
      display: 'flex', flexDirection: 'column',
      overflow: 'hidden',
    }}>
      {!hideStatus && <MobileStatusBar />}
      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', overflowX: 'hidden' }}>
        {children}
      </div>
      {!hideTabs && <MobileTabBar active={tab} />}
    </div>
  );
}

function MobileStatusBar() {
  return (
    <div style={{
      height: STATUS_BAR_H, padding: '14px 24px 6px',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      fontSize: 15, fontWeight: 600, color: SJ.ink, flexShrink: 0,
    }}>
      <span style={{ fontVariantNumeric: 'tabular-nums' }}>9:41</span>
      <span style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}>
        <svg width="16" height="11" viewBox="0 0 16 11" fill="currentColor">
          <path d="M0 8h2v3H0V8zm4-2h2v5H4V6zm4-2h2v7H8V4zm4-2h2v9h-2V2z" />
        </svg>
        <svg width="16" height="11" viewBox="0 0 16 11" fill="currentColor">
          <path d="M8 1.5C5.5 1.5 3.2 2.6 1.5 4.3l1.4 1.4C4.3 4.3 6.1 3.5 8 3.5s3.7.8 5.1 2.2l1.4-1.4C12.8 2.6 10.5 1.5 8 1.5zM4.4 7.1l1.4 1.4C6.4 7.9 7.2 7.5 8 7.5s1.6.4 2.2 1l1.4-1.4C10.6 6 9.4 5.5 8 5.5s-2.6.5-3.6 1.6zM8 9.5l-1.4 1.4L8 12.3l1.4-1.4L8 9.5z" />
        </svg>
        <svg width="24" height="11" viewBox="0 0 24 11">
          <rect x="0" y="1" width="20" height="9" rx="2" fill="none" stroke="currentColor" strokeWidth="1" />
          <rect x="21" y="3.5" width="1.5" height="4" rx="0.5" fill="currentColor" />
          <rect x="2" y="3" width="16" height="5" rx="1" fill="currentColor" />
        </svg>
      </span>
    </div>
  );
}

function MobileTabBar({ active = 'Browse' }) {
  const tabs = [
    ['🔍', 'Browse'],
    ['🔥', 'Swipe'],
    ['♥',  'Saved'],
    ['👤', 'Me'],
  ];
  return (
    <nav style={{
      height: TAB_BAR_H, flexShrink: 0,
      borderTop: `1px solid ${SJ.line}`, paddingBottom: 18,
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
      background: '#fff',
    }}>
      {tabs.map(([icon, label]) => {
        const on = label === active;
        return (
          <a key={label} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 3,
            color: on ? SJ.blue : SJ.muted, fontSize: 11, fontWeight: 600,
            textDecoration: 'none',
          }}>
            <span style={{ fontSize: 22, marginBottom: 1 }}>{icon}</span>
            {label}
          </a>
        );
      })}
    </nav>
  );
}

function MobileTopBar({ title, back, action }) {
  return (
    <header style={{
      padding: '8px 16px 14px', borderBottom: `1px solid ${SJ.line}`,
      display: 'flex', alignItems: 'center', gap: 12, background: '#fff',
      position: 'sticky', top: 0, zIndex: 10,
    }}>
      {back ? (
        <button style={{
          width: 36, height: 36, borderRadius: 10, background: SJ.page,
          border: 'none', cursor: 'pointer', fontSize: 18,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>←</button>
      ) : (
        <a style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 18, fontWeight: 700, color: SJ.blue, textDecoration: 'none' }}>
          <img src="assets/logo.jpg" alt="" style={{ width: 26, height: 26, borderRadius: 6, objectFit: 'cover' }} />
          ScrollJob
        </a>
      )}
      {title && (
        <h1 style={{ flex: 1, fontSize: 17, fontWeight: 700, color: SJ.ink, margin: 0, letterSpacing: '-0.01em' }}>
          {title}
        </h1>
      )}
      {!title && !back && <span style={{ flex: 1 }} />}
      {action || (
        <button style={{
          width: 36, height: 36, borderRadius: 10, background: SJ.page,
          border: 'none', cursor: 'pointer', fontSize: 16,
        }}>☰</button>
      )}
    </header>
  );
}

// ─── 1) Mobile Home ──────────────────────────────────────────────────────
function MobileHomeScreen() {
  return (
    <MobileShell tab="Browse">
      <MobileTopBar />
      <div style={{ padding: '20px 16px 24px' }}>
        {/* Hero */}
        <div style={{
          background: `linear-gradient(135deg, ${SJ.heroFrom} 0%, ${SJ.heroTo} 100%)`,
          color: '#fff', borderRadius: 24, padding: '28px 22px 24px',
          marginBottom: 22,
        }}>
          <h1 style={{ fontSize: 28, fontWeight: 800, margin: '0 0 8px', lineHeight: 1.15, letterSpacing: '-0.02em' }}>
            Scroll. Swipe.<br />Get hired.
          </h1>
          <p style={{ fontSize: 14, opacity: 0.92, margin: '0 0 18px' }}>
            Thousands of opportunities from top companies in the UK
          </p>
          <div style={{
            background: '#fff', borderRadius: 14, padding: 8,
            boxShadow: '0 12px 32px rgba(0,0,0,0.25)',
          }}>
            <div style={{ position: 'relative', marginBottom: 6 }}>
              <span style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: SJ.faint, fontSize: 14 }}>🔍</span>
              <input defaultValue="Senior Python" placeholder="Job title or company" style={{
                width: '100%', padding: '12px 12px 12px 36px', border: 'none',
                background: '#f8f9fa', borderRadius: 10,
                fontSize: 14, color: SJ.ink, outline: 'none', fontFamily: SJ.font, boxSizing: 'border-box',
              }} />
            </div>
            <div style={{ position: 'relative', marginBottom: 8 }}>
              <span style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: SJ.faint, fontSize: 14 }}>📍</span>
              <input defaultValue="London" placeholder="Location" style={{
                width: '100%', padding: '12px 12px 12px 36px', border: 'none',
                background: '#f8f9fa', borderRadius: 10,
                fontSize: 14, color: SJ.ink, outline: 'none', fontFamily: SJ.font, boxSizing: 'border-box',
              }} />
            </div>
            <button style={{
              width: '100%', padding: '13px', background: SJ.blue, color: '#fff',
              border: 'none', borderRadius: 10, fontSize: 14.5, fontWeight: 700,
              cursor: 'pointer', fontFamily: SJ.font,
            }}>Search Jobs</button>
          </div>
        </div>

        {/* Quick swipe CTA — leans into the mobile-native feature */}
        <a style={{
          display: 'block', background: '#fff',
          border: `2px solid ${SJ.blueRing}`,
          borderRadius: 18, padding: 18, marginBottom: 22,
          textDecoration: 'none', color: 'inherit',
          boxShadow: '0 8px 20px rgba(37,99,235,0.10)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{
              width: 52, height: 52, borderRadius: 14,
              background: `linear-gradient(135deg, #fb923c, #ef4444)`, color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 22,
            }}>🔥</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 700, color: SJ.ink2, marginBottom: 2 }}>
                Swipe through 24 new jobs today
              </div>
              <div style={{ fontSize: 12.5, color: SJ.muted }}>
                Curated for senior Python · London
              </div>
            </div>
            <span style={{ fontSize: 18, color: SJ.blue }}>→</span>
          </div>
        </a>

        {/* Popular tags */}
        <h2 style={{ fontSize: 14, fontWeight: 700, color: SJ.muted, letterSpacing: '0.06em', textTransform: 'uppercase', margin: '6px 0 12px' }}>
          Popular searches
        </h2>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 24 }}>
          {['Python', 'React', 'DevOps', 'Data', 'Frontend', 'Remote', 'London'].map((t) => (
            <a key={t} style={{
              padding: '8px 14px', background: '#fff', border: `1.5px solid ${SJ.line}`,
              borderRadius: 999, color: SJ.text, textDecoration: 'none',
              fontSize: 13, fontWeight: 600,
            }}>{t}</a>
          ))}
        </div>

        {/* Latest jobs preview */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
          <h2 style={{ fontSize: 18, fontWeight: 700, color: SJ.ink, margin: 0, letterSpacing: '-0.01em' }}>
            Latest jobs
          </h2>
          <a style={{ fontSize: 13, color: SJ.blue, fontWeight: 600, textDecoration: 'none' }}>See all →</a>
        </div>
        {[
          { mark: 'M', title: 'Senior Python Engineer', co: 'Monzo · London', salary: '£90–120k', when: '2h', remote: true },
          { mark: 'W', title: 'Staff Product Designer', co: 'Wise · Hybrid',   salary: '£110–140k', when: '5h', remote: false },
          { mark: 'O', title: 'Frontend Engineer (React)', co: 'Octopus · Remote UK', salary: '£75–95k', when: '1d', remote: true },
        ].map((j, i) => <MobileJobCard key={i} job={j} />)}

        {/* Stats strip */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10,
          margin: '24px 0', textAlign: 'center',
        }}>
          {[['12.4k', 'Jobs'], ['780+', 'Companies'], ['12', 'Regions']].map(([n, l]) => (
            <div key={l} style={{
              background: SJ.page, borderRadius: 12, padding: '16px 8px',
            }}>
              <div style={{ fontSize: 22, fontWeight: 800, color: SJ.blue, letterSpacing: '-0.02em' }}>{n}</div>
              <div style={{ fontSize: 11.5, color: SJ.muted, marginTop: 2 }}>{l}</div>
            </div>
          ))}
        </div>

        {/* Resume promo */}
        <div style={{
          background: 'linear-gradient(135deg, #f0f9ff 0%, #faf5ff 100%)',
          border: '1px solid #e0e7ff', borderRadius: 18, padding: 18,
        }}>
          <span style={{
            display: 'inline-block', padding: '4px 10px', background: SJ.purpleBg,
            color: '#6d28d9', borderRadius: 999, fontSize: 11, fontWeight: 700,
            letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 10,
          }}>✨ Hosted Resume</span>
          <h3 style={{ fontSize: 17, fontWeight: 700, color: SJ.ink, margin: '0 0 6px' }}>
            One link to share with recruiters
          </h3>
          <p style={{ fontSize: 13, color: '#4b5563', margin: '0 0 14px', lineHeight: 1.55 }}>
            Build a professional resume, share by link. Private until you publish.
          </p>
          <button style={{
            padding: '11px 18px', background: SJ.purple, color: '#fff',
            border: 'none', borderRadius: 10, fontSize: 13.5, fontWeight: 700,
            cursor: 'pointer', fontFamily: SJ.font,
          }}>Create your resume</button>
        </div>
      </div>
    </MobileShell>
  );
}

function MobileJobCard({ job }) {
  return (
    <a style={{
      display: 'block', background: '#fff', border: `1px solid ${SJ.line}`,
      borderRadius: 16, padding: 16, marginBottom: 10,
      textDecoration: 'none', color: 'inherit',
    }}>
      <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
        <div style={{
          width: 42, height: 42, borderRadius: 11,
          background: `linear-gradient(135deg, ${SJ.blueRing}, ${SJ.blueSoft})`,
          color: SJ.blueDark, display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 17, fontWeight: 800, flexShrink: 0,
        }}>{job.mark}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
            <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: SJ.ink2, lineHeight: 1.25 }}>{job.title}</h3>
            <span style={{ fontSize: 11, color: SJ.muted, whiteSpace: 'nowrap', flexShrink: 0 }}>{job.when}</span>
          </div>
          <div style={{ fontSize: 13, color: SJ.muted, marginTop: 4 }}>{job.co}</div>
          <div style={{ display: 'flex', gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
            {job.remote && (
              <span style={{ padding: '3px 8px', background: SJ.greenBg, color: SJ.green, borderRadius: 5, fontSize: 11, fontWeight: 600 }}>Remote</span>
            )}
            <span style={{ padding: '3px 8px', background: SJ.yellowBg, color: SJ.yellow, borderRadius: 5, fontSize: 11, fontWeight: 600 }}>💰 {job.salary}</span>
          </div>
        </div>
      </div>
    </a>
  );
}

// ─── 2) Mobile Job List ──────────────────────────────────────────────────
function MobileJobListScreen() {
  const jobs = [
    { mark: 'M', title: 'Senior Python Engineer', co: 'Monzo · London',         salary: '£90–120k', when: '2h', remote: true },
    { mark: 'W', title: 'Staff Product Designer', co: 'Wise · Hybrid',           salary: '£110–140k', when: '5h', remote: false },
    { mark: 'O', title: 'Frontend Engineer (React)', co: 'Octopus · Remote UK',  salary: '£75–95k',  when: '1d', remote: true },
    { mark: 'C', title: 'DevOps / SRE',           co: 'Cleo AI · London',        salary: '£100–130k', when: '1d', remote: false },
    { mark: 'B', title: 'Data Scientist · Pricing', co: 'Bulb · Remote UK',      salary: '£80–100k', when: '2d', remote: true },
    { mark: 'D', title: 'Engineering Manager',    co: 'Deliveroo · Hybrid',      salary: '£130–160k', when: '3d', remote: false },
    { mark: 'S', title: 'Backend Engineer (Python)', co: 'Starling · London',    salary: '£85–105k', when: '4d', remote: false },
  ];
  return (
    <MobileShell tab="Browse">
      <MobileTopBar />
      <div style={{ padding: '16px 16px 0' }}>
        <h1 style={{ fontSize: 22, fontWeight: 700, color: SJ.ink, margin: '0 0 4px', letterSpacing: '-0.02em' }}>
          Results
        </h1>
        <p style={{ fontSize: 13, color: SJ.muted, margin: '0 0 14px' }}>
          248 jobs · senior python · London
        </p>

        {/* Search */}
        <div style={{ position: 'relative', marginBottom: 12 }}>
          <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: '12px 14px 12px 38px',
            background: SJ.page, border: `1px solid ${SJ.line}`, borderRadius: 12,
            fontSize: 14, outline: 'none', fontFamily: SJ.font, boxSizing: 'border-box',
          }} />
        </div>

        {/* Filter chip row */}
        <div style={{
          display: 'flex', gap: 8, marginBottom: 16, overflowX: 'auto',
          paddingBottom: 4,
        }}>
          {[
            ['⚙ Filters · 3', true],
            ['London', true],
            ['Remote', true],
            ['£80k+', true],
            ['Full-time'],
            ['Senior+'],
          ].map(([t, on]) => (
            <button key={t} style={{
              padding: '8px 14px', borderRadius: 999, fontSize: 12.5, fontWeight: 600,
              border: `1px solid ${on ? SJ.blue : SJ.line}`,
              background: on ? SJ.blueSoft : '#fff',
              color: on ? SJ.blueDark : SJ.text,
              whiteSpace: 'nowrap', cursor: 'pointer', fontFamily: SJ.font, flexShrink: 0,
            }}>{t}</button>
          ))}
        </div>
      </div>

      <div style={{ padding: '0 16px 20px' }}>
        {jobs.map((j, i) => <MobileJobCard key={i} job={j} />)}

        <button style={{
          width: '100%', padding: '13px', marginTop: 6,
          background: '#fff', color: SJ.blue, border: `1.5px solid ${SJ.blueRing}`,
          borderRadius: 12, fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: SJ.font,
        }}>Load more</button>
      </div>
    </MobileShell>
  );
}

// ─── 3) Mobile Job Detail ────────────────────────────────────────────────
function MobileJobDetailScreen() {
  return (
    <MobileShell tab="Browse" hideTabs={false}>
      <MobileTopBar back action={
        <button style={{
          width: 36, height: 36, borderRadius: 10, background: SJ.page,
          border: 'none', cursor: 'pointer', fontSize: 14, color: SJ.red,
        }}>♥</button>
      } />
      <div style={{ padding: '4px 16px 100px' }}>
        {/* Hero */}
        <div style={{
          background: SJ.page, borderRadius: 18, padding: 20, marginBottom: 18,
        }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            padding: '4px 10px', borderRadius: 999, background: '#e0f2fe',
            color: '#0369a1', fontSize: 10.5, fontWeight: 700,
            letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 12,
          }}>● Hiring · 5 days left</span>
          <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start', marginBottom: 14 }}>
            <div style={{
              width: 56, height: 56, borderRadius: 14,
              background: `linear-gradient(135deg, ${SJ.blueRing}, ${SJ.blueSoft})`,
              color: SJ.blueDark, display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 24, fontWeight: 800, flexShrink: 0,
            }}>M</div>
            <div style={{ minWidth: 0, flex: 1 }}>
              <h1 style={{ fontSize: 21, fontWeight: 700, color: SJ.ink, margin: '0 0 4px', lineHeight: 1.2, letterSpacing: '-0.01em' }}>
                Senior Python Engineer
              </h1>
              <a style={{ color: SJ.blue, fontWeight: 600, fontSize: 14, textDecoration: 'none' }}>Monzo Bank</a>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13.5, color: '#4b5563' }}>
            <div>📍 London, UK</div>
            <div>🕐 Posted 2 hours ago · 142 views</div>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 14 }}>
            <span style={{ padding: '5px 10px', background: SJ.blueSoft, color: '#1e40af', borderRadius: 6, fontSize: 12, fontWeight: 600 }}>Full-time</span>
            <span style={{ padding: '5px 10px', background: SJ.greenBg, color: SJ.green, borderRadius: 6, fontSize: 12, fontWeight: 600 }}>Remote OK</span>
            <span style={{ padding: '5px 10px', background: SJ.yellowBg, color: SJ.yellow, borderRadius: 6, fontSize: 12, fontWeight: 600 }}>💰 £90–120k</span>
          </div>
        </div>

        {/* Description */}
        <h2 style={{ fontSize: 17, fontWeight: 700, color: SJ.ink, margin: '20px 0 10px' }}>About the role</h2>
        <p style={{ fontSize: 14, color: '#374151', lineHeight: 1.7, margin: '0 0 14px' }}>
          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.
        </p>
        <p style={{ fontSize: 14, color: '#374151', lineHeight: 1.7, margin: '0 0 16px' }}>
          You'll work on async-first services, internal developer tooling, and observability. Strong opinions on idiomatic Python and clear writing are non-negotiable.
        </p>

        <h3 style={{ fontSize: 15, fontWeight: 700, color: SJ.ink, margin: '20px 0 8px' }}>What you'll do</h3>
        <ul style={{ paddingLeft: 18, margin: '0 0 16px' }}>
          {[
            'Design and ship Python services at non-trivial scale.',
            'Improve internal SDKs and CI/CD so other teams move faster.',
            'Mentor mid-level engineers and contribute to hiring.',
            'Be on call ~1 week every 6 weeks.',
          ].map((t) => (
            <li key={t} style={{ fontSize: 13.5, color: '#374151', marginBottom: 6, lineHeight: 1.55 }}>{t}</li>
          ))}
        </ul>

        <h3 style={{ fontSize: 15, fontWeight: 700, color: SJ.ink, margin: '20px 0 8px' }}>What we offer</h3>
        <p style={{ fontSize: 14, color: '#374151', lineHeight: 1.7, margin: '0 0 18px' }}>
          £90–120k base + equity, flexible remote, 33 days holiday, learning budget, pension match up to 6%, private healthcare.
        </p>

        {/* About company chip */}
        <div style={{
          background: '#fff', border: `1px solid ${SJ.line}`,
          borderRadius: 14, padding: 16, marginBottom: 14,
        }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: SJ.muted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>
            About Monzo
          </div>
          <p style={{ fontSize: 13.5, color: SJ.text, lineHeight: 1.55, margin: '0 0 10px' }}>
            UK-based digital bank with 8m+ customers, headquartered in London. Async-first engineering culture.
          </p>
          <a style={{ fontSize: 13, color: SJ.blue, fontWeight: 600, textDecoration: 'none' }}>
            View all 18 jobs at Monzo →
          </a>
        </div>
      </div>

      {/* Sticky apply bar */}
      <div style={{
        position: 'absolute', bottom: TAB_BAR_H, left: 0, right: 0,
        padding: '12px 16px', background: '#fff',
        borderTop: `1px solid ${SJ.line}`,
        boxShadow: '0 -4px 16px rgba(0,0,0,0.06)',
        display: 'flex', gap: 10,
      }}>
        <button style={{
          width: 48, height: 48, borderRadius: 12,
          background: '#fff', border: `1px solid ${SJ.line}`,
          fontSize: 18, cursor: 'pointer',
        }}>♥</button>
        <button style={{
          flex: 1, padding: '0 18px', background: SJ.blue, color: '#fff',
          border: 'none', borderRadius: 12, fontSize: 15, fontWeight: 700,
          cursor: 'pointer', fontFamily: SJ.font,
          boxShadow: '0 8px 20px rgba(37,99,235,0.25)',
        }}>Apply on Monzo →</button>
      </div>
    </MobileShell>
  );
}

// ─── 4) Mobile Saved Jobs ────────────────────────────────────────────────
function MobileSavedJobsScreen() {
  const jobs = [
    { mark: 'M', title: 'Senior Python Engineer', co: 'Monzo · London',      salary: '£90–120k', when: '2h ago saved', remote: true },
    { mark: 'W', title: 'Staff Product Designer', co: 'Wise · Hybrid',        salary: '£110–140k', when: '5h ago saved', remote: false },
    { mark: 'R', title: 'Engineering Manager · Search', co: 'Revolut · Remote', salary: '£140k', when: 'Yesterday', remote: true },
    { mark: 'C', title: 'Senior Python Engineer', co: 'Cleo AI · London',     salary: '£100–130k', when: '2 days', remote: false },
    { mark: 'O', title: 'Frontend Engineer (React)', co: 'Octopus · Remote',  salary: '£75–95k',  when: '4 days', remote: true },
  ];
  return (
    <MobileShell tab="Saved">
      <MobileTopBar title="Saved" action={<span style={{ fontSize: 13, color: SJ.muted, fontWeight: 600, paddingRight: 4 }}>{jobs.length} jobs</span>} />
      <div style={{ padding: '16px 16px 0' }}>
        <div style={{
          display: 'flex', gap: 8, marginBottom: 14, overflowX: 'auto', paddingBottom: 4,
        }}>
          {[['All', 5, true], ['Remote', 3], ['London', 3], ['Last 7d', 4]].map(([t, n, on]) => (
            <button key={t} style={{
              padding: '8px 14px', borderRadius: 999, fontSize: 12.5, fontWeight: 600,
              border: `1px solid ${on ? SJ.blue : SJ.line}`,
              background: on ? SJ.blueSoft : '#fff',
              color: on ? SJ.blueDark : SJ.text,
              whiteSpace: 'nowrap', cursor: 'pointer', fontFamily: SJ.font, flexShrink: 0,
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>{t} <span style={{ fontSize: 11, opacity: 0.7 }}>{n}</span></button>
          ))}
        </div>
      </div>
      <div style={{ padding: '0 16px 20px' }}>
        {jobs.map((j, i) => (
          <div key={i} style={{
            background: '#fff', border: `1px solid ${SJ.line}`,
            borderRadius: 16, padding: 14, marginBottom: 10,
            position: 'relative',
          }}>
            <button style={{
              position: 'absolute', top: 10, right: 10,
              width: 32, height: 32, borderRadius: 8,
              background: SJ.redBg, color: SJ.red, border: 'none',
              fontSize: 13, cursor: 'pointer',
            }}>♥</button>
            <div style={{ display: 'flex', gap: 12, paddingRight: 36 }}>
              <div style={{
                width: 42, height: 42, borderRadius: 11,
                background: `linear-gradient(135deg, ${SJ.blueRing}, ${SJ.blueSoft})`,
                color: SJ.blueDark, display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 17, fontWeight: 800, flexShrink: 0,
              }}>{j.mark}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: SJ.ink2, lineHeight: 1.25 }}>{j.title}</h3>
                <div style={{ fontSize: 13, color: SJ.muted, marginTop: 4 }}>{j.co}</div>
                <div style={{ display: 'flex', gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
                  {j.remote && (
                    <span style={{ padding: '3px 8px', background: SJ.greenBg, color: SJ.green, borderRadius: 5, fontSize: 11, fontWeight: 600 }}>Remote</span>
                  )}
                  <span style={{ padding: '3px 8px', background: SJ.yellowBg, color: SJ.yellow, borderRadius: 5, fontSize: 11, fontWeight: 600 }}>💰 {j.salary}</span>
                </div>
                <div style={{ fontSize: 11.5, color: SJ.muted, marginTop: 10 }}>{j.when} · Still active</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </MobileShell>
  );
}

// ─── 5) Mobile Seeker Dashboard / Me ──────────────────────────────────────
function MobileDashboardScreen() {
  return (
    <MobileShell tab="Me">
      <MobileTopBar title="Me" />
      <div style={{ padding: '16px 16px 0' }}>
        {/* Profile card */}
        <div style={{
          background: 'linear-gradient(135deg, #eef2ff 0%, #faf5ff 100%)',
          border: '1px solid #e0e7ff', borderRadius: 18, padding: 18,
          display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14,
        }}>
          <div style={{
            width: 56, height: 56, borderRadius: '50%',
            background: `linear-gradient(135deg, ${SJ.heroFrom}, ${SJ.heroTo})`,
            color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 19, fontWeight: 800, flexShrink: 0,
          }}>OK</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 16, fontWeight: 700, color: SJ.ink, marginBottom: 2 }}>Olena Kovalenko</div>
            <div style={{ fontSize: 12.5, color: SJ.muted }}>Senior Python Engineer · London</div>
            <div style={{
              marginTop: 8, display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '3px 10px', background: SJ.greenBg, color: SJ.green,
              borderRadius: 999, fontSize: 11, fontWeight: 700,
            }}>● Job alerts on · Daily</div>
          </div>
        </div>

        {/* Quick stats */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 18 }}>
          {[
            ['248', 'Viewed',   SJ.blue],
            ['12',  'Applied',  '#16a34a'],
            ['34',  'Saved',    '#0891b2'],
          ].map(([n, l, c]) => (
            <div key={l} style={{
              background: '#fff', border: `1px solid ${SJ.line}`,
              borderRadius: 12, padding: '14px 8px', textAlign: 'center',
            }}>
              <div style={{ fontSize: 22, fontWeight: 800, color: c, letterSpacing: '-0.02em' }}>{n}</div>
              <div style={{ fontSize: 11, color: SJ.muted, marginTop: 2 }}>{l}</div>
            </div>
          ))}
        </div>

        {/* Resume promo compact */}
        <div style={{
          background: 'linear-gradient(135deg, #f0f9ff 0%, #faf5ff 100%)',
          border: '1px solid #e0e7ff', borderRadius: 14, padding: 14,
          display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18,
        }}>
          <div style={{ fontSize: 28 }}>📄</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13.5, fontWeight: 700, color: SJ.ink, marginBottom: 2 }}>
              Hosted resume
            </div>
            <div style={{ fontSize: 11.5, color: SJ.muted }}>
              86% complete · 3 tips to improve
            </div>
          </div>
          <span style={{ fontSize: 16, color: SJ.purple }}>→</span>
        </div>

        {/* Menu list */}
        <h3 style={{
          fontSize: 11, fontWeight: 700, color: SJ.muted,
          textTransform: 'uppercase', letterSpacing: '0.08em',
          margin: '6px 0 10px', paddingLeft: 4,
        }}>Account</h3>
        <MobileListItem icon="🔖" title="Saved jobs"      sub="34 jobs" />
        <MobileListItem icon="🕒" title="View history"    sub="Last 30 days" />
        <MobileListItem icon="📝" title="Hosted resumes"  sub="3 resumes · 1 published" />
        <MobileListItem icon="✉️" title="Cover letters"   sub="3 letters" />
        <MobileListItem icon="📧" title="Email history"   sub="14 alerts sent" />

        <h3 style={{
          fontSize: 11, fontWeight: 700, color: SJ.muted,
          textTransform: 'uppercase', letterSpacing: '0.08em',
          margin: '20px 0 10px', paddingLeft: 4,
        }}>Preferences</h3>
        <MobileListItem icon="🔔" title="Job alerts"      sub="Daily · 09:00 UK" />
        <MobileListItem icon="⚙️" title="Account settings" />
        <MobileListItem icon="🌍" title="Region"          sub="United Kingdom" />

        <div style={{ paddingBottom: 20, paddingTop: 16 }}>
          <button style={{
            width: '100%', padding: '13px', background: '#fff', color: SJ.red,
            border: `1px solid ${SJ.redLine}`, borderRadius: 12,
            fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: SJ.font,
          }}>Sign out</button>
        </div>
      </div>
    </MobileShell>
  );
}

function MobileListItem({ icon, title, sub }) {
  return (
    <a style={{
      display: 'flex', alignItems: 'center', gap: 14,
      padding: '13px 14px',
      background: '#fff', border: `1px solid ${SJ.line}`,
      borderRadius: 12, marginBottom: 8,
      textDecoration: 'none', color: 'inherit',
    }}>
      <div style={{
        width: 38, height: 38, borderRadius: 10, background: SJ.page,
        display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 17, flexShrink: 0,
      }}>{icon}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: SJ.ink2 }}>{title}</div>
        {sub && <div style={{ fontSize: 12, color: SJ.muted, marginTop: 1 }}>{sub}</div>}
      </div>
      <span style={{ color: SJ.faint, fontSize: 14 }}>›</span>
    </a>
  );
}

// ─── 6) Mobile Login ──────────────────────────────────────────────────────
function MobileLoginScreen() {
  return (
    <MobileShell hideTabs>
      <div style={{ padding: '24px 22px 20px', textAlign: 'center', borderBottom: `1px solid ${SJ.line}` }}>
        <img src="assets/logo.jpg" alt="" style={{ width: 56, height: 56, borderRadius: 14, objectFit: 'cover', marginBottom: 14 }} />
        <h1 style={{ fontSize: 26, fontWeight: 800, color: SJ.ink, margin: '0 0 6px', letterSpacing: '-0.02em' }}>
          Welcome back
        </h1>
        <p style={{ fontSize: 13.5, color: SJ.muted, margin: 0, lineHeight: 1.55 }}>
          Sign in to access your saved jobs, alerts and resume.
        </p>
      </div>
      <div style={{ padding: '22px 22px 28px' }}>
        {/* Social buttons */}
        <button style={socialBtn('#fff', SJ.ink, `1px solid ${SJ.line}`)}>
          <span style={{ fontWeight: 700, color: '#4285F4' }}>G</span> Continue with Google
        </button>
        <button style={socialBtn('#1877F2', '#fff')}>Continue with Facebook</button>
        <button style={socialBtn('#0A66C2', '#fff')}>Continue with LinkedIn</button>
        <button style={socialBtn('#000', '#fff')}>Continue with Apple</button>

        {/* Divider */}
        <div style={{
          display: 'flex', alignItems: 'center', color: SJ.muted, fontSize: 12.5, margin: '20px 0',
        }}>
          <span style={{ flex: 1, borderTop: `1px solid ${SJ.line}` }} />
          <span style={{ padding: '0 12px' }}>or use email</span>
          <span style={{ flex: 1, borderTop: `1px solid ${SJ.line}` }} />
        </div>

        {/* Email + password */}
        <label style={mobileLabelStyle}>Email</label>
        <input defaultValue="olena.k@example.com" style={mobileInputStyle} />
        <label style={mobileLabelStyle}>Password</label>
        <input type="password" defaultValue="········" style={mobileInputStyle} />
        <div style={{ textAlign: 'right', marginTop: -4, marginBottom: 18 }}>
          <a style={{ color: SJ.blue, fontSize: 12.5, fontWeight: 600, textDecoration: 'none' }}>Forgot password?</a>
        </div>

        <button style={{
          width: '100%', padding: '14px', background: SJ.blue, color: '#fff',
          border: 'none', borderRadius: 12, fontSize: 15, fontWeight: 700, cursor: 'pointer',
          fontFamily: SJ.font, boxShadow: '0 8px 20px rgba(37,99,235,0.22)',
        }}>Sign In</button>

        <div style={{
          textAlign: 'center', marginTop: 18, color: SJ.muted, fontSize: 13,
        }}>
          New to ScrollJob?{' '}
          <a style={{ color: SJ.blue, fontWeight: 600, textDecoration: 'none' }}>Create account</a>
        </div>
      </div>
    </MobileShell>
  );
}

function socialBtn(bg, fg, border = 'none') {
  return {
    width: '100%', padding: '12px 16px', background: bg, color: fg, border,
    borderRadius: 12, fontSize: 14, fontWeight: 600, cursor: 'pointer',
    fontFamily: SJ.font, marginBottom: 10,
    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
  };
}

const mobileLabelStyle = {
  display: 'block', fontSize: 12.5, fontWeight: 600,
  color: SJ.ink2, marginBottom: 6,
};

const mobileInputStyle = {
  width: '100%', padding: '13px 14px', border: `1px solid ${SJ.line}`,
  borderRadius: 12, fontSize: 14.5, outline: 'none', fontFamily: SJ.font,
  marginBottom: 14, boxSizing: 'border-box', background: '#fff', color: SJ.ink,
};

Object.assign(window, {
  MobileHomeScreen, MobileJobListScreen, MobileJobDetailScreen,
  MobileSavedJobsScreen, MobileDashboardScreen, MobileLoginScreen,
});