// ScrollJob v2 — Job list (search results) + Job detail
// Job card is the core component, filters cleaner, sticky apply on detail.

// ────────────────────────────────────────────────────────────────────────
// JOB LIST / SEARCH RESULTS
// ────────────────────────────────────────────────────────────────────────
function V2JobListScreen() {
  return (
    <div style={{ background: V2.bg, fontFamily: V2.font, color: V2.ink, minHeight: '100%' }}>
      <V2Header active="Find jobs" />

      {/* Compact search bar at the top */}
      <div style={{
        background: '#fff', borderBottom: `1px solid ${V2.line}`,
        padding: '20px 0',
      }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 32px' }}>
          <V2SearchBar size="md" defaultQ="Care assistant" defaultLoc="Bristol" />
        </div>
      </div>

      <main style={{ maxWidth: 1280, margin: '0 auto', padding: '24px 32px 0' }}>
        {/* Heading + count */}
        <div style={{ marginBottom: 18 }}>
          <h1 style={{ margin: '0 0 4px', fontSize: 26, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
            Care assistant jobs in Bristol
          </h1>
          <p style={{ margin: 0, fontSize: 15, color: V2.muted }}>
            <strong style={{ color: V2.ink }}>248</strong> jobs found · sorted by best match
          </p>
        </div>

        {/* Applied filter chips */}
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 22, alignItems: 'center' }}>
          <span style={{ fontSize: 13.5, color: V2.muted, fontWeight: 500, marginRight: 2 }}>Filters:</span>
          {[
            ['Care assistant', 'q'],
            ['Bristol', 'location'],
            ['Within 10 miles', 'distance'],
            ['£12/hour+', 'salary'],
            ['Part-time', 'type'],
          ].map(([label, k]) => (
            <span key={k} style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '6px 10px 6px 12px', borderRadius: 999,
              background: V2.primarySoft, color: V2.primaryInk,
              border: `1px solid ${V2.primaryRing}`,
              fontSize: 13, fontWeight: 600,
            }}>
              {label}
              <button aria-label={`Remove ${label}`} style={{
                width: 18, height: 18, borderRadius: 999,
                border: 'none', background: 'transparent', color: V2.primaryInk,
                cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}><Icon name="x" size={12} /></button>
            </span>
          ))}
          <button style={{
            background: 'transparent', border: 'none', cursor: 'pointer',
            color: V2.muted, fontSize: 13, fontWeight: 600, textDecoration: 'underline',
            padding: '4px 6px',
          }}>Clear all</button>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '288px minmax(0, 1fr)', gap: 28, alignItems: 'start' }}>
          {/* ─── Filters sidebar ─── */}
          <aside style={{
            background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
            position: 'sticky', top: 86,
          }}>
            <div style={{
              padding: '16px 20px', borderBottom: `1px solid ${V2.line}`,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
              <span style={{ fontSize: 15, fontWeight: 700, color: V2.ink }}>Filters</span>
              <span style={{
                padding: '2px 8px', background: V2.primarySoft, color: V2.primaryInk,
                borderRadius: 999, fontSize: 12, fontWeight: 700,
              }}>5 active</span>
            </div>
            <div style={{ padding: '8px 20px 20px' }}>
              <V2FilterGroup label="Distance" items={[
                ['Any distance', null], ['1 mile', null], ['5 miles', null],
                ['10 miles', null, true], ['25 miles', null], ['Across UK', null],
              ]} radio />
              <V2FilterGroup label="Salary" items={[
                ['£12 / hr+', 184, true], ['£14 / hr+', 96], ['£25k+', 142], ['£35k+', 48], ['£50k+', 18],
              ]} />
              <V2FilterGroup label="Job type" items={[
                ['Full-time', 142], ['Part-time', 184, true], ['Contract', 24], ['Temporary', 38], ['Apprenticeship', 12], ['Graduate', 4],
              ]} />
              <V2FilterGroup label="Working pattern" items={[
                ['Day shift', 124], ['Night shift', 28], ['Weekend', 62], ['Hybrid', 8], ['Remote', 12],
              ]} />
              <V2FilterGroup label="Posted within" items={[
                ['Last 24 hours', 18], ['Last 3 days', 62], ['Last week', 142], ['Last month', 248, true],
              ]} radio />
              <V2FilterGroup label="Employer" items={[
                ['Lavender House Care', 18], ['Sunrise Senior Living', 14], ['Bupa', 24], ['Caremark', 12], ['+ 142 more', null],
              ]} />
            </div>
          </aside>

          {/* ─── Results column ─── */}
          <div>
            {/* Sort + view toolbar */}
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              marginBottom: 14, flexWrap: 'wrap', gap: 12,
            }}>
              <div style={{ display: 'flex', gap: 8 }}>
                {['Best match', 'Newest', 'Highest paid', 'Closest'].map((t, i) => (
                  <button key={t} style={{
                    padding: '8px 14px', borderRadius: 999,
                    background: i === 0 ? V2.ink : '#fff',
                    color: i === 0 ? '#fff' : V2.text,
                    border: `1px solid ${i === 0 ? V2.ink : V2.line}`,
                    fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: V2.font,
                  }}>{t}</button>
                ))}
              </div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 14 }}>
                <label style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13.5, color: V2.text, cursor: 'pointer' }}>
                  <V2Toggle on />
                  Job alerts on
                </label>
              </div>
            </div>

            {/* Job cards */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <V2JobCard job={V2_JOBS[1]} featured />
              <V2JobCard job={V2_JOBS[10]} saved />
              <V2JobCard job={V2_JOBS[7]} urgent />
              <V2JobCard job={V2_JOBS[6]} />
              <V2JobCard job={V2_JOBS[3]} />
              <V2JobCard job={V2_JOBS[4]} />
              <V2JobCard job={V2_JOBS[5]} />
            </div>

            {/* Infinite-scroll sentinel + terminal state */}
            <V2InfiniteSentinel loaded={7} total={248} />
            <V2EndOfResults />
          </div>
        </div>
      </main>

      <V2Footer />
    </div>
  );
}

