// ScrollJob v2 expansion #3 — Employer (Applications CRM, Billing, AI rewrite)

// ─── 1) APPLICATIONS INBOX (CRM PIPELINE) ────────────────────────────────
function V2EmpApplicationsInboxScreen() {
  const stages = [
    { key: 'applied',   label: 'Applied',    count: 24,
      cards: [
        { name: 'Sofia Martinez', match: 92, exp: '6y · Sunrise', when: '2h', cover: true,  resume: true,  fresh: true },
        { name: 'James O\u2019Brien', match: 88, exp: '8y · Bupa',    when: '4h', cover: false, resume: true,  fresh: true },
        { name: 'Anonymous · #218', match: 84, exp: '4y · Caremark', when: '6h', cover: false, resume: true,  fresh: true, anon: true },
        { name: 'Aiko Tanaka',    match: 79, exp: '5y · NHS',     when: '1d', cover: true,  resume: true },
        { name: 'Marcus Chen',    match: 71, exp: '12y · Sunrise', when: '2d', cover: false, resume: true },
      ] },
    { key: 'screening', label: 'Screening',  count: 12,
      cards: [
        { name: 'Priya Sharma',   match: 94, exp: '6y · Sunrise',  when: '1d', cover: true, resume: true, selected: true },
        { name: 'Daniel Park',    match: 81, exp: '3y · Caremark', when: '2d', cover: true, resume: true },
        { name: 'Anonymous · #214', match: 76, exp: '4y · Bupa',    when: '3d', resume: true, anon: true },
      ] },
    { key: 'interview', label: 'Interview',  count: 6,
      cards: [
        { name: 'Olivia Watson',  match: 91, exp: '7y · Sunrise',  when: 'Thu 14:00', cover: true, resume: true, scheduled: true },
        { name: 'Liam Mendez',    match: 86, exp: '5y · NHS',      when: 'Fri 10:30', cover: true, resume: true, scheduled: true },
      ] },
    { key: 'offer',     label: 'Offer',      count: 2,
      cards: [
        { name: 'Aleksandra Nowak', match: 95, exp: '8y · Bupa',  when: 'Sent 1d ago', cover: true, resume: true },
      ] },
    { key: 'hired',     label: 'Hired / Closed', count: 1,
      cards: [
        { name: 'Sarah Williams',  match: 93, exp: '10y · Sunrise', when: 'Joined 12 Apr', cover: true, resume: true, hired: true },
      ] },
  ];
  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: '32px 32px 0' }}>
        <header style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 22, flexWrap: 'wrap', gap: 14,
        }}>
          <div>
            <a style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              color: V2.muted, fontSize: 14, fontWeight: 500, textDecoration: 'none', marginBottom: 8,
            }}>
              <Icon name="arrow-left" size={16} /> All postings
            </a>
            <h1 style={{ margin: '0 0 4px', fontSize: 26, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
              Applications · Care Assistant — Residential Home
            </h1>
            <p style={{ margin: 0, fontSize: 14, color: V2.muted }}>
              Lavender House Care · 45 candidates · 5 stages · drag cards to move them between stages
            </p>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <V2Button variant="secondary" size="sm" icon="filter">Filters</V2Button>
            <V2Button variant="secondary" size="sm" icon="document">Export CSV</V2Button>
            <V2Button variant="primary" size="sm" icon="mail">Message stage</V2Button>
          </div>
        </header>

        {/* Bulk action bar */}
        <div style={{
          background: V2.ink, color: '#fff', padding: '10px 18px',
          borderRadius: V2.rMd, marginBottom: 16, display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap',
        }}>
          <span style={{ fontSize: 13, fontWeight: 600 }}>3 candidates selected</span>
          <span style={{ flex: 1 }} />
          <button style={crmDarkBtn(V2.success)}>Move forward</button>
          <button style={crmDarkBtn(V2.warn)}>Reject</button>
          <button style={crmDarkBtn(V2.primary)}>Message</button>
          <button style={crmDarkBtn(V2.muted, true)}>···</button>
          <button style={{
            padding: '5px 10px', borderRadius: 6, background: 'transparent',
            color: '#CFD4DC', border: 'none', fontSize: 12, cursor: 'pointer', fontFamily: V2.font,
          }}>Deselect</button>
        </div>

        {/* Pipeline */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 1fr))', gap: 12,
        }}>
          {stages.map((s) => <CRMColumn key={s.key} stage={s} />)}
        </div>
      </main>
      <V2Footer />
    </div>
  );
}

