// ScrollJob v2 — Employer flow: Post a job (stepped) · Success · Advertisers landing

function V2EmpPostScreen() {
  return (
    <div style={{ background: V2.bg, fontFamily: V2.font, color: V2.ink, minHeight: '100%' }}>
      <V2Header active="" variant="seeker" />
      <main style={{ maxWidth: 1080, margin: '0 auto', padding: '32px 32px 0' }}>
        {/* Top bar */}
        <header style={{ marginBottom: 22 }}>
          <a style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            color: V2.muted, fontSize: 14, fontWeight: 500, textDecoration: 'none', marginBottom: 14,
          }}>
            <Icon name="arrow-left" size={16} /> Employer dashboard
          </a>
          <h1 style={{ margin: '0 0 6px', fontSize: 28, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
            Post a new job
          </h1>
          <p style={{ margin: 0, fontSize: 15, color: V2.muted }}>
            Standard listings are free · most posts publish within 30 minutes.
          </p>
        </header>

        {/* Stepper */}
        <div style={{
          background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
          padding: 18, marginBottom: 22, display: 'flex', alignItems: 'center', gap: 8,
        }}>
          {[
            ['1', 'Job details',  'done'],
            ['2', 'Company info', 'done'],
            ['3', 'Reach & boost', 'active'],
            ['4', 'Review',       'pending'],
          ].map(([n, label, state], i, arr) => {
            const isDone = state === 'done', isActive = state === 'active';
            return (
              <React.Fragment key={n}>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                  <span style={{
                    width: 28, height: 28, borderRadius: '50%',
                    background: isActive ? V2.primary : isDone ? V2.success : V2.lineSoft,
                    color: isActive || isDone ? '#fff' : V2.muted,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 12, fontWeight: 700,
                  }}>
                    {isDone ? <Icon name="check" size={14} /> : n}
                  </span>
                  <span style={{
                    fontSize: 14, fontWeight: isActive ? 700 : 500,
                    color: isActive ? V2.ink : isDone ? V2.text : V2.muted,
                  }}>{label}</span>
                </div>
                {i < arr.length - 1 && (
                  <span style={{ flex: 1, height: 2, background: V2.line, margin: '0 6px', borderRadius: 1 }} />
                )}
              </React.Fragment>
            );
          })}
        </div>

        {/* Step content — "Reach & boost" */}
        <div style={{
          background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rXl, padding: 32,
        }}>
          <h2 style={{ margin: '0 0 6px', fontSize: 20, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>
            Choose how visible this role is
          </h2>
          <p style={{ margin: '0 0 22px', fontSize: 14.5, color: V2.muted, lineHeight: 1.55 }}>
            Standard listings stay free forever. Featured and Sponsored boosts can be added now or later.
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginBottom: 24 }}>
            <BoostTier
              name="Standard" price="Free" sub="Always free"
              features={['Standard placement', '30-day visibility', 'Included in alerts']}
            />
            <BoostTier
              name="Featured" price="+£49 / month" sub="Most-chosen"
              features={['Top of search · 30 days', 'Pinned in swipe feed', 'Featured badge', '4.2× more views']}
              recommended
            />
            <BoostTier
              name="Sponsored" price="+£199 / month" sub="Multi-role hiring"
              features={['All Featured', 'Custom company page', 'Dedicated email blast (1×/mo)', 'Priority moderation']}
            />
          </div>

          <div style={{
            padding: 16, background: V2.bgAlt, borderRadius: V2.rMd,
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <span style={{
              width: 36, height: 36, borderRadius: 10, background: '#fff',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              <Icon name="sparkle" size={18} color={V2.primary} />
            </span>
            <div style={{ flex: 1, fontSize: 13.5, color: V2.text }}>
              For Care Assistant roles in Bristol, Featured listings typically reach the first qualified applicant in <strong style={{ color: V2.ink }}>3 days</strong> (vs. 9 days Standard).
            </div>
            <V2Button variant="ghost" size="sm">See methodology</V2Button>
          </div>

          {/* Buttons */}
          <div style={{
            marginTop: 28, paddingTop: 22, borderTop: `1px solid ${V2.line}`,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 14,
          }}>
            <V2Button variant="ghost" size="md" icon="arrow-left">Back to company info</V2Button>
            <div style={{ display: 'flex', gap: 8 }}>
              <V2Button variant="secondary" size="md">Stay on Standard</V2Button>
              <V2Button variant="primary" size="md" iconRight="arrow-right">Continue with Featured</V2Button>
            </div>
          </div>
        </div>
      </main>
      <V2Footer />
    </div>
  );
}

function BoostTier({ name, price, sub, features, recommended }) {
  return (
    <div style={{
      background: '#fff',
      border: `${recommended ? 2 : 1}px solid ${recommended ? V2.primary : V2.line}`,
      borderRadius: V2.rLg, padding: 22, position: 'relative',
      boxShadow: recommended ? V2.shadow : 'none',
    }}>
      {recommended && (
        <div 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',
        }}>Recommended</div>
      )}
      <div style={{ fontSize: 12.5, fontWeight: 700, color: V2.muted, marginBottom: 4 }}>{name}</div>
      <div style={{ fontSize: 22, fontWeight: 800, color: V2.ink, letterSpacing: '-0.02em', marginBottom: 2 }}>{price}</div>
      <div style={{ fontSize: 12, color: V2.muted, marginBottom: 16 }}>{sub}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 8 }}>
        {features.map((f) => (
          <li key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 8, fontSize: 13, color: V2.text, lineHeight: 1.5 }}>
            <span style={{
              width: 16, height: 16, borderRadius: '50%',
              background: recommended ? V2.primary : V2.successBg,
              color: recommended ? '#fff' : V2.success,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0, marginTop: 1,
            }}><Icon name="check" size={10} /></span>
            {f}
          </li>
        ))}
      </ul>
    </div>
  );
}

