// ScrollJob — Cabinet screens
// Employer Dashboard + Seeker Dashboard
// Layout: sticky sidebar (260px) + main column, exactly like accounts/base.html

function SidebarNav({ mode, activeKey, user }) {
  const seekerLinks = [
    { key: 'dashboard', label: 'Dashboard' },
    { key: 'resumes',   label: 'Hosted Resumes' },
    { key: 'saved',     label: 'Saved Jobs' },
    { key: 'history',   label: 'View History' },
    { key: 'emails',    label: 'Alert Email History' },
    { key: 'settings',  label: 'Job Alerts & Settings' },
  ];
  const employerLinks = [
    { key: 'dashboard', label: 'Dashboard' },
    { key: 'post',      label: 'Post a Job' },
    { key: 'company',   label: 'Company Profile' },
    { key: 'team',      label: 'Team & Billing' },
    { key: 'settings',  label: 'Settings' },
  ];
  const links = mode === 'employer' ? employerLinks : seekerLinks;
  const sectionLabel = mode === 'employer' ? 'Employer Tools' : 'Job Seeker';
  const switchLabel = mode === 'employer'
    ? 'Switch to job seeker dashboard'
    : 'Switch to employer dashboard';

  return (
    <aside style={{
      width: 260, flexShrink: 0, background: '#fff',
      border: `1px solid ${SJ.line}`, borderRadius: 16, padding: 22,
      boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
      position: 'sticky', top: 90, alignSelf: 'flex-start',
    }}>
      {/* Avatar + identity */}
      <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 16 }}>
        <div style={{
          width: 44, height: 44, borderRadius: '50%',
          background: `linear-gradient(135deg, ${SJ.heroFrom}, ${SJ.heroTo})`,
          color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 17, fontWeight: 700, flexShrink: 0,
        }}>{user.initials}</div>
        <div style={{ minWidth: 0 }}>
          <p style={{ margin: 0, fontSize: 15, fontWeight: 700, color: SJ.ink2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
            {user.name}
          </p>
          <p style={{ margin: 0, fontSize: 13, color: SJ.muted, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
            {user.email}
          </p>
        </div>
      </div>
      <hr style={{ border: 'none', borderTop: `1px solid ${SJ.line}`, margin: '12px 0' }} />

      <p style={{
        fontSize: 11, fontWeight: 700, letterSpacing: '0.08em',
        textTransform: 'uppercase', color: SJ.muted, margin: '0 0 12px',
      }}>{sectionLabel}</p>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
        {links.map((l) => {
          const isActive = l.key === activeKey;
          return (
            <li key={l.key} style={{ marginBottom: 4 }}>
              <a style={{
                display: 'block', padding: '10px 14px',
                color: isActive ? SJ.blue : '#4b5563',
                textDecoration: 'none', borderRadius: 10,
                fontSize: 14.5, fontWeight: isActive ? 600 : 500,
                background: isActive ? SJ.blueSoft : 'transparent',
              }}>{l.label}</a>
            </li>
          );
        })}
        <li><hr style={{ border: 'none', borderTop: `1px solid ${SJ.line}`, margin: '12px 0' }} /></li>
        <li>
          <a style={{
            display: 'block', padding: '10px 14px',
            color: SJ.red, textDecoration: 'none', borderRadius: 10,
            fontSize: 14.5, fontWeight: 500,
          }}>Logout</a>
        </li>
      </ul>
      <hr style={{ border: 'none', borderTop: `1px solid ${SJ.line}`, margin: '12px 0' }} />
      <a style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        color: SJ.blue, textDecoration: 'none', fontSize: 13.5, fontWeight: 600,
      }}>↻ {switchLabel}</a>
    </aside>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// SEEKER DASHBOARD
// ─────────────────────────────────────────────────────────────────────────
function SeekerDashboardScreen() {
  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' }}>
        <div style={{ display: 'flex', gap: 32, alignItems: 'flex-start' }}>
          <SidebarNav mode="seeker" activeKey="dashboard" user={{
            name: 'Olena Kovalenko', email: 'olena.k@example.com', initials: 'OK',
          }} />

          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16, marginBottom: 22 }}>
              <div>
                <h2 style={{ fontSize: 28, fontWeight: 700, color: SJ.ink, margin: '0 0 4px', letterSpacing: '-0.02em' }}>
                  Welcome back, Olena 👋
                </h2>
                <p style={{ color: SJ.muted, margin: 0, fontSize: 15 }}>
                  3 new matches today · your last login was yesterday at 18:22
                </p>
              </div>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '8px 14px', background: '#ecfeff', color: '#155e75',
                border: '1px solid #a5f3fc', borderRadius: 999,
                fontSize: 13, fontWeight: 600,
              }}>📊 Stats source: Analytics API</span>
            </div>

            {/* Stats */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 24 }}>
              <SeekerStat n="248" label="Jobs Viewed" tone={SJ.blue} delta="+18 this week" />
              <SeekerStat n="12" label="Applications" tone="#16a34a" delta="+3 this week" />
              <SeekerStat n="34" label="Saved Jobs" tone="#0891b2" delta="+5 this week" />
              <SeekerStat n="86%" label="Resume Strength" tone={SJ.purple} delta="3 tips left" />
            </div>

            {/* Resume promo */}
            <div style={{
              background: 'linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%)',
              border: '1px solid #bfdbfe', borderRadius: 18,
              padding: 24, marginBottom: 22,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              gap: 20, flexWrap: 'wrap',
            }}>
              <div style={{ maxWidth: 640 }}>
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '6px 10px', marginBottom: 12, background: SJ.blueRing,
                  color: SJ.blueDark, borderRadius: 999,
                  fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
                }}>Job Seeker Tool</span>
                <h3 style={{ fontSize: 21, fontWeight: 700, color: '#1e3a8a', margin: '0 0 8px' }}>
                  Build a hosted resume you can share by link
                </h3>
                <p style={{ margin: 0, color: '#334155', fontSize: 14.5, lineHeight: 1.6 }}>
                  Create one or more polished resumes, keep them private in draft, then publish only
                  the versions you want to send to recruiters as hosted ScrollJob pages.
                </p>
              </div>
              <a style={{
                display: 'inline-block', padding: '12px 22px', background: SJ.blue,
                color: '#fff', borderRadius: 12, textDecoration: 'none',
                fontSize: 14, fontWeight: 600, whiteSpace: 'nowrap',
              }}>Open Hosted Resumes</a>
            </div>

            {/* Job alerts active panel */}
            <div style={{
              background: 'linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%)',
              border: '1px solid #bfdbfe', borderRadius: 18, padding: 24, marginBottom: 22,
            }}>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '8px 12px', background: SJ.greenBg, color: SJ.green,
                borderRadius: 999, fontSize: 13, fontWeight: 700, marginBottom: 14,
              }}>● Job alerts on · Daily</span>
              <h3 style={{ fontSize: 22, fontWeight: 700, color: SJ.ink, margin: '0 0 8px' }}>
                Your job alerts are active
              </h3>
              <p style={{ color: '#4b5563', margin: '0 0 16px', fontSize: 14.5 }}>
                You will receive personalized recommendation emails based on your activity and preferences.
              </p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 10 }}>
                <a style={{
                  padding: '11px 18px', background: SJ.blue, color: '#fff',
                  borderRadius: 10, textDecoration: 'none', fontSize: 14, fontWeight: 600,
                }}>Manage job alerts</a>
                <a style={{
                  padding: '11px 18px', background: '#fff', color: SJ.blueDark,
                  border: `1px solid ${SJ.blueRing}`, borderRadius: 10,
                  textDecoration: 'none', fontSize: 14, fontWeight: 600,
                }}>View alert email history</a>
              </div>
              <p style={{ fontSize: 13, color: SJ.muted, margin: 0 }}>
                Last alert email sent <strong>3 hours ago</strong>.
              </p>
            </div>

            {/* Two columns: recent activity + preferences */}
            <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 18, marginBottom: 22 }}>
              {/* Recent activity */}
              <div style={{
                background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16,
                boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
              }}>
                <div style={{
                  padding: '14px 22px', borderBottom: `1px solid ${SJ.line}`,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                }}>
                  <span style={{ fontWeight: 700, fontSize: 15, color: SJ.ink2 }}>Recent Activity</span>
                  <a style={{ fontSize: 13, color: SJ.blue, textDecoration: 'none', fontWeight: 600 }}>View all →</a>
                </div>
                <div style={{ padding: '8px 22px 14px' }}>
                  {[
                    { title: 'Senior Python Engineer', company: 'Monzo', loc: 'London, UK', time: '2 hours', action: 'viewed' },
                    { title: 'Staff Product Designer', company: 'Wise', loc: 'London, Hybrid', time: '5 hours', action: 'saved' },
                    { title: 'Frontend Engineer (React)', company: 'Octopus Energy', loc: 'Remote, UK', time: 'Yesterday', action: 'applied' },
                    { title: 'DevOps / SRE', company: 'Cleo AI', loc: 'London, UK', time: 'Yesterday', action: 'viewed' },
                    { title: 'Data Scientist — Pricing', company: 'Bulb', loc: 'Remote, UK', time: '2 days', action: 'viewed' },
                  ].map((act, i, arr) => (
                    <div key={i} style={{
                      padding: '14px 0',
                      borderBottom: i < arr.length - 1 ? `1px solid #f3f4f6` : 'none',
                      display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12,
                    }}>
                      <div style={{ minWidth: 0 }}>
                        <a style={{ color: SJ.blue, textDecoration: 'none', fontWeight: 600, fontSize: 14.5 }}>{act.title}</a>
                        <ActivityTag action={act.action} />
                        <div style={{ fontSize: 13.5, color: SJ.muted, marginTop: 4 }}>
                          {act.company} · {act.loc}
                        </div>
                      </div>
                      <span style={{ fontSize: 12.5, color: SJ.muted, whiteSpace: 'nowrap', paddingTop: 2 }}>
                        {act.time} ago
                      </span>
                    </div>
                  ))}
                </div>
              </div>

              {/* Preferences */}
              <div style={{
                background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16,
                boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
              }}>
                <div style={{ padding: '14px 22px', borderBottom: `1px solid ${SJ.line}`, fontWeight: 700, fontSize: 15, color: SJ.ink2 }}>
                  Your Preferences
                </div>
                <div style={{ padding: 22 }}>
                  <PrefRow label="Categories" values={['Backend', 'DevOps', 'Data']} />
                  <PrefRow label="Locations" values={['London', 'Manchester', 'Remote UK']} />
                  <PrefRow label="Employment" values={['Full-time', 'Contract']} />
                  <PrefRow label="Salary floor" values={['£80,000+']} />
                  <PrefRow label="Experience" values={['Senior', 'Staff+']} />
                  <a style={{
                    display: 'inline-block', marginTop: 14,
                    padding: '10px 20px', background: SJ.blue, color: '#fff',
                    borderRadius: 10, textDecoration: 'none', fontSize: 13.5, fontWeight: 600,
                  }}>Update preferences</a>
                </div>
              </div>
            </div>

            {/* Recommended for you */}
            <div style={{
              background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16,
              boxShadow: '0 1px 3px rgba(0,0,0,0.05)', marginBottom: 22,
            }}>
              <div style={{
                padding: '14px 22px', borderBottom: `1px solid ${SJ.line}`,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                <span style={{ fontWeight: 700, fontSize: 15, color: SJ.ink2 }}>
                  ✨ Recommended for you
                </span>
                <span style={{ fontSize: 12, color: SJ.muted }}>Based on 248 views and 12 applications</span>
              </div>
              <div style={{ padding: 18, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
                {[
                  { mark: 'S', co: 'Starling Bank', t: 'Backend Engineer · Python', l: 'London', salary: '£85k', match: 94 },
                  { mark: 'R', co: 'Revolut', t: 'Staff Engineer · Platform', l: 'Remote, UK', salary: '£140k', match: 91 },
                  { mark: 'C', co: 'Cleo AI', t: 'Senior Python Engineer', l: 'London', salary: '£105k', match: 88 },
                ].map((j, i) => (
                  <RecCard key={i} job={j} />
                ))}
              </div>
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}

function SeekerStat({ n, label, tone, delta }) {
  return (
    <div style={{
      background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16,
      padding: 20, boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
    }}>
      <div style={{ fontSize: 30, fontWeight: 800, color: tone, lineHeight: 1.1, letterSpacing: '-0.02em' }}>{n}</div>
      <div style={{ fontSize: 13.5, color: SJ.muted, marginTop: 6 }}>{label}</div>
      <div style={{ fontSize: 12, color: '#16a34a', marginTop: 8, fontWeight: 600 }}>↑ {delta}</div>
    </div>
  );
}

function ActivityTag({ action }) {
  const map = {
    viewed:  { bg: '#f3f4f6', fg: '#4b5563', label: 'Viewed' },
    saved:   { bg: SJ.redBg,  fg: '#b91c1c', label: '♥ Saved' },
    applied: { bg: SJ.greenBg, fg: SJ.green, label: '✓ Applied' },
  };
  const m = map[action];
  return (
    <span style={{
      display: 'inline-block', marginLeft: 8,
      padding: '2px 8px', borderRadius: 6, background: m.bg, color: m.fg,
      fontSize: 11, fontWeight: 700, verticalAlign: 'middle',
    }}>{m.label}</span>
  );
}

function PrefRow({ label, values }) {
  return (
    <div style={{ marginBottom: 12 }}>
      <div style={{ fontSize: 11, fontWeight: 700, color: SJ.muted, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }}>
        {label}
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {values.map((v) => (
          <span key={v} style={{
            padding: '4px 10px', background: SJ.page, border: `1px solid ${SJ.line}`,
            borderRadius: 6, fontSize: 12.5, color: SJ.text, fontWeight: 500,
          }}>{v}</span>
        ))}
      </div>
    </div>
  );
}

function RecCard({ job }) {
  return (
    <div style={{
      border: `1px solid ${SJ.line}`, borderRadius: 12, padding: 16,
      transition: 'all .2s',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
        <div style={{
          width: 38, height: 38, borderRadius: 10,
          background: `linear-gradient(135deg, ${SJ.blueRing}, ${SJ.blueSoft})`,
          color: SJ.blueDark, display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 15, fontWeight: 800,
        }}>{job.mark}</div>
        <span style={{
          padding: '3px 8px', background: SJ.greenBg, color: SJ.green,
          borderRadius: 6, fontSize: 11, fontWeight: 700,
        }}>{job.match}% match</span>
      </div>
      <h4 style={{ fontSize: 14, fontWeight: 700, color: SJ.ink, margin: '0 0 4px', lineHeight: 1.3 }}>
        {job.t}
      </h4>
      <div style={{ fontSize: 12.5, color: SJ.muted, marginBottom: 10 }}>{job.co} · {job.l}</div>
      <div style={{ fontSize: 12.5, color: '#854d0e', fontWeight: 600 }}>💰 {job.salary}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// EMPLOYER DASHBOARD
// ─────────────────────────────────────────────────────────────────────────
function EmployerDashboardScreen() {
  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' }}>
        <div style={{ display: 'flex', gap: 32, alignItems: 'flex-start' }}>
          <SidebarNav mode="employer" activeKey="dashboard" user={{
            name: 'Monzo Bank', email: 'hiring@monzo.com', initials: 'MB',
          }} />

          <div style={{ flex: 1, minWidth: 0 }}>
            {/* Top row */}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16, marginBottom: 22 }}>
              <div>
                <h2 style={{ fontSize: 28, fontWeight: 700, color: SJ.ink, margin: '0 0 4px', letterSpacing: '-0.02em' }}>
                  Employer Dashboard
                </h2>
                <p style={{ color: SJ.muted, margin: 0, fontSize: 15 }}>
                  Manage your vacancy submissions and monitor moderation status.
                </p>
              </div>
              <a style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '12px 22px', background: SJ.blue, color: '#fff',
                borderRadius: 10, textDecoration: 'none', fontSize: 14.5, fontWeight: 600,
                boxShadow: '0 8px 16px rgba(37,99,235,0.18)',
              }}>＋ Post a Job</a>
            </div>

            {/* Stats */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 22 }}>
              <EmpStat n="24" label="Total Jobs" tone={SJ.blue} />
              <EmpStat n="3"  label="Pending"    tone="#ca8a04" badge />
              <EmpStat n="18" label="Approved"   tone="#16a34a" />
              <EmpStat n="3"  label="Expired"    tone={SJ.muted} />
            </div>

            {/* Performance panel */}
            <div style={{
              background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16,
              padding: 22, marginBottom: 22, boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
                <div>
                  <h3 style={{ fontSize: 16, fontWeight: 700, color: SJ.ink2, margin: '0 0 2px' }}>
                    This month
                  </h3>
                  <p style={{ fontSize: 13, color: SJ.muted, margin: 0 }}>Aggregated across 24 live postings</p>
                </div>
                <div style={{ display: 'flex', gap: 6 }}>
                  {['7d', '30d', '90d', 'All'].map((p, i) => (
                    <button key={p} style={{
                      padding: '6px 12px', borderRadius: 8,
                      border: `1px solid ${i === 1 ? SJ.blue : SJ.line}`,
                      background: i === 1 ? SJ.blueSoft : '#fff',
                      color: i === 1 ? SJ.blue : SJ.text,
                      fontSize: 12.5, fontWeight: 600, cursor: 'pointer', fontFamily: SJ.font,
                    }}>{p}</button>
                  ))}
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
                <PerfStat n="18,420" delta="+12%" label="Total impressions" />
                <PerfStat n="3,142"  delta="+8%"  label="Job page views" />
                <PerfStat n="486"    delta="+22%" label="Apply clicks" />
                <PerfStat n="5.2%"   delta="−0.4%" negative label="Apply rate" />
              </div>
              <div style={{ marginTop: 22 }}>
                <BarChart />
              </div>
            </div>

            {/* Job postings table */}
            <div style={{
              background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16,
              boxShadow: '0 1px 3px rgba(0,0,0,0.05)', marginBottom: 22,
            }}>
              <div style={{
                padding: '14px 22px', borderBottom: `1px solid ${SJ.line}`,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap',
              }}>
                <span style={{ fontWeight: 700, fontSize: 15, color: SJ.ink2 }}>Your Job Postings</span>
                <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                  <div style={{ position: 'relative' }}>
                    <span style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', color: SJ.faint, fontSize: 13 }}>🔍</span>
                    <input placeholder="Filter jobs..." style={{
                      padding: '8px 12px 8px 30px', border: `1px solid ${SJ.line}`,
                      borderRadius: 8, fontSize: 13, outline: 'none', minWidth: 200, fontFamily: SJ.font,
                    }} />
                  </div>
                  <select defaultValue="all" style={{
                    padding: '8px 12px', border: `1px solid ${SJ.line}`, borderRadius: 8,
                    fontSize: 13, color: SJ.ink, background: '#fff', fontFamily: SJ.font, outline: 'none',
                  }}>
                    <option value="all">All status</option>
                    <option>Approved</option>
                    <option>Pending</option>
                    <option>Expired</option>
                  </select>
                </div>
              </div>

              <div style={{ overflowX: 'auto' }}>
                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
                  <thead>
                    <tr style={{ background: SJ.page, borderBottom: `1px solid ${SJ.line}` }}>
                      {['Job', 'Status', 'Views', 'Applies', 'Created', 'Actions'].map((h) => (
                        <th key={h} style={{
                          textAlign: 'left', padding: '12px 16px',
                          color: SJ.muted, fontWeight: 700, fontSize: 11,
                          textTransform: 'uppercase', letterSpacing: '0.06em',
                        }}>{h}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {[
                      { t: 'Senior Python Engineer', l: 'London · Remote OK', s: 'Approved', v: 1842, a: 47, d: '2 days ago' },
                      { t: 'Staff Product Designer', l: 'London · Hybrid', s: 'Approved', v: 986, a: 23, d: '5 days ago' },
                      { t: 'DevOps / SRE Engineer', l: 'Remote, UK', s: 'Pending', v: 0, a: 0, d: '4 hours ago' },
                      { t: 'Engineering Manager', l: 'London · Hybrid', s: 'Approved', v: 542, a: 14, d: '1 week ago' },
                      { t: 'Data Scientist — Pricing', l: 'Remote, UK', s: 'Pending', v: 0, a: 0, d: '1 hour ago' },
                      { t: 'iOS Engineer · Mobile', l: 'London', s: 'Expired', v: 312, a: 8, d: '2 months ago' },
                    ].map((j, i, arr) => (
                      <tr key={i} style={{ borderBottom: i < arr.length - 1 ? '1px solid #f3f4f6' : 'none' }}>
                        <td style={{ padding: '14px 16px' }}>
                          <div style={{ fontWeight: 600, color: SJ.ink2, marginBottom: 2 }}>{j.t}</div>
                          <div style={{ fontSize: 13, color: SJ.muted }}>{j.l}</div>
                        </td>
                        <td style={{ padding: '14px 16px' }}><StatusPill status={j.s} /></td>
                        <td style={{ padding: '14px 16px', fontWeight: 600, color: SJ.ink }}>{j.v.toLocaleString()}</td>
                        <td style={{ padding: '14px 16px', fontWeight: 600, color: SJ.ink }}>{j.a}</td>
                        <td style={{ padding: '14px 16px', color: SJ.muted, fontSize: 13.5 }}>{j.d}</td>
                        <td style={{ padding: '14px 16px' }}>
                          {j.s === 'Approved' ? (
                            <div style={{ display: 'flex', gap: 6 }}>
                              <ActionBtn>View</ActionBtn>
                              <ActionBtn>Edit</ActionBtn>
                              <ActionBtn>···</ActionBtn>
                            </div>
                          ) : (
                            <span style={{ fontSize: 13, color: SJ.muted }}>Awaiting moderation</span>
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              <div style={{
                padding: '14px 22px', borderTop: `1px solid ${SJ.line}`,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8,
              }}>
                <span style={{ fontSize: 13, color: SJ.muted }}>Showing 1–6 of 24 jobs</span>
                <div style={{ display: 'flex', gap: 6 }}>
                  <a style={{ padding: '8px 14px', border: `1px solid ${SJ.line}`, borderRadius: 8, color: '#4b5563', textDecoration: 'none', fontSize: 13 }}>Previous</a>
                  <a style={{ padding: '8px 14px', background: SJ.blue, color: '#fff', borderRadius: 8, fontSize: 13, fontWeight: 600, textDecoration: 'none' }}>1</a>
                  <a style={{ padding: '8px 14px', border: `1px solid ${SJ.line}`, borderRadius: 8, color: '#4b5563', textDecoration: 'none', fontSize: 13 }}>2</a>
                  <a style={{ padding: '8px 14px', border: `1px solid ${SJ.line}`, borderRadius: 8, color: '#4b5563', textDecoration: 'none', fontSize: 13 }}>3</a>
                  <a style={{ padding: '8px 14px', border: `1px solid ${SJ.line}`, borderRadius: 8, color: '#4b5563', textDecoration: 'none', fontSize: 13 }}>Next</a>
                </div>
              </div>
            </div>

            {/* Two columns: applicants + tips */}
            <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 18, marginBottom: 22 }}>
              <div style={{
                background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16,
                boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
              }}>
                <div style={{
                  padding: '14px 22px', borderBottom: `1px solid ${SJ.line}`,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                }}>
                  <span style={{ fontWeight: 700, fontSize: 15, color: SJ.ink2 }}>Recent Applicants</span>
                  <a style={{ fontSize: 13, color: SJ.blue, textDecoration: 'none', fontWeight: 600 }}>View all 47 →</a>
                </div>
                <div style={{ padding: '4px 22px 14px' }}>
                  {[
                    { name: 'Sofia Martinez', for: 'Senior Python Engineer', time: '12 min', tag: 'New', exp: '6y experience' },
                    { name: 'James O\'Brien',  for: 'Senior Python Engineer', time: '1 hour',  tag: 'New', exp: '8y experience' },
                    { name: 'Priya Sharma',   for: 'Staff Product Designer', time: '3 hours', tag: '',    exp: '5y experience' },
                    { name: 'Marcus Chen',    for: 'Engineering Manager',    time: '6 hours', tag: '',    exp: '12y experience' },
                    { name: 'Aiko Tanaka',    for: 'Senior Python Engineer', time: 'Yesterday', tag: '',  exp: '4y experience' },
                  ].map((a, i, arr) => (
                    <div key={i} style={{
                      padding: '14px 0',
                      borderBottom: i < arr.length - 1 ? '1px solid #f3f4f6' : 'none',
                      display: 'flex', alignItems: 'center', gap: 12,
                    }}>
                      <div style={{
                        width: 36, height: 36, borderRadius: '50%',
                        background: `linear-gradient(135deg, ${SJ.heroFrom}, ${SJ.heroTo})`,
                        color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 13, fontWeight: 700, flexShrink: 0,
                      }}>{a.name.split(' ').map(p => p[0]).join('').slice(0, 2)}</div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                          <span style={{ fontWeight: 600, color: SJ.ink2, fontSize: 14 }}>{a.name}</span>
                          {a.tag && (
                            <span style={{
                              padding: '2px 7px', background: SJ.greenBg, color: SJ.green,
                              borderRadius: 5, fontSize: 10.5, fontWeight: 700,
                            }}>{a.tag}</span>
                          )}
                        </div>
                        <div style={{ fontSize: 12.5, color: SJ.muted, marginTop: 2 }}>
                          Applied to <span style={{ color: SJ.text }}>{a.for}</span> · {a.exp}
                        </div>
                      </div>
                      <span style={{ fontSize: 12.5, color: SJ.muted, whiteSpace: 'nowrap' }}>{a.time} ago</span>
                    </div>
                  ))}
                </div>
              </div>

              <div style={{
                background: 'linear-gradient(135deg, #faf5ff 0%, #eff6ff 100%)',
                border: '1px solid #e0e7ff', borderRadius: 16, padding: 22,
              }}>
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '6px 10px', marginBottom: 14, background: SJ.purpleBg,
                  color: '#6d28d9', borderRadius: 999,
                  fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
                }}>💡 Boost your reach</span>
                <h3 style={{ fontSize: 18, fontWeight: 700, color: SJ.ink, margin: '0 0 10px', lineHeight: 1.3 }}>
                  Premium placements get 4.2× more views
                </h3>
                <p style={{ fontSize: 13.5, color: '#4b5563', lineHeight: 1.6, margin: '0 0 14px' }}>
                  Pin your best openings to the top of search results, the swipe feed and email alerts.
                </p>
                <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 18px' }}>
                  {['Top of search for 30 days', 'Featured in daily alerts', 'Premium ★ badge'].map((t) => (
                    <li key={t} style={{ position: 'relative', paddingLeft: 22, marginBottom: 8, fontSize: 13.5, color: SJ.text }}>
                      <span style={{ position: 'absolute', left: 0, top: 1, color: SJ.purple, fontWeight: 700 }}>✓</span>
                      {t}
                    </li>
                  ))}
                </ul>
                <a style={{
                  display: 'inline-block', padding: '11px 20px', background: SJ.purple,
                  color: '#fff', borderRadius: 10, fontSize: 13.5, fontWeight: 700, textDecoration: 'none',
                  boxShadow: '0 10px 20px rgba(124,58,237,0.20)',
                }}>Upgrade to Premium</a>
              </div>
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}

function EmpStat({ n, label, tone, badge }) {
  return (
    <div style={{
      background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16,
      padding: 20, textAlign: 'center', boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
      position: 'relative',
    }}>
      {badge && (
        <span style={{
          position: 'absolute', top: 12, right: 12,
          width: 8, height: 8, borderRadius: '50%', background: '#ca8a04',
          boxShadow: '0 0 0 4px #fef9c3',
        }} />
      )}
      <div style={{ fontSize: 30, fontWeight: 800, color: tone, letterSpacing: '-0.02em' }}>{n}</div>
      <div style={{ fontSize: 13.5, color: SJ.muted, marginTop: 4 }}>{label}</div>
    </div>
  );
}

function PerfStat({ n, delta, label, negative }) {
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
        <span style={{ fontSize: 26, fontWeight: 800, color: SJ.ink, letterSpacing: '-0.02em' }}>{n}</span>
        <span style={{
          fontSize: 12, fontWeight: 700,
          color: negative ? '#dc2626' : '#16a34a',
        }}>{delta}</span>
      </div>
      <div style={{ fontSize: 13, color: SJ.muted }}>{label}</div>
    </div>
  );
}

function StatusPill({ status }) {
  const map = {
    Approved: { bg: SJ.greenBg, fg: SJ.green, dot: '#16a34a' },
    Pending:  { bg: '#fef9c3',  fg: '#854d0e', dot: '#ca8a04' },
    Expired:  { bg: '#f3f4f6',  fg: '#4b5563', dot: '#9ca3af' },
  };
  const m = map[status];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px', borderRadius: 8, background: m.bg, color: m.fg,
      fontSize: 12.5, fontWeight: 600,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: m.dot }} />
      {status}
    </span>
  );
}

function ActionBtn({ children }) {
  return (
    <button style={{
      padding: '5px 10px', border: `1px solid ${SJ.line}`,
      background: '#fff', color: SJ.text, borderRadius: 6,
      fontSize: 12.5, fontWeight: 500, cursor: 'pointer', fontFamily: SJ.font,
    }}>{children}</button>
  );
}

function BarChart() {
  // Synthetic 30-day data — paired bars: views (light) + applies (dark)
  const data = [
    32, 45, 51, 38, 62, 88, 71, 64, 82, 96, 78, 64, 92, 105, 88,
    74, 88, 124, 96, 82, 91, 118, 138, 104, 92, 108, 142, 128, 114, 132,
  ];
  const max = Math.max(...data);
  const W = 760, H = 140, gap = 4;
  const barW = (W - gap * (data.length - 1)) / data.length;
  return (
    <div style={{
      borderTop: `1px solid ${SJ.line}`, paddingTop: 18, marginTop: 4,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
        <span style={{ fontSize: 12.5, fontWeight: 700, color: SJ.text }}>Daily views, last 30 days</span>
        <div style={{ display: 'flex', gap: 14, fontSize: 12, color: SJ.muted }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 10, height: 10, background: SJ.blue, borderRadius: 2 }} /> Views
          </span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 10, height: 10, background: SJ.blueRing, borderRadius: 2 }} /> 7d avg
          </span>
        </div>
      </div>
      <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%', height: 140, display: 'block' }} preserveAspectRatio="none">
        {/* grid lines */}
        {[0, 0.25, 0.5, 0.75, 1].map((t) => (
          <line key={t} x1="0" x2={W} y1={H - t * (H - 20) - 10} y2={H - t * (H - 20) - 10}
                stroke="#f1f5f9" strokeWidth="1" />
        ))}
        {data.map((v, i) => {
          const h = (v / max) * (H - 20);
          const x = i * (barW + gap);
          const y = H - h - 10;
          return <rect key={i} x={x} y={y} width={barW} height={h} rx="2" fill={i >= 23 ? SJ.blue : '#bfdbfe'} />;
        })}
      </svg>
    </div>
  );
}

Object.assign(window, { SeekerDashboardScreen, EmployerDashboardScreen });