// ScrollJob v2 — SEO surfaces
// /jobs/<role>-in-<location>/  -- /salary/<role>-in-<location>/  -- /tools/

// ────────────────────────────────────────────────────────────────────────
// SEOShell — light variation of the discovery-hub shell.
// Reuses V2Header / V2Footer so the surface stays consistent.
// ────────────────────────────────────────────────────────────────────────
function SEOShell({ kicker, title, count, subtitle, badge, breadcrumb, children }) {
  return (
    <div style={{ background: V2.bg, fontFamily: V2.font, color: V2.ink, minHeight: '100%' }}>
      <V2Header active="Discover" />
      <section style={{
        background: V2.bgAlt, padding: '40px 0 28px',
        borderBottom: `1px solid ${V2.line}`,
      }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 32px' }}>
          <nav style={{ fontSize: 13, color: V2.muted, marginBottom: 12 }}>
            {breadcrumb.map((b, i, arr) => (
              <span key={i}>
                {i < arr.length - 1
                  ? <a style={{ color: V2.muted, textDecoration: 'none' }}>{b}</a>
                  : <span>{b}</span>}
                {i < arr.length - 1 && <span style={{ margin: '0 8px' }}>·</span>}
              </span>
            ))}
          </nav>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10, flexWrap: 'wrap' }}>
            {badge}
            <span style={{
              padding: '4px 10px', background: '#fff', border: `1px solid ${V2.line}`,
              color: V2.text, borderRadius: 999, fontSize: 12, fontWeight: 600,
            }}>{kicker}</span>
          </div>
          <h1 style={{
            margin: '0 0 12px', fontSize: 44, fontWeight: 800,
            color: V2.ink, letterSpacing: '-0.03em', lineHeight: 1.1,
          }}>
            {title}
            {count && <span style={{ color: V2.muted, fontWeight: 600 }}> · {count}</span>}
          </h1>
          <p style={{ margin: 0, fontSize: 17, color: V2.text, maxWidth: 760, lineHeight: 1.55 }}>{subtitle}</p>
        </div>
      </section>
      <main style={{ maxWidth: 1280, margin: '0 auto', padding: '28px 32px 0' }}>{children}</main>
      <V2Footer />
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────
// 1) /jobs/python-developer-in-berlin/   role + location combined
// ────────────────────────────────────────────────────────────────────────
function V2SEORoleLocationScreen() {
  return (
    <SEOShell
      breadcrumb={['Jobs', 'Python developer', 'in Berlin']}
      kicker="Role × Location"
      badge={<V2CatPill name="Tech" size="lg" />}
      title="Python Developer jobs in Berlin"
      count="412 open"
      subtitle="Latest Python roles hiring in Berlin and the surrounding metro area. Salary, visa sponsorship signals and remote-friendliness for every listing."
    >
      {/* At-a-glance stat strip */}
      <div style={{
        background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
        padding: 18, marginBottom: 22,
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18,
      }}>
        <SEOStat label="Median salary" value="€72,000" sub="80th pct €92k · 20th pct €54k" />
        <SEOStat label="Remote-friendly" value="38%" sub="156 jobs" tone={V2.success} />
        <SEOStat label="Visa sponsorship" value="62%" sub="256 jobs" tone={V2.primary} />
        <SEOStat label="New this week" value="+58" sub="14% growth" tone={V2.success} />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '260px minmax(0,1fr)', gap: 28, alignItems: 'start' }}>
        {/* Filters */}
        <aside style={{ position: 'sticky', top: 86 }}>
          <SEOFilterCard title="Seniority">
            {[['Junior', 84], ['Mid', 142, true], ['Senior', 124], ['Lead/Staff', 62]].map(([l, c, on]) => (
              <SEOFilterRow key={l} label={l} count={c} on={on} />
            ))}
          </SEOFilterCard>
          <SEOFilterCard title="Compensation">
            {[['€60k+', 312], ['€80k+', 184, true], ['€100k+', 62], ['€120k+', 18]].map(([l, c, on]) => (
              <SEOFilterRow key={l} label={l} count={c} on={on} />
            ))}
          </SEOFilterCard>
          <SEOFilterCard title="Visa sponsorship">
            {[['Available', 142, true], ['Considered', 84], ['EU passport only', 186]].map(([l, c, on]) => (
              <SEOFilterRow key={l} label={l} count={c} on={on} />
            ))}
          </SEOFilterCard>
          <SEOFilterCard title="Work mode">
            {[['Remote', 156], ['Hybrid', 184, true], ['On-site', 72]].map(([l, c, on]) => (
              <SEOFilterRow key={l} label={l} count={c} on={on} />
            ))}
          </SEOFilterCard>
        </aside>

        {/* Body */}
        <div>
          <div style={{
            background: V2.primarySoft, border: `1px solid ${V2.primaryRing}`,
            borderRadius: V2.rLg, padding: 18, marginBottom: 14,
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <Icon name="bell" size={20} color={V2.primary} />
            <div style={{ flex: 1, fontSize: 13.5, color: V2.text }}>
              <strong style={{ color: V2.primaryInk }}>Set up an alert</strong> for "Python developer in Berlin" — daily or weekly.
            </div>
            <V2Button variant="primary" size="sm">Set up alert</V2Button>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <V2JobCard job={V2_JOBS[10]} featured />
            <V2JobCard job={V2_JOBS[10]} saved />
            <V2JobCard job={V2_JOBS[10]} />
            <V2JobCard job={V2_JOBS[10]} />
            <V2JobCard job={V2_JOBS[10]} />
          </div>

          <V2InfiniteSentinel loaded={5} total={412} />

          {/* SEO content + related linking */}
          <section style={{
            marginTop: 32, paddingTop: 32, borderTop: `1px solid ${V2.line}`,
            display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32,
          }}>
            <article>
              <h2 style={{ margin: '0 0 14px', fontSize: 22, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
                Hiring Python developers in Berlin
              </h2>
              <p style={{ margin: '0 0 14px', fontSize: 14.5, color: V2.text, lineHeight: 1.7, maxWidth: '64ch' }}>
                Berlin remains the largest Python hiring market in the German-speaking region, with 412 open roles across fintech (N26, Solaris, Mambu), e-commerce (Zalando, Delivery Hero) and developer-tooling companies. Median pay sits at €72,000, and ~62% of roles will sponsor a Blue Card or local work visa.
              </p>
              <p style={{ margin: '0 0 14px', fontSize: 14.5, color: V2.text, lineHeight: 1.7, maxWidth: '64ch' }}>
                Demand is concentrated in async-first backend roles (Django, FastAPI, asyncio) plus data engineering on Postgres + DBT. Remote-friendly openings make up 38% of the market, almost all of which restrict to within-EU residency for tax compliance.
              </p>
              <p style={{ margin: 0, fontSize: 14.5, color: V2.text, lineHeight: 1.7, maxWidth: '64ch' }}>
                Average time-to-first-interview has tightened from 14 days in 2024 to 8 days in 2026 — interviews are typically a coding screen plus a system-design round.
              </p>
            </article>
            <SEORelated
              title="Related searches"
              links={[
                ['Python developer in Munich',  '218'],
                ['Python developer in Hamburg', '142'],
                ['Senior Python in Berlin',     '124'],
                ['Backend in Berlin',           '618'],
                ['Remote Python (EU)',          '482'],
                ['Django jobs in Germany',      '218'],
                ['Visa-sponsored tech Berlin',  '342'],
                ['Python salary in Berlin',     'Insights'],
                ['Software engineer in Berlin', '1,824'],
                ['Data engineer in Berlin',     '184'],
              ]}
            />
          </section>
        </div>
      </div>
    </SEOShell>
  );
}

// Salary-page helpers
function SEOStat({ label, value, sub, tone }) {
  return (
    <div>
      <div style={{ fontSize: 11.5, color: V2.muted, fontWeight: 600, marginBottom: 6 }}>{label}</div>
      <div style={{ fontSize: 22, fontWeight: 800, color: tone || V2.ink, letterSpacing: '-0.02em' }}>{value}</div>
      <div style={{ fontSize: 12, color: V2.muted, marginTop: 4 }}>{sub}</div>
    </div>
  );
}

function SEOFilterCard({ title, children }) {
  return (
    <div style={{
      background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
      padding: 16, marginBottom: 12,
    }}>
      <h3 style={{ margin: '0 0 10px', fontSize: 12.5, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>
        {title}
      </h3>
      {children}
    </div>
  );
}
function SEOFilterRow({ label, count, on }) {
  return (
    <label style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '5px 0', cursor: 'pointer',
      fontSize: 13, color: on ? V2.ink : V2.text, fontWeight: on ? 600 : 500,
    }}>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
        <input type="checkbox" defaultChecked={on} style={{ width: 14, height: 14, accentColor: V2.primary }} />
        {label}
      </span>
      <span style={{ fontSize: 11.5, color: V2.faint }}>{count}</span>
    </label>
  );
}
function SEORelated({ title, links }) {
  return (
    <div style={{
      background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, padding: 22,
    }}>
      <h3 style={{ margin: '0 0 14px', fontSize: 14, fontWeight: 700, color: V2.ink }}>{title}</h3>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {links.map(([label, count]) => (
          <a key={label} style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '7px 12px', borderRadius: 999,
            background: V2.bgAlt, border: `1px solid ${V2.line}`,
            color: V2.text, fontSize: 12.5, fontWeight: 500, textDecoration: 'none',
          }}>
            {label}
            {count && <span style={{ color: V2.faint, fontSize: 11 }}>· {count}</span>}
          </a>
        ))}
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────
// 2) /salary/python-developer-in-berlin/
// ────────────────────────────────────────────────────────────────────────
function V2SEOSalaryScreen() {
  // Synthetic histogram — 12 buckets €40k → €130k
  const buckets = [
    { range: '40-50', n: 8 },
    { range: '50-60', n: 22 },
    { range: '60-70', n: 56 },
    { range: '70-80', n: 78, highlight: true },
    { range: '80-90', n: 84 },
    { range: '90-100', n: 62 },
    { range: '100-110', n: 42 },
    { range: '110-120', n: 26 },
    { range: '120-130', n: 14 },
    { range: '130-140', n: 8 },
    { range: '140-150', n: 4 },
    { range: '150+',    n: 2 },
  ];
  const max = Math.max(...buckets.map((b) => b.n));
  return (
    <SEOShell
      breadcrumb={['Salary', 'Python developer', 'in Berlin']}
      kicker="Salary insight"
      badge={<V2CatPill name="Tech" size="lg" />}
      title="Python developer salary in Berlin"
      count="412 open roles · 8,214 reported salaries"
      subtitle="What a Python developer earns in Berlin in 2026 — by seniority, company size, and work mode. Updated nightly from ScrollJob listings + 8,214 self-reported salaries."
    >
      {/* Big number */}
      <section style={{
        background: V2.brandGradient, color: '#fff',
        borderRadius: V2.rLg, padding: 28, marginBottom: 22,
        display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 22, alignItems: 'center',
      }}>
        <div>
          <span style={{
            display: 'inline-flex', padding: '4px 10px',
            background: 'rgba(255,255,255,0.18)', borderRadius: 999,
            fontSize: 11.5, fontWeight: 800, letterSpacing: '0.06em', textTransform: 'uppercase',
            marginBottom: 14,
          }}>Median · all seniorities</span>
          <div style={{ fontSize: 56, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1 }}>
            €72,000
          </div>
          <p style={{ margin: '14px 0 0', fontSize: 14.5, lineHeight: 1.6, maxWidth: 380, opacity: 0.92 }}>
            Annual gross · 412 active listings + 8,214 reported salaries. 80th percentile €92k, 20th percentile €54k.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
          {[
            ['Junior',     '€48k', '€42k–€58k'],
            ['Mid',        '€68k', '€60k–€78k'],
            ['Senior',     '€86k', '€78k–€96k'],
            ['Staff/Lead', '€110k', '€100k–€130k'],
          ].map(([lvl, med, range]) => (
            <div key={lvl} style={{
              background: 'rgba(255,255,255,0.10)', border: '1px solid rgba(255,255,255,0.18)',
              borderRadius: V2.rMd, padding: 14,
            }}>
              <div style={{ fontSize: 11, fontWeight: 700, opacity: 0.85, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{lvl}</div>
              <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', marginTop: 4 }}>{med}</div>
              <div style={{ fontSize: 11.5, marginTop: 4, opacity: 0.88 }}>{range}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Histogram */}
      <section style={{
        background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
        padding: 22, marginBottom: 22,
      }}>
        <h2 style={{ margin: '0 0 4px', fontSize: 18, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>
          Salary distribution
        </h2>
        <p style={{ margin: '0 0 22px', fontSize: 13, color: V2.muted }}>
          € thousands · annual gross · n=8,214 reported salaries
        </p>
        <div style={{
          display: 'grid', gridTemplateColumns: `repeat(${buckets.length}, 1fr)`, gap: 8,
          alignItems: 'end', height: 200, marginBottom: 14,
        }}>
          {buckets.map((b) => (
            <div key={b.range} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-end', height: '100%' }}>
              <div style={{
                width: '100%',
                height: `${(b.n / max) * 100}%`,
                background: b.highlight ? V2.brandGradient : V2.primarySoft,
                border: `1px solid ${b.highlight ? 'transparent' : V2.primaryRing}`,
                borderRadius: '6px 6px 0 0', position: 'relative',
              }}>
                {b.highlight && (
                  <span style={{
                    position: 'absolute', top: -22, left: '50%', transform: 'translateX(-50%)',
                    fontSize: 11, fontWeight: 700, color: V2.primary, whiteSpace: 'nowrap',
                  }}>median</span>
                )}
              </div>
            </div>
          ))}
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: `repeat(${buckets.length}, 1fr)`, gap: 8,
          fontSize: 11, color: V2.muted, textAlign: 'center', fontVariantNumeric: 'tabular-nums',
        }}>
          {buckets.map((b) => (
            <span key={b.range}>{b.range}</span>
          ))}
        </div>

        {/* Percentile bar */}
        <div style={{ marginTop: 26, paddingTop: 18, borderTop: `1px solid ${V2.lineSoft}` }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8, fontSize: 12, color: V2.muted }}>
            <span>10th: €46k</span>
            <span>25th: €58k</span>
            <span style={{ color: V2.primary, fontWeight: 700 }}>Median: €72k</span>
            <span>75th: €92k</span>
            <span>90th: €112k</span>
          </div>
          <div style={{ position: 'relative', height: 12, background: V2.line, borderRadius: 999 }}>
            <div style={{
              position: 'absolute', left: '15%', right: '15%', height: '100%',
              background: V2.brandGradient, borderRadius: 999,
            }} />
            <span style={{
              position: 'absolute', left: '50%', top: -4, width: 20, height: 20, borderRadius: '50%',
              background: '#fff', border: `3px solid ${V2.primary}`, boxShadow: V2.shadowSm,
              transform: 'translateX(-50%)',
            }} />
          </div>
        </div>
      </section>

      {/* Breakdowns */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 22 }}>
        <SalaryBreakdown title="By company size" rows={[
          ['Startup (<50)',    '€62k', 64],
          ['Scale-up (50-250)','€74k', 78],
          ['Mid-market',       '€82k', 88],
          ['Enterprise',       '€88k', 96],
        ]} />
        <SalaryBreakdown title="By work mode" rows={[
          ['On-site',  '€68k', 72],
          ['Hybrid',   '€74k', 80],
          ['Remote',   '€78k', 86],
        ]} />
      </div>

      {/* Related */}
      <section style={{
        marginTop: 8, paddingTop: 32, borderTop: `1px solid ${V2.line}`,
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32, marginBottom: 32,
      }}>
        <article>
          <h2 style={{ margin: '0 0 14px', fontSize: 22, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
            How we calculate this
          </h2>
          <p style={{ margin: '0 0 14px', fontSize: 14.5, color: V2.text, lineHeight: 1.7, maxWidth: '64ch' }}>
            We combine two data sources: the <strong>posted salary ranges</strong> in active ScrollJob listings (when the employer disclosed them), and <strong>self-reported salaries</strong> from candidates who applied through our platform. Both are scrubbed for outliers (anything &gt;3 std deviations from the role-level median is discarded).
          </p>
          <p style={{ margin: '0 0 14px', fontSize: 14.5, color: V2.text, lineHeight: 1.7, maxWidth: '64ch' }}>
            We update the distribution nightly. Reported salaries are tied to a verified application, so they're anchored to a real role at a real employer — not free-form survey data.
          </p>
        </article>
        <SEORelated
          title="Related salary pages"
          links={[
            ['Python in Munich',     '€68k median'],
            ['Python in Hamburg',    '€64k median'],
            ['Python in Frankfurt',  '€72k median'],
            ['Senior Python · Berlin','€86k median'],
            ['Django · Berlin',      '€72k median'],
            ['Data engineer · Berlin','€78k median'],
            ['Back to Python jobs in Berlin', '412 jobs'],
            ['Python developer salary · Europe', 'Insight'],
          ]}
        />
      </section>
    </SEOShell>
  );
}

function SalaryBreakdown({ title, rows }) {
  const max = Math.max(...rows.map(([, , v]) => v));
  return (
    <div style={{
      background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, padding: 18,
    }}>
      <h3 style={{ margin: '0 0 14px', fontSize: 14, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>
        {title}
      </h3>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {rows.map(([label, med, val]) => (
          <div key={label} style={{ display: 'grid', gridTemplateColumns: '140px 1fr 64px', alignItems: 'center', gap: 12, fontSize: 13 }}>
            <span style={{ color: V2.text, fontWeight: 500 }}>{label}</span>
            <div style={{ height: 10, background: V2.bgAlt, borderRadius: 999, overflow: 'hidden' }}>
              <div style={{ width: `${(val / max) * 100}%`, height: '100%', background: V2.primary, borderRadius: 999 }} />
            </div>
            <span style={{ color: V2.ink, fontWeight: 700, textAlign: 'right' }}>{med}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────
// 3) /tools/   SEO tools landing
// ────────────────────────────────────────────────────────────────────────
function V2SEOToolsScreen() {
  return (
    <div style={{ background: V2.bg, fontFamily: V2.font, color: V2.ink, minHeight: '100%' }}>
      <V2Header active="Discover" />
      {/* Hero */}
      <section style={{
        background: V2.bgAlt, padding: '64px 0 40px',
        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',
          }}>Free tools</span>
          <h1 style={{
            margin: '0 0 14px', fontSize: 44, fontWeight: 800,
            color: V2.ink, letterSpacing: '-0.03em', lineHeight: 1.1, maxWidth: 720,
          }}>
            Tools that help you find the right job — and the right pay.
          </h1>
          <p style={{
            margin: 0, fontSize: 17, color: V2.text, maxWidth: 640, lineHeight: 1.55,
          }}>
            Quick utilities backed by our live salary data and the same job index recruiters search.
            No sign-up required.
          </p>
        </div>
      </section>

      <main style={{ maxWidth: 1200, margin: '0 auto', padding: '40px 32px 0' }}>
        {/* Featured: salary calculator */}
        <section style={{
          background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
          padding: 28, marginBottom: 22,
          display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 32, alignItems: 'center',
        }}>
          <div>
            <span style={{
              display: 'inline-flex', padding: '4px 10px', background: V2.primarySoft,
              color: V2.primaryInk, borderRadius: 999,
              fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
              marginBottom: 12,
            }}>Salary calculator</span>
            <h2 style={{
              margin: '0 0 12px', fontSize: 26, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em',
            }}>What should I be paid?</h2>
            <p style={{ margin: '0 0 20px', fontSize: 14.5, color: V2.text, lineHeight: 1.6, maxWidth: 460 }}>
              Pick a role, location and experience level. We'll show you the typical range based on real listings — not survey claims.
            </p>
            {/* Mock calc inputs */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 14 }}>
              <ToolField label="Role" value="Python Developer" />
              <ToolField label="Location" value="Berlin, DE" />
              <ToolField label="Experience" value="Mid (3–5y)" />
              <ToolField label="Work mode" value="Hybrid" />
            </div>
            <V2Button variant="primary" size="md" iconRight="arrow-right">Calculate</V2Button>
          </div>
          <div style={{
            background: V2.brandGradient, borderRadius: V2.rLg, padding: 28, color: '#fff',
          }}>
            <div style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', opacity: 0.85, marginBottom: 8 }}>
              Estimated range
            </div>
            <div style={{ fontSize: 44, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1 }}>
              €68k – €82k
            </div>
            <div style={{ fontSize: 14, marginTop: 8, opacity: 0.9 }}>
              Median <strong style={{ color: '#fff' }}>€74,000</strong> · based on 184 active listings
            </div>
            {/* Mini bar */}
            <div style={{ marginTop: 22, position: 'relative', height: 10, background: 'rgba(255,255,255,0.15)', borderRadius: 999 }}>
              <div style={{
                position: 'absolute', left: '30%', right: '15%', height: '100%',
                background: 'rgba(255,255,255,0.7)', borderRadius: 999,
              }} />
              <span style={{
                position: 'absolute', left: '50%', top: -4, width: 18, height: 18, borderRadius: '50%',
                background: '#fff', boxShadow: V2.shadow,
                transform: 'translateX(-50%)',
              }} />
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginTop: 8, opacity: 0.85 }}>
              <span>€40k</span><span>€72k</span><span>€140k</span>
            </div>
          </div>
        </section>

        {/* Other tools */}
        <h2 style={{
          margin: '40px 0 16px', fontSize: 22, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em',
        }}>More tools</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          <ToolCard
            icon="clock" title="Commute time" badge="New"
            desc="Estimate door-to-door commute for any job posting using your home postcode."
            preview={<CommutePreview />}
          />
          <ToolCard
            icon="target" title="Skills match"
            desc="Paste a job description, get a 0-100 match score against your profile + suggested missing skills."
            preview={<SkillsMatchPreview />}
          />
          <ToolCard
            icon="trending" title="Demand tracker"
            desc="See how many roles match a search term per week. Spot which skills are trending up or down."
            preview={<DemandPreview />}
          />
          <ToolCard
            icon="globe" title="Visa eligibility"
            desc="Check which UK and EU visa routes a role qualifies for, and which employers will sponsor."
            preview={<VisaPreview />}
          />
          <ToolCard
            icon="document" title="CV health check"
            desc="Upload your CV and we'll score structure, keyword fit and length against the role you're targeting."
          />
          <ToolCard
            icon="briefcase" title="Interview question bank"
            desc="Real interview questions, organised by role and seniority. Pulled from 24,000+ candidate reports."
          />
        </div>

        {/* CTA */}
        <section style={{
          marginTop: 56, marginBottom: 24,
          background: V2.bgAlt, borderRadius: V2.rLg, padding: 32,
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 24, alignItems: 'center',
        }}>
          <div>
            <h2 style={{ margin: '0 0 8px', fontSize: 22, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
              Get matches that beat all the calculators
            </h2>
            <p style={{ margin: 0, fontSize: 14.5, color: V2.text, lineHeight: 1.6, maxWidth: 460 }}>
              Create a free account, complete your profile, and we'll surface jobs that match your skills, location and pay expectations daily.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
            <V2Button variant="primary" size="md" iconRight="arrow-right">Create free account</V2Button>
            <V2Button variant="ghost" size="md">Sign in</V2Button>
          </div>
        </section>
      </main>
      <V2Footer />
    </div>
  );
}

function ToolField({ label, value }) {
  return (
    <div>
      <label style={{ display: 'block', fontSize: 11.5, fontWeight: 600, color: V2.muted, marginBottom: 5 }}>{label}</label>
      <input defaultValue={value} style={{
        width: '100%', padding: '10px 12px',
        border: `1px solid ${V2.lineStrong}`, borderRadius: 8,
        fontSize: 13.5, outline: 'none', fontFamily: V2.font, color: V2.ink, boxSizing: 'border-box',
      }} />
    </div>
  );
}

function ToolCard({ icon, title, desc, preview, badge }) {
  return (
    <article style={{
      background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, padding: 22,
      display: 'flex', flexDirection: 'column', gap: 14,
    }}>
      <header style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
        <span style={{
          width: 40, height: 40, borderRadius: 10, background: V2.primarySoft, color: V2.primary,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <Icon name={icon} size={20} />
        </span>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>{title}</h3>
            {badge && <V2Badge tone="primary" size="sm">{badge}</V2Badge>}
          </div>
        </div>
      </header>
      <p style={{ margin: 0, fontSize: 13, color: V2.muted, lineHeight: 1.55 }}>{desc}</p>
      {preview && <div>{preview}</div>}
      <a style={{
        marginTop: 'auto',
        fontSize: 13, fontWeight: 600, color: V2.primary, textDecoration: 'none',
        display: 'inline-flex', alignItems: 'center', gap: 4,
      }}>Open tool <Icon name="arrow-right" size={13} /></a>
    </article>
  );
}

function CommutePreview() {
  return (
    <div style={{
      background: V2.bgAlt, borderRadius: V2.rMd, padding: 12,
      display: 'flex', alignItems: 'center', gap: 10, fontSize: 12, color: V2.text,
    }}>
      <Icon name="pin" size={14} color={V2.muted} />
      SW9 → EC2A
      <span style={{ flex: 1 }} />
      <strong style={{ color: V2.ink }}>32 min</strong>
      <span style={{ color: V2.muted }}>bus + tube</span>
    </div>
  );
}
function SkillsMatchPreview() {
  return (
    <div style={{
      background: V2.bgAlt, borderRadius: V2.rMd, padding: 12,
      display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <MatchScorePill score={78} />
      <span style={{ fontSize: 12, color: V2.muted, flex: 1 }}>
        Missing: <strong style={{ color: V2.ink }}>asyncio, GCP</strong>
      </span>
    </div>
  );
}
function DemandPreview() {
  const data = [10, 14, 12, 18, 22, 18, 26, 32, 28, 38, 42, 38];
  const max = Math.max(...data);
  return (
    <div style={{ background: V2.bgAlt, borderRadius: V2.rMd, padding: 12 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: V2.muted, marginBottom: 6 }}>
        <span>"python developer"</span>
        <span style={{ color: V2.success, fontWeight: 700 }}>+38% last 12 weeks</span>
      </div>
      <svg viewBox="0 0 200 30" style={{ width: '100%', height: 30 }}>
        {(() => {
          const stepX = 200 / (data.length - 1);
          const pts = data.map((v, i) => `${i * stepX},${28 - (v / max) * 26}`).join(' ');
          return <polyline points={pts} fill="none" stroke={V2.primary} strokeWidth="2" strokeLinejoin="round" />;
        })()}
      </svg>
    </div>
  );
}
function VisaPreview() {
  return (
    <div style={{ background: V2.bgAlt, borderRadius: V2.rMd, padding: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
      <V2Badge tone="success" size="sm" icon="check">UK Skilled Worker eligible</V2Badge>
      <V2Badge tone="primary" size="sm">EU Blue Card</V2Badge>
    </div>
  );
}

Object.assign(window, { V2SEORoleLocationScreen, V2SEOSalaryScreen, V2SEOToolsScreen });