// ScrollJob v2 — Mobile screens (390×844 iPhone)
// ScrollJob v2 — Mobile screens (responsive site, NOT a native app).
// No iOS status bar, no bottom tab bar. Just the regular V2Header collapsed
// to a logo + hamburger, and the same V2Footer the desktop site uses.

const M = { W: 390 };

function V2MobileShell({ children, hideTabs /* legacy */, hideFooter, tab /* unused */ }) {
  return (
    <div style={{
      width: M.W, height: '100%', background: V2.bg,
      fontFamily: V2.font, color: V2.ink,
      display: 'flex', flexDirection: 'column', overflow: 'hidden',
    }}>
      <V2MobileWebHeader />
      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', overflowX: 'hidden' }}>
        {children}
        {!hideFooter && <V2MobileWebFooter />}
      </div>
    </div>
  );
}

// Mobile-web top bar: logo on the left, hamburger on the right.
// No tab bar — secondary navigation lives behind the hamburger drawer.
function V2MobileWebHeader() {
  return (
    <header style={{
      flexShrink: 0,
      background: 'rgba(255,255,255,0.92)',
      backdropFilter: 'saturate(180%) blur(8px)',
      WebkitBackdropFilter: 'saturate(180%) blur(8px)',
      borderBottom: `1px solid ${V2.line}`,
      padding: '12px 16px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      position: 'sticky', top: 0, zIndex: 20,
    }}>
      <a style={{ display: 'inline-flex' }}>
        <V2Logo size={32} />
      </a>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
        <button aria-label="Search" style={mobileIconBtnStyle()}>
          <Icon name="search" size={18} />
        </button>
        <button aria-label="Account" style={mobileIconBtnStyle()}>
          <Icon name="user" size={18} />
        </button>
        <button aria-label="Menu" style={mobileIconBtnStyle()}>
          <Icon name="menu" size={20} />
        </button>
      </div>
    </header>
  );
}