// ─── SUCCESS ────────────────────────────────────────────────────────────
function V2EmpSuccessScreen() {
  return (
    <div style={{ background: V2.bg, fontFamily: V2.font, color: V2.ink, minHeight: '100%' }}>
      <V2Header active="" variant="seeker" />
      <main style={{ maxWidth: 720, margin: '0 auto', padding: '80px 32px 0', textAlign: 'center' }}>
        <div style={{
          width: 80, height: 80, margin: '0 auto 22px',
          borderRadius: '50%', background: V2.successBg,
          border: `4px solid ${V2.successLine}`,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="check" size={36} color={V2.success} />
        </div>
        <h1 style={{
          margin: '0 0 14px', fontSize: 36, fontWeight: 800,
          color: V2.ink, letterSpacing: '-0.03em',
        }}>Your job is being reviewed</h1>
        <p style={{
          margin: '0 0 8px', fontSize: 16, color: V2.text, lineHeight: 1.6,
        }}>
          We received your <strong>Care Assistant — Residential Home</strong> posting. Moderation usually takes under 30 minutes. We'll email you at <strong>hiring@lavenderhouse.co.uk</strong> when it's live.
        </p>

        {/* Timeline */}
        <div style={{
          margin: '36px auto', maxWidth: 520, padding: 24, textAlign: 'left',
          background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
        }}>
          {[
            { label: 'Submitted',  sub: 'Just now',                         state: 'done' },
            { label: 'In review',  sub: 'Usually under 30 minutes',         state: 'active' },
            { label: 'Live',       sub: 'Visible in search & swipe feed',   state: 'pending' },
            { label: 'First applicant',  sub: 'Median: 6 hours after going live', state: 'pending' },
          ].map((s, i, arr) => (
            <div key={s.label} style={{ display: 'flex', gap: 14 }}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
                <span style={{
                  width: 18, height: 18, borderRadius: '50%',
                  background: s.state === 'done' ? V2.success : s.state === 'active' ? V2.warn : V2.line,
                  boxShadow: s.state === 'active' ? `0 0 0 4px ${V2.warnBg}` : 'none',
                  marginTop: 4,
                }} />
                {i < arr.length - 1 && (
                  <span style={{ width: 2, height: 36, background: V2.line, marginTop: 4 }} />
                )}
              </div>
              <div style={{ paddingBottom: i < arr.length - 1 ? 18 : 0 }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: V2.ink }}>{s.label}</div>
                <div style={{ fontSize: 12.5, color: V2.muted, marginTop: 2 }}>{s.sub}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <V2Button variant="primary" size="lg" iconRight="arrow-right">Open employer dashboard</V2Button>
          <V2Button variant="secondary" size="lg" icon="plus">Post another job</V2Button>
        </div>

        <p style={{ marginTop: 36, fontSize: 13, color: V2.muted }}>
          Need a hand? <a style={{ color: V2.primary, fontWeight: 600, textDecoration: 'none' }}>Talk to our hiring team</a>
        </p>
      </main>
      <V2Footer />
    </div>
  );
}

// ─── ADVERTISERS LANDING ────────────────────────────────────────────────
function V2EmpAdvertisersScreen() {
  return (
    <div style={{ background: V2.bg, fontFamily: V2.font, color: V2.ink, minHeight: '100%' }}>
      <V2Header active="" />
      {/* Hero */}
      <section style={{
        background: V2.bgAlt, padding: '72px 0 56px',
        borderBottom: `1px solid ${V2.line}`,
      }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
          <span style={{
            display: 'inline-block', padding: '4px 12px', marginBottom: 18,
            background: V2.primarySoft, color: V2.primaryInk,
            border: `1px solid ${V2.primaryRing}`, borderRadius: 999,
            fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
          }}>For employers and recruiters</span>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'center' }}>
            <div>
              <h1 style={{
                margin: '0 0 18px', fontSize: 52, fontWeight: 800,
                color: V2.ink, letterSpacing: '-0.03em', lineHeight: 1.05,
              }}>
                Hire faster. Reach more of the right people.
              </h1>
              <p style={{
                margin: '0 0 28px', fontSize: 18, color: V2.text, lineHeight: 1.55, maxWidth: 540,
              }}>
                ScrollJob reaches 1.4 million UK job seekers across every industry. Post jobs free or boost the roles that matter most — track every view, every apply.
              </p>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <V2Button variant="primary" size="lg" iconRight="arrow-right">Post a job · free</V2Button>
                <V2Button variant="secondary" size="lg">Talk to sales</V2Button>
              </div>
              <div style={{ marginTop: 18, fontSize: 13, color: V2.muted, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <Icon name="shield" size={14} /> Free Standard listings · no card required · cancel any boost anytime
              </div>
            </div>
            <AdvertiserPreview />
          </div>
        </div>
      </section>

      {/* Proof strip */}
      <section style={{ padding: '64px 0' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 32px' }}>
          <h2 style={{
            margin: '0 0 28px', fontSize: 24, fontWeight: 700,
            color: V2.ink, letterSpacing: '-0.02em', textAlign: 'center',
          }}>What changes when you boost a role</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
            {[
              { v: '4.2×', l: 'More views with Featured', s: 'vs. Standard, measured across 1,200 paid posts in 2026.' },
              { v: '3.1×', l: 'More apply clicks',           s: 'Featured vs. Standard, same role pairs, 90-day window.' },
              { 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: 24,
              }}>
                <div style={{ fontSize: 40, fontWeight: 800, color: V2.primary, letterSpacing: '-0.03em', lineHeight: 1 }}>{p.v}</div>
                <div style={{ fontSize: 15, fontWeight: 600, color: V2.ink, marginTop: 10 }}>{p.l}</div>
                <div style={{ fontSize: 13, color: V2.muted, marginTop: 6, lineHeight: 1.55 }}>{p.s}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Customer logos / trust */}
      <section style={{ padding: '0 0 72px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
          <div style={{ textAlign: 'center', fontSize: 13, color: V2.muted, marginBottom: 22, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600 }}>
            Trusted by employers across the UK
          </div>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 14,
          }}>
            {['Bupa', 'NHS Trust', 'Octopus', 'Wren & Co.', 'Lavender House', 'Bridgewater'].map((n) => (
              <div key={n} style={{
                background: V2.bgAlt, padding: '20px 14px', borderRadius: V2.rMd,
                textAlign: 'center', color: V2.muted, fontWeight: 700, fontSize: 14, letterSpacing: '-0.01em',
              }}>{n}</div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing summary card */}
      <section style={{ padding: '0 0 80px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 32px' }}>
          <div style={{
            background: V2.ink, color: '#fff',
            borderRadius: V2.r2xl, padding: '48px 56px',
            display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 40, alignItems: 'center',
            position: 'relative', overflow: 'hidden',
          }}>
            <div aria-hidden style={{
              position: 'absolute', top: -80, right: -50, width: 360, height: 360,
              borderRadius: '50%', background: `radial-gradient(circle at center, ${V2.primary}44 0%, transparent 70%)`,
            }} />
            <div style={{ position: 'relative' }}>
              <h2 style={{
                margin: '0 0 14px', fontSize: 32, fontWeight: 700,
                letterSpacing: '-0.02em', lineHeight: 1.15,
              }}>Free to start. Boost when you need to hire fast.</h2>
              <p style={{ margin: '0 0 20px', fontSize: 15, color: '#CFD4DC', lineHeight: 1.55, maxWidth: 440 }}>
                Standard listings are free forever. Add Featured (+£49/mo) or Sponsored (+£199/mo) on any single job, only when you need it.
              </p>
              <div style={{ display: 'flex', gap: 10 }}>
                <V2Button variant="primary" size="lg" iconRight="arrow-right">See full pricing</V2Button>
                <V2Button variant="ghost" size="lg">
                  <span style={{ color: '#fff' }}>Book a demo</span>
                </V2Button>
              </div>
            </div>
            <div style={{
              background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.10)',
              borderRadius: V2.rXl, padding: 22, position: 'relative',
            }}>
              {[
                ['Standard',  'Free'],
                ['Featured',  '+£49/mo'],
                ['Sponsored', '+£199/mo'],
              ].map(([l, v]) => (
                <div key={l} style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  padding: '14px 0', borderBottom: '1px solid rgba(255,255,255,0.08)',
                }}>
                  <span style={{ fontSize: 15, color: '#CFD4DC' }}>{l}</span>
                  <span style={{ fontSize: 17, fontWeight: 700, color: '#fff' }}>{v}</span>
                </div>
              ))}
              <div style={{ fontSize: 12, color: '#98A2B3', marginTop: 14 }}>
                Volume discounts and ATS integrations available for 10+ roles.
              </div>
            </div>
          </div>
        </div>
      </section>
      <V2Footer />
    </div>
  );
}

function AdvertiserPreview() {
  return (
    <div style={{
      background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rXl,
      padding: 22, boxShadow: V2.shadowLg,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <div style={{ fontSize: 13, color: V2.muted }}>Today · Lavender House Care</div>
        <V2Badge tone="success" size="sm">Live</V2Badge>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 18 }}>
        {[
          ['Views',    '1,842', '+22% WoW'],
          ['Applies',  '86',    '+12% WoW'],
          ['Apply rate','4.7%',  'Above avg.'],
          ['Time to first applicant', '4h', 'Featured boost'],
        ].map(([l, v, d]) => (
          <div key={l} style={{ padding: 14, background: V2.bgAlt, borderRadius: V2.rMd }}>
            <div style={{ fontSize: 11.5, color: V2.muted, marginBottom: 4 }}>{l}</div>
            <div style={{ fontSize: 18, fontWeight: 800, color: V2.ink, letterSpacing: '-0.02em' }}>{v}</div>
            <div style={{ fontSize: 11, color: V2.success, marginTop: 4, fontWeight: 700 }}>{d}</div>
          </div>
        ))}
      </div>
      <svg viewBox="0 0 400 120" style={{ width: '100%', height: 100, display: 'block' }}>
        {(() => {
          const data = [10, 14, 18, 16, 22, 26, 30, 28, 36, 42, 38, 48, 56, 64];
          const max = Math.max(...data);
          const stepX = 400 / (data.length - 1);
          const pts = data.map((v, i) => `${i * stepX},${110 - (v / max) * 90}`).join(' ');
          return (
            <>
              <polyline points={pts} fill="none" stroke={V2.primary} strokeWidth="3" strokeLinejoin="round" strokeLinecap="round" />
              {data.map((v, i) => (
                <circle key={i} cx={i * stepX} cy={110 - (v / max) * 90} r="3" fill={V2.primary} />
              ))}
            </>
          );
        })()}
      </svg>
    </div>
  );
}

Object.assign(window, { V2EmpPostScreen, V2EmpSuccessScreen, V2EmpAdvertisersScreen });