// ScrollJob v2 — Homepage
// One clear message: "Find the right job faster."
// Story: Hero search → Category chips → Live preview → How it works → For employers
// Broad job examples (warehouse, care, retail, hospitality, driving, tech as ONE of many).

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

      {/* ───── HERO ───── */}
      <section style={{
        position: 'relative', overflow: 'hidden',
        background: `linear-gradient(135deg, ${V2.heroFrom} 0%, ${V2.heroTo} 100%)`,
        padding: '88px 0 64px', color: '#fff',
      }}>
        {/* Soft accent blobs */}
        <div aria-hidden style={{
          position: 'absolute', top: -120, right: -80, width: 520, height: 520,
          borderRadius: '50%',
          background: `radial-gradient(circle at center, rgba(255,255,255,0.18) 0%, transparent 70%)`,
          pointerEvents: 'none',
        }} />
        <div aria-hidden style={{
          position: 'absolute', bottom: -200, left: -120, width: 480, height: 480,
          borderRadius: '50%',
          background: `radial-gradient(circle at center, rgba(255,255,255,0.10) 0%, transparent 70%)`,
          pointerEvents: 'none',
        }} />

        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px', position: 'relative' }}>
          {/* Trust strip */}
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '6px 12px', borderRadius: 999,
              background: 'rgba(255,255,255,0.15)',
              border: '1px solid rgba(255,255,255,0.30)',
              backdropFilter: 'blur(8px)',
              fontSize: 13, fontWeight: 600, color: '#fff',
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#86EFAC' }} />
              68,420 jobs live today · updated every 5 minutes
            </span>
          </div>

          <h1 style={{
            margin: '0 0 18px', maxWidth: 880,
            fontSize: 64, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.03em',
            color: '#fff',
          }}>
            Find the right job<br />
            <span style={{ color: '#FCD980' }}>faster.</span>
          </h1>
          <p style={{
            margin: '0 0 36px', maxWidth: 620,
            fontSize: 19, lineHeight: 1.55, color: 'rgba(255,255,255,0.92)',
          }}>
            Search thousands of jobs, swipe through matches, save your favourites, and apply when you're ready. For every kind of work — not just tech.
          </p>

          {/* Search bar */}
          <div style={{ maxWidth: 880, marginBottom: 24 }}>
            <V2SearchBar defaultQ="" defaultLoc="London" />
          </div>

          {/* Popular searches + employer CTA */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 14, color: 'rgba(255,255,255,0.80)' }}>Popular:</span>
            {['Warehouse jobs', 'Care assistant', 'Delivery driver', 'Part-time evening', 'Remote UK', 'Graduate'].map((t) => (
              <a key={t} style={{
                padding: '6px 12px',
                background: 'rgba(255,255,255,0.15)',
                border: '1px solid rgba(255,255,255,0.25)',
                borderRadius: 999,
                fontSize: 13.5, fontWeight: 500, color: '#fff', textDecoration: 'none',
              }}>{t}</a>
            ))}
            <span style={{ flex: 1 }} />
            <a style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '8px 14px', borderRadius: 999,
              background: '#fff', color: V2.primaryInk,
              fontSize: 13.5, fontWeight: 700, textDecoration: 'none',
              boxShadow: '0 4px 12px rgba(0,0,0,0.10)',
            }}>
              <Icon name="briefcase" size={14} />
              Hiring? Post a job
              <Icon name="arrow-right" size={13} />
            </a>
          </div>
        </div>
      </section>

      {/* ───── CATEGORY CHIPS ───── */}
      <section style={{ padding: '56px 0 16px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 24 }}>
            <div>
              <h2 style={{
                margin: '0 0 6px', fontSize: 28, fontWeight: 700,
                color: V2.ink, letterSpacing: '-0.02em',
              }}>Browse jobs by category</h2>
              <p style={{ margin: 0, color: V2.muted, fontSize: 15 }}>
                Over 68,000 live jobs across every industry, all over the UK.
              </p>
            </div>
            <a style={{
              color: V2.primary, fontWeight: 600, fontSize: 14, textDecoration: 'none',
              display: 'inline-flex', alignItems: 'center', gap: 4,
            }}>
              All categories <Icon name="arrow-right" size={14} />
            </a>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14,
          }}>
            {V2_CATEGORIES.map((c) => {
              const pal = V2.cats[c.name] || { bg: V2.primarySoft, fg: V2.primaryInk, accent: V2.primary };
              return (
                <a key={c.name} style={{
                  display: 'block', background: '#fff',
                  border: `1px solid ${V2.line}`, borderRadius: V2.rLg, padding: 18,
                  textDecoration: 'none', color: 'inherit',
                  transition: 'all .15s ease',
                }}>
                  <span style={{
                    width: 44, height: 44, borderRadius: 12, background: pal.bg,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    marginBottom: 14,
                  }}>
                    <Icon name={c.icon} size={22} color={pal.accent} />
                  </span>
                  <div style={{ fontSize: 15, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>{c.name}</div>
                  <div style={{ fontSize: 13, color: V2.muted, marginTop: 4 }}>
                    {c.count.toLocaleString()} jobs
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      {/* ───── LIVE PREVIEW (job cards + swipe preview) ───── */}
      <section style={{ padding: '72px 0' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
          <div style={{ marginBottom: 28 }}>
            <span style={{
              display: 'inline-block', padding: '4px 10px', marginBottom: 12,
              background: V2.primarySoft, color: V2.primaryInk,
              border: `1px solid ${V2.primaryRing}`, borderRadius: 999,
              fontSize: 12, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase',
            }}>Live right now</span>
            <h2 style={{
              margin: '0 0 6px', fontSize: 28, fontWeight: 700,
              color: V2.ink, letterSpacing: '-0.02em',
            }}>The freshest jobs across the UK</h2>
            <p style={{ margin: 0, color: V2.muted, fontSize: 15 }}>
              Listings update every few minutes. Save what you like or jump straight into swipe mode.
            </p>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 380px', gap: 28, alignItems: 'start',
          }}>
            {/* Left: three job cards */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[V2_JOBS[0], V2_JOBS[1], V2_JOBS[2], V2_JOBS[3]].map((j, i) => (
                <V2JobCard key={j.id} job={j} saved={i === 1} featured={i === 0} />
              ))}
              <a style={{
                marginTop: 6, padding: '14px', textAlign: 'center',
                color: V2.primary, fontWeight: 600, fontSize: 15, textDecoration: 'none',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              }}>
                See all 68,420 jobs <Icon name="arrow-right" size={16} />
              </a>
            </div>

            {/* Right: Swipe preview / mobile-first hook */}
            <SwipePreviewCard />
          </div>
        </div>
      </section>

      {/* ───── HOW IT WORKS ───── */}
      <section style={{ background: V2.bgAlt, padding: '80px 0' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
          <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 48px' }}>
            <h2 style={{
              margin: '0 0 12px', fontSize: 36, fontWeight: 700,
              color: V2.ink, letterSpacing: '-0.02em',
            }}>How ScrollJob works</h2>
            <p style={{ margin: 0, color: V2.text, fontSize: 17, lineHeight: 1.55 }}>
              Four simple steps — designed to be fast on mobile, easy on desktop, and useful for any kind of work.
            </p>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20,
            position: 'relative',
          }}>
            {[
              { n: 1, icon: 'search', title: 'Search',
                d: 'Type a job title, paste a postcode, or pick a category. We index over 68,000 live jobs.' },
              { n: 2, icon: 'flame', title: 'Swipe',
                d: 'Go through curated matches one card at a time. Practical, fast, mobile-friendly.' },
              { n: 3, icon: 'bookmark', title: 'Save',
                d: 'Shortlist the roles that interest you. Get back to them later or compare on desktop.' },
              { n: 4, icon: 'check', title: 'Apply',
                d: 'Apply with one tap. Most listings link directly to the employer\u2019s application page.' },
            ].map((s) => (
              <div key={s.n} style={{
                background: '#fff', border: `1px solid ${V2.line}`,
                borderRadius: V2.rLg, padding: 24, position: 'relative',
              }}>
                <span style={{
                  width: 40, height: 40, borderRadius: 12,
                  background: V2.primary, color: '#fff',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 16,
                }}>
                  <Icon name={s.icon} size={20} />
                </span>
                <div style={{ fontSize: 12, fontWeight: 700, color: V2.muted, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>
                  Step {s.n}
                </div>
                <h3 style={{ margin: '0 0 10px', fontSize: 20, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>{s.title}</h3>
                <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: V2.text }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ───── TRUST METRICS — kept small, three cards ───── */}
      <section style={{ padding: '72px 0' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 32px' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32,
            textAlign: 'center',
          }}>
            {[
              { v: '68,420', l: 'Live jobs today', s: 'Across every industry' },
              { v: '14,200', l: 'Hires in the last month', s: 'Time-to-hire down 38%' },
              { v: '8,612',  l: 'Companies hiring', s: 'From local cafés to FTSE 100' },
            ].map((m) => (
              <div key={m.l}>
                <div style={{ fontSize: 48, fontWeight: 800, color: V2.ink, letterSpacing: '-0.03em', lineHeight: 1 }}>
                  {m.v}
                </div>
                <div style={{ fontSize: 16, fontWeight: 600, color: V2.ink, marginTop: 10 }}>{m.l}</div>
                <div style={{ fontSize: 14, color: V2.muted, marginTop: 4 }}>{m.s}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ───── EMPLOYER CTA ───── */}
      <section style={{ padding: '40px 0 80px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
          <div style={{
            background: V2.ink, borderRadius: V2.r2xl, padding: '56px 64px',
            color: '#fff', position: 'relative', overflow: 'hidden',
            display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'center',
          }}>
            <div aria-hidden style={{
              position: 'absolute', top: -100, right: -50, width: 400, height: 400,
              borderRadius: '50%',
              background: `radial-gradient(circle at center, ${V2.primary}44 0%, transparent 70%)`,
            }} />
            <div style={{ position: 'relative' }}>
              <span style={{
                display: 'inline-block', padding: '4px 12px', marginBottom: 16,
                background: 'rgba(255,255,255,0.10)', color: '#fff',
                borderRadius: 999, fontSize: 12, fontWeight: 700,
                letterSpacing: '0.06em', textTransform: 'uppercase',
              }}>For employers</span>
              <h2 style={{
                margin: '0 0 14px', fontSize: 40, fontWeight: 700,
                letterSpacing: '-0.02em', lineHeight: 1.15,
              }}>Hiring? Post a job in 5 minutes.</h2>
              <p style={{
                margin: '0 0 28px', fontSize: 16, lineHeight: 1.6,
                color: '#CFD4DC', maxWidth: 480,
              }}>
                Reach over 1.4 million job seekers across the UK. Free standard posts for small businesses — featured boosts available when you need to hire fast.
              </p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <V2Button variant="primary" size="lg" iconRight="arrow-right">Post a job</V2Button>
              <V2Button variant="ghost" size="lg" onClick={null}>
                <span style={{ color: '#fff' }}>Talk to sales</span>
                </V2Button>
              </div>
            </div>
            <div style={{ position: 'relative' }}>
              {/* Mini stats cluster */}
              <div style={{
                background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.10)',
                borderRadius: V2.rXl, padding: 24,
                display: 'flex', flexDirection: 'column', gap: 16,
              }}>
                {[
                  { l: 'Average time to first applicant', v: '6 hours' },
                  { l: 'Average applicants per role',     v: '38' },
                  { l: 'Featured posts get',              v: '4.2× more views' },
                ].map((m) => (
                  <div key={m.l} style={{
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    paddingBottom: 14, borderBottom: '1px solid rgba(255,255,255,0.08)',
                  }}>
                    <span style={{ fontSize: 14, color: '#CFD4DC' }}>{m.l}</span>
                    <span style={{ fontSize: 18, fontWeight: 700, color: '#fff', letterSpacing: '-0.01em' }}>{m.v}</span>
                  </div>
                ))}
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 8,
                  fontSize: 13, color: '#CFD4DC', paddingTop: 4,
                }}>
                  <Icon name="shield" size={16} color="#88FFB1" />
                  Free standard listings · no card required
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <V2Footer />
    </div>
  );
}

// ───── Swipe preview card used on homepage ─────
function SwipePreviewCard() {
  return (
    <div style={{
      background: V2.ink, borderRadius: V2.r2xl, padding: 24,
      color: '#fff', position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '4px 10px', background: 'rgba(255,255,255,0.10)',
        borderRadius: 999, fontSize: 11.5, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase',
        marginBottom: 16,
      }}>
        <Icon name="flame" size={12} color="#FCD980" /> Try swipe mode
      </div>
      <h3 style={{ margin: '0 0 8px', fontSize: 20, fontWeight: 700, letterSpacing: '-0.01em' }}>
        24 fresh jobs picked for you
      </h3>
      <p style={{ margin: '0 0 20px', fontSize: 14, color: '#CFD4DC', lineHeight: 1.55 }}>
        Skim through curated matches one at a time. Save what you like — apply later.
      </p>

      {/* Mini stacked cards mock */}
      <div style={{ position: 'relative', height: 260, marginBottom: 18 }}>
        {[
          { offset: 24, scale: 0.92, op: 0.5, j: V2_JOBS[2] },
          { offset: 12, scale: 0.96, op: 0.85, j: V2_JOBS[1] },
          { offset: 0,  scale: 1,    op: 1,   j: V2_JOBS[0] },
        ].map((c, i) => (
          <div key={i} style={{
            position: 'absolute', inset: 0, top: c.offset,
            background: '#fff', color: V2.ink,
            borderRadius: V2.rLg, padding: 18,
            boxShadow: V2.shadowLg,
            transform: `scale(${c.scale})`, transformOrigin: 'top center',
            opacity: c.op,
          }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 10 }}>
              <V2CompanyAvatar name={c.j.company} category={c.j.category} size={36} radius={10} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14.5, fontWeight: 700, color: V2.ink, lineHeight: 1.25, letterSpacing: '-0.01em' }}>
                  {c.j.title}
                </div>
                <div style={{ fontSize: 12, color: V2.muted, marginTop: 2 }}>
                  {c.j.company} · {c.j.location}
                </div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              <V2Badge tone="primary" size="sm">{c.j.salary}</V2Badge>
              <V2CatPill name={c.j.category} size="sm" />
            </div>
          </div>
        ))}
      </div>

      <div style={{ display: 'flex', gap: 8 }}>
        <V2Button variant="dark" size="md" icon="x" full>
          <span style={{ color: '#fff' }}>Skip</span>
        </V2Button>
        <V2Button variant="primary" size="md" icon="bookmark" full>Save</V2Button>
      </div>
    </div>
  );
}

window.V2HomeScreen = V2HomeScreen;