// ScrollJob v2 — Saved jobs (desktop), Resume builder, Employer dashboard, Pricing

// ────────────────────────────────────────────────────────────────────────
// SAVED JOBS
// ────────────────────────────────────────────────────────────────────────
function V2SavedJobsScreen() {
  const seekerNav = [
    ['dashboard', 'Dashboard', 'home'],
    ['saved',     'Saved jobs', 'bookmark', 8],
    ['applied',   'Applied',    'check', 12],
    ['alerts',    'Job alerts', 'bell'],
    ['resume',    'Resume',     'document'],
    ['settings',  'Settings',   'sliders'],
  ];
  return (
    <div style={{ background: V2.bg, fontFamily: V2.font, color: V2.ink, minHeight: '100%' }}>
      <V2Header active="" variant="seeker" />
      <main style={{ maxWidth: 1280, margin: '0 auto', padding: '32px 32px 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '240px minmax(0, 1fr)', gap: 36, alignItems: 'start' }}>
          <V2SeekerSidebar items={seekerNav} active="saved" />

          <div>
            <header style={{ marginBottom: 22 }}>
              <h1 style={{ margin: '0 0 4px', fontSize: 28, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
                Saved jobs
              </h1>
              <p style={{ margin: 0, fontSize: 15, color: V2.muted }}>
                <strong style={{ color: V2.ink }}>8</strong> jobs shortlisted · all still active
              </p>
            </header>

            {/* Filter row */}
            <div style={{ display: 'flex', gap: 8, marginBottom: 18, flexWrap: 'wrap', alignItems: 'center' }}>
              {[['All', 8, true], ['Active', 8], ['Closing soon', 2], ['Recently added', 3]].map(([t, n, on]) => (
                <button key={t} style={{
                  padding: '8px 14px', borderRadius: 999, fontSize: 13, fontWeight: 600,
                  border: `1px solid ${on ? V2.ink : V2.line}`,
                  background: on ? V2.ink : '#fff', color: on ? '#fff' : V2.text,
                  cursor: 'pointer', fontFamily: V2.font,
                  display: 'inline-flex', alignItems: 'center', gap: 5,
                }}>{t} <span style={{ fontSize: 11, opacity: 0.7 }}>{n}</span></button>
              ))}
              <span style={{ flex: 1 }} />
              <V2Button variant="secondary" size="sm" icon="filter">Compare</V2Button>
            </div>

            {/* Saved cards */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[V2_JOBS[1], V2_JOBS[7], V2_JOBS[10], V2_JOBS[9], V2_JOBS[3]].map((j) => (
                <V2JobCard key={j.id} job={j} saved />
              ))}
            </div>

            {/* Empty-state pattern at bottom — graceful "you've reached the end" */}
            <div style={{
              marginTop: 22, padding: '32px', textAlign: 'center',
              background: V2.bgAlt, borderRadius: V2.rLg,
            }}>
              <div style={{
                width: 56, height: 56, margin: '0 auto 14px',
                borderRadius: '50%', background: '#fff',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name="bookmark" size={26} color={V2.primary} />
              </div>
              <h3 style={{ margin: '0 0 6px', fontSize: 18, fontWeight: 700, color: V2.ink }}>
                That's all your saved jobs.
              </h3>
              <p style={{ margin: '0 0 16px', fontSize: 14, color: V2.text }}>
                Keep your shortlist fresh — explore more roles or try swipe mode.
              </p>
              <div style={{ display: 'inline-flex', gap: 8 }}>
                <V2Button variant="primary" size="md" icon="search">Find more jobs</V2Button>
                <V2Button variant="secondary" size="md" icon="flame">Open swipe</V2Button>
              </div>
            </div>
          </div>
        </div>
      </main>
      <V2Footer />
    </div>
  );
}

function V2SeekerSidebar({ items, active }) {
  return (
    <aside style={{
      background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
      padding: 16, position: 'sticky', top: 86,
    }}>
      <div style={{ padding: '8px 12px 14px', marginBottom: 8, borderBottom: `1px solid ${V2.lineSoft}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{
            width: 36, height: 36, borderRadius: '50%',
            background: `linear-gradient(135deg, ${V2.primary}, ${V2.primaryDark})`,
            color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 13, fontWeight: 800,
          }}>EM</span>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: V2.ink, lineHeight: 1.2 }}>Emma Carter</div>
            <div style={{ fontSize: 12, color: V2.muted }}>Care assistant · Bristol</div>
          </div>
        </div>
      </div>
      <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        {items.map(([key, label, icon, count]) => {
          const on = key === active;
          return (
            <a key={key} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '10px 12px', borderRadius: 10,
              background: on ? V2.primarySoft : 'transparent',
              color: on ? V2.primaryInk : V2.text,
              fontWeight: on ? 600 : 500, fontSize: 14, textDecoration: 'none',
            }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                <Icon name={icon} size={18} color={on ? V2.primary : V2.muted} />
                {label}
              </span>
              {count && (
                <span style={{ fontSize: 11.5, fontWeight: 700, color: on ? V2.primary : V2.muted }}>{count}</span>
              )}
            </a>
          );
        })}
      </nav>
    </aside>
  );
}

// ────────────────────────────────────────────────────────────────────────
// RESUME BUILDER (editor)
// ────────────────────────────────────────────────────────────────────────
function V2ResumeBuilderScreen() {
  const sections = [
    { id: 'basics',      label: 'About you',     done: true,  icon: 'user' },
    { id: 'experience',  label: 'Work history',  done: true,  icon: 'briefcase', active: true },
    { id: 'education',   label: 'Education',     done: true,  icon: 'graduate' },
    { id: 'skills',      label: 'Skills',        done: false, icon: 'star' },
    { id: 'certs',       label: 'Certifications', done: false, icon: 'shield' },
    { id: 'references',  label: 'References',    done: false, icon: 'mail' },
  ];
  return (
    <div style={{ background: V2.bg, fontFamily: V2.font, color: V2.ink, minHeight: '100%' }}>
      <V2Header active="" variant="seeker" />
      <main style={{ maxWidth: 1400, margin: '0 auto', padding: '24px 32px 0' }}>
        {/* Top bar */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          marginBottom: 22, flexWrap: 'wrap', gap: 16,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <a style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '6px 10px', borderRadius: 8,
              color: V2.text, fontSize: 14, fontWeight: 500, textDecoration: 'none',
            }}>
              <Icon name="arrow-left" size={16} /> All resumes
            </a>
            <V2Badge tone="success" size="md" icon="check">Published</V2Badge>
            <span style={{ fontSize: 13, color: V2.muted }}>scrolljob.org/r/emma-carter</span>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <V2Badge tone="success" size="md">Saved · 3s ago</V2Badge>
            <V2Button variant="secondary" size="sm" icon="eye">Preview</V2Button>
            <V2Button variant="primary" size="sm">Update published version</V2Button>
          </div>
        </div>

        {/* Completion */}
        <div style={{
          background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
          padding: 18, marginBottom: 18,
          display: 'flex', alignItems: 'center', gap: 20,
        }}>
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
              <span style={{ fontSize: 14, fontWeight: 700, color: V2.ink }}>Completion</span>
              <span style={{ fontSize: 13, color: V2.muted }}>
                <strong style={{ color: V2.primary }}>72%</strong> complete · 3 more sections to reach 100%
              </span>
            </div>
            <div style={{ height: 8, background: V2.line, borderRadius: 999, overflow: 'hidden' }}>
              <div style={{ width: '72%', height: '100%', background: `linear-gradient(90deg, ${V2.primary}, ${V2.primaryDark})`, borderRadius: 999 }} />
            </div>
          </div>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '240px minmax(0, 1fr) 420px', gap: 24, alignItems: 'start',
        }}>
          {/* Section nav */}
          <aside style={{
            background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
            padding: 12, position: 'sticky', top: 86,
          }}>
            {sections.map((s) => (
              <a key={s.id} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '10px 12px', borderRadius: 10,
                background: s.active ? V2.primarySoft : 'transparent',
                color: s.active ? V2.primaryInk : V2.text,
                fontSize: 14, fontWeight: s.active ? 600 : 500,
                textDecoration: 'none',
                marginBottom: 2,
              }}>
                <Icon name={s.icon} size={18} color={s.active ? V2.primary : V2.muted} />
                <span style={{ flex: 1 }}>{s.label}</span>
                {s.done && (
                  <span style={{
                    width: 18, height: 18, borderRadius: '50%',
                    background: V2.success, color: '#fff',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <Icon name="check" size={11} />
                  </span>
                )}
              </a>
            ))}
            <button style={{
              marginTop: 8, padding: '10px 12px', borderRadius: 10,
              border: `1px dashed ${V2.lineStrong}`, background: 'transparent',
              color: V2.text, fontSize: 13.5, fontWeight: 600, cursor: 'pointer',
              fontFamily: V2.font, display: 'inline-flex', alignItems: 'center', gap: 8, width: '100%',
            }}>
              <Icon name="plus" size={14} /> Add section
            </button>
          </aside>

          {/* Editor */}
          <div>
            <div style={{
              background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rXl,
              padding: 28, marginBottom: 16,
            }}>
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14,
              }}>
                <div>
                  <h2 style={{ margin: '0 0 4px', fontSize: 20, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>
                    Work history
                  </h2>
                  <p style={{ margin: 0, fontSize: 13.5, color: V2.muted }}>
                    Add your last 5 years of work. Most relevant first.
                  </p>
                </div>
                <V2Button variant="secondary" size="sm" icon="plus">Add role</V2Button>
              </div>

              {/* Existing roles */}
              {[
                { role: 'Care Assistant', co: 'Sunrise Care Home', from: 'Mar 2022', to: 'Present', loc: 'Bristol', open: true },
                { role: 'Healthcare Support Worker', co: 'NHS Trust', from: 'Sep 2020', to: 'Feb 2022', loc: 'Bath' },
                { role: 'Retail Assistant', co: 'Sainsbury\u2019s', from: 'Jun 2019', to: 'Aug 2020', loc: 'Bristol' },
              ].map((r, i) => <RoleBlock key={i} {...r} />)}
            </div>
          </div>

          {/* Live preview */}
          <aside style={{ position: 'sticky', top: 86 }}>
            <div style={{
              background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
              overflow: 'hidden', boxShadow: V2.shadow,
            }}>
              <div style={{
                padding: '8px 14px', background: V2.bgAlt, borderBottom: `1px solid ${V2.line}`,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                <span style={{ display: 'inline-flex', gap: 6, alignItems: 'center', fontSize: 12, color: V2.muted, fontWeight: 600 }}>
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: V2.success }} />
                  Live preview
                </span>
                <div style={{ display: 'inline-flex', gap: 6 }}>
                  <button style={previewToggle(true)}>Letter</button>
                  <button style={previewToggle()}>A4</button>
                </div>
              </div>
              <div style={{ padding: 20, background: '#FAFAF7' }}>
                <ResumePreview />
              </div>
            </div>

            {/* Theme picker */}
            <div style={{
              background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
              padding: 16, marginTop: 14,
            }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: V2.ink, marginBottom: 10 }}>Theme</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
                {[
                  { name: 'Clean',  bg: '#fff', accent: V2.primary, active: true },
                  { name: 'Warm',   bg: '#fef3c7', accent: '#92400e' },
                  { name: 'Mono',   bg: '#f8fafc', accent: '#0f172a' },
                  { name: 'Bold',   bg: '#FCE7F3', accent: '#9D174D' },
                ].map((t) => (
                  <button key={t.name} style={{
                    padding: 8, borderRadius: 10,
                    border: `2px solid ${t.active ? V2.primary : V2.line}`,
                    background: '#fff', cursor: 'pointer', fontFamily: V2.font, textAlign: 'left',
                  }}>
                    <div style={{ height: 36, background: t.bg, borderRadius: 6, marginBottom: 6, position: 'relative', overflow: 'hidden' }}>
                      <div style={{ position: 'absolute', top: 6, left: 6, right: 6, height: 4, background: t.accent, borderRadius: 2 }} />
                      <div style={{ position: 'absolute', top: 14, left: 6, width: '40%', height: 3, background: V2.lineStrong, borderRadius: 2 }} />
                      <div style={{ position: 'absolute', top: 21, left: 6, width: '60%', height: 3, background: V2.lineStrong, borderRadius: 2 }} />
                    </div>
                    <div style={{ fontSize: 11.5, fontWeight: 600, color: V2.ink }}>{t.name}</div>
                  </button>
                ))}
              </div>
            </div>
          </aside>
        </div>
      </main>
      <V2Footer />
    </div>
  );
}

function previewToggle(on) {
  return {
    padding: '4px 10px', borderRadius: 6, fontSize: 11.5, fontWeight: 600,
    border: `1px solid ${on ? V2.line : 'transparent'}`,
    background: on ? '#fff' : 'transparent',
    color: on ? V2.ink : V2.muted, cursor: 'pointer', fontFamily: V2.font,
  };
}

function RoleBlock({ role, co, from, to, loc, open }) {
  return (
    <div style={{
      border: `1px solid ${V2.line}`, borderRadius: V2.rMd,
      marginBottom: 10, background: open ? '#fff' : V2.bgAlt,
    }}>
      <div style={{
        padding: '14px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12,
        borderBottom: open ? `1px solid ${V2.line}` : 'none', cursor: 'pointer',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
          <span style={{
            width: 32, height: 32, borderRadius: 8, background: V2.bgAlt,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name="briefcase" size={16} color={V2.muted} />
          </span>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: V2.ink }}>{role}</div>
            <div style={{ fontSize: 12.5, color: V2.muted }}>{co} · {from} – {to} · {loc}</div>
          </div>
        </div>
        <Icon name={open ? 'chevron-down' : 'chevron-right'} size={18} color={V2.muted} />
      </div>
      {open && (
        <div style={{ padding: 16 }}>
          <FieldRow>
            <FieldCol label="Job title"><FieldInput value="Care Assistant" /></FieldCol>
            <FieldCol label="Employer"><FieldInput value="Sunrise Care Home" /></FieldCol>
          </FieldRow>
          <FieldRow>
            <FieldCol label="Start date"><FieldInput value="March 2022" /></FieldCol>
            <FieldCol label="End date"><FieldInput value="Present" /></FieldCol>
          </FieldRow>
          <FieldCol label="Location" full><FieldInput value="Bristol, UK" /></FieldCol>
          <FieldCol label="Description" full>
            <textarea defaultValue={
              "• Supported up to 12 residents per shift with personal care, mobility and meals.\n" +
              "• Worked closely with families and visiting GPs on care plans.\n" +
              "• Trained 4 new starters as a designated buddy.\n" +
              "• Completed NVQ Level 2 in Care during employment."
            } style={{
              width: '100%', minHeight: 110, padding: '10px 12px',
              border: `1px solid ${V2.line}`, borderRadius: 10, fontSize: 13.5,
              outline: 'none', fontFamily: V2.font, color: V2.ink, lineHeight: 1.55, resize: 'vertical',
              boxSizing: 'border-box',
            }} />
          </FieldCol>
        </div>
      )}
    </div>
  );
}

function FieldRow({ children }) {
  return <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14, marginBottom: 14 }}>{children}</div>;
}
function FieldCol({ label, children, full }) {
  return (
    <div style={{ gridColumn: full ? '1 / -1' : 'auto', marginBottom: 12 }}>
      <label style={{ display: 'block', fontSize: 12, color: V2.muted, fontWeight: 600, marginBottom: 6 }}>{label}</label>
      {children}
    </div>
  );
}
function FieldInput({ value }) {
  return (
    <input defaultValue={value} style={{
      width: '100%', padding: '10px 12px', border: `1px solid ${V2.line}`,
      borderRadius: 10, fontSize: 13.5, outline: 'none', fontFamily: V2.font, color: V2.ink, boxSizing: 'border-box',
    }} />
  );
}

function ResumePreview() {
  return (
    <div style={{ background: '#fff', borderRadius: 6, padding: 18, boxShadow: V2.shadowSm, fontFamily: V2.font }}>
      <div style={{ borderBottom: `2px solid ${V2.primary}`, paddingBottom: 10, marginBottom: 14 }}>
        <div style={{ fontSize: 18, fontWeight: 800, color: V2.ink, letterSpacing: '-0.02em' }}>Emma Carter</div>
        <div style={{ fontSize: 12, color: V2.primary, fontWeight: 600, marginTop: 2 }}>
          Care Assistant · NVQ Level 2
        </div>
        <div style={{ fontSize: 10.5, color: V2.muted, marginTop: 4 }}>
          Bristol, UK · emma.carter@example.com · 07700 900 123
        </div>
      </div>
      <PreviewH>Summary</PreviewH>
      <p style={{ fontSize: 10.5, color: V2.text, margin: '0 0 10px', lineHeight: 1.55 }}>
        Caring residential care assistant with 4 years in dementia care. Excellent track record on safeguarding audits and resident satisfaction scores.
      </p>
      <PreviewH>Work history</PreviewH>
      <PreviewRole role="Care Assistant" co="Sunrise Care Home" range="Mar 2022 – Present" />
      <PreviewRole role="Healthcare Support Worker" co="NHS Trust" range="Sep 2020 – Feb 2022" />
      <PreviewRole role="Retail Assistant" co="Sainsbury\u2019s" range="Jun 2019 – Aug 2020" />
      <PreviewH>Skills</PreviewH>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
        {['Personal care', 'Dementia care', 'Medication awareness', 'Safeguarding', 'Manual handling'].map((s) => (
          <span key={s} style={{ padding: '2px 6px', background: V2.primarySoft, color: V2.primaryInk, borderRadius: 4, fontSize: 9.5, fontWeight: 600 }}>{s}</span>
        ))}
      </div>
    </div>
  );
}
function PreviewH({ children }) {
  return (
    <div style={{
      fontSize: 9.5, fontWeight: 800, color: V2.primary,
      letterSpacing: '0.10em', textTransform: 'uppercase',
      margin: '10px 0 4px', paddingBottom: 2, borderBottom: `1px solid ${V2.primaryRing}`,
    }}>{children}</div>
  );
}
function PreviewRole({ role, co, range }) {
  return (
    <div style={{ marginBottom: 8 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5, fontWeight: 700, color: V2.ink }}>
        <span>{role}</span><span style={{ color: V2.muted, fontWeight: 500 }}>{range}</span>
      </div>
      <div style={{ fontSize: 10, color: V2.primary, fontWeight: 600 }}>{co}</div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────
// EMPLOYER DASHBOARD
// ────────────────────────────────────────────────────────────────────────
function V2EmployerDashboardScreen() {
  return (
    <div style={{ background: V2.bg, fontFamily: V2.font, color: V2.ink, minHeight: '100%' }}>
      <V2Header active="" variant="seeker" />
      <main style={{ maxWidth: 1280, margin: '0 auto', padding: '32px 32px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 22, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <h1 style={{ margin: '0 0 4px', fontSize: 28, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
              Hiring overview
            </h1>
            <p style={{ margin: 0, fontSize: 15, color: V2.muted }}>
              Lavender House Care · 4 live jobs · last 30 days
            </p>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <V2Button variant="secondary" size="md" icon="document">Export report</V2Button>
            <V2Button variant="primary" size="md" icon="plus">Post a job</V2Button>
          </div>
        </div>

        {/* KPI strip */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 22,
        }}>
          <V2Stat label="Total views"        value="4,218" delta="+12% vs last month" icon="eye" />
          <V2Stat label="Apply clicks"        value="186"   delta="+8% vs last month" icon="check" />
          <V2Stat label="Apply rate"          value="4.4%"  delta="−0.3%" deltaTone="danger" icon="target" />
          <V2Stat label="Median time to apply" value="6 hours" delta="2× faster than average" deltaTone="success" icon="clock" />
        </div>

        {/* Trend + Boost upsell */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 18, marginBottom: 22 }}>
          <div style={{
            background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
            padding: 22,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
              <h2 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: V2.ink }}>Activity, last 30 days</h2>
              <div style={{ display: 'flex', gap: 4 }}>
                {['7d', '30d', '90d', 'All'].map((p, i) => (
                  <button key={p} style={{
                    padding: '5px 10px', borderRadius: 6,
                    border: `1px solid ${i === 1 ? V2.primary : V2.line}`,
                    background: i === 1 ? V2.primarySoft : '#fff',
                    color: i === 1 ? V2.primaryInk : V2.text,
                    fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: V2.font,
                  }}>{p}</button>
                ))}
              </div>
            </div>
            <EmpChart />
            <div style={{ display: 'flex', gap: 18, marginTop: 12, fontSize: 12, color: V2.muted }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 10, height: 10, background: V2.primary, borderRadius: 2 }} /> Views
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 10, height: 10, background: '#0EA5E9', borderRadius: 2 }} /> Apply clicks
              </span>
            </div>
          </div>

          {/* Recommendation card */}
          <div style={{
            background: V2.ink, color: '#fff',
            borderRadius: V2.rLg, padding: 24, position: 'relative', overflow: 'hidden',
          }}>
            <div aria-hidden style={{
              position: 'absolute', top: -100, right: -50, width: 280, height: 280,
              borderRadius: '50%', background: `radial-gradient(circle at center, ${V2.primary}33 0%, transparent 70%)`,
            }} />
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '4px 10px', borderRadius: 999,
              background: 'rgba(255,255,255,0.10)', fontSize: 11.5, fontWeight: 700,
              textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: 14,
            }}>
              <Icon name="sparkle" size={12} color="#FCD980" /> Recommendation
            </span>
            <h3 style={{ margin: '0 0 8px', fontSize: 19, fontWeight: 700, letterSpacing: '-0.01em' }}>
              Feature your Care Assistant role
            </h3>
            <p style={{ margin: '0 0 18px', fontSize: 14, color: '#CFD4DC', lineHeight: 1.55 }}>
              Featured posts get <strong style={{ color: '#fff' }}>4.2× more views</strong> and reach first applicants <strong style={{ color: '#fff' }}>2.4× faster</strong>.
            </p>
            <V2Button variant="primary" size="md" iconRight="arrow-right">Boost this role</V2Button>
            <div style={{ marginTop: 12, fontSize: 12, color: '#98A2B3' }}>£79 / 30 days · cancel anytime</div>
          </div>
        </div>

        {/* Job postings table */}
        <div style={{
          background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, overflow: 'hidden',
        }}>
          <div style={{
            padding: '14px 22px', borderBottom: `1px solid ${V2.line}`,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12,
          }}>
            <span style={{ fontWeight: 700, fontSize: 15, color: V2.ink }}>Your job postings</span>
            <div style={{ display: 'flex', gap: 6 }}>
              {['All', 'Live', 'Paused', 'Expired'].map((t, i) => (
                <button key={t} style={{
                  padding: '6px 12px', borderRadius: 6,
                  border: `1px solid ${i === 0 ? V2.ink : V2.line}`,
                  background: i === 0 ? V2.ink : '#fff',
                  color: i === 0 ? '#fff' : V2.text,
                  fontSize: 12.5, fontWeight: 600, cursor: 'pointer', fontFamily: V2.font,
                }}>{t}</button>
              ))}
            </div>
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
            <thead>
              <tr style={{ background: V2.bgAlt, borderBottom: `1px solid ${V2.line}` }}>
                {['Job', 'Status', 'Views', 'Applies', 'Rate', 'Performance', 'Posted', 'Actions'].map((h) => (
                  <th key={h} style={{
                    textAlign: 'left', padding: '12px 18px',
                    color: V2.muted, fontWeight: 700, fontSize: 11,
                    textTransform: 'uppercase', letterSpacing: '0.06em',
                  }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                { t: 'Care Assistant — Residential Home', loc: 'Bristol', status: 'Live', tier: 'Featured', v: 1842, a: 86, r: 4.7, perf: 'high',  posted: '5 days' },
                { t: 'Senior Care Assistant',              loc: 'Bristol', status: 'Live', tier: 'Standard', v: 612,  a: 24, r: 3.9, perf: 'mid',   posted: '2 weeks' },
                { t: 'Night Care Assistant',               loc: 'Bristol', status: 'Live', tier: 'Standard', v: 248,  a: 6,  r: 2.4, perf: 'low',   posted: '3 weeks' },
                { t: 'Care Home Cook',                     loc: 'Bristol', status: 'Paused', tier: 'Standard', v: 142, a: 4, r: 2.8, perf: 'mid', posted: '5 weeks' },
              ].map((j, i, arr) => (
                <tr key={i} style={{ borderBottom: i < arr.length - 1 ? `1px solid ${V2.lineSoft}` : 'none' }}>
                  <td style={{ padding: '14px 18px' }}>
                    <div style={{ fontWeight: 600, color: V2.ink, marginBottom: 2 }}>{j.t}</div>
                    <div style={{ fontSize: 12.5, color: V2.muted, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                      <Icon name="pin" size={12} color={V2.muted} /> {j.loc}
                    </div>
                  </td>
                  <td style={{ padding: '14px 18px' }}>
                    <V2Badge tone={j.status === 'Live' ? 'success' : 'warn'} size="md">{j.status}</V2Badge>
                    {j.tier === 'Featured' && <div style={{ marginTop: 4 }}><V2Badge tone="featured" size="sm">Featured</V2Badge></div>}
                  </td>
                  <td style={{ padding: '14px 18px', fontWeight: 600, color: V2.ink, fontVariantNumeric: 'tabular-nums' }}>{j.v.toLocaleString()}</td>
                  <td style={{ padding: '14px 18px', fontWeight: 600, color: V2.ink, fontVariantNumeric: 'tabular-nums' }}>{j.a}</td>
                  <td style={{ padding: '14px 18px', color: V2.text, fontVariantNumeric: 'tabular-nums' }}>{j.r}%</td>
                  <td style={{ padding: '14px 18px' }}><PerfBar level={j.perf} /></td>
                  <td style={{ padding: '14px 18px', color: V2.muted, fontSize: 13 }}>{j.posted} ago</td>
                  <td style={{ padding: '14px 18px' }}>
                    <V2Button variant="ghost" size="sm">···</V2Button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </main>
      <V2Footer />
    </div>
  );
}

function EmpChart() {
  const views   = [22, 28, 35, 30, 42, 58, 51, 44, 62, 76, 58, 44, 72, 85, 68, 54, 68, 94, 76, 62, 71, 88, 102, 84, 72, 88, 112, 98, 84, 102];
  const applies = views.map((v) => Math.max(2, Math.round(v * 0.05)));
  const max = Math.max(...views);
  const W = 760, H = 140, gap = 4;
  const barW = (W - gap * (views.length - 1)) / views.length;
  return (
    <svg viewBox={`0 0 ${W} ${H + 10}`} style={{ width: '100%', height: 150, display: 'block' }} preserveAspectRatio="none">
      {[0, 0.25, 0.5, 0.75, 1].map((t) => (
        <line key={t} x1="0" x2={W} y1={H - t * H} y2={H - t * H} stroke={V2.lineSoft} strokeWidth="1" />
      ))}
      {views.map((v, i) => {
        const h = (v / max) * H, x = i * (barW + gap), y = H - h;
        const ah = (applies[i] / max) * H * 4;
        return (
          <g key={i}>
            <rect x={x} y={y} width={barW} height={h} rx="2" fill={V2.primary} opacity={i >= 26 ? 1 : 0.32} />
            <rect x={x} y={H - ah} width={barW} height={ah} rx="2" fill="#0EA5E9" />
          </g>
        );
      })}
    </svg>
  );
}

function PerfBar({ level }) {
  const colors = { high: V2.success, mid: V2.warn, low: V2.danger };
  const pct = { high: 90, mid: 55, low: 25 }[level];
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
      <div style={{ width: 60, height: 5, background: V2.line, borderRadius: 3, overflow: 'hidden' }}>
        <div style={{ width: `${pct}%`, height: '100%', background: colors[level] }} />
      </div>
      <span style={{ fontSize: 12, color: colors[level], fontWeight: 700, textTransform: 'capitalize' }}>{level}</span>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────
// PRICING / ADVERTISERS
// ────────────────────────────────────────────────────────────────────────
function V2PricingScreen() {
  const tiers = [
    {
      name: 'Standard',
      price: 'Free', sub: 'For occasional hiring',
      desc: 'Post a job and reach our active job seekers.',
      cta: 'Post for free', featured: false,
      features: ['1 active job posting', 'Standard placement in search', 'Included in daily job alerts', '30-day visibility'],
    },
    {
      name: 'Featured',
      price: '£79', period: '/ 30 days',
      sub: 'Most popular for busy hiring',
      desc: 'Pin a role to the top of search and the swipe feed.',
      cta: 'Feature a job', featured: true,
      features: ['All Standard features', 'Top of search results · 30 days', 'Pinned in mobile swipe feed', 'Featured badge', 'Real-time view analytics', '4.2× more views on average'],
    },
    {
      name: 'Sponsored',
      price: '£249', period: '/ month',
      sub: 'For multi-role hiring teams',
      desc: 'Dedicated email blast + custom company page.',
      cta: 'Talk to sales', featured: false,
      features: ['All Featured features', 'Custom branded company page', 'Dedicated email blast (1×/month)', 'Priority moderation · 2h SLA', 'Dedicated account manager', 'Bulk job import API'],
    },
  ];

  return (
    <div style={{ background: V2.bg, fontFamily: V2.font, color: V2.ink, minHeight: '100%' }}>
      <V2Header active="" />
      <main style={{ maxWidth: 1200, margin: '0 auto', padding: '64px 32px 0' }}>
        {/* Header */}
        <div style={{ textAlign: 'center', marginBottom: 36 }}>
          <span style={{
            display: 'inline-block', padding: '4px 12px', marginBottom: 14,
            background: V2.primarySoft, color: V2.primaryInk,
            border: `1px solid ${V2.primaryRing}`, borderRadius: 999,
            fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
          }}>For employers</span>
          <h1 style={{
            margin: '0 0 14px', fontSize: 48, fontWeight: 800,
            color: V2.ink, letterSpacing: '-0.03em', lineHeight: 1.1,
          }}>
            Hiring made faster.
          </h1>
          <p style={{
            margin: '0 auto', maxWidth: 600,
            fontSize: 18, color: V2.text, lineHeight: 1.55,
          }}>
            Reach 1.4 million UK job seekers. Free standard posts, paid boosts when you need to hire fast.
          </p>
        </div>

        {/* Proof strip */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
          maxWidth: 900, margin: '0 auto 48px',
        }}>
          {[
            { v: '4.2×',  l: 'More views with Featured', s: 'Based on 1,200 paid posts, last 90 days' },
            { v: '3.1×',  l: 'More apply clicks',          s: 'Featured vs. Standard, same role pairs' },
            { v: '2.4 days', l: 'Faster to first qualified applicant', s: 'Median across all paid tiers' },
          ].map((p) => (
            <div key={p.l} style={{
              background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, padding: 20,
            }}>
              <div style={{ fontSize: 32, fontWeight: 800, color: V2.primary, letterSpacing: '-0.02em' }}>{p.v}</div>
              <div style={{ fontSize: 14, fontWeight: 600, color: V2.ink, marginTop: 6 }}>{p.l}</div>
              <div style={{ fontSize: 11.5, color: V2.muted, marginTop: 6, lineHeight: 1.5 }}>{p.s}</div>
            </div>
          ))}
        </div>

        {/* Plans */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18,
          maxWidth: 1100, margin: '0 auto 64px',
        }}>
          {tiers.map((t) => <PricingTier key={t.name} t={t} />)}
        </div>

        {/* FAQ */}
        <div style={{ maxWidth: 760, margin: '0 auto 80px' }}>
          <h2 style={{
            textAlign: 'center', margin: '0 0 24px', fontSize: 26, fontWeight: 700,
            color: V2.ink, letterSpacing: '-0.02em',
          }}>Frequently asked</h2>
          {[
            ['Do I need a credit card to post for free?', 'No. Standard listings are free with no card required. You can stay on Standard forever.'],
            ['Can I cancel anytime?', 'Yes. Featured and Sponsored plans bill monthly and you can cancel at any time. Active boosts remain live until they expire.'],
            ['Do you support bulk uploads?',  'Sponsored customers can upload jobs by CSV or via our partner API. Talk to sales to set this up.'],
            ['What support do you offer?',    'Standard and Featured customers get email support within 24 hours. Sponsored customers have a dedicated account manager.'],
          ].map(([q, a], i) => (
            <details key={i} style={{
              padding: '18px 20px', borderBottom: `1px solid ${V2.line}`,
            }}>
              <summary style={{
                cursor: 'pointer', fontSize: 16, fontWeight: 700, color: V2.ink,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', listStyle: 'none',
              }}>
                {q}
                <Icon name="plus" size={18} color={V2.muted} />
              </summary>
              <p style={{ margin: '12px 0 0', fontSize: 14.5, color: V2.text, lineHeight: 1.65 }}>{a}</p>
            </details>
          ))}
        </div>
      </main>
      <V2Footer />
    </div>
  );
}

function PricingTier({ t }) {
  return (
    <div style={{
      background: '#fff',
      border: `${t.featured ? 2 : 1}px solid ${t.featured ? V2.primary : V2.line}`,
      borderRadius: V2.rXl, padding: '32px 28px',
      position: 'relative', display: 'flex', flexDirection: 'column',
      boxShadow: t.featured ? V2.shadowLg : V2.shadowSm,
      transform: t.featured ? 'translateY(-12px)' : 'none',
    }}>
      {t.featured && (
        <div style={{
          position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)',
          padding: '4px 14px', background: V2.primary, color: '#fff',
          borderRadius: 999, fontSize: 11, fontWeight: 800,
          letterSpacing: '0.08em', textTransform: 'uppercase',
        }}>Most popular</div>
      )}
      <div style={{ fontSize: 15, fontWeight: 700, color: V2.text, marginBottom: 6 }}>{t.name}</div>
      <div style={{ fontSize: 12, color: V2.muted, marginBottom: 18 }}>{t.sub}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 18 }}>
        <span style={{ fontSize: 42, fontWeight: 800, color: V2.ink, letterSpacing: '-0.03em', lineHeight: 1 }}>{t.price}</span>
        {t.period && <span style={{ fontSize: 14, color: V2.muted }}>{t.period}</span>}
      </div>
      <p style={{ margin: '0 0 24px', fontSize: 14, color: V2.text, lineHeight: 1.55 }}>{t.desc}</p>
      <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 28px', flex: 1, display: 'grid', gap: 10 }}>
        {t.features.map((f) => (
          <li key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 13.5, color: V2.text, lineHeight: 1.5 }}>
            <span style={{
              width: 18, height: 18, borderRadius: '50%',
              background: t.featured ? V2.primary : V2.successBg,
              color: t.featured ? '#fff' : V2.success,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0, marginTop: 1,
            }}>
              <Icon name="check" size={11} />
            </span>
            {f}
          </li>
        ))}
      </ul>
      <V2Button variant={t.featured ? 'primary' : 'secondary'} size="lg" full>{t.cta}</V2Button>
    </div>
  );
}

Object.assign(window, {
  V2SavedJobsScreen, V2ResumeBuilderScreen, V2EmployerDashboardScreen, V2PricingScreen,
  V2SeekerSidebar,
  FieldRow, FieldCol, FieldInput,
});