// ScrollJob v2 — extra mobile screens for the cabinet, settings, auth,
// notifications, applications, saved jobs, history, resume + employer.
// Reuses V2MobileShell / V2MobileTopBar / V2MobileTabs from v2-mobile.jsx.

// ────────────────────────────────────────────────────────────────────────
// ME / SEEKER DASHBOARD
// ────────────────────────────────────────────────────────────────────────
function V2MobileMeScreen() {
  return (
    <V2MobileShell tab="Me">
      <V2MobileTopBar title="Me" action={
        <button style={mobileIconBtnStyle()}><Icon name="sliders" size={18} /></button>
      } />
      <div style={{ padding: '16px 16px 28px' }}>
        {/* Profile card */}
        <div style={{
          background: V2.brandGradient, color: '#fff',
          borderRadius: V2.rLg, padding: 18, marginBottom: 16,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{
              width: 52, height: 52, borderRadius: '50%',
              background: 'rgba(255,255,255,0.18)',
              border: '2px solid rgba(255,255,255,0.35)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 18, fontWeight: 800,
            }}>EC</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 16, fontWeight: 700 }}>Emma Carter</div>
              <div style={{ fontSize: 12.5, opacity: 0.88, marginTop: 2 }}>Care assistant · Bristol</div>
            </div>
            <button style={{
              padding: '6px 12px', borderRadius: 999, fontSize: 12, fontWeight: 700,
              background: 'rgba(255,255,255,0.18)', color: '#fff',
              border: '1px solid rgba(255,255,255,0.35)', cursor: 'pointer', fontFamily: V2.font,
            }}>Edit</button>
          </div>
          <div style={{
            marginTop: 14, padding: '10px 12px', borderRadius: V2.rMd,
            background: 'rgba(255,255,255,0.14)', backdropFilter: 'blur(6px)',
            fontSize: 12.5, lineHeight: 1.5,
          }}>
            <strong>72% profile complete</strong> · finishing your resume adds ~38% more profile views.
          </div>
        </div>

        {/* Stats strip */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 18 }}>
          {[
            ['8',  'Saved'],
            ['12', 'Applied'],
            ['186','Views'],
          ].map(([n, l]) => (
            <div key={l} style={{
              background: '#fff', border: `1px solid ${V2.line}`,
              borderRadius: V2.rMd, padding: '12px 8px', textAlign: 'center',
            }}>
              <div style={{ fontSize: 20, fontWeight: 800, color: V2.primary, letterSpacing: '-0.02em' }}>{n}</div>
              <div style={{ fontSize: 11, color: V2.muted, marginTop: 2 }}>{l}</div>
            </div>
          ))}
        </div>

        {/* Next best actions */}
        <h3 style={meMobileSectionHeading()}>Continue where you left off</h3>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 18 }}>
          <MobileActionRow
            icon="sparkle" iconBg={V2.primarySoft} iconColor={V2.primary}
            title="3 new matches today"
            sub="Care assistant · Bristol · within 10mi"
            cta="Review" />
          <MobileActionRow
            icon="document" iconBg="#FEF6E6" iconColor="#B45309"
            title="Finish your resume (72%)"
            sub="3 sections to fill"
            cta="Open" />
          <MobileActionRow
            icon="bookmark" iconBg={V2.bgAlt} iconColor={V2.ink}
            title="5 saved jobs to review"
            sub="All still active"
            cta="Open" />
        </div>

        {/* Menu list */}
        <h3 style={meMobileSectionHeading()}>Account</h3>
        <MobileListItem icon="search"   title="Saved searches" sub="3 active" />
        <MobileListItem icon="sparkle"  title="Recommendations" sub="24 today" />
        <MobileListItem icon="clock"    title="Browse history" />
        <MobileListItem icon="check"    title="Applications" sub="12 · 1 interview" />
        <MobileListItem icon="bookmark" title="Saved jobs" sub="8 jobs" />
        <MobileListItem icon="document" title="Hosted resume" sub="1 published" />
        <MobileListItem icon="share"    title="Share profile" sub="Active link" />

        <h3 style={meMobileSectionHeading()}>Preferences</h3>
        <MobileListItem icon="bell"    title="Notifications" sub="Email, push, in-app" />
        <MobileListItem icon="globe"   title="Region" sub="United Kingdom" />
        <MobileListItem icon="sliders" title="Settings" />

        <div style={{ marginTop: 22 }}>
          <button style={{
            width: '100%', padding: '13px', background: '#fff', color: V2.danger,
            border: `1px solid ${V2.dangerLine}`, borderRadius: 12,
            fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: V2.font,
          }}>Sign out</button>
        </div>
      </div>
    </V2MobileShell>
  );
}

