// ScrollJob — Auth + CV/Resume screens
// Login, Signup, Resume Landing, Hosted Resumes (builder list), Resume Editor, Cover Letters list
// Tokens: relies on SJ object from screens.jsx (loaded earlier).

// ─────────────────────────────────────────────────────────────────────────
// AUTH: shared left-side benefits
// ─────────────────────────────────────────────────────────────────────────
const AUTH_BENEFITS = [
  { icon: '🔖', t: 'Save jobs and return faster',
    d: 'Keep a shortlist of promising roles so you can come back when timing is right.' },
  { icon: '📧', t: 'Email alerts that match your interests',
    d: 'New accounts default to daily, switch to weekly or off anytime.' },
  { icon: '📋', t: 'See your recent activity',
    d: 'Viewed jobs, saved jobs and account activity in one dashboard.' },
  { icon: '📄', t: 'Create a hosted resume',
    d: 'Build a professional resume, share one clean link. Private until you publish.' },
  { icon: '💼', t: "Manage postings if you're hiring",
    d: 'Use the same account to post jobs and monitor moderation from the employer dashboard.' },
];

function AuthChrome({ children }) {
  return (
    <div style={{ background: '#fff', fontFamily: SJ.font, color: SJ.ink2, minHeight: '100%' }}>
      <header style={{ background: '#fff', borderBottom: `1px solid ${SJ.line}`, padding: '20px 0' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 28px' }}>
          <a style={{ display: 'inline-flex', alignItems: 'center', gap: 12, fontSize: 26, fontWeight: 700, color: SJ.blue, textDecoration: 'none' }}>
            <img src="assets/logo.jpg" alt="" style={{ height: 36, width: 36, borderRadius: 8, objectFit: 'cover' }} />
            ScrollJob
          </a>
        </div>
      </header>
      <main style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '48px 24px' }}>
        <div style={{ display: 'flex', gap: 48, maxWidth: 1000, width: '100%', alignItems: 'center' }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center',
              padding: '6px 12px', borderRadius: 999,
              background: SJ.blueSoft, color: SJ.blueDark,
              fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
              marginBottom: 16,
            }}>Why create an account</span>
            <h2 style={{ fontSize: 26, fontWeight: 700, color: SJ.ink2, marginBottom: 12, lineHeight: 1.25 }}>
              One account for job search and hiring
            </h2>
            <p style={{ fontSize: 15, color: '#4b5563', marginBottom: 26, maxWidth: '46ch', lineHeight: 1.6 }}>
              Keep promising jobs in one place, stay on top of new openings, and manage employer postings without starting from scratch.
            </p>
            {AUTH_BENEFITS.map((b) => (
              <div key={b.t} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, marginBottom: 18 }}>
                <div style={{
                  width: 36, height: 36, background: SJ.blueSoft, borderRadius: 10,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0, fontSize: 16,
                }}>{b.icon}</div>
                <div>
                  <h3 style={{ fontSize: 15, fontWeight: 600, color: SJ.ink2, margin: '0 0 2px' }}>{b.t}</h3>
                  <p style={{ fontSize: 13.5, color: SJ.muted, margin: 0, lineHeight: 1.5 }}>{b.d}</p>
                </div>
              </div>
            ))}
          </div>
          {children}
        </div>
      </main>
    </div>
  );
}

function GoogleBtn({ label }) {
  return (
    <a style={{
      width: '100%', padding: '14px 22px', background: '#fff',
      color: SJ.ink2, border: '1px solid #d1d5db', borderRadius: 10,
      fontSize: 15, fontWeight: 600, textAlign: 'center', textDecoration: 'none',
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
      marginBottom: 12, cursor: 'pointer',
    }}>
      <svg width="20" height="20" viewBox="0 0 24 24">
        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
      </svg>
      {label}
    </a>
  );
}

function SocialBtn({ bg, label, fg = '#fff' }) {
  return (
    <a style={{
      width: '100%', padding: '14px 22px', background: bg, color: fg,
      borderRadius: 10, fontSize: 15, fontWeight: 600, textAlign: 'center',
      textDecoration: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
      marginBottom: 12,
    }}>
      {label}
    </a>
  );
}

function AuthDivider({ children }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', color: SJ.muted, fontSize: 13.5,
      margin: '20px 0', textAlign: 'center',
    }}>
      <span style={{ flex: 1, borderTop: `1px solid ${SJ.line}` }} />
      <span style={{ padding: '0 14px' }}>{children}</span>
      <span style={{ flex: 1, borderTop: `1px solid ${SJ.line}` }} />
    </div>
  );
}

function AuthInput({ label, type = 'text', placeholder, defaultValue }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <label style={{ display: 'block', fontWeight: 600, marginBottom: 7, color: '#374151', fontSize: 13.5 }}>{label}</label>
      <input type={type} placeholder={placeholder} defaultValue={defaultValue} style={{
        width: '100%', padding: '12px 16px', border: '1px solid #d1d5db', borderRadius: 8,
        fontSize: 15, outline: 'none', fontFamily: SJ.font,
      }} />
    </div>
  );
}