function CRMColumn({ stage }) {
  return (
    <section style={{
      background: V2.bgAlt, borderRadius: V2.rLg, padding: 10,
      display: 'flex', flexDirection: 'column', gap: 8,
      minHeight: 600,
    }}>
      <header style={{
        padding: '8px 10px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontSize: 13, fontWeight: 700, color: V2.ink,
        }}>
          <ApplicationStageBadge stage={stage.key} /> <span>{stage.count}</span>
        </span>
        <button style={{
          width: 24, height: 24, borderRadius: 6, background: 'transparent',
          border: 'none', cursor: 'pointer', color: V2.muted,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="plus" size={14} />
        </button>
      </header>
      {stage.cards.map((c, i) => <CRMCard key={i} card={c} stage={stage.key} />)}
    </section>
  );
}

function CRMCard({ card, stage }) {
  const ring = card.selected ? `2px solid ${V2.primary}` : `1px solid ${V2.line}`;
  return (
    <article style={{
      background: '#fff', border: ring, borderRadius: V2.rMd, padding: 12,
      boxShadow: card.selected ? '0 0 0 3px rgba(99,102,241,0.10)' : V2.shadowSm,
      cursor: 'grab',
    }}>
      <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8, marginBottom: 8 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
          <span style={{
            width: 30, height: 30, borderRadius: '50%',
            background: card.anon ? V2.bgAlt : V2.brandGradient,
            color: card.anon ? V2.muted : '#fff',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 11, fontWeight: 700, flexShrink: 0,
          }}>
            {card.anon
              ? <Icon name="user" size={14} />
              : card.name.split(' ').map((p) => p[0]).join('').slice(0, 2)}
          </span>
          <div style={{ minWidth: 0 }}>
            <div style={{
              fontSize: 13, fontWeight: 700, color: V2.ink,
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 140,
            }}>{card.name}</div>
            <div style={{ fontSize: 11, color: V2.muted, marginTop: 1 }}>{card.exp}</div>
          </div>
        </div>
        <MatchScorePill score={card.match} />
      </header>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', marginBottom: 10 }}>
        {card.resume && (
          <span style={crmDocChip}><Icon name="document" size={11} /> CV</span>
        )}
        {card.cover && (
          <span style={crmDocChip}><Icon name="mail" size={11} /> Cover</span>
        )}
        {card.fresh && <V2Badge tone="info" size="sm">New</V2Badge>}
        {card.scheduled && <V2Badge tone="primary" size="sm">{card.when}</V2Badge>}
        {card.hired && <V2Badge tone="success" size="sm" icon="check">Hired</V2Badge>}
      </div>
      <footer style={{
        paddingTop: 8, borderTop: `1px solid ${V2.lineSoft}`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 6,
      }}>
        <span style={{ fontSize: 11, color: V2.muted }}>
          {card.scheduled || card.hired ? card.when : `${card.when} ago`}
        </span>
        {stage !== 'hired' && (
          <div style={{ display: 'inline-flex', gap: 4 }}>
            <button style={crmTinyBtn(V2.danger, true)}>Reject</button>
            <button style={crmTinyBtn(V2.primary)}>Move →</button>
          </div>
        )}
      </footer>
    </article>
  );
}

const crmDocChip = {
  display: 'inline-flex', alignItems: 'center', gap: 4,
  padding: '2px 7px', borderRadius: 5,
  background: V2.bgAlt, color: V2.text,
  fontSize: 10.5, fontWeight: 600,
};

function crmDarkBtn(color, ghost) {
  return {
    padding: '5px 10px', borderRadius: 6,
    background: ghost ? 'transparent' : color,
    color: ghost ? '#CFD4DC' : '#fff',
    border: ghost ? '1px solid rgba(255,255,255,0.15)' : 'none',
    fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: V2.font,
  };
}

function crmTinyBtn(color, ghost) {
  return {
    padding: '3px 8px', borderRadius: 5,
    background: ghost ? '#fff' : color + '15',
    color, border: `1px solid ${color}40`,
    fontSize: 10.5, fontWeight: 700, cursor: 'pointer', fontFamily: V2.font,
  };
}

// ─── 2) EMPLOYER BILLING + PLAN ──────────────────────────────────────────
function V2EmpBillingScreen() {
  const tiers = [
    { name: 'Free', price: '£0', current: false,
      features: [['Active jobs', '1'], ['Featured listings/mo', '0'], ['Analytics', 'Basic'], ['Apply form', 'Default'], ['Support', 'Help centre']] },
    { name: 'Pro', price: '£49 / mo', current: true, badge: 'Current plan',
      features: [['Active jobs', '10'], ['Featured listings/mo', '5'], ['Analytics', 'Full dashboard'], ['Apply form', 'Customisable'], ['Support', 'Email · 24h SLA']] },
    { name: 'Premium', price: '£199 / mo', current: false, popular: true,
      features: [['Active jobs', 'Unlimited'], ['Featured listings/mo', '20'], ['Analytics', 'Advanced + CSV'], ['Apply form', 'Multi-step + screening Qs'], ['Support', 'Account manager']] },
  ];
  const invoices = [
    { date: '14 May 2026', plan: 'Pro · monthly', amount: '£49.00', status: 'Paid' },
    { date: '14 Apr 2026', plan: 'Pro · monthly', amount: '£49.00', status: 'Paid' },
    { date: '02 Apr 2026', plan: 'Boost · Care Assistant', amount: '£79.00', status: 'Paid' },
    { date: '14 Mar 2026', plan: 'Pro · monthly', amount: '£49.00', status: 'Paid' },
    { date: '14 Feb 2026', plan: 'Pro · monthly', amount: '£49.00', status: 'Paid' },
    { date: '14 Jan 2026', plan: 'Pro · monthly', amount: '£49.00', status: 'Paid' },
  ];
  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' }}>
        <header style={{ marginBottom: 22 }}>
          <h1 style={{ margin: '0 0 4px', fontSize: 28, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
            Billing & plan
          </h1>
          <p style={{ margin: 0, fontSize: 15, color: V2.muted }}>
            Lavender House Care · subscription, wallet for boosts, and invoice history
          </p>
        </header>

        {/* Plan comparison ladder */}
        <section style={{
          background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
          padding: 22, marginBottom: 18,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>
              Your plan
            </h2>
            <V2Button variant="ghost" size="sm" icon="document">Manage on Stripe portal →</V2Button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
            {tiers.map((t) => <EmpPlanCard key={t.name} t={t} />)}
          </div>
        </section>

        {/* Wallet for boosts */}
        <section style={{
          background: V2.brandGradient, color: '#fff',
          borderRadius: V2.rLg, padding: 22, marginBottom: 18,
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22,
        }}>
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '4px 10px', borderRadius: 999,
              background: 'rgba(255,255,255,0.18)',
              fontSize: 11, fontWeight: 800, letterSpacing: '0.06em', textTransform: 'uppercase',
              marginBottom: 14,
            }}>
              <Icon name="sparkle" size={11} color="#FCD980" /> Boost wallet
            </div>
            <div style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1 }}>
              £180.00
            </div>
            <p style={{ margin: '10px 0 0', fontSize: 13.5, opacity: 0.9, lineHeight: 1.55, maxWidth: 340 }}>
              Wallet credit is separate from your subscription. Use it for one-off Featured (£49) or Sponsored (£199) boosts.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-end', gap: 10 }}>
            <V2Button variant="primary" size="md" icon="plus">Add £50</V2Button>
            <button style={{
              padding: '8px 14px', borderRadius: 8,
              background: 'rgba(255,255,255,0.14)', color: '#fff',
              border: '1px solid rgba(255,255,255,0.30)',
              fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: V2.font,
            }}>Auto top-up when below £20</button>
          </div>
        </section>

        {/* Invoices */}
        <section style={{
          background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, overflow: 'hidden',
        }}>
          <header style={{
            padding: '14px 22px', borderBottom: `1px solid ${V2.line}`,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
            <h2 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: V2.ink }}>Invoices</h2>
            <V2Button variant="secondary" size="sm" icon="document">Download all (PDF)</V2Button>
          </header>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
            <thead>
              <tr style={{ background: V2.bgAlt, borderBottom: `1px solid ${V2.line}` }}>
                {['Date', 'Description', 'Amount', 'Status', ''].map((h) => (
                  <th key={h} style={{
                    textAlign: 'left', padding: '12px 22px',
                    color: V2.muted, fontWeight: 700, fontSize: 11,
                    textTransform: 'uppercase', letterSpacing: '0.06em',
                  }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {invoices.map((inv, i, arr) => (
                <tr key={i} style={{ borderBottom: i < arr.length - 1 ? `1px solid ${V2.lineSoft}` : 'none' }}>
                  <td style={{ padding: '14px 22px', color: V2.text }}>{inv.date}</td>
                  <td style={{ padding: '14px 22px', color: V2.ink, fontWeight: 600 }}>{inv.plan}</td>
                  <td style={{ padding: '14px 22px', fontWeight: 700, color: V2.ink, fontVariantNumeric: 'tabular-nums' }}>{inv.amount}</td>
                  <td style={{ padding: '14px 22px' }}><V2Badge tone="success" size="sm">{inv.status}</V2Badge></td>
                  <td style={{ padding: '14px 22px' }}>
                    <a style={{ color: V2.primary, fontWeight: 600, fontSize: 13, textDecoration: 'none' }}>
                      Receipt PDF →
                    </a>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>
      </main>
      <V2Footer />
    </div>
  );
}

function EmpPlanCard({ t }) {
  return (
    <article style={{
      background: t.current ? V2.primarySoft : '#fff',
      border: `${t.current ? 2 : 1}px solid ${t.current ? V2.primary : V2.line}`,
      borderRadius: V2.rLg, padding: 18, position: 'relative',
    }}>
      {t.current && (
        <span style={{
          position: 'absolute', top: -10, left: 16,
          padding: '3px 9px', background: V2.primary, color: '#fff',
          borderRadius: 999, fontSize: 10.5, fontWeight: 800,
          letterSpacing: '0.06em', textTransform: 'uppercase',
        }}>{t.badge}</span>
      )}
      {t.popular && !t.current && (
        <span style={{
          position: 'absolute', top: -10, left: 16,
          padding: '3px 9px', background: V2.ink, color: '#fff',
          borderRadius: 999, fontSize: 10.5, fontWeight: 800,
          letterSpacing: '0.06em', textTransform: 'uppercase',
        }}>Most popular</span>
      )}
      <div style={{ fontSize: 13, fontWeight: 700, color: t.current ? V2.primaryInk : V2.text, marginBottom: 4 }}>{t.name}</div>
      <div style={{ fontSize: 26, fontWeight: 800, color: V2.ink, letterSpacing: '-0.02em', marginBottom: 14 }}>
        {t.price}
      </div>
      <table style={{ width: '100%', fontSize: 12.5, borderCollapse: 'collapse' }}>
        <tbody>
          {t.features.map(([k, v]) => (
            <tr key={k}>
              <td style={{ color: V2.muted, padding: '6px 0' }}>{k}</td>
              <td style={{ color: V2.ink, fontWeight: 600, textAlign: 'right', padding: '6px 0' }}>{v}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <div style={{ marginTop: 16 }}>
        {t.current
          ? <V2Button variant="secondary" size="sm" full>Manage subscription</V2Button>
          : t.popular
            ? <V2Button variant="primary" size="sm" full iconRight="arrow-right">Upgrade to Premium</V2Button>
            : <V2Button variant="ghost" size="sm" full>Downgrade to Free</V2Button>}
      </div>
    </article>
  );
}

// ─── 3) AI REWRITE MODAL ─────────────────────────────────────────────────
function V2EmpAIRewriteScreen() {
  return (
    <div style={{ background: V2.bgAlt, fontFamily: V2.font, color: V2.ink, minHeight: '100%' }}>
      {/* Page background — the underlying job-post form is dimmed behind the modal */}
      <V2Header active="" variant="seeker" />
      <div style={{ position: 'relative', minHeight: 'calc(100% - 80px)' }}>
        {/* Dimmed backdrop content silhouette */}
        <main style={{
          maxWidth: 1080, margin: '0 auto', padding: '32px 32px 0',
          opacity: 0.25, pointerEvents: 'none',
        }}>
          <h1 style={{ fontSize: 26, fontWeight: 700, color: V2.ink, margin: '0 0 22px' }}>
            Edit job · Care Assistant — Residential Home
          </h1>
          <div style={{ height: 200, background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, marginBottom: 14 }} />
          <div style={{ height: 320, background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg }} />
        </main>

        {/* Modal */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'rgba(16, 24, 40, 0.55)',
          backdropFilter: 'blur(2px)',
          display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
          padding: '40px 32px 80px',
        }}>
          <div style={{
            width: 'min(1100px, 100%)', background: '#fff',
            borderRadius: V2.rXl, boxShadow: V2.shadowXl,
            overflow: 'hidden',
          }}>
            {/* Modal header */}
            <header style={{
              padding: '18px 24px', borderBottom: `1px solid ${V2.line}`,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 14,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{
                  width: 36, height: 36, borderRadius: 10, background: V2.brandGradient, color: '#fff',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name="sparkle" size={18} />
                </span>
                <div>
                  <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>
                    Rewrite with AI
                  </h2>
                  <p style={{ margin: '2px 0 0', fontSize: 13, color: V2.muted }}>
                    Care Assistant — Residential Home · we'll only rewrite the job description, never the salary or title
                  </p>
                </div>
              </div>
              <button style={{
                width: 36, height: 36, borderRadius: 10, background: V2.bgAlt,
                border: 'none', cursor: 'pointer', color: V2.text,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name="x" size={18} />
              </button>
            </header>

            {/* Tone selector */}
            <div style={{
              padding: '14px 24px', borderBottom: `1px solid ${V2.lineSoft}`,
              background: V2.bgAlt,
              display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap',
            }}>
              <span style={{ fontSize: 12.5, fontWeight: 700, color: V2.muted, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                Tone
              </span>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {[['Professional', true], ['Casual'], ['Enthusiastic'], ['Concise']].map(([t, on]) => (
                  <button key={t} style={{
                    padding: '7px 14px', borderRadius: 999, fontSize: 13, fontWeight: 600,
                    border: `1px solid ${on ? V2.primary : V2.line}`,
                    background: on ? V2.primarySoft : '#fff',
                    color: on ? V2.primaryInk : V2.text,
                    cursor: 'pointer', fontFamily: V2.font,
                  }}>{t}</button>
                ))}
              </div>
              <span style={{ flex: 1 }} />
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                fontSize: 12.5, color: V2.muted,
              }}>
                <Icon name="lightning" size={13} color={V2.muted} />
                <strong style={{ color: V2.ink, fontVariantNumeric: 'tabular-nums' }}>3 of 10</strong> daily rewrites used
              </span>
            </div>

            {/* Side-by-side panes */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', height: 480 }}>
              {/* Original */}
              <div style={{ borderRight: `1px solid ${V2.line}`, display: 'flex', flexDirection: 'column' }}>
                <header style={{
                  padding: '12px 20px', borderBottom: `1px solid ${V2.line}`,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                }}>
                  <span style={{ fontSize: 11.5, fontWeight: 700, color: V2.muted, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                    Original · 184 words
                  </span>
                </header>
                <div style={{
                  padding: '18px 20px', overflow: 'auto', fontSize: 13.5, color: V2.text, lineHeight: 1.65,
                }}>
                  <p>Lavender House is a residential care home in Bristol. We are looking for a care assistant to join our team. The role involves helping our residents with daily living tasks and providing companionship.</p>
                  <p>Duties include personal care, mealtimes, mobility support and dementia care. NVQ Level 2 is desirable but not essential as we offer full training. Shifts are 7am to 3pm on a two-on/two-off rota basis.</p>
                  <p>We are a family-run home with 24 residents. Our team is supportive and we invest in development including NVQ sponsorship for the right candidate. Weekly pay, free uniform, pension and refer-a-friend bonus.</p>
                </div>
              </div>

              {/* Rewritten */}
              <div style={{ background: V2.bg, display: 'flex', flexDirection: 'column' }}>
                <header style={{
                  padding: '12px 20px', borderBottom: `1px solid ${V2.line}`,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                }}>
                  <span style={{
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                    fontSize: 11.5, fontWeight: 700, color: V2.primaryInk, textTransform: 'uppercase', letterSpacing: '0.06em',
                  }}>
                    <Icon name="sparkle" size={12} color={V2.primary} />
                    Rewritten · Professional · 162 words
                  </span>
                  <V2Badge tone="success" size="sm" icon="check">+12% projected applies</V2Badge>
                </header>
                <div style={{
                  padding: '18px 20px', overflow: 'auto', fontSize: 13.5, color: V2.text, lineHeight: 1.65,
                }}>
                  <p><span style={{ background: V2.successBg, padding: '0 3px', borderRadius: 3 }}>Join Lavender House</span>, a family-owned residential care home in central Bristol, as a full-time Care Assistant supporting <span style={{ background: V2.successBg, padding: '0 3px', borderRadius: 3 }}>24 older adults including those living with dementia</span>.</p>
                  <p>You'll deliver personal care, support mobility, assist at mealtimes and provide companionship — making a tangible difference to each resident's day. Working a structured two-on / two-off rota (7am–3pm) gives you predictable hours and proper recovery time.</p>
                  <p><span style={{ background: V2.successBg, padding: '0 3px', borderRadius: 3 }}>No prior care experience required.</span> We provide full paid induction, fund NVQ Level 2 sponsorship for the right candidate, and offer weekly pay, workplace pension, free uniform and a £250 refer-a-friend bonus.</p>
                </div>
              </div>
            </div>

            {/* Footer actions */}
            <footer style={{
              padding: '14px 24px', borderTop: `1px solid ${V2.line}`,
              background: V2.bgAlt,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap',
            }}>
              <span style={{
                fontSize: 12, color: V2.muted, display: 'inline-flex', alignItems: 'center', gap: 6,
              }}>
                <Icon name="shield" size={13} color={V2.muted} />
                Your job description is sent to our AI partner only for this rewrite — never stored for training.
              </span>
              <div style={{ display: 'flex', gap: 8 }}>
                <V2Button variant="ghost" size="md">Cancel</V2Button>
                <V2Button variant="secondary" size="md" icon="sparkle">Try again</V2Button>
                <V2Button variant="primary" size="md" iconRight="check">Apply rewrite</V2Button>
              </div>
            </footer>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  V2EmpApplicationsInboxScreen, V2EmpBillingScreen, V2EmpAIRewriteScreen,
});