function meMobileSectionHeading() {
  return {
    fontSize: 11, fontWeight: 700, color: V2.muted,
    textTransform: 'uppercase', letterSpacing: '0.08em',
    margin: '14px 4px 10px', paddingLeft: 4,
  };
}

function MobileActionRow({ icon, iconBg, iconColor, title, sub, cta }) {
  return (
    <a style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '12px 14px',
      background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rMd,
      textDecoration: 'none', color: 'inherit',
    }}>
      <span style={{
        width: 38, height: 38, borderRadius: 10, background: iconBg, color: iconColor,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <Icon name={icon} size={18} />
      </span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13.5, fontWeight: 700, color: V2.ink }}>{title}</div>
        <div style={{ fontSize: 12, color: V2.muted, marginTop: 2 }}>{sub}</div>
      </div>
      <span style={{
        padding: '5px 12px', borderRadius: 999,
        background: V2.primarySoft, color: V2.primaryInk,
        border: `1px solid ${V2.primaryRing}`,
        fontSize: 12, fontWeight: 700,
      }}>{cta}</span>
    </a>
  );
}

function MobileListItem({ icon, title, sub }) {
  return (
    <a style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '12px 14px',
      background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rMd,
      marginBottom: 6, textDecoration: 'none', color: 'inherit',
    }}>
      <span style={{
        width: 34, height: 34, borderRadius: 9, background: V2.bgAlt,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <Icon name={icon} size={16} color={V2.muted} />
      </span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: V2.ink }}>{title}</div>
        {sub && <div style={{ fontSize: 12, color: V2.muted, marginTop: 1 }}>{sub}</div>}
      </div>
      <Icon name="chevron-right" size={16} color={V2.faint} />
    </a>
  );
}

// ────────────────────────────────────────────────────────────────────────
// SAVED JOBS
// ────────────────────────────────────────────────────────────────────────
function V2MobileSavedScreen() {
  const jobs = [V2_JOBS[1], V2_JOBS[9], V2_JOBS[10], V2_JOBS[3], V2_JOBS[5]];
  return (
    <V2MobileShell tab="Saved">
      <V2MobileTopBar title="Saved" action={
        <button style={mobileIconBtnStyle()}><Icon name="sliders" size={18} /></button>
      } />
      <div style={{ padding: '12px 16px 0' }}>
        <div style={{ display: 'flex', gap: 6, overflowX: 'auto', paddingBottom: 6 }}>
          {[['All', 8, true], ['Active', 8], ['Closing soon', 2], ['Recent', 3]].map(([t, n, on]) => (
            <button key={t} style={mFilterPill(on)}>{t} <span style={{ fontSize: 11, opacity: 0.7 }}>{n}</span></button>
          ))}
        </div>
      </div>
      <div style={{ padding: '0 16px 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {jobs.map((j, i) => <V2MobileJobCard key={i} job={j} saved />)}
      </div>
    </V2MobileShell>
  );
}

// ────────────────────────────────────────────────────────────────────────
// APPLICATIONS
// ────────────────────────────────────────────────────────────────────────
function V2MobileApplicationsScreen() {
  const apps = [
    { co: 'Lavender House Care', cat: 'Healthcare', role: 'Care Assistant',          when: '2 hours ago', stage: 'applied',   next: 'Awaiting reply' },
    { co: 'Sunrise Senior Living', cat: 'Healthcare', role: 'Senior Care Assistant', when: 'Yesterday',   stage: 'screening', next: 'CV viewed' },
    { co: 'Mercury Couriers', cat: 'Driving', role: 'Delivery Driver',                when: '3 days ago',  stage: 'interview', next: 'Phone screen · Thu 16 May' },
    { co: 'Wren & Co.', cat: 'Retail', role: 'Retail Assistant',                      when: '5 days ago',  stage: 'rejected',  next: 'Ask for feedback' },
    { co: 'The Bramley', cat: 'Hospitality', role: 'Hotel Receptionist',              when: '6 days ago',  stage: 'applied',   next: 'Awaiting reply' },
    { co: 'Bridgewater Logistics', cat: 'Logistics', role: 'Warehouse Operative',     when: '1 week ago',  stage: 'withdrawn', next: 'You withdrew' },
  ];
  return (
    <V2MobileShell tab="Saved">
      <V2MobileTopBar title="Applications" />
      <div style={{ padding: '12px 16px 4px' }}>
        <div style={{ display: 'flex', gap: 6, overflowX: 'auto', paddingBottom: 6 }}>
          {[['All', 12, true], ['Active', 8], ['Interview', 1], ['Closed', 3]].map(([t, n, on]) => (
            <button key={t} style={mFilterPill(on)}>{t} <span style={{ fontSize: 11, opacity: 0.7 }}>{n}</span></button>
          ))}
        </div>
      </div>
      <div style={{ padding: '0 16px 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {apps.map((a, i) => (
          <a key={i} 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={a.co} category={a.cat} size={40} radius={10} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 4 }}>
                  <div style={{ fontSize: 14.5, fontWeight: 700, color: V2.ink, lineHeight: 1.25 }}>{a.role}</div>
                  <ApplicationStageBadge stage={a.stage} />
                </div>
                <div style={{ fontSize: 12.5, color: V2.muted }}>
                  {a.co} · applied {a.when}
                </div>
                <div style={{ fontSize: 12.5, color: V2.text, marginTop: 8 }}>
                  {a.next}
                </div>
              </div>
            </div>
          </a>
        ))}
      </div>
    </V2MobileShell>
  );
}