function LoginScreen() {
  return (
    <AuthChrome>
      <div style={{
        background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16,
        padding: 36, width: 420, flexShrink: 0,
        boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
      }}>
        <h1 style={{ fontSize: 26, fontWeight: 700, marginBottom: 8, color: SJ.ink2 }}>Welcome back</h1>
        <p style={{ color: SJ.muted, marginBottom: 24, fontSize: 14.5 }}>
          Sign in to reach your saved jobs, alerts, resume builder and employer tools.
        </p>
        <GoogleBtn label="Continue with Google" />
        <SocialBtn bg="#1877F2" label="Continue with Facebook" />
        <SocialBtn bg="#0A66C2" label="Continue with LinkedIn" />
        <AuthDivider>or sign in with email</AuthDivider>
        <AuthInput label="Email" placeholder="Enter your email" defaultValue="olena.k@example.com" />
        <AuthInput label="Password" type="password" placeholder="Enter your password" defaultValue="········" />
        <div style={{ textAlign: 'right', marginTop: 8, marginBottom: 18 }}>
          <a style={{ color: SJ.blue, textDecoration: 'none', fontSize: 13.5 }}>Forgot password?</a>
        </div>
        <button style={{
          width: '100%', padding: '14px 22px', background: SJ.blue, color: '#fff',
          border: 'none', borderRadius: 10, fontSize: 15, fontWeight: 600, cursor: 'pointer',
          marginTop: 6, fontFamily: SJ.font,
        }}>Sign In</button>
        <div style={{ textAlign: 'center', marginTop: 22, color: SJ.muted, fontSize: 13.5 }}>
          New to ScrollJob? <a style={{ color: SJ.blue, textDecoration: 'none', fontWeight: 500 }}>Create a free account</a>
        </div>
      </div>
    </AuthChrome>
  );
}