// Compact mobile-web footer — same structure as desktop, stacked.
function V2MobileWebFooter() {
  return (
    <footer style={{
      background: V2.bgAlt, color: V2.text,
      borderTop: `1px solid ${V2.line}`,
      padding: '32px 20px 20px', marginTop: 32,
    }}>
      <div style={{ marginBottom: 24 }}>
        <a style={{ display: 'inline-block', marginBottom: 12 }}>
          <img src="assets/scrolljob-wordmark.png" alt="ScrollJob" style={{ height: 30, width: 'auto', display: 'block' }} />
        </a>
        <p style={{ margin: 0, fontSize: 13, lineHeight: 1.55, color: V2.muted }}>
          Find the right job faster. Search, swipe, save, apply — for every kind of work.
        </p>
      </div>
      {[
        ['Find work', ['Search jobs', 'Remote jobs', 'Part-time', 'By city']],
        ['Job seekers', ['Resume builder', 'Saved jobs', 'Job alerts']],
        ['Employers',  ['Post a job', 'Pricing']],
        ['Company',    ['About', 'Help', 'Terms', 'Privacy']],
      ].map(([title, items]) => (
        <details key={title} style={{ borderTop: `1px solid ${V2.line}`, padding: '12px 0' }}>
          <summary style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            cursor: 'pointer', fontSize: 13, fontWeight: 700, color: V2.ink, listStyle: 'none',
          }}>
            {title}
            <Icon name="chevron-down" size={14} color={V2.muted} />
          </summary>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: '10px 0 4px' }}>
            {items.map((i) => (
              <a key={i} style={{ fontSize: 13, color: V2.text, textDecoration: 'none' }}>{i}</a>
            ))}
          </div>
        </details>
      ))}
      <div style={{
        marginTop: 16, paddingTop: 14, borderTop: `1px solid ${V2.line}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontSize: 11.5, color: V2.muted,
      }}>
        <span>© 2026 ScrollJob Ltd.</span>
        <span style={{ display: 'inline-flex', gap: 10 }}>
          <a style={{ color: V2.muted, textDecoration: 'none' }}>EN</a>
          <a style={{ color: V2.muted, textDecoration: 'none' }}>£ GBP</a>
        </span>
      </div>
    </footer>
  );
}

function V2MobileTopBar({ title, back, action }) {
  // Sub-header used INSIDE pages (back navigation + page title + action).
  // Sits below V2MobileWebHeader, sticky on its own.
  return (
    <header style={{
      padding: '10px 16px', borderBottom: `1px solid ${V2.line}`,
      display: 'flex', alignItems: 'center', gap: 12, background: '#fff',
      position: 'sticky', top: 0, zIndex: 10,
    }}>
      {back ? (
        <button style={mobileIconBtnStyle()}><Icon name="arrow-left" size={20} /></button>
      ) : null}
      {title && (
        <h1 style={{ flex: 1, fontSize: 17, fontWeight: 700, color: V2.ink, margin: 0, letterSpacing: '-0.01em' }}>
          {title}
        </h1>
      )}
      {!title && <span style={{ flex: 1 }} />}
      {action}
    </header>
  );
}

function mobileIconBtnStyle() {
  return {
    width: 38, height: 38, borderRadius: 10, background: V2.bgAlt,
    border: 'none', cursor: 'pointer', color: V2.ink,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  };
}

// ────────────────────────────────────────────────────────────────────────
// MOBILE HOME
// ────────────────────────────────────────────────────────────────────────
function V2MobileHomeScreen() {
  return (
    <V2MobileShell tab="Home">
      <V2MobileTopBar />
      <div style={{ padding: '16px 16px 24px' }}>
        {/* Hero */}
        <div style={{ marginBottom: 18 }}>
          <h1 style={{
            margin: '0 0 6px', fontSize: 28, fontWeight: 800,
            color: V2.ink, letterSpacing: '-0.03em', lineHeight: 1.1,
          }}>
            Find the right job <span style={{ color: V2.primary }}>faster.</span>
          </h1>
          <p style={{ margin: 0, fontSize: 14, color: V2.text, lineHeight: 1.5 }}>
            68,420 jobs live across the UK
          </p>
        </div>

        {/* Search */}
        <div style={{
          background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
          padding: 8, boxShadow: V2.shadow, marginBottom: 18,
        }}>
          <div style={{ position: 'relative', marginBottom: 4 }}>
            <Icon name="search" size={18} color={V2.muted}
                  style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)' }} />
            <input defaultValue="Care assistant" style={{
              width: '100%', padding: '12px 14px 12px 40px',
              border: 'none', background: 'transparent', fontSize: 15,
              outline: 'none', color: V2.ink, fontFamily: V2.font, fontWeight: 500, boxSizing: 'border-box',
            }} />
          </div>
          <div style={{ height: 1, background: V2.line, margin: '0 -8px' }} />
          <div style={{ position: 'relative', marginTop: 4, marginBottom: 8 }}>
            <Icon name="pin" size={18} color={V2.muted}
                  style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)' }} />
            <input defaultValue="Bristol" style={{
              width: '100%', padding: '12px 14px 12px 40px',
              border: 'none', background: 'transparent', fontSize: 15,
              outline: 'none', color: V2.ink, fontFamily: V2.font, fontWeight: 500, boxSizing: 'border-box',
            }} />
          </div>
          <V2Button variant="primary" size="md" icon="search" full>Find jobs</V2Button>
        </div>

        {/* Swipe CTA */}
        <a style={{
          display: 'flex', alignItems: 'center', gap: 14,
          background: V2.ink, color: '#fff',
          borderRadius: V2.rLg, padding: 18, marginBottom: 22,
          textDecoration: 'none',
        }}>
          <span style={{
            width: 44, height: 44, borderRadius: 12,
            background: V2.primary, color: '#fff',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
          }}>
            <Icon name="flame" size={22} />
          </span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 15, fontWeight: 700, marginBottom: 2 }}>24 fresh jobs for you</div>
            <div style={{ fontSize: 12.5, color: '#CFD4DC' }}>Try swipe mode — fast, easy</div>
          </div>
          <Icon name="chevron-right" size={18} color="#fff" />
        </a>

        {/* Categories grid */}
        <div style={{ marginBottom: 22 }}>
          <h2 style={{
            margin: '0 0 12px', fontSize: 14, fontWeight: 700,
            color: V2.muted, letterSpacing: '0.06em', textTransform: 'uppercase',
          }}>Browse by category</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
            {V2_CATEGORIES.slice(0, 6).map((c) => {
              const pal = V2.cats[c.name];
              return (
                <a key={c.name} style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  background: '#fff', border: `1px solid ${V2.line}`,
                  borderRadius: V2.rMd, padding: 12, textDecoration: 'none',
                }}>
                  <span style={{
                    width: 36, height: 36, borderRadius: 10,
                    background: pal.bg, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <Icon name={c.icon} size={18} color={pal.accent} />
                  </span>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 700, color: V2.ink }}>{c.name}</div>
                    <div style={{ fontSize: 11, color: V2.muted }}>{c.count.toLocaleString()} jobs</div>
                  </div>
                </a>
              );
            })}
          </div>
        </div>

        {/* Latest jobs */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12,
        }}>
          <h2 style={{ margin: 0, fontSize: 17, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>Newest jobs</h2>
          <a style={{ color: V2.primary, fontSize: 13, fontWeight: 600, textDecoration: 'none' }}>See all →</a>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <V2MobileJobCard job={V2_JOBS[1]} />
          <V2MobileJobCard job={V2_JOBS[2]} />
          <V2MobileJobCard job={V2_JOBS[3]} />
        </div>
      </div>
    </V2MobileShell>
  );
}

function V2MobileJobCard({ job, saved }) {
  return (
    <a style={{
      display: 'block', background: '#fff',
      border: `1px solid ${V2.line}`, borderRadius: V2.rMd, padding: 14,
      textDecoration: 'none', color: 'inherit',
    }}>
      <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
        <V2CompanyAvatar name={job.company} category={job.category} size={42} radius={11} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
            <h3 style={{ margin: 0, fontSize: 14.5, fontWeight: 700, color: V2.ink, lineHeight: 1.3 }}>
              {job.title}
            </h3>
            <Icon name={saved ? 'bookmarkFill' : 'bookmark'} size={16}
                  color={saved ? V2.danger : V2.muted} style={{ flexShrink: 0, marginTop: 2 }} />
          </div>
          <div style={{ fontSize: 12.5, color: V2.muted, marginTop: 3 }}>
            {job.company} · {job.location}
          </div>
          <div style={{ fontSize: 13, fontWeight: 700, color: V2.ink, marginTop: 8 }}>{job.salary}</div>
          <div style={{ display: 'flex', gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
            <V2CatPill name={job.category} size="sm" />
            {job.workMode === 'Remote' && <V2Badge tone="success" size="sm">Remote</V2Badge>}
            {job.workMode === 'Hybrid' && <V2Badge tone="info" size="sm">Hybrid</V2Badge>}
          </div>
        </div>
      </div>
    </a>
  );
}

// ────────────────────────────────────────────────────────────────────────
// MOBILE JOB LIST
// ────────────────────────────────────────────────────────────────────────
function V2MobileJobListScreen() {
  return (
    <V2MobileShell tab="Jobs">
      <V2MobileTopBar />
      <div style={{ padding: '14px 16px 0' }}>
        {/* Search */}
        <div style={{ position: 'relative', marginBottom: 12 }}>
          <Icon name="search" size={18} color={V2.muted}
                style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)' }} />
          <input defaultValue="Care assistant Bristol" style={{
            width: '100%', padding: '12px 14px 12px 42px',
            background: '#fff', border: `1px solid ${V2.line}`, borderRadius: 12,
            fontSize: 14.5, outline: 'none', fontFamily: V2.font, boxSizing: 'border-box', fontWeight: 500,
          }} />
        </div>

        <div style={{ marginBottom: 10 }}>
          <h1 style={{ margin: '0 0 2px', fontSize: 20, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
            248 jobs
          </h1>
          <p style={{ margin: 0, fontSize: 12.5, color: V2.muted }}>Care assistant · Bristol · within 10 miles</p>
        </div>

        {/* Filter pills */}
        <div style={{
          display: 'flex', gap: 8, marginBottom: 14, overflowX: 'auto', paddingBottom: 4,
        }}>
          <button style={mFilterPill(true)}>
            <Icon name="sliders" size={14} /> Filters · 3
          </button>
          {[['£12/hr+', true], ['Part-time', true], ['Within 10 mi', true], ['Day shift'], ['Sponsorship']].map(([t, on]) => (
            <button key={t} style={mFilterPill(on)}>{t}</button>
          ))}
        </div>
      </div>

      <div style={{ padding: '0 16px 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <V2MobileJobCard job={V2_JOBS[1]} />
        <V2MobileJobCard job={V2_JOBS[9]} saved />
        <V2MobileJobCard job={V2_JOBS[0]} />
        <V2MobileJobCard job={V2_JOBS[2]} />
        <V2MobileJobCard job={V2_JOBS[5]} />
        <V2MobileJobCard job={V2_JOBS[3]} />
      </div>
    </V2MobileShell>
  );
}

function mFilterPill(on) {
  return {
    padding: '7px 12px', borderRadius: 999, fontSize: 12.5, fontWeight: 600,
    border: `1px solid ${on ? V2.primary : V2.line}`,
    background: on ? V2.primarySoft : '#fff',
    color: on ? V2.primaryInk : V2.text,
    whiteSpace: 'nowrap', cursor: 'pointer', fontFamily: V2.font, flexShrink: 0,
    display: 'inline-flex', alignItems: 'center', gap: 5,
  };
}

// ────────────────────────────────────────────────────────────────────────
// MOBILE FILTERS (bottom sheet)
// ────────────────────────────────────────────────────────────────────────
function V2MobileFiltersScreen() {
  return (
    <V2MobileShell hideTabs>
      <V2MobileTopBar title="Filters" back action={
        <button style={{
          padding: '6px 10px', background: 'transparent', border: 'none',
          color: V2.primary, fontWeight: 600, fontSize: 14, cursor: 'pointer',
        }}>Reset</button>
      } />
      <div style={{ padding: '12px 16px 24px' }}>
        <MobileFilterBlock label="Distance from Bristol">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
            {['1 mi', '5 mi', '10 mi', '25 mi', 'Across UK', 'Remote'].map((d, i) => (
              <button key={d} style={mFilterPill(i === 2)}>{d}</button>
            ))}
          </div>
        </MobileFilterBlock>

        <MobileFilterBlock label="Salary">
          <div style={{ padding: '12px 4px 4px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: V2.muted, marginBottom: 8 }}>
              <span>£12 / hour</span>
              <span>£35 / hour+</span>
            </div>
            <div style={{ position: 'relative', height: 6, background: V2.line, borderRadius: 999 }}>
              <div style={{ position: 'absolute', left: '20%', right: '15%', height: '100%', background: V2.primary, borderRadius: 999 }} />
              <span style={{ position: 'absolute', left: '20%', top: -7, width: 20, height: 20, borderRadius: '50%', background: '#fff', border: `2px solid ${V2.primary}`, transform: 'translateX(-50%)' }} />
              <span style={{ position: 'absolute', right: '15%', top: -7, width: 20, height: 20, borderRadius: '50%', background: '#fff', border: `2px solid ${V2.primary}`, transform: 'translateX(50%)' }} />
            </div>
            <div style={{ fontSize: 13, color: V2.ink, fontWeight: 600, marginTop: 14, textAlign: 'center' }}>
              £12 – £30 / hour
            </div>
          </div>
        </MobileFilterBlock>

        <MobileFilterBlock label="Job type">
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {[['Full-time', false], ['Part-time', true], ['Contract', false], ['Temporary', false], ['Apprenticeship', false]].map(([t, on]) => (
              <button key={t} style={mFilterPill(on)}>{t}</button>
            ))}
          </div>
        </MobileFilterBlock>

        <MobileFilterBlock label="Working pattern">
          {[['Day shift', true], ['Night shift', false], ['Weekend', false], ['Hybrid', false], ['Remote', false]].map(([t, on]) => (
            <label key={t} style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              padding: '12px 0', fontSize: 14.5, color: V2.ink, fontWeight: on ? 600 : 500,
            }}>
              {t}
              <input type="checkbox" defaultChecked={on} style={{ width: 18, height: 18, accentColor: V2.primary }} />
            </label>
          ))}
        </MobileFilterBlock>

        <MobileFilterBlock label="Posted within">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
            {[['Last 24 hours', false], ['Last 3 days', false], ['Last week', true], ['Last month', false]].map(([t, on]) => (
              <button key={t} style={mFilterPill(on)}>{t}</button>
            ))}
          </div>
        </MobileFilterBlock>
      </div>

      {/* Sticky apply bar */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        padding: '14px 16px 20px', background: '#fff',
        borderTop: `1px solid ${V2.line}`,
        display: 'flex', gap: 10,
      }}>
        <V2Button variant="secondary" size="lg">Cancel</V2Button>
        <V2Button variant="primary" size="lg" full>Show 248 jobs</V2Button>
      </div>
    </V2MobileShell>
  );
}

function MobileFilterBlock({ label, children }) {
  return (
    <div style={{
      paddingBottom: 18, marginBottom: 18,
      borderBottom: `1px solid ${V2.line}`,
    }}>
      <div style={{ fontSize: 14, fontWeight: 700, color: V2.ink, marginBottom: 12 }}>{label}</div>
      {children}
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────
// MOBILE JOB DETAIL
// ────────────────────────────────────────────────────────────────────────
function V2MobileJobDetailScreen() {
  const j = V2_JOBS[1]; // Care Assistant
  return (
    <V2MobileShell hideTabs>
      <V2MobileTopBar back action={
        <button style={mobileIconBtnStyle()}><Icon name="share" size={20} /></button>
      } />
      <div style={{ padding: '4px 16px 120px' }}>
        {/* Hero */}
        <div style={{
          background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
          padding: 18, marginBottom: 14,
        }}>
          <div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
            <V2Badge tone="success" size="sm">Actively hiring</V2Badge>
            <V2Badge tone="featured" size="sm" icon="starFill">Featured</V2Badge>
          </div>
          <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
            <V2CompanyAvatar name={j.company} category={j.category} size={56} radius={14} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <h1 style={{ margin: '0 0 4px', fontSize: 19, fontWeight: 700, color: V2.ink, lineHeight: 1.25, letterSpacing: '-0.01em' }}>
                {j.title}
              </h1>
              <div style={{ fontSize: 14, fontWeight: 600, color: V2.primary }}>{j.company}</div>
              <div style={{ fontSize: 12.5, color: V2.muted, marginTop: 3, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                <Icon name="starFill" size={12} color="#D97706" /> {j.companyRating} · 842 reviews
              </div>
            </div>
          </div>

          {/* Meta grid */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12,
            marginTop: 16, paddingTop: 16, borderTop: `1px solid ${V2.lineSoft}`,
          }}>
            {[
              { icon: 'money',     label: 'Salary',   value: j.salary, primary: true },
              { icon: 'pin',       label: 'Location', value: j.location },
              { icon: 'briefcase', label: 'Type',     value: 'Part-time' },
              { icon: 'clock',     label: 'Posted',   value: '5 hours ago' },
            ].map((m) => (
              <div key={m.label} style={{ display: 'flex', gap: 8 }}>
                <Icon name={m.icon} size={16} color={V2.muted} style={{ marginTop: 2, flexShrink: 0 }} />
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 11, color: V2.muted }}>{m.label}</div>
                  <div style={{ fontSize: 13, color: V2.ink, fontWeight: m.primary ? 700 : 600, marginTop: 1 }}>{m.value}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* About */}
        <section style={cardStyle()}>
          <h2 style={mobileH2()}>About the role</h2>
          <p style={mobileP()}>
            Lavender House is a 24-bedroom residential care home in central Bristol. We support older adults with personal care, social activities, and a warm, family-feel environment.
          </p>
          <p style={mobileP()}>
            You'll work two-on / two-off shifts of 7am–3pm. Full induction provided. NVQ Level 2 desirable but we'll sponsor the right candidate.
          </p>
        </section>

        <section style={cardStyle()}>
          <h2 style={mobileH2()}>Requirements</h2>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
            {[
              'Right to work in the UK (sponsorship considered)',
              'Caring, calm and patient temperament',
              'Comfortable with personal & dementia care',
              'Good written English for care notes',
            ].map((r) => (
              <li key={r} style={{ display: 'flex', gap: 10, fontSize: 13.5, color: V2.text, lineHeight: 1.55 }}>
                <span style={{
                  width: 18, height: 18, borderRadius: '50%', background: V2.successBg, color: V2.success,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1,
                }}>
                  <Icon name="check" size={12} />
                </span>
                {r}
              </li>
            ))}
          </ul>
        </section>

        <section style={cardStyle()}>
          <h2 style={mobileH2()}>Benefits</h2>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {['Weekly pay', 'NVQ sponsored', 'Workplace pension', 'Free uniform', '£250 refer-a-friend', '5.6w holiday'].map((b) => (
              <V2Badge key={b} tone="neutral" size="md">{b}</V2Badge>
            ))}
          </div>
        </section>
      </div>

      {/* Sticky apply bar */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        padding: '12px 16px 24px', background: '#fff',
        borderTop: `1px solid ${V2.line}`, display: 'flex', gap: 8, boxShadow: '0 -4px 16px rgba(16,24,40,0.06)',
      }}>
        <button style={{
          width: 48, height: 48, borderRadius: 12,
          background: '#fff', border: `1px solid ${V2.line}`,
          cursor: 'pointer', flexShrink: 0,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="bookmark" size={20} color={V2.ink} />
        </button>
        <V2Button variant="primary" size="lg" iconRight="arrow-right" full>Apply now</V2Button>
      </div>
    </V2MobileShell>
  );
}

function cardStyle()  { return { background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, padding: 18, marginBottom: 14 }; }
function mobileH2()   { return { margin: '0 0 12px', fontSize: 16, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }; }
function mobileP()    { return { margin: '0 0 10px', fontSize: 14, color: V2.text, lineHeight: 1.6 }; }

Object.assign(window, {
  V2MobileShell, V2MobileWebHeader, V2MobileWebFooter, V2MobileTopBar,
  V2MobileHomeScreen, V2MobileJobListScreen, V2MobileFiltersScreen, V2MobileJobDetailScreen,
  V2MobileJobCard, mobileIconBtnStyle, cardStyle, mobileH2, mobileP, mFilterPill,
});