// ────────────────────────────────────────────────────────────────────────
// SAVED SEARCHES / ALERTS
// ────────────────────────────────────────────────────────────────────────
function V2MobileAlertsScreen() {
  const searches = [
    { name: 'Care assistant · Bristol',     freq: 'Daily',  active: true, count: 248, last: '3h ago' },
    { name: 'Warehouse · Manchester',       freq: 'Daily',  active: true, count: 612, last: 'Yesterday' },
    { name: 'Remote customer support · UK', freq: 'Weekly', active: false, count: 318, last: '4 days ago' },
  ];
  return (
    <V2MobileShell tab="Me">
      <V2MobileTopBar title="Saved searches" back action={
        <button style={mobileIconBtnStyle()}><Icon name="plus" size={18} /></button>
      } />
      <div style={{ padding: '12px 16px 20px' }}>
        <div style={{
          padding: 14, marginBottom: 14,
          background: V2.primarySoft, border: `1px solid ${V2.primaryRing}`,
          borderRadius: V2.rMd, display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <Icon name="bell" size={18} color={V2.primary} />
          <div style={{ fontSize: 12.5, color: V2.primaryInk, lineHeight: 1.5, flex: 1 }}>
            Active alerts will email you when new matching jobs are posted.
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {searches.map((s, i) => (
            <article key={i} style={{
              background: '#fff', border: `1px solid ${V2.line}`,
              borderRadius: V2.rMd, padding: 14,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8, gap: 10 }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14.5, fontWeight: 700, color: V2.ink, marginBottom: 4 }}>{s.name}</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
                    <V2Badge tone={s.active ? 'success' : 'neutral'} size="sm">{s.active ? 'Active' : 'Paused'}</V2Badge>
                    <V2Badge tone="info" size="sm" icon="bell">{s.freq}</V2Badge>
                    <span style={{ fontSize: 11.5, color: V2.muted }}>{s.count} jobs</span>
                  </div>
                </div>
                <V2Toggle on={s.active} />
              </div>
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                paddingTop: 10, marginTop: 4, borderTop: `1px solid ${V2.lineSoft}`,
                fontSize: 12, color: V2.muted,
              }}>
                <span>Last alert {s.last}</span>
                <a style={{ color: V2.primary, fontWeight: 600, textDecoration: 'none' }}>
                  View results →
                </a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </V2MobileShell>
  );
}

// ────────────────────────────────────────────────────────────────────────
// NOTIFICATIONS
// ────────────────────────────────────────────────────────────────────────
function V2MobileNotificationsScreen() {
  const rows = [
    { event: 'New match for saved search', desc: 'Care assistant in Bristol · daily', email: true, push: true },
    { event: 'Application status update',  desc: 'Reviewed, interview, offer',         email: true, push: true },
    { event: 'Employer messages',          desc: 'Direct replies',                     email: true, push: false },
    { event: 'Weekly digest',              desc: 'Sunday summary',                     email: true, push: false },
    { event: 'Profile views',              desc: 'When recruiters view your resume',   email: false, push: true },
  ];
  return (
    <V2MobileShell tab="Me">
      <V2MobileTopBar title="Notifications" back />
      <div style={{ padding: '12px 16px 24px' }}>
        {/* Pause */}
        <div style={{
          padding: 14, marginBottom: 16,
          background: V2.warnBg, border: `1px solid ${V2.warnLine}`,
          borderRadius: V2.rMd, display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <Icon name="bell" size={18} color={V2.warn} />
          <div style={{ flex: 1, fontSize: 13, color: V2.text }}>
            <div style={{ fontSize: 13.5, fontWeight: 700, color: V2.warn }}>Pause for 24 hours</div>
            <div style={{ fontSize: 11.5, color: V2.muted, marginTop: 2 }}>Auto-resumes after 24h</div>
          </div>
          <V2Toggle />
        </div>

        <div style={{
          background: '#fff', border: `1px solid ${V2.line}`,
          borderRadius: V2.rMd, overflow: 'hidden',
        }}>
          <div style={{
            padding: '10px 14px', background: V2.bgAlt,
            display: 'grid', gridTemplateColumns: '1fr 56px 56px', gap: 8,
            fontSize: 10.5, fontWeight: 700, color: V2.muted,
            textTransform: 'uppercase', letterSpacing: '0.06em',
          }}>
            <span>Event</span>
            <span style={{ textAlign: 'center' }}>Email</span>
            <span style={{ textAlign: 'center' }}>Push</span>
          </div>
          {rows.map((r, i, arr) => (
            <div key={r.event} style={{
              padding: '14px', display: 'grid', gridTemplateColumns: '1fr 56px 56px', gap: 8, alignItems: 'center',
              borderBottom: i < arr.length - 1 ? `1px solid ${V2.lineSoft}` : 'none',
            }}>
              <div>
                <div style={{ fontSize: 13.5, fontWeight: 600, color: V2.ink }}>{r.event}</div>
                <div style={{ fontSize: 11.5, color: V2.muted, marginTop: 2 }}>{r.desc}</div>
              </div>
              <div style={{ textAlign: 'center' }}><V2Toggle on={r.email} /></div>
              <div style={{ textAlign: 'center' }}><V2Toggle on={r.push} /></div>
            </div>
          ))}
        </div>
      </div>
    </V2MobileShell>
  );
}

// ────────────────────────────────────────────────────────────────────────
// SETTINGS
// ────────────────────────────────────────────────────────────────────────
function V2MobileSettingsScreen() {
  return (
    <V2MobileShell tab="Me">
      <V2MobileTopBar title="Settings" back />
      <div style={{ padding: '12px 16px 24px' }}>
        <MobileSettingsGroup title="Profile">
          <MobileSettingsRow label="First name"   value="Emma" />
          <MobileSettingsRow label="Last name"    value="Carter" />
          <MobileSettingsRow label="Email"        value="emma.carter@example.com" />
          <MobileSettingsRow label="Phone"        value="+44 7700 900 123" />
          <MobileSettingsRow label="Location"     value="Bristol, UK" />
        </MobileSettingsGroup>

        <MobileSettingsGroup title="Region & language">
          <MobileSettingsRow label="Region"   value="United Kingdom · £ GBP" />
          <MobileSettingsRow label="Language" value="English (UK)" />
        </MobileSettingsGroup>

        <MobileSettingsGroup title="Privacy">
          <MobileSettingsToggleRow label="Show me to recruiters"   sub="Visible in talent search" on />
          <MobileSettingsToggleRow label="Show salary expectations" sub="On profile and resume"  on />
          <MobileSettingsToggleRow label="Hide from current employer" sub="Lavender House Care" />
        </MobileSettingsGroup>

        <MobileSettingsGroup title="Security">
          <MobileSettingsRow label="Password" value="•••••••• · change" chevron />
          <MobileSettingsRow label="Two-factor" value="SMS enabled" chevron />
          <MobileSettingsToggleRow label="Sign-in alerts" sub="Email on new device" on />
        </MobileSettingsGroup>

        <MobileSettingsGroup title="Account" danger>
          <MobileSettingsRow label="Download my data" chevron muted />
          <MobileSettingsRow label="Pause my profile" chevron muted />
          <MobileSettingsRow label="Delete account"  chevron danger />
        </MobileSettingsGroup>

        <div style={{ padding: '12px 4px', textAlign: 'center', fontSize: 11, color: V2.faint }}>
          ScrollJob v2.4.1 · build 8214
        </div>
      </div>
    </V2MobileShell>
  );
}

function MobileSettingsGroup({ title, children, danger }) {
  return (
    <section style={{ marginBottom: 22 }}>
      <h3 style={meMobileSectionHeading()}>{title}</h3>
      <div style={{
        background: '#fff', border: `1px solid ${danger ? V2.dangerLine : V2.line}`,
        borderRadius: V2.rMd, overflow: 'hidden',
      }}>
        {children}
      </div>
    </section>
  );
}

function MobileSettingsRow({ label, value, chevron, danger, muted }) {
  return (
    <div style={{
      padding: '13px 14px', display: 'flex', alignItems: 'center', gap: 12,
      borderBottom: `1px solid ${V2.lineSoft}`,
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontSize: 14, fontWeight: 600,
          color: danger ? V2.danger : muted ? V2.text : V2.ink,
        }}>{label}</div>
        {value && (
          <div style={{ fontSize: 12.5, color: V2.muted, marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{value}</div>
        )}
      </div>
      <Icon name="chevron-right" size={16} color={V2.faint} />
    </div>
  );
}

function MobileSettingsToggleRow({ label, sub, on }) {
  return (
    <div style={{
      padding: '13px 14px', display: 'flex', alignItems: 'center', gap: 12,
      borderBottom: `1px solid ${V2.lineSoft}`,
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: V2.ink }}>{label}</div>
        {sub && <div style={{ fontSize: 12.5, color: V2.muted, marginTop: 2 }}>{sub}</div>}
      </div>
      <V2Toggle on={on} />
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────
// SIGN IN
// ────────────────────────────────────────────────────────────────────────
function V2MobileSignInScreen() {
  return (
    <V2MobileShell hideTabs>
      <V2MobileTopBar back />
      <div style={{ padding: '20px 22px 28px' }}>
        <h1 style={{
          margin: '0 0 8px', fontSize: 26, fontWeight: 800,
          color: V2.ink, letterSpacing: '-0.02em',
        }}>Welcome back</h1>
        <p style={{ margin: '0 0 22px', fontSize: 13.5, color: V2.muted, lineHeight: 1.55 }}>
          Sign in to your saved jobs, alerts and resume.
        </p>

        {[
          { icon: <GoogleMarkLetter /> , label: 'Continue with Google' },
          { icon: <span style={{ width: 18, height: 18, background: '#0A66C2', color: '#fff', borderRadius: 4, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 800 }}>in</span>, label: 'Continue with LinkedIn' },
        ].map((b, i) => (
          <button key={i} style={{
            width: '100%', padding: '13px 16px', marginBottom: 10,
            background: '#fff', color: V2.ink,
            border: `1px solid ${V2.lineStrong}`, borderRadius: 12,
            fontSize: 14.5, fontWeight: 600, cursor: 'pointer',
            fontFamily: V2.font,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          }}>{b.icon} {b.label}</button>
        ))}

        <div style={{
          display: 'flex', alignItems: 'center', margin: '18px 0',
          color: V2.muted, fontSize: 12,
        }}>
          <span style={{ flex: 1, borderTop: `1px solid ${V2.line}` }} />
          <span style={{ padding: '0 12px' }}>or with email</span>
          <span style={{ flex: 1, borderTop: `1px solid ${V2.line}` }} />
        </div>

        <MobileFormField label="Email"    defaultValue="emma.carter@example.com" type="email" />
        <MobileFormField label="Password" defaultValue="········" type="password" />
        <div style={{ textAlign: 'right', marginTop: -6, marginBottom: 16 }}>
          <a style={{ color: V2.primary, fontSize: 12.5, fontWeight: 600, textDecoration: 'none' }}>Forgot password?</a>
        </div>

        <V2Button variant="primary" size="lg" full iconRight="arrow-right">Sign in</V2Button>
        <div style={{ textAlign: 'center', marginTop: 22, color: V2.muted, fontSize: 13 }}>
          New to ScrollJob? <a style={{ color: V2.primary, fontWeight: 600, textDecoration: 'none' }}>Create account</a>
        </div>
      </div>
    </V2MobileShell>
  );
}

function GoogleMarkLetter() {
  return (
    <svg width="18" height="18" 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>
  );
}

// ────────────────────────────────────────────────────────────────────────
// SIGN UP
// ────────────────────────────────────────────────────────────────────────
function V2MobileSignUpScreen() {
  return (
    <V2MobileShell hideTabs>
      <V2MobileTopBar back />
      <div style={{ padding: '20px 22px 28px' }}>
        <h1 style={{
          margin: '0 0 8px', fontSize: 26, fontWeight: 800,
          color: V2.ink, letterSpacing: '-0.02em',
        }}>Create your free account</h1>
        <p style={{ margin: '0 0 22px', fontSize: 13.5, color: V2.muted, lineHeight: 1.55 }}>
          Save jobs, get alerts, build a hosted resume — all free.
        </p>

        <button style={{
          width: '100%', padding: '13px 16px', marginBottom: 18,
          background: '#fff', color: V2.ink,
          border: `1px solid ${V2.lineStrong}`, borderRadius: 12,
          fontSize: 14.5, fontWeight: 600, cursor: 'pointer',
          fontFamily: V2.font,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        }}><GoogleMarkLetter /> Continue with Google</button>

        <div style={{
          display: 'flex', alignItems: 'center', margin: '0 0 18px',
          color: V2.muted, fontSize: 12,
        }}>
          <span style={{ flex: 1, borderTop: `1px solid ${V2.line}` }} />
          <span style={{ padding: '0 12px' }}>or with email</span>
          <span style={{ flex: 1, borderTop: `1px solid ${V2.line}` }} />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <MobileFormField label="First name" defaultValue="" />
          <MobileFormField label="Last name"  defaultValue="" />
        </div>
        <MobileFormField label="Email"    type="email" />
        <MobileFormField label="Password" type="password" hint="8+ chars, a number or symbol." />

        <label style={{
          display: 'flex', gap: 10, alignItems: 'flex-start',
          fontSize: 12.5, color: V2.text, margin: '8px 0 16px', cursor: 'pointer',
        }}>
          <input type="checkbox" defaultChecked style={{ width: 16, height: 16, accentColor: V2.primary, marginTop: 2 }} />
          I agree to the <a style={{ color: V2.primary, fontWeight: 600, textDecoration: 'none' }}>Terms</a> and <a style={{ color: V2.primary, fontWeight: 600, textDecoration: 'none' }}>Privacy</a>.
        </label>

        <V2Button variant="primary" size="lg" full iconRight="arrow-right">Create account</V2Button>
        <div style={{ textAlign: 'center', marginTop: 22, color: V2.muted, fontSize: 13 }}>
          Already have an account? <a style={{ color: V2.primary, fontWeight: 600, textDecoration: 'none' }}>Sign in</a>
        </div>
      </div>
    </V2MobileShell>
  );
}

function MobileFormField({ label, defaultValue, type = 'text', hint }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <label style={{ display: 'block', fontSize: 12, fontWeight: 600, color: V2.ink2, marginBottom: 6 }}>
        {label}
      </label>
      <input type={type} defaultValue={defaultValue} style={{
        width: '100%', padding: '13px 14px',
        background: '#fff', border: `1px solid ${V2.lineStrong}`, borderRadius: 10,
        fontSize: 14.5, outline: 'none', fontFamily: V2.font, color: V2.ink,
        boxSizing: 'border-box',
      }} />
      {hint && <div style={{ fontSize: 11.5, color: V2.muted, marginTop: 6 }}>{hint}</div>}
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────
// BROWSE HISTORY
// ────────────────────────────────────────────────────────────────────────
function V2MobileHistoryScreen() {
  const days = [
    ['Today',     [V2_JOBS[1], V2_JOBS[9], V2_JOBS[10]]],
    ['Yesterday', [V2_JOBS[0], V2_JOBS[2]]],
    ['Earlier this week', [V2_JOBS[3], V2_JOBS[6]]],
  ];
  return (
    <V2MobileShell tab="Me">
      <V2MobileTopBar title="Browse history" back action={
        <button style={mobileIconBtnStyle()}><Icon name="x" size={18} /></button>
      } />
      <div style={{ padding: '12px 16px 24px' }}>
        {days.map(([day, jobs]) => (
          <div key={day} style={{ marginBottom: 20 }}>
            <h3 style={meMobileSectionHeading()}>{day}</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {jobs.map((j, i) => (
                <a key={i} style={{
                  display: 'block', background: '#fff',
                  border: `1px solid ${V2.line}`, borderRadius: V2.rMd, padding: 12,
                  textDecoration: 'none', color: 'inherit',
                }}>
                  <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                    <V2CompanyAvatar name={j.company} category={j.category} size={36} radius={9} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13.5, fontWeight: 700, color: V2.ink }}>{j.title}</div>
                      <div style={{ fontSize: 12, color: V2.muted, marginTop: 2 }}>
                        {j.company} · {j.salary}
                      </div>
                    </div>
                    <span style={{ fontSize: 11, color: V2.muted, whiteSpace: 'nowrap' }}>4h ago</span>
                  </div>
                </a>
              ))}
            </div>
          </div>
        ))}
      </div>
    </V2MobileShell>
  );
}

// ────────────────────────────────────────────────────────────────────────
// RESUME (compact mobile builder)
// ────────────────────────────────────────────────────────────────────────
function V2MobileResumeScreen() {
  const sections = [
    { id: 'basics',     label: 'About you',       done: true,  icon: 'user' },
    { id: 'experience', label: 'Work history',    done: true,  icon: 'briefcase' },
    { id: 'education',  label: 'Education',       done: true,  icon: 'graduate' },
    { id: 'skills',     label: 'Skills',          done: false, icon: 'star' },
    { id: 'certs',      label: 'Certifications',  done: false, icon: 'shield' },
    { id: 'refs',       label: 'References',      done: false, icon: 'mail' },
  ];
  return (
    <V2MobileShell tab="Me">
      <V2MobileTopBar title="Resume" back action={
        <button style={mobileIconBtnStyle()}><Icon name="eye" size={18} /></button>
      } />
      <div style={{ padding: '12px 16px 24px' }}>
        {/* Status card */}
        <div style={{
          background: '#fff', border: `1px solid ${V2.line}`,
          borderRadius: V2.rMd, padding: 14, marginBottom: 14,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
            <V2Badge tone="success" size="sm" icon="check">Published</V2Badge>
            <span style={{ fontSize: 12, color: V2.muted, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
              scrolljob.org/r/emma-carter
            </span>
          </div>
          <div style={{ marginBottom: 8 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
              <span style={{ fontSize: 13, fontWeight: 700, color: V2.ink }}>Completion</span>
              <span style={{ fontSize: 12, color: V2.muted }}><strong style={{ color: V2.primary }}>72%</strong> · 3 sections left</span>
            </div>
            <div style={{ height: 6, background: V2.line, borderRadius: 999, overflow: 'hidden' }}>
              <div style={{ width: '72%', height: '100%', background: V2.brandGradient, borderRadius: 999 }} />
            </div>
          </div>
          <V2Button variant="secondary" size="sm" full icon="share">Copy share link</V2Button>
        </div>

        {/* Sections */}
        <h3 style={meMobileSectionHeading()}>Sections</h3>
        <div style={{
          background: '#fff', border: `1px solid ${V2.line}`,
          borderRadius: V2.rMd, overflow: 'hidden',
        }}>
          {sections.map((s, i, arr) => (
            <a key={s.id} style={{
              display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px',
              borderBottom: i < arr.length - 1 ? `1px solid ${V2.lineSoft}` : 'none',
              textDecoration: 'none', color: 'inherit',
            }}>
              <span style={{
                width: 34, height: 34, borderRadius: 9, background: V2.primarySoft,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              }}>
                <Icon name={s.icon} size={16} color={V2.primary} />
              </span>
              <span style={{ flex: 1, fontSize: 14, fontWeight: 600, color: V2.ink }}>{s.label}</span>
              {s.done ? (
                <span style={{
                  width: 20, height: 20, borderRadius: '50%',
                  background: V2.success, color: '#fff',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                }}><Icon name="check" size={12} /></span>
              ) : (
                <span style={{
                  padding: '3px 9px', borderRadius: 999,
                  background: V2.warnBg, color: V2.warn,
                  fontSize: 11, fontWeight: 700,
                }}>To do</span>
              )}
              <Icon name="chevron-right" size={14} color={V2.faint} />
            </a>
          ))}
        </div>

        {/* Theme picker */}
        <h3 style={meMobileSectionHeading()}>Theme</h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
          {[
            { name: 'Clean', bg: '#fff', ac: V2.primary, on: true },
            { name: 'Warm',  bg: '#fef3c7', ac: '#92400e' },
            { name: 'Mono',  bg: '#f8fafc', ac: '#0f172a' },
            { name: 'Bold',  bg: '#FCE7F3', ac: '#9D174D' },
          ].map((t) => (
            <button key={t.name} style={{
              padding: 8, borderRadius: 10,
              border: `2px solid ${t.on ? V2.primary : V2.line}`,
              background: '#fff', cursor: 'pointer', fontFamily: V2.font,
            }}>
              <div style={{ height: 30, background: t.bg, borderRadius: 4, marginBottom: 6, position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', top: 5, left: 5, right: 5, height: 3, background: t.ac, borderRadius: 2 }} />
                <div style={{ position: 'absolute', top: 12, left: 5, width: '50%', height: 2, background: V2.lineStrong, borderRadius: 2 }} />
                <div style={{ position: 'absolute', top: 18, left: 5, width: '70%', height: 2, background: V2.lineStrong, borderRadius: 2 }} />
              </div>
              <div style={{ fontSize: 11, fontWeight: 600, color: V2.ink }}>{t.name}</div>
            </button>
          ))}
        </div>
      </div>
    </V2MobileShell>
  );
}

// ────────────────────────────────────────────────────────────────────────
// EMPLOYER · DASHBOARD (compact)
// ────────────────────────────────────────────────────────────────────────
function V2MobileEmpDashboardScreen() {
  return (
    <V2MobileShell tab="Me">
      <V2MobileTopBar title="Hiring overview" />
      <div style={{ padding: '12px 16px 24px' }}>
        {/* Header card */}
        <div style={{
          background: '#fff', border: `1px solid ${V2.line}`,
          borderRadius: V2.rMd, padding: 16, marginBottom: 14,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <V2CompanyAvatar name="Lavender House Care" category="Healthcare" size={44} radius={11} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: V2.ink }}>Lavender House Care</div>
            <div style={{ fontSize: 12, color: V2.muted, marginTop: 2 }}>4 live jobs · last 30 days</div>
          </div>
          <V2Button variant="primary" size="sm" icon="plus">Post</V2Button>
        </div>

        {/* Stats 2-col */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8, marginBottom: 16 }}>
          {[
            { l: 'Views',     v: '4,218', d: '+12% vs last',  ic: 'eye',      tone: 'success' },
            { l: 'Applies',   v: '186',   d: '+8% vs last',   ic: 'check',    tone: 'success' },
            { l: 'Apply rate',v: '4.4%',  d: '−0.3%',         ic: 'target',   tone: 'danger' },
            { l: 'TTFA',      v: '6 h',   d: '2× faster avg', ic: 'clock',    tone: 'success' },
          ].map((s) => (
            <div key={s.l} style={{
              background: '#fff', border: `1px solid ${V2.line}`,
              borderRadius: V2.rMd, padding: 12,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <span style={{ fontSize: 11, color: V2.muted, fontWeight: 600 }}>{s.l}</span>
                <span style={{
                  width: 24, height: 24, borderRadius: 7, background: V2.primarySoft,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name={s.ic} size={12} color={V2.primary} />
                </span>
              </div>
              <div style={{ fontSize: 20, fontWeight: 800, color: V2.ink, marginTop: 6, letterSpacing: '-0.02em' }}>{s.v}</div>
              <div style={{
                fontSize: 10.5, marginTop: 4, fontWeight: 700,
                color: s.tone === 'success' ? V2.success : V2.danger,
              }}>{s.d}</div>
            </div>
          ))}
        </div>

        {/* Boost upsell */}
        <div style={{
          background: V2.ink, color: '#fff',
          borderRadius: V2.rMd, padding: 16, marginBottom: 16,
          position: 'relative', overflow: 'hidden',
        }}>
          <div aria-hidden style={{
            position: 'absolute', top: -50, right: -30, width: 180, height: 180,
            borderRadius: '50%',
            background: `radial-gradient(circle at center, ${V2.primary}55 0%, transparent 70%)`,
          }} />
          <div style={{ position: 'relative' }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '3px 9px', borderRadius: 999,
              background: 'rgba(255,255,255,0.10)', fontSize: 10.5, fontWeight: 700,
              textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10,
            }}>
              <Icon name="sparkle" size={11} color="#FCD980" /> Boost
            </span>
            <div style={{ fontSize: 15, fontWeight: 700, marginBottom: 6, lineHeight: 1.3 }}>
              Feature your Care Assistant role
            </div>
            <div style={{ fontSize: 12, color: '#CFD4DC', marginBottom: 12 }}>
              <strong style={{ color: '#fff' }}>4.2× more views</strong> · £79 / 30 days
            </div>
            <V2Button variant="primary" size="sm" iconRight="arrow-right">Boost this role</V2Button>
          </div>
        </div>

        {/* Postings list (compact) */}
        <h3 style={meMobileSectionHeading()}>Your postings</h3>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { t: 'Care Assistant — Residential', s: 'Live',   tier: 'Featured', v: 1842, a: 86 },
            { t: 'Senior Care Assistant',         s: 'Live',   tier: 'Standard', v: 612,  a: 24 },
            { t: 'Night Care Assistant',          s: 'Live',   tier: 'Standard', v: 248,  a: 6  },
            { t: 'Care Home Cook',                s: 'Paused', tier: 'Standard', v: 142,  a: 4  },
          ].map((j, i) => (
            <a key={i} style={{
              display: 'block', background: '#fff',
              border: `1px solid ${V2.line}`, borderRadius: V2.rMd, padding: 14,
              textDecoration: 'none', color: 'inherit',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: V2.ink }}>{j.t}</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 6, flexWrap: 'wrap' }}>
                    <V2Badge tone={j.s === 'Live' ? 'success' : 'warn'} size="sm">{j.s}</V2Badge>
                    {j.tier === 'Featured' && <V2Badge tone="primary" size="sm" icon="starFill">Featured</V2Badge>}
                  </div>
                </div>
                <Icon name="chevron-right" size={16} color={V2.faint} style={{ marginTop: 4 }} />
              </div>
              <div style={{
                marginTop: 10, paddingTop: 10, borderTop: `1px solid ${V2.lineSoft}`,
                display: 'flex', justifyContent: 'space-between', fontSize: 12, color: V2.muted,
              }}>
                <span><Icon name="eye" size={12} color={V2.muted} style={{ verticalAlign: 'middle' }} /> {j.v.toLocaleString()} views</span>
                <span><Icon name="check" size={12} color={V2.muted} style={{ verticalAlign: 'middle' }} /> {j.a} applies</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </V2MobileShell>
  );
}

Object.assign(window, {
  V2MobileMeScreen,
  V2MobileSavedScreen,
  V2MobileApplicationsScreen,
  V2MobileAlertsScreen,
  V2MobileNotificationsScreen,
  V2MobileSettingsScreen,
  V2MobileSignInScreen,
  V2MobileSignUpScreen,
  V2MobileHistoryScreen,
  V2MobileResumeScreen,
  V2MobileEmpDashboardScreen,
});