function SignupScreen() {
  return (
    <AuthChrome>
      <div style={{
        background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16,
        padding: 36, width: 420, flexShrink: 0,
        boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
      }}>
        <h1 style={{ fontSize: 26, fontWeight: 700, marginBottom: 8, color: SJ.ink2 }}>Create your free account</h1>
        <p style={{ color: SJ.muted, marginBottom: 24, fontSize: 14.5 }}>
          Save jobs, get alerts, build a hosted resume, manage postings if you're hiring.
        </p>
        <GoogleBtn label="Continue with Google" />
        <AuthDivider>or create an account with email</AuthDivider>
        <AuthInput label="Email" type="email" placeholder="Enter your email" />
        <AuthInput label="First name" placeholder="Your first name" />
        <AuthInput label="Last name" placeholder="Your last name" />
        <AuthInput label="Password" type="password" placeholder="Create a password" />
        <p style={{ fontSize: 12.5, color: SJ.muted, margin: '-12px 0 18px' }}>
          At least 8 characters with a number or symbol.
        </p>
        <AuthInput label="Confirm Password" type="password" placeholder="Confirm your password" />
        <button style={{
          width: '100%', padding: '14px 22px', background: SJ.blue, color: '#fff',
          border: 'none', borderRadius: 10, fontSize: 15, fontWeight: 600, cursor: 'pointer',
          marginTop: 6, fontFamily: SJ.font,
        }}>Create Account</button>
        <div style={{ textAlign: 'center', marginTop: 22, color: SJ.muted, fontSize: 13.5 }}>
          Already have an account? <a style={{ color: SJ.blue, textDecoration: 'none', fontWeight: 500 }}>Sign in</a>
        </div>
      </div>
    </AuthChrome>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// RESUME LANDING (public marketing page)
// ─────────────────────────────────────────────────────────────────────────
function ResumeLandingScreen() {
  return (
    <div style={{ background: '#fff', fontFamily: SJ.font, color: SJ.ink2, minHeight: '100%' }}>
      <Header active="Resume Builder" />
      <main style={{ maxWidth: 1200, margin: '0 auto', padding: '40px 28px 0' }}>
        {/* Hero */}
        <section style={{
          background: `linear-gradient(135deg, ${SJ.heroFrom} 0%, ${SJ.heroTo} 100%)`,
          padding: '72px 28px', textAlign: 'center', borderRadius: 28, color: '#fff', marginBottom: 60,
        }}>
          <h1 style={{ fontSize: 44, fontWeight: 800, lineHeight: 1.2, marginBottom: 16, letterSpacing: '-0.02em' }}>
            Create a hosted resume you can share with recruiters
          </h1>
          <p style={{ fontSize: 19, opacity: 0.95, maxWidth: 640, margin: '0 auto 30px', lineHeight: 1.5 }}>
            Build a professional resume on ScrollJob. Get a clean shareable link. Private until you publish, mobile-friendly, always up to date.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a style={{
              padding: '15px 30px', borderRadius: 12, fontSize: 15, fontWeight: 700, textDecoration: 'none',
              background: '#fff', color: SJ.purple, boxShadow: '0 10px 20px rgba(0,0,0,0.15)',
            }}>Sign Up to Create Your Resume</a>
            <a style={{
              padding: '15px 30px', borderRadius: 12, fontSize: 15, fontWeight: 700, textDecoration: 'none',
              background: 'rgba(255,255,255,0.15)', color: '#fff', border: '1px solid rgba(255,255,255,0.3)',
            }}>Sign In</a>
          </div>
        </section>

        {/* Features */}
        <section style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginBottom: 60 }}>
          {[
            { i: '📄', t: 'Multiple Versions', d: 'Create separate resumes for different roles. Tailor each one to match the job.' },
            { i: '🔗', t: 'One Clean Link',    d: 'Each resume gets a unique URL you can share with recruiters or add to LinkedIn.' },
            { i: '🔒', t: 'Private Until You Publish', d: 'Your resume is a draft by default. Publish it when ready, unpublish whenever.' },
            { i: '📱', t: 'Mobile-Friendly',   d: 'Looks great on any device. Recruiters can review on desktop, tablet or phone.' },
          ].map((f) => (
            <div key={f.t} style={{ textAlign: 'center', padding: '28px 18px', background: SJ.page, borderRadius: 16 }}>
              <div style={{
                width: 56, height: 56, background: SJ.blueSoft, borderRadius: 14,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                margin: '0 auto 16px', fontSize: 24,
              }}>{f.i}</div>
              <h3 style={{ fontSize: 16, fontWeight: 700, color: SJ.ink2, marginBottom: 8 }}>{f.t}</h3>
              <p style={{ fontSize: 13.5, color: SJ.muted, lineHeight: 1.55, margin: 0 }}>{f.d}</p>
            </div>
          ))}
        </section>

        {/* How it works */}
        <h2 style={{ fontSize: 30, fontWeight: 700, textAlign: 'center', marginBottom: 36, color: SJ.ink2 }}>How It Works</h2>
        <section style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32,
          marginBottom: 60, maxWidth: 900, marginLeft: 'auto', marginRight: 'auto',
        }}>
          {[
            { n: 1, t: 'Create an Account', d: 'Sign up with email or Google. Less than a minute and you have access to the resume builder.' },
            { n: 2, t: 'Build Your Resume', d: 'Fill in experience, skills, education and projects. The editor auto-saves as you type.' },
            { n: 3, t: 'Publish & Share',   d: 'Hit publish to get your unique link. Share it with recruiters or paste in applications.' },
          ].map((s) => (
            <div key={s.n} style={{ textAlign: 'center' }}>
              <div style={{
                width: 50, height: 50, background: SJ.blue, color: '#fff',
                borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 21, fontWeight: 800, margin: '0 auto 16px',
              }}>{s.n}</div>
              <h3 style={{ fontSize: 17, fontWeight: 700, color: SJ.ink2, marginBottom: 8 }}>{s.t}</h3>
              <p style={{ fontSize: 14, color: SJ.muted, lineHeight: 1.55, margin: 0 }}>{s.d}</p>
            </div>
          ))}
        </section>

        {/* FAQ */}
        <h2 style={{ fontSize: 30, fontWeight: 700, textAlign: 'center', marginBottom: 36, color: SJ.ink2 }}>
          Frequently Asked Questions
        </h2>
        <section style={{ maxWidth: 760, margin: '0 auto 60px' }}>
          {[
            ['Is the ScrollJob resume builder free?', 'Yes, creating a hosted resume on ScrollJob is completely free. You just need a ScrollJob account.', true],
            ['Can I share my resume with recruiters?', 'Yes. When you publish, you get a unique link to share with recruiters, add to LinkedIn or paste in applications. Private until you publish.', false],
            ['Can I create multiple resume versions?', 'Yes. Tailor each one to a different role or industry. Each gets its own shareable link.', false],
            ['Is my resume indexed by search engines?', 'No. Published resumes are not indexed — only people with your direct link can see them.', false],
            ['Can I unpublish or delete my resume?', 'Yes. Unpublish at any time to immediately remove it from the public link. You can also delete resumes from your account.', false],
          ].map(([q, a, open], i) => (
            <div key={i} style={{ borderBottom: `1px solid ${SJ.line}`, padding: '20px 0' }}>
              <div style={{
                fontSize: 16, fontWeight: 700, color: SJ.ink2,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12,
              }}>
                <span>{q}</span>
                <span style={{ fontSize: 22, color: SJ.faint, transform: open ? 'rotate(45deg)' : '', display: 'inline-block' }}>+</span>
              </div>
              {open && (
                <div style={{ paddingTop: 12, fontSize: 14.5, color: '#4b5563', lineHeight: 1.6 }}>{a}</div>
              )}
            </div>
          ))}
        </section>

        {/* Bottom CTA */}
        <section style={{ textAlign: 'center', background: SJ.page, borderRadius: 24, padding: '44px 20px', marginBottom: 40 }}>
          <h2 style={{ fontSize: 26, fontWeight: 700, color: SJ.ink2, marginBottom: 12 }}>Ready to build your resume?</h2>
          <p style={{ fontSize: 15, color: SJ.muted, marginBottom: 22 }}>
            Join ScrollJob and create a professional hosted resume in minutes. It's free.
          </p>
          <a style={{
            padding: '14px 28px', borderRadius: 12, fontSize: 15, fontWeight: 700,
            textDecoration: 'none', background: SJ.blue, color: '#fff', display: 'inline-block',
          }}>Create Your Free Account</a>
        </section>
      </main>
      <Footer />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// RESUME BUILDER (list of hosted resumes in seeker cabinet)