function V2FilterGroup({ label, items, radio }) {
  return (
    <div style={{ padding: '14px 0', borderBottom: `1px solid ${V2.lineSoft}` }}>
      <div style={{ fontSize: 13.5, fontWeight: 700, color: V2.ink, marginBottom: 10 }}>{label}</div>
      {items.map(([name, count, on]) => (
        <label key={name} style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '6px 0', fontSize: 13.5,
          color: on ? V2.ink : V2.text, fontWeight: on ? 600 : 500,
          cursor: 'pointer',
        }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            <input type={radio ? 'radio' : 'checkbox'} name={radio ? label : undefined} defaultChecked={on}
                   style={{ width: 16, height: 16, accentColor: V2.primary }} />
            {name}
          </span>
          {count !== null && count !== undefined && (
            <span style={{ fontSize: 12, color: V2.faint }}>{count}</span>
          )}
        </label>
      ))}
    </div>
  );
}

function V2Toggle({ on }) {
  return (
    <span style={{
      width: 36, height: 22, borderRadius: 999, padding: 2,
      background: on ? V2.primary : V2.lineStrong, position: 'relative',
      display: 'inline-block', cursor: 'pointer',
    }}>
      <span style={{
        position: 'absolute', top: 2, left: on ? 16 : 2,
        width: 18, height: 18, borderRadius: '50%', background: '#fff',
        boxShadow: V2.shadowSm, transition: 'left .2s',
      }} />
    </span>
  );
}

