// ScrollJob v2 — Swipe Jobs (mobile)
// Reframed as practical: bigger card, prominent details, big buttons,
// keyboard hints, progress bar, undo. Not a dating-app gimmick.

function V2SwipeScreen() {
  const job = V2_JOBS[1]; // Care Assistant
  return (
    <V2MobileShell hideTabs>
      <V2MobileTopBar
        title="Swipe Jobs"
        back
        action={
          <button style={mobileIconBtnStyle()}><Icon name="sliders" size={20} /></button>
        }
      />

      {/* Progress + counter */}
      <div style={{ padding: '14px 16px 10px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
          <span style={{ fontSize: 12.5, color: V2.muted, fontWeight: 600 }}>3 of 24 today</span>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            fontSize: 12.5, color: V2.success, fontWeight: 700,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: V2.success }} />
            5 saved
          </span>
        </div>
        <div style={{ height: 6, background: V2.line, borderRadius: 999, overflow: 'hidden' }}>
          <div style={{ width: '12.5%', height: '100%', background: V2.primary, borderRadius: 999 }} />
        </div>
      </div>

      {/* Card stack */}
      <div style={{ flex: 1, position: 'relative', padding: '8px 16px' }}>
        <div style={{ position: 'relative', height: 520 }}>
          {/* Back cards */}
          <div style={{ ...stackCard(2), background: '#fff' }} />
          <div style={{ ...stackCard(1), background: '#fff' }} />

          {/* Front card */}
          <article style={{
            position: 'absolute', inset: 0,
            background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rXl,
            padding: 22, boxShadow: V2.shadowLg, transform: 'rotate(-1.5deg)',
            display: 'flex', flexDirection: 'column',
          }}>
            {/* Save overlay hint (gesture peek) */}
            <div style={{
              position: 'absolute', top: 24, right: 18,
              padding: '6px 12px', border: `3px solid ${V2.success}`, color: V2.success,
              borderRadius: 8, fontSize: 16, fontWeight: 800, letterSpacing: 2,
              transform: 'rotate(12deg)', opacity: 0.85,
            }}>SAVE</div>

            {/* Top — company / category */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
              <V2CompanyAvatar name={job.company} category={job.category} size={48} radius={12} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: V2.ink, lineHeight: 1.2 }}>
                  {job.company}
                </div>
                <div style={{
                  fontSize: 12, color: V2.muted, marginTop: 3,
                  display: 'inline-flex', alignItems: 'center', gap: 4,
                }}>
                  <Icon name="starFill" size={11} color="#D97706" /> {job.companyRating} · 842 reviews
                </div>
              </div>
              <V2CatPill name={job.category} size="sm" />
            </div>

            {/* Title */}
            <h2 style={{
              margin: '0 0 16px', fontSize: 22, fontWeight: 700,
              color: V2.ink, letterSpacing: '-0.02em', lineHeight: 1.2,
            }}>{job.title}</h2>

            {/* Big salary / type / location strip */}
            <div style={{
              padding: '14px 16px', background: V2.primarySoft,
              border: `1px solid ${V2.primaryRing}`, borderRadius: V2.rMd,
              marginBottom: 16,
            }}>
              <div style={{
                fontSize: 22, fontWeight: 800, color: V2.primaryInk,
                letterSpacing: '-0.02em', marginBottom: 4,
              }}>
                {job.salary}
              </div>
              <div style={{ display: 'flex', gap: 14, fontSize: 13, color: V2.text }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                  <Icon name="pin" size={14} color={V2.muted} /> {job.location}
                </span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                  <Icon name="briefcase" size={14} color={V2.muted} /> Part-time
                </span>
              </div>
            </div>

            {/* Description */}
            <p style={{
              margin: '0 0 14px', fontSize: 14, color: V2.text, lineHeight: 1.55,
              flex: 1, overflow: 'hidden',
            }}>
              {job.summary} Two-on / two-off day shifts of 7am–3pm. Full induction provided — no prior experience required.
            </p>

            {/* Benefits chips */}
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 14 }}>
              {job.benefits.slice(0, 3).map((b) => (
                <V2Badge key={b} tone="neutral" size="sm">{b}</V2Badge>
              ))}
              <V2Badge tone="success" size="sm">Sponsorship considered</V2Badge>
            </div>

            <a style={{
              marginTop: 'auto', paddingTop: 12,
              borderTop: `1px solid ${V2.lineSoft}`,
              fontSize: 13, fontWeight: 600, color: V2.primary,
              textDecoration: 'none',
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              See full job description <Icon name="arrow-right" size={14} />
            </a>
          </article>
        </div>
      </div>

      {/* Action buttons — large, labelled, button alternatives to gestures */}
      <div style={{ padding: '8px 24px 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
        <SwipeAction kind="skip"   icon="x"        label="Skip" />
        <SwipeAction kind="undo"   icon="arrow-left" label="Undo" tiny />
        <SwipeAction kind="detail" icon="eye"      label="Details" tiny />
        <SwipeAction kind="save"   icon="bookmark" label="Save" />
      </div>

      <div style={{ padding: '0 16px 24px', textAlign: 'center', fontSize: 11.5, color: V2.muted }}>
        Or use keyboard: <kbd style={kbdStyle()}>←</kbd> skip · <kbd style={kbdStyle()}>→</kbd> save · <kbd style={kbdStyle()}>↑</kbd> details
      </div>
    </V2MobileShell>
  );
}

function stackCard(offset) {
  return {
    position: 'absolute', inset: 0, top: offset * 8,
    height: '100%',
    border: `1px solid ${V2.line}`, borderRadius: V2.rXl,
    transform: `scale(${1 - offset * 0.04})`,
    transformOrigin: 'top center', opacity: 1 - offset * 0.3,
    pointerEvents: 'none', boxShadow: V2.shadowSm,
  };
}

function SwipeAction({ kind, icon, label, tiny }) {
  const palette = {
    skip:   { bg: '#fff', fg: V2.danger,  line: V2.dangerLine,  ring: V2.dangerBg },
    save:   { bg: V2.primary, fg: '#fff', line: V2.primary,     ring: 'transparent' },
    undo:   { bg: '#fff', fg: V2.text,    line: V2.line,        ring: V2.bgAlt },
    detail: { bg: '#fff', fg: V2.text,    line: V2.line,        ring: V2.bgAlt },
  }[kind];
  const size = tiny ? 48 : 64;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
      <button aria-label={label} style={{
        width: size, height: size, borderRadius: '50%',
        background: palette.bg, color: palette.fg,
        border: `2px solid ${palette.line}`,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        cursor: 'pointer', boxShadow: V2.shadow,
      }}>
        <Icon name={icon} size={tiny ? 20 : 26} />
      </button>
      <span style={{ fontSize: 11, color: V2.muted, fontWeight: 600 }}>{label}</span>
    </div>
  );
}

function kbdStyle() {
  return {
    padding: '1px 6px', background: V2.bgAlt, border: `1px solid ${V2.line}`,
    borderRadius: 4, fontFamily: V2.font, fontSize: 11, color: V2.text, fontWeight: 600,
  };
}

window.V2SwipeScreen = V2SwipeScreen;