// ─────────────────────────────────────────────────────────────────────────
function ResumeBuilderScreen() {
  const resumes = [
    {
      state: 'published', title: 'Senior Backend Engineer — UK/Remote',
      headline: 'Senior Backend Engineer · Python, distributed systems',
      summary: '8 years building fintech APIs. Strong on Python, Postgres, async services. Looking for senior IC roles in fintech or developer tools.',
      theme: 'Indigo', revision: 12, updated: '2026-05-10', shareUrl: 'scrolljob.org/r/olena-k-backend',
    },
    {
      state: 'draft', title: 'Platform Lead — open to relo',
      headline: 'Platform / Staff Engineer — building reliable services',
      summary: 'Tailored for staff-level roles. Heavier emphasis on org wins and mentorship over hands-on shipping numbers.',
      theme: 'Slate', revision: 4, updated: '2026-05-08', shareUrl: null,
    },
    {
      state: 'draft', title: 'Indie / Freelance contracting',
      headline: 'Senior Python Engineer for hire · short engagements',
      summary: 'Targeted for fractional and contract work. Hourly rate + availability included in summary.',
      theme: 'Sand', revision: 1, updated: '2026-05-04', shareUrl: null,
    },
  ];
  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="resumes" user={{ name: 'Olena Kovalenko', email: 'olena.k@example.com', initials: 'OK' }} />
          <div style={{ flex: 1, minWidth: 0 }}>
            {/* Header card */}
            <section style={{
              background: 'linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%)',
              border: '1px solid #bfdbfe', borderRadius: 22, padding: 28, marginBottom: 22,
              boxShadow: '0 1px 3px rgba(15,23,42,0.05)',
            }}>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '6px 12px', borderRadius: 999, background: SJ.blueRing, color: SJ.blueDark,
                fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
              }}>Hosted Resume MVP</span>
              <h2 style={{ fontSize: 28, fontWeight: 700, color: '#0f172a', margin: '14px 0 10px', letterSpacing: '-0.02em' }}>
                Build hosted resumes you can share by link
              </h2>
              <p style={{ margin: 0, maxWidth: 760, color: '#334155', fontSize: 14.5, lineHeight: 1.7 }}>
                Drafts live in a dedicated service. Publishing is explicit. Public pages are designed for direct recruiter sharing on the main domain — no SEO-inventory.
              </p>
              <div style={{ marginTop: 20, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <a style={{
                  padding: '11px 18px', borderRadius: 12, background: SJ.blue, color: '#fff',
                  fontSize: 14, fontWeight: 600, textDecoration: 'none',
                }}>＋ Create New Resume</a>
                <a style={{
                  padding: '11px 18px', borderRadius: 12, background: '#f1f5f9', color: '#1e293b',
                  fontSize: 14, fontWeight: 600, textDecoration: 'none', border: '1px solid #e2e8f0',
                }}>Cover letters</a>
                <a style={{
                  padding: '11px 18px', borderRadius: 12, background: '#fff', color: '#1e293b',
                  fontSize: 14, fontWeight: 600, textDecoration: 'none', border: '1px solid #e2e8f0',
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                }}>📎 Import from PDF</a>
              </div>
            </section>

            {/* Resumes grid */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, marginBottom: 22 }}>
              {resumes.map((r, i) => <ResumeCard key={i} r={r} />)}
            </div>

            {/* Privacy note */}
            <section style={{
              background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 22,
              padding: 26, boxShadow: '0 1px 3px rgba(15,23,42,0.05)', marginBottom: 22,
            }}>
              <h3 style={{ fontSize: 18, fontWeight: 700, color: '#0f172a', margin: '0 0 14px' }}>Privacy and visibility</h3>
              <div style={{ display: 'grid', gap: 10, color: '#475569', fontSize: 14, lineHeight: 1.7 }}>
                <div>Draft is private by default. Nothing is publicly visible until you explicitly publish.</div>
                <div>Published resumes are shareable by direct link on <code style={{ background: SJ.page, padding: '2px 6px', borderRadius: 4 }}>scrolljob.org</code>, not added to sitemap inventory.</div>
                <div>Public resume pages default to <code style={{ background: SJ.page, padding: '2px 6px', borderRadius: 4 }}>noindex</code> so the product stays share-first, not SEO-inventory-first.</div>
              </div>
            </section>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}