// ────────────────────────────────────────────────────────────────────────
// JOB DETAIL
// ────────────────────────────────────────────────────────────────────────
function V2JobDetailScreen() {
  const j = {
    title: 'Care Assistant — Residential Home',
    company: 'Lavender House Care',
    location: 'Bristol, UK',
    salary: '£12.80 / hour',
    type: 'Part-time · 24 hours per week',
    posted: 'Posted 5 hours ago',
    category: 'Healthcare',
    workMode: 'On-site',
    companyRating: '4.7',
    benefits: ['Paid training', 'NVQ sponsored', 'Pension', 'Free uniform', 'Refer-a-friend bonus', 'Weekly pay'],
  };
  return (
    <div style={{ background: V2.bg, fontFamily: V2.font, color: V2.ink, minHeight: '100%' }}>
      <V2Header active="Find jobs" />

      <main style={{ maxWidth: 1280, margin: '0 auto', padding: '24px 32px 0' }}>
        {/* Back link */}
        <a style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          color: V2.muted, fontSize: 14, fontWeight: 500,
          marginBottom: 18, textDecoration: 'none',
        }}>
          <Icon name="arrow-left" size={16} /> Back to results
        </a>

        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 360px', gap: 32, alignItems: 'start' }}>
          {/* ─── Main column ─── */}
          <div>
            {/* Hero card */}
            <section style={{
              background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rXl,
              padding: 32, marginBottom: 20,
            }}>
              <div style={{ display: 'flex', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
                <V2Badge tone="success" size="md">Actively hiring</V2Badge>
                <V2Badge tone="featured" size="md" icon="starFill">Featured employer</V2Badge>
              </div>

              <div style={{ display: 'flex', gap: 20, alignItems: 'flex-start', marginBottom: 22 }}>
                <V2CompanyAvatar name={j.company} category={j.category} size={68} radius={16} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <h1 style={{
                    margin: '0 0 8px', fontSize: 32, fontWeight: 700,
                    color: V2.ink, letterSpacing: '-0.02em', lineHeight: 1.15,
                  }}>{j.title}</h1>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
                    <a style={{
                      fontSize: 16, fontWeight: 600, color: V2.primary, textDecoration: 'none',
                    }}>{j.company}</a>
                    <span style={{
                      display: 'inline-flex', alignItems: 'center', gap: 4,
                      fontSize: 14, color: V2.text, fontWeight: 500,
                    }}>
                      <Icon name="starFill" size={14} color="#D97706" />
                      {j.companyRating}
                      <span style={{ color: V2.muted, marginLeft: 2 }}>(842 reviews)</span>
                    </span>
                  </div>
                </div>
              </div>

              {/* Meta strip */}
              <div style={{
                display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14,
                padding: '18px 0', borderTop: `1px solid ${V2.lineSoft}`, borderBottom: `1px solid ${V2.lineSoft}`,
                marginBottom: 22,
              }}>
                {[
                  { icon: 'money',     label: 'Salary',    value: j.salary, primary: true },
                  { icon: 'pin',       label: 'Location',  value: j.location },
                  { icon: 'briefcase', label: 'Type',      value: j.type },
                  { icon: 'clock',     label: 'Posted',    value: '5 hours ago' },
                ].map((m) => (
                  <div key={m.label} style={{ display: 'flex', gap: 10 }}>
                    <span style={{
                      width: 36, height: 36, borderRadius: 10, background: V2.bgAlt,
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      flexShrink: 0,
                    }}>
                      <Icon name={m.icon} size={18} color={V2.text} />
                    </span>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 12, color: V2.muted, fontWeight: 500 }}>{m.label}</div>
                      <div style={{ fontSize: 14, color: V2.ink, fontWeight: m.primary ? 700 : 600, marginTop: 2 }}>
                        {m.value}
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              {/* CTAs — "Apply (1-click)" when profile is complete; default "Apply on company site" */}
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
                <V2Button variant="primary" size="lg" iconRight="arrow-right" icon="lightning">
                  Apply (1-click)
                </V2Button>
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 5,
                  padding: '4px 8px', background: V2.successBg, color: V2.success,
                  border: `1px solid ${V2.successLine}`, borderRadius: 6,
                  fontSize: 11, fontWeight: 700,
                }}><Icon name="check" size={11} /> Profile ready</span>
                <V2Button variant="secondary" size="lg" icon="bookmark">Save</V2Button>
                <V2Button variant="ghost" size="lg" icon="share">Share</V2Button>
              </div>
              <p style={{ margin: '8px 0 0', fontSize: 12, color: V2.muted }}>
                1-click apply sends your structured profile (CV, work history, contact) to <strong style={{ color: V2.text }}>Lavender House Care</strong>. You can review the application before it's sent.
              </p>
            </section>

            {/* About */}
            <section style={{
              background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rXl,
              padding: 32, marginBottom: 20,
            }}>
              <h2 style={{ margin: '0 0 14px', fontSize: 20, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>
                About the role
              </h2>
              <p style={{ margin: '0 0 14px', fontSize: 15.5, color: V2.text, lineHeight: 1.7, maxWidth: '64ch' }}>
                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. We're hiring kind, patient care assistants to join our day-shift team.
              </p>
              <p style={{ margin: 0, fontSize: 15.5, color: V2.text, lineHeight: 1.7, maxWidth: '64ch' }}>
                You'll work two-on / two-off shifts of 7am–3pm. Full induction provided — no prior care experience required. NVQ Level 2 desirable but we'll sponsor the right candidate.
              </p>
            </section>

            {/* Requirements */}
            <section style={{
              background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rXl,
              padding: 32, marginBottom: 20,
            }}>
              <h2 style={{ margin: '0 0 18px', fontSize: 20, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>
                What we're looking for
              </h2>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 12 }}>
                {[
                  'Right to work in the UK (sponsorship considered for NVQ Level 2+)',
                  'Caring, calm and patient temperament',
                  'Comfortable with personal care, mobility support and dementia care',
                  'Good written English for daily care notes',
                  'Available weekdays + alternate weekends',
                ].map((r) => (
                  <li key={r} style={{
                    display: 'flex', alignItems: 'flex-start', gap: 12, fontSize: 15, color: V2.text, lineHeight: 1.55,
                  }}>
                    <span style={{
                      width: 22, height: 22, borderRadius: '50%', background: V2.successBg, color: V2.success,
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      flexShrink: 0, marginTop: 1,
                    }}>
                      <Icon name="check" size={14} />
                    </span>
                    {r}
                  </li>
                ))}
              </ul>
            </section>

            {/* Benefits */}
            <section style={{
              background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rXl,
              padding: 32, marginBottom: 20,
            }}>
              <h2 style={{ margin: '0 0 18px', fontSize: 20, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>
                Benefits & perks
              </h2>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
                {[
                  { icon: 'check',    t: 'Weekly pay' },
                  { icon: 'graduate', t: 'NVQ Level 2 sponsored' },
                  { icon: 'shield',   t: 'Workplace pension' },
                  { icon: 'sparkle',  t: 'Refer-a-friend £250 bonus' },
                  { icon: 'briefcase',t: 'Uniform & PPE provided' },
                  { icon: 'clock',    t: '5.6 weeks annual leave' },
                ].map((b) => (
                  <div key={b.t} style={{
                    background: V2.bgAlt, padding: '12px 14px', borderRadius: V2.rMd,
                    display: 'flex', alignItems: 'center', gap: 12,
                  }}>
                    <span style={{
                      width: 32, height: 32, borderRadius: 8, background: '#fff',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    }}>
                      <Icon name={b.icon} size={16} color={V2.primary} />
                    </span>
                    <span style={{ fontSize: 14, color: V2.ink, fontWeight: 500 }}>{b.t}</span>
                  </div>
                ))}
              </div>
            </section>

            {/* Company card */}
            <section style={{
              background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rXl,
              padding: 32, marginBottom: 20,
            }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16, marginBottom: 18 }}>
                <V2CompanyAvatar name={j.company} category={j.category} size={56} radius={14} />
                <div style={{ flex: 1 }}>
                  <h3 style={{ margin: '0 0 4px', fontSize: 18, fontWeight: 700, color: V2.ink }}>
                    About {j.company}
                  </h3>
                  <div style={{ fontSize: 13, color: V2.muted, display: 'flex', gap: 12 }}>
                    <span>Healthcare · 24-bedroom home</span>
                    <span>Founded 2008</span>
                    <span>14 reviews this year</span>
                  </div>
                </div>
                <V2Button variant="secondary" size="sm">View company</V2Button>
              </div>
              <p style={{ margin: 0, fontSize: 14.5, color: V2.text, lineHeight: 1.65 }}>
                Lavender House is a family-owned residential home in Clifton, Bristol. We care for 24 older adults including those living with dementia, supported by a permanent team of 32 staff.
              </p>
            </section>
          </div>

          {/* ─── Sidebar ─── */}
          <aside style={{ position: 'sticky', top: 86, display: 'flex', flexDirection: 'column', gap: 16 }}>
            {/* Apply card — sticky CTA */}
            <div style={{
              background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rXl,
              padding: 22, boxShadow: V2.shadowMd,
            }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 6, marginBottom: 14,
                padding: '4px 10px', background: V2.successBg, color: V2.success,
                border: `1px solid ${V2.successLine}`, borderRadius: 999,
                fontSize: 12, fontWeight: 700,
              }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: V2.success }} />
                Easy apply · 3 minutes
              </div>
              <V2Button variant="primary" size="lg" iconRight="arrow-right" full>Apply now</V2Button>
              <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
                <V2Button variant="secondary" size="md" icon="bookmark" full>Save</V2Button>
                <V2Button variant="secondary" size="md" icon="share" full>Share</V2Button>
              </div>
              <div style={{
                marginTop: 16, paddingTop: 16, borderTop: `1px solid ${V2.line}`,
                fontSize: 12.5, color: V2.muted, display: 'flex', alignItems: 'center', gap: 6,
              }}>
                <Icon name="eye" size={14} color={V2.muted} />
                184 people viewed this in the last 24 hours
              </div>
            </div>

            {/* At a glance */}
            <div style={{
              background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rXl, padding: 22,
            }}>
              <h3 style={{ margin: '0 0 14px', fontSize: 14, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>
                At a glance
              </h3>
              <dl style={{ margin: 0, display: 'grid', gap: 12 }}>
                {[
                  ['Hours', 'Part-time · 24h/week'],
                  ['Schedule', 'Day shift · 7am–3pm'],
                  ['Pay', '£12.80 / hour'],
                  ['Start date', 'Immediate'],
                  ['Sponsorship', 'Considered'],
                  ['Drug-free workplace', 'Yes'],
                ].map(([k, v]) => (
                  <div key={k} style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
                    <dt style={{ fontSize: 13, color: V2.muted, margin: 0 }}>{k}</dt>
                    <dd style={{ fontSize: 13.5, color: V2.ink, fontWeight: 600, margin: 0, textAlign: 'right' }}>{v}</dd>
                  </div>
                ))}
              </dl>
            </div>

            {/* Similar jobs */}
            <div style={{
              background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rXl, padding: 22,
            }}>
              <h3 style={{ margin: '0 0 14px', fontSize: 14, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>
                Similar jobs
              </h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <V2JobCardCompact job={V2_JOBS[9]} />
                <V2JobCardCompact job={V2_JOBS[0]} />
                <V2JobCardCompact job={V2_JOBS[4]} />
              </div>
            </div>
          </aside>
        </div>
      </main>

      <V2Footer />
    </div>
  );
}

Object.assign(window, { V2JobListScreen, V2JobDetailScreen });