function ResumeCard({ r }) {
  const published = r.state === 'published';
  return (
    <article style={{
      background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 22,
      padding: 22, boxShadow: '0 1px 3px rgba(15,23,42,0.05)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16 }}>
        <div style={{ minWidth: 0 }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center',
            padding: '6px 12px', borderRadius: 999,
            background: published ? SJ.greenBg : '#f1f5f9',
            color: published ? SJ.green : '#475569',
            fontSize: 11, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase',
          }}>{r.state}</span>
          <h3 style={{ fontSize: 19, fontWeight: 700, color: '#0f172a', margin: '12px 0 8px', lineHeight: 1.3 }}>
            {r.title}
          </h3>
          <p style={{ margin: 0, color: SJ.blueDark, fontSize: 14, fontWeight: 600 }}>{r.headline}</p>
        </div>
        <div style={{ color: '#64748b', fontSize: 12.5, textAlign: 'right', whiteSpace: 'nowrap' }}>
          <div>Theme: {r.theme}</div>
          <div style={{ marginTop: 4 }}>Revision: {r.revision}</div>
        </div>
      </div>

      <p style={{ margin: '14px 0 0', color: '#475569', fontSize: 13.5, lineHeight: 1.65 }}>
        {r.summary}
      </p>

      <div style={{
        marginTop: 16, paddingTop: 16, borderTop: `1px solid ${SJ.line}`,
        color: '#64748b', fontSize: 12.5,
      }}>
        Updated {r.updated}
        {published ? (
          <div style={{ marginTop: 8 }}>
            Public URL: <a style={{ color: SJ.blue, wordBreak: 'break-all' }}>{r.shareUrl}</a>
          </div>
        ) : (
          <div style={{ marginTop: 8 }}>Private draft. It becomes public only after you publish it.</div>
        )}
      </div>

      <div style={{ display: 'flex', gap: 10, marginTop: 16, flexWrap: 'wrap' }}>
        <a style={{
          padding: '10px 16px', borderRadius: 12, background: SJ.blue, color: '#fff',
          fontSize: 13.5, fontWeight: 600, textDecoration: 'none',
        }}>Open Builder</a>
        {published && (
          <a style={{
            padding: '10px 16px', borderRadius: 12, background: '#fff', color: SJ.blueDark,
            fontSize: 13.5, fontWeight: 600, textDecoration: 'none', border: `1px solid ${SJ.blueRing}`,
          }}>Open Public Page ↗</a>
        )}
      </div>
    </article>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// RESUME EDITOR (left form / right preview)
// ─────────────────────────────────────────────────────────────────────────
function ResumeEditorScreen() {
  return (
    <div style={{ background: '#fff', fontFamily: SJ.font, color: SJ.ink2, minHeight: '100%' }}>
      <Header active="" />
      <main style={{ maxWidth: 1200, margin: '0 auto', padding: '32px 28px 0' }}>
        {/* Top bar */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 12, marginBottom: 22, flexWrap: 'wrap',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, minWidth: 0 }}>
            <a style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              color: '#475569', textDecoration: 'none', fontSize: 14, fontWeight: 500,
              padding: '6px 10px', borderRadius: 8,
            }}>← Resumes</a>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '6px 14px', borderRadius: 999,
              background: SJ.greenBg, color: SJ.green,
              fontSize: 11, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase',
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'currentColor' }} />
              Published
            </span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '6px 12px', borderRadius: 999,
              background: SJ.greenBg, color: SJ.green,
              fontSize: 12, fontWeight: 600,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'currentColor' }} />
              Saved 5s ago
            </span>
            <button style={{
              padding: '8px 16px', borderRadius: 8, background: SJ.blue, color: '#fff',
              border: 'none', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: SJ.font,
            }}>Save Draft</button>
          </div>
        </div>

        {/* Progress bar */}
        <div style={{ marginBottom: 22 }}>
          <div style={{ height: 4, background: SJ.line, borderRadius: 999, overflow: 'hidden', marginBottom: 8 }}>
            <div style={{
              height: '100%', width: '76%',
              background: `linear-gradient(90deg, ${SJ.blue}, #818cf8)`, borderRadius: 999,
            }} />
          </div>
          <div style={{ fontSize: 12.5, fontWeight: 600, color: '#94a3b8' }}>
            <strong style={{ color: SJ.blue }}>76%</strong> complete — fill in more sections to strengthen your resume
          </div>
        </div>

        {/* Grid: form + preview */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 22, alignItems: 'start' }}>
          <main>
            <EditorSection icon="👤" title="Basic Information" subtitle="Your name, headline, and summary" open complete>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <EditorField label="Resume Title" hint="Internal only" defaultValue="Senior Backend Engineer — UK/Remote" />
                <EditorField label="Headline" defaultValue="Senior Backend Engineer · Python, distributed systems" />
                <div style={{ gridColumn: '1 / -1' }}>
                  <EditorField label="Professional Summary" ai textarea defaultValue={
                    "8 years building fintech APIs in Python. Most recent stint at Monzo on the Platform team — async-first services, sensible PostgreSQL, deep observability. I write a lot of docs and prefer small focused teams."
                  } />
                </div>
                <EditorField label="Preferred Location" defaultValue="London, UK" />
                <EditorField label="Remote Preference" select options={['Open to either', 'Remote only', 'Hybrid', 'On-site']} />
              </div>
            </EditorSection>

            <EditorSection icon="💼" title="Experience" subtitle="Your professional history" open complete>
              <div style={{ display: 'grid', gap: 12 }}>
                <ExperienceItem
                  role="Senior Backend Engineer · Platform" co="Monzo Bank"
                  range="Jun 2022 — Present" loc="London, UK" open
                />
                <ExperienceItem role="Backend Engineer" co="Starling Bank" range="Jan 2019 — May 2022" loc="London, UK" />
                <ExperienceItem role="Software Engineer" co="GoCardless" range="Aug 2016 — Dec 2018" loc="London, UK" />
              </div>
              <button style={addBtnStyle}>＋ Add experience</button>
            </EditorSection>

            <EditorSection icon="🎓" title="Education" subtitle="Schools and certifications" />
            <EditorSection icon="🛠️" title="Skills" subtitle="Technical skills, languages, tools" />
            <EditorSection icon="🚀" title="Projects" subtitle="Side projects, open source, talks" />
            <EditorSection icon="🏆" title="Awards & Certifications" subtitle="Optional" />
          </main>

          <aside style={{ position: 'sticky', top: 100, display: 'grid', gap: 14 }}>
            {/* Publish card */}
            <div style={{
              background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16,
              padding: 20, boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                <span style={{ width: 10, height: 10, borderRadius: '50%', background: SJ.green }} />
                <span style={{ fontSize: 15, fontWeight: 700, color: SJ.ink2 }}>Live, recruiter-shareable</span>
              </div>
              <div style={{
                padding: '10px 14px', borderRadius: 8,
                background: '#f0fdf4', border: '1px solid #bbf7d0', marginBottom: 14,
              }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: SJ.green, textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: 4 }}>
                  Public URL
                </div>
                <a style={{ color: SJ.blue, fontSize: 13, fontWeight: 600, wordBreak: 'break-all' }}>
                  scrolljob.org/r/olena-k-backend
                </a>
              </div>
              <p style={{ color: '#475569', fontSize: 13, lineHeight: 1.55, margin: '0 0 14px' }}>
                Changes are saved as a new revision and the public page updates within seconds.
              </p>
              <button style={{
                width: '100%', padding: '11px 16px', borderRadius: 8,
                border: `1px solid ${SJ.redLine}`, background: '#fff', color: SJ.red,
                fontSize: 13.5, fontWeight: 600, cursor: 'pointer', fontFamily: SJ.font,
              }}>Unpublish</button>
            </div>

            {/* Theme picker */}
            <div style={{
              background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16,
              padding: 20, boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
            }}>
              <p style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: '#94a3b8', margin: '0 0 12px' }}>
                Theme
              </p>
              <div style={{ display: 'grid', gap: 8 }}>
                {[
                  { name: 'Indigo',  desc: 'Bold blue accents · serif headings',  bg: 'linear-gradient(135deg, #4f46e5, #6366f1)', selected: true },
                  { name: 'Slate',   desc: 'Calm neutral · sans-serif',           bg: 'linear-gradient(135deg, #475569, #64748b)' },
                  { name: 'Sand',    desc: 'Warm paper · classic',                bg: 'linear-gradient(135deg, #d97706, #f59e0b)' },
                  { name: 'Mono',    desc: 'Minimal black & white',               bg: 'linear-gradient(135deg, #0f172a, #334155)' },
                ].map((t) => (
                  <button key={t.name} style={{
                    display: 'flex', alignItems: 'center', gap: 12,
                    padding: '10px 12px',
                    border: `1px solid ${t.selected ? SJ.blue : SJ.line}`,
                    borderRadius: 12, background: t.selected ? SJ.blueSoft : '#fff',
                    cursor: 'pointer', textAlign: 'left', fontFamily: SJ.font,
                    boxShadow: t.selected ? '0 0 0 2px rgba(37,99,235,0.15)' : 'none',
                  }}>
                    <div style={{
                      width: 40, height: 40, borderRadius: 10, background: t.bg, flexShrink: 0,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>
                      <div style={{ display: 'grid', gap: 3 }}>
                        <span style={{ display: 'block', height: 3, width: 20, borderRadius: 999, background: 'rgba(255,255,255,0.8)' }} />
                        <span style={{ display: 'block', height: 3, width: 16, borderRadius: 999, background: 'rgba(255,255,255,0.8)' }} />
                        <span style={{ display: 'block', height: 3, width: 12, borderRadius: 999, background: 'rgba(255,255,255,0.5)' }} />
                      </div>
                    </div>
                    <div style={{ minWidth: 0, flex: 1 }}>
                      <p style={{ margin: 0, fontSize: 13, fontWeight: 700, color: SJ.ink2 }}>{t.name}</p>
                      <p style={{ margin: '2px 0 0', fontSize: 11.5, color: '#94a3b8', lineHeight: 1.4 }}>{t.desc}</p>
                    </div>
                    {t.selected && <span style={{ color: SJ.blue }}>✓</span>}
                  </button>
                ))}
              </div>
            </div>

            {/* Preview frame */}
            <div style={{
              border: `1px solid ${SJ.line}`, borderRadius: 12, overflow: 'hidden', background: '#f8fafc',
            }}>
              <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                gap: 8, padding: '8px 12px', background: '#f1f5f9', borderBottom: `1px solid ${SJ.line}`,
              }}>
                <div style={{ display: 'flex', gap: 5 }}>
                  <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#cbd5e1' }} />
                  <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#cbd5e1' }} />
                  <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#cbd5e1' }} />
                </div>
                <div style={{
                  flex: 1, padding: '4px 8px', borderRadius: 6, background: '#fff',
                  color: '#94a3b8', fontSize: 11, fontWeight: 500, overflow: 'hidden',
                  textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                }}>scrolljob.org/r/olena-k-backend</div>
              </div>
              <div style={{ padding: 12 }}>
                <ResumePreviewMini />
              </div>
            </div>
          </aside>
        </div>
      </main>
      <Footer />
    </div>
  );
}

const addBtnStyle = {
  display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 12,
  padding: '8px 14px', border: `1px dashed ${SJ.line}`, borderRadius: 8,
  background: 'transparent', color: '#475569', fontSize: 13, fontWeight: 600,
  cursor: 'pointer', fontFamily: SJ.font,
};

function EditorSection({ icon, title, subtitle, open, complete, children }) {
  return (
    <div style={{
      background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 16,
      marginBottom: 14, overflow: 'hidden',
      boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 12, padding: '16px 20px', cursor: 'pointer',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0 }}>
          <div style={{
            width: 36, height: 36, borderRadius: 10, background: SJ.blueSoft,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 17, flexShrink: 0,
          }}>{icon}</div>
          <div>
            <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: SJ.ink2, lineHeight: 1.3 }}>{title}</h3>
            <p style={{ margin: '2px 0 0', fontSize: 13, color: '#94a3b8', lineHeight: 1.4 }}>{subtitle}</p>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{
            width: 20, height: 20, borderRadius: '50%',
            background: complete ? SJ.green : SJ.line,
            color: complete ? '#fff' : '#94a3b8',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 11, fontWeight: 700,
          }}>{complete ? '✓' : ''}</span>
          <span style={{ color: '#94a3b8', transform: open ? 'rotate(180deg)' : '', display: 'inline-block', transition: 'transform .2s' }}>⌃</span>
        </div>
      </div>
      {open && <div style={{ padding: '0 20px 20px' }}>{children}</div>}
    </div>
  );
}

function EditorField({ label, hint, defaultValue, textarea, ai, select, options }) {
  return (
    <div>
      <label style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        marginBottom: 6, fontSize: 13, fontWeight: 600, color: SJ.ink2,
      }}>
        {label}
        {hint && <span style={{ fontWeight: 400, color: '#94a3b8', fontSize: 12 }}>{hint}</span>}
        {ai && (
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            padding: '4px 10px', border: '1px solid #e0e7ff', borderRadius: 6,
            background: 'linear-gradient(135deg, #eef2ff, #f5f3ff)',
            color: '#6366f1', fontSize: 11, fontWeight: 600,
          }}>✨ AI Assist</span>
        )}
      </label>
      {textarea ? (
        <textarea defaultValue={defaultValue} style={{
          width: '100%', padding: '10px 12px', border: `1px solid ${SJ.line}`,
          borderRadius: 8, fontSize: 13.5, lineHeight: 1.5, color: SJ.ink, background: '#fff',
          fontFamily: SJ.font, resize: 'vertical', minHeight: 80, boxSizing: 'border-box',
        }} />
      ) : select ? (
        <select defaultValue={defaultValue || options[0]} style={{
          width: '100%', padding: '10px 12px', border: `1px solid ${SJ.line}`,
          borderRadius: 8, fontSize: 13.5, color: SJ.ink, background: '#fff',
          fontFamily: SJ.font, outline: 'none',
        }}>
          {(options || []).map((o) => <option key={o}>{o}</option>)}
        </select>
      ) : (
        <input defaultValue={defaultValue} style={{
          width: '100%', padding: '10px 12px', border: `1px solid ${SJ.line}`,
          borderRadius: 8, fontSize: 13.5, color: SJ.ink, background: '#fff',
          fontFamily: SJ.font, outline: 'none', boxSizing: 'border-box',
        }} />
      )}
    </div>
  );
}

function ExperienceItem({ role, co, range, loc, open }) {
  return (
    <div style={{
      border: `1px solid ${open ? SJ.blueRing : SJ.line}`, borderRadius: 12, background: '#fff', overflow: 'hidden',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '12px 16px', background: open ? SJ.blueSoft : SJ.page,
        borderBottom: open ? `1px solid ${SJ.line}` : 'none', cursor: 'pointer',
      }}>
        <div style={{
          fontSize: 13.5, fontWeight: 600, color: SJ.ink2,
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
        }}>
          {role} <span style={{ color: '#94a3b8', fontWeight: 500 }}>· {co} · {range}</span>
        </div>
        <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
          <button style={{
            padding: '4px 8px', border: 'none', borderRadius: 6, background: 'transparent',
            color: '#94a3b8', fontSize: 11, cursor: 'pointer', fontFamily: SJ.font,
          }}>Remove</button>
          <span style={{ color: '#94a3b8' }}>{open ? '⌃' : '⌄'}</span>
        </div>
      </div>
      {open && (
        <div style={{ padding: 16 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <EditorField label="Role" defaultValue={role} />
            <EditorField label="Company" defaultValue={co} />
            <EditorField label="Start date" defaultValue="Jun 2022" />
            <EditorField label="End date" defaultValue="Present" />
            <div style={{ gridColumn: '1 / -1' }}>
              <EditorField label="Location" defaultValue={loc} />
            </div>
            <div style={{ gridColumn: '1 / -1' }}>
              <EditorField label="Highlights" textarea ai defaultValue={
                "• Led migration of legacy synchronous payment service to async stack — 4× p99 latency improvement.\n" +
                "• Mentored two engineers from mid to senior; hired and onboarded 3 new platform engineers.\n" +
                "• Wrote the team's incident-response runbook and rolled out blameless retros."
              } />
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function ResumePreviewMini() {
  return (
    <div style={{
      background: '#fff', borderRadius: 8, padding: 14,
      boxShadow: '0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)',
      fontFamily: SJ.font,
    }}>
      <div style={{ borderBottom: '2px solid #4f46e5', paddingBottom: 8, marginBottom: 10 }}>
        <div style={{ fontSize: 16, fontWeight: 800, color: SJ.ink, marginBottom: 2 }}>Olena Kovalenko</div>
        <div style={{ fontSize: 11, color: '#4f46e5', fontWeight: 600 }}>
          Senior Backend Engineer · Python, distributed systems
        </div>
        <div style={{ fontSize: 9.5, color: SJ.muted, marginTop: 4 }}>
          London, UK · olena.k@example.com · scrolljob.org/r/olena-k-backend
        </div>
      </div>
      <SectionHeading>Summary</SectionHeading>
      <p style={{ fontSize: 9.5, color: '#374151', lineHeight: 1.5, margin: '0 0 10px' }}>
        8 years building fintech APIs in Python. Most recent stint at Monzo on the Platform team — async-first services, sensible PostgreSQL, deep observability.
      </p>
      <SectionHeading>Experience</SectionHeading>
      <PreviewExp role="Senior Backend Engineer · Platform" co="Monzo Bank" range="Jun 2022 — Present" />
      <PreviewExp role="Backend Engineer" co="Starling Bank" range="Jan 2019 — May 2022" />
      <PreviewExp role="Software Engineer" co="GoCardless" range="Aug 2016 — Dec 2018" />
      <SectionHeading>Skills</SectionHeading>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
        {['Python', 'PostgreSQL', 'Go', 'Kafka', 'Kubernetes', 'Terraform', 'GCP'].map((s) => (
          <span key={s} style={{
            padding: '2px 6px', background: '#eef2ff', color: '#4f46e5',
            borderRadius: 4, fontSize: 9, fontWeight: 600,
          }}>{s}</span>
        ))}
      </div>
    </div>
  );
}
function SectionHeading({ children }) {
  return (
    <div style={{
      fontSize: 9.5, fontWeight: 800, color: '#4f46e5',
      letterSpacing: '0.12em', textTransform: 'uppercase', margin: '8px 0 4px',
      paddingBottom: 2, borderBottom: '1px solid #e0e7ff',
    }}>{children}</div>
  );
}
function PreviewExp({ role, co, range }) {
  return (
    <div style={{ marginBottom: 8 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontSize: 10.5, fontWeight: 700, color: SJ.ink }}>{role}</span>
        <span style={{ fontSize: 9, color: SJ.muted }}>{range}</span>
      </div>
      <div style={{ fontSize: 10, fontWeight: 600, color: '#4f46e5', marginBottom: 2 }}>{co}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// COVER LETTERS list
// ─────────────────────────────────────────────────────────────────────────
function CoverLettersScreen() {
  const letters = [
    { state: 'published', title: 'Cover letter for Monzo · Senior Python', role: 'Senior Python Engineer', company: 'Monzo Bank', subject: 'Applying for Senior Python Engineer · Platform team', theme: 'Indigo', revision: 3 },
    { state: 'draft', title: 'Wise · Staff Designer outreach', role: 'Staff Product Designer', company: 'Wise', subject: '', theme: 'Slate', revision: 1 },
    { state: 'draft', title: 'Generic backend opener', role: '', company: '', subject: 'For senior backend roles', theme: 'Sand', revision: 6 },
  ];
  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="resumes" user={{ name: 'Olena Kovalenko', email: 'olena.k@example.com', initials: 'OK' }} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <section style={{
              background: 'linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%)',
              border: '1px solid #bfdbfe', borderRadius: 22, padding: 28, marginBottom: 22,
            }}>
              <span style={{
                display: 'inline-block', padding: '6px 14px', borderRadius: 999,
                background: SJ.blueRing, color: SJ.blueDark, fontWeight: 600, fontSize: 11,
                letterSpacing: '0.04em', textTransform: 'uppercase',
              }}>Cover letters</span>
              <h2 style={{ fontSize: 28, fontWeight: 700, color: '#0f172a', margin: '14px 0 10px', letterSpacing: '-0.02em' }}>
                Write a cover letter for each role
              </h2>
              <p style={{ margin: 0, maxWidth: 760, color: '#334155', fontSize: 14.5, lineHeight: 1.7 }}>
                Same theme system as resumes. Private-by-default share link, optional password lock. Recruiters can read in-browser or download as a self-contained PDF.
              </p>
              <div style={{ marginTop: 20, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <a style={{ padding: '11px 20px', borderRadius: 12, background: SJ.blue, color: '#fff', fontWeight: 600, fontSize: 14, textDecoration: 'none' }}>＋ New cover letter</a>
                <a style={{ padding: '11px 20px', borderRadius: 12, background: '#f1f5f9', color: '#1e293b', fontWeight: 600, fontSize: 14, textDecoration: 'none', border: '1px solid #e2e8f0' }}>Back to resumes</a>
              </div>
            </section>

            {letters.map((cl, i) => (
              <article key={i} style={{
                background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 22,
                padding: 22, marginBottom: 16, boxShadow: '0 1px 3px rgba(15,23,42,0.05)',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, flexWrap: 'wrap' }}>
                  <div style={{ minWidth: 0 }}>
                    <span style={{
                      display: 'inline-block', padding: '4px 10px', borderRadius: 999,
                      background: cl.state === 'published' ? '#f0fdf4' : '#f1f5f9',
                      color: cl.state === 'published' ? SJ.green : '#475569',
                      fontSize: 11, fontWeight: 600, textTransform: 'uppercase',
                    }}>{cl.state}</span>
                    <h3 style={{ fontSize: 19, fontWeight: 700, color: '#0f172a', margin: '12px 0 6px' }}>{cl.title}</h3>
                    {(cl.role || cl.company) && (
                      <p style={{ margin: 0, color: SJ.blueDark, fontSize: 14, fontWeight: 600 }}>
                        {cl.role}{cl.role && cl.company && ' — '}{cl.company}
                      </p>
                    )}
                  </div>
                  <div style={{ color: '#64748b', fontSize: 12.5, textAlign: 'right' }}>
                    <div>Theme: {cl.theme}</div>
                    <div style={{ marginTop: 2 }}>Revision: {cl.revision}</div>
                  </div>
                </div>
                {cl.subject && (
                  <p style={{ margin: '14px 0 0', color: '#475569', fontSize: 13.5 }}>
                    <strong>Subject:</strong> {cl.subject}
                  </p>
                )}
                <div style={{ marginTop: 18, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                  <a style={{ padding: '10px 18px', borderRadius: 12, background: SJ.blue, color: '#fff', fontSize: 13.5, fontWeight: 600, textDecoration: 'none' }}>Edit</a>
                  <a style={{ padding: '10px 18px', borderRadius: 12, background: '#f1f5f9', color: '#1e293b', fontSize: 13.5, fontWeight: 600, textDecoration: 'none', border: '1px solid #e2e8f0' }}>Download PDF</a>
                </div>
              </article>
            ))}
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}

Object.assign(window, {
  LoginScreen, SignupScreen, ResumeLandingScreen,
  ResumeBuilderScreen, ResumeEditorScreen, CoverLettersScreen,
});