// ScrollJob v2 — Discovery hubs (programmatic SEO landing pages)
// Category / Location / Company / Remote
// SEO-content rich, infinite-scroll, lots of cross-linking.

function V2HubShell({ kicker, title, count, subtitle, children, badge }) {
  return (
    <div style={{ background: V2.bg, fontFamily: V2.font, color: V2.ink, minHeight: '100%' }}>
      <V2Header active="Discover" />
      {/* Hero */}
      <section style={{
        background: V2.bgAlt, padding: '48px 0 32px',
        borderBottom: `1px solid ${V2.line}`,
      }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 32px' }}>
          <nav style={{ fontSize: 13, color: V2.muted, marginBottom: 14 }}>
            <a style={{ color: V2.muted, textDecoration: 'none' }}>Discover</a>
            <span style={{ margin: '0 8px' }}>·</span>
            <a style={{ color: V2.muted, textDecoration: 'none' }}>{kicker}</a>
          </nav>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 10, flexWrap: 'wrap' }}>
            {badge}
            <span style={{
              padding: '4px 10px', background: '#fff', border: `1px solid ${V2.line}`,
              color: V2.text, borderRadius: 999, fontSize: 12, fontWeight: 600,
            }}>{kicker}</span>
          </div>
          <h1 style={{
            margin: '0 0 12px', fontSize: 44, fontWeight: 800,
            color: V2.ink, letterSpacing: '-0.03em', lineHeight: 1.1,
          }}>
            {title} <span style={{ color: V2.muted, fontWeight: 600 }}>· {count} open</span>
          </h1>
          <p style={{ margin: 0, fontSize: 17, color: V2.text, maxWidth: 720, lineHeight: 1.55 }}>{subtitle}</p>
        </div>
      </section>

      {/* Body */}
      <main style={{ maxWidth: 1280, margin: '0 auto', padding: '28px 32px 0' }}>
        {children}
      </main>
      <V2Footer />
      {/* Schema.org JSON-LD reminder — note for engineering only */}
      <div style={{ display: 'none' }} data-schema="ItemList" />
    </div>
  );
}

function V2HubLayout({ filters, results, seoContent, related }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '260px minmax(0, 1fr)', gap: 28, alignItems: 'start' }}>
      <aside style={{ position: 'sticky', top: 86 }}>{filters}</aside>
      <div>
        {results}
        <V2InfiniteSentinel loaded={6} total={1247} />
        <V2EndOfResults />
        <section style={{
          marginTop: 32, paddingTop: 32, borderTop: `1px solid ${V2.line}`,
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32,
        }}>
          <div>{seoContent}</div>
          <div>{related}</div>
        </section>
      </div>
    </div>
  );
}

function HubFilterCard({ title, children }) {
  return (
    <div style={{
      background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
      padding: 18, marginBottom: 14,
    }}>
      <h3 style={{ margin: '0 0 12px', fontSize: 13, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>{title}</h3>
      {children}
    </div>
  );
}

function FilterRow({ label, count, on }) {
  return (
    <label style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '5px 0', cursor: 'pointer',
      fontSize: 13.5, color: on ? V2.ink : V2.text, fontWeight: on ? 600 : 500,
    }}>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
        <input type="checkbox" defaultChecked={on} style={{ width: 15, height: 15, accentColor: V2.primary }} />
        {label}
      </span>
      <span style={{ fontSize: 12, color: V2.faint }}>{count}</span>
    </label>
  );
}

function HubAlertCTA({ entity }) {
  return (
    <div style={{
      padding: 18, marginBottom: 14,
      background: V2.primarySoft, border: `1px solid ${V2.primaryRing}`,
      borderRadius: V2.rLg,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
        <span style={{
          width: 36, height: 36, borderRadius: 10, background: '#fff',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="bell" size={18} color={V2.primary} />
        </span>
        <div style={{ fontSize: 14, fontWeight: 700, color: V2.primaryInk, lineHeight: 1.3 }}>
          Get new {entity} jobs by email
        </div>
      </div>
      <p style={{ margin: '0 0 12px', fontSize: 13, color: V2.text, lineHeight: 1.55 }}>
        Daily or weekly, only the ones that match your filters.
      </p>
      <V2Button variant="primary" size="sm" full>Set up alert</V2Button>
    </div>
  );
}

function HubRelatedLinks({ links, title }) {
  return (
    <div style={{
      background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, padding: 22,
    }}>
      <h3 style={{ margin: '0 0 14px', fontSize: 15, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>{title}</h3>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {links.map(([label, count]) => (
          <a key={label} style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '7px 12px', borderRadius: 999,
            background: V2.bgAlt, border: `1px solid ${V2.line}`,
            color: V2.text, fontSize: 12.5, fontWeight: 500, textDecoration: 'none',
          }}>
            {label}
            {count && <span style={{ color: V2.faint, fontSize: 11 }}>· {count}</span>}
          </a>
        ))}
      </div>
    </div>
  );
}

function HubSEOContent({ heading, paras }) {
  return (
    <div>
      <h2 style={{ margin: '0 0 14px', fontSize: 22, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>{heading}</h2>
      {paras.map((p, i) => (
        <p key={i} style={{
          margin: '0 0 14px', fontSize: 14.5, color: V2.text, lineHeight: 1.7, maxWidth: '64ch',
        }}>{p}</p>
      ))}
    </div>
  );
}

// ─── CATEGORY HUB ────────────────────────────────────────────────────────
function V2CategoryHubScreen() {
  return (
    <V2HubShell
      kicker="Category"
      badge={<V2CatPill name="Healthcare" size="lg" />}
      title="Healthcare jobs"
      count="9,612"
      subtitle="Care assistants, nurses, support workers and clinical staff hiring across the UK. Filter by qualification, working pattern and sponsorship availability."
    >
      <V2HubLayout
        filters={
          <>
            <HubAlertCTA entity="Healthcare" />
            <HubFilterCard title="Sub-category">
              {[['Care assistant', 4218, true], ['Registered nurse', 1842], ['Support worker', 1218], ['HCA', 824], ['Therapist', 412], ['Clinical lead', 248]].map(([l, c, on]) => (
                <FilterRow key={l} label={l} count={c} on={on} />
              ))}
            </HubFilterCard>
            <HubFilterCard title="Salary">
              {[['£11/hr+', 9612], ['£12/hr+', 6218, true], ['£14/hr+', 1842], ['Band 5+', 1218]].map(([l, c, on]) => (
                <FilterRow key={l} label={l} count={c} on={on} />
              ))}
            </HubFilterCard>
            <HubFilterCard title="Experience level">
              {[['Entry-level', 4218, true], ['Mid-level', 3218], ['Senior', 1842], ['Lead', 248]].map(([l, c, on]) => (
                <FilterRow key={l} label={l} count={c} on={on} />
              ))}
            </HubFilterCard>
            <HubFilterCard title="Working pattern">
              {[['Day shift', 5218, true], ['Night shift', 1842], ['Weekend', 2418], ['Bank/agency', 612]].map(([l, c, on]) => (
                <FilterRow key={l} label={l} count={c} on={on} />
              ))}
            </HubFilterCard>
            <HubFilterCard title="Sponsorship">
              {[['Available', 1218, true], ['Considered', 612], ['UK only', 7782]].map(([l, c, on]) => (
                <FilterRow key={l} label={l} count={c} on={on} />
              ))}
            </HubFilterCard>
          </>
        }
        results={
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <V2JobCard job={V2_JOBS[1]} featured />
            <V2JobCard job={V2_JOBS[9]} />
            <V2JobCard job={V2_JOBS[1]} />
            <V2JobCard job={V2_JOBS[9]} />
            <V2JobCard job={V2_JOBS[1]} />
            <V2JobCard job={V2_JOBS[9]} />
          </div>
        }
        seoContent={
          <HubSEOContent
            heading="Working in healthcare in the UK"
            paras={[
              "The UK's care sector is one of the largest single employers in the country, with over 1.6 million people working across residential, domiciliary and clinical settings. Demand has stayed consistently high — especially for care assistants, support workers and registered nurses — driven by an ageing population and ongoing NHS recruitment.",
              "Most entry-level care roles do not require previous experience. Employers cover the cost of induction, basic safeguarding training, and increasingly NVQ Level 2 or Level 3 in Adult Social Care. Visa sponsorship under the Health and Care Worker route remains common, particularly for senior care assistant and registered nurse roles.",
              "Pay starts around £11–£12/hour for entry-level care assistants and reaches £30,000+ for senior care assistants. Registered nurses on NHS Band 5 earn between £28,407 and £34,581 (2026), with shift uplifts and high-cost-area supplements added on top.",
            ]}
          />
        }
        related={
          <HubRelatedLinks
            title="Related searches"
            links={[
              ['Care assistant jobs', '4,218'],
              ['Registered nurse jobs', '1,842'],
              ['Support worker jobs', '1,218'],
              ['NHS jobs', '6,218'],
              ['Sponsored care jobs', '1,218'],
              ['Night shift care', '1,842'],
              ['Healthcare in London', '2,418'],
              ['Healthcare in Manchester', '1,218'],
              ['Healthcare in Bristol', '482'],
              ['Healthcare graduate roles', '218'],
            ]}
          />
        }
      />
    </V2HubShell>
  );
}

// ─── LOCATION HUB ────────────────────────────────────────────────────────
function V2LocationHubScreen() {
  return (
    <V2HubShell
      kicker="Location"
      title="Jobs in London"
      count="14,218"
      subtitle="From hospitality to healthcare, finance to logistics — every kind of job hiring in Greater London right now."
    >
      <V2HubLayout
        filters={
          <>
            <HubAlertCTA entity="London" />
            <HubFilterCard title="Area">
              {[['Central London', 6218, true], ['North London', 2218], ['East London', 1842], ['South London', 2418], ['West London', 1518]].map(([l, c, on]) => (
                <FilterRow key={l} label={l} count={c} on={on} />
              ))}
            </HubFilterCard>
            <HubFilterCard title="Category">
              {V2_CATEGORIES.slice(0, 6).map((c) => (
                <FilterRow key={c.name} label={c.name} count={Math.round(c.count * 0.15)} on={c.name === 'Healthcare'} />
              ))}
            </HubFilterCard>
            <HubFilterCard title="Salary">
              {[['£25k+', 8218], ['£35k+', 4218, true], ['£50k+', 1842], ['£80k+', 612]].map(([l, c, on]) => (
                <FilterRow key={l} label={l} count={c} on={on} />
              ))}
            </HubFilterCard>
            <HubFilterCard title="Work mode">
              {[['On-site', 9218, true], ['Hybrid', 3218], ['Remote', 1782]].map(([l, c, on]) => (
                <FilterRow key={l} label={l} count={c} on={on} />
              ))}
            </HubFilterCard>
          </>
        }
        results={
          <>
            <div style={{
              padding: 18, marginBottom: 14,
              background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
              display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18,
            }}>
              {[
                ['Live jobs', '14,218', V2.primary],
                ['Avg. salary', '£42,800', V2.ink],
                ['Top category', 'Healthcare', V2.ink],
                ['New this week', '+1,824', V2.success],
              ].map(([l, v, c]) => (
                <div key={l}>
                  <div style={{ fontSize: 12, color: V2.muted, marginBottom: 4 }}>{l}</div>
                  <div style={{ fontSize: 22, fontWeight: 800, color: c, letterSpacing: '-0.02em' }}>{v}</div>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <V2JobCard job={V2_JOBS[3]} featured />
              <V2JobCard job={V2_JOBS[10]} />
              <V2JobCard job={V2_JOBS[4]} />
              <V2JobCard job={V2_JOBS[6]} />
              <V2JobCard job={V2_JOBS[11]} />
            </div>
          </>
        }
        seoContent={
          <HubSEOContent
            heading="Working in London"
            paras={[
              "London is the UK's largest job market, with around 5 million people working in the capital across every industry. The city consistently leads the rest of the UK in financial services, technology, hospitality and creative roles — but you'll also find some of the country's largest healthcare, retail and logistics employers headquartered here.",
              "Salaries in London tend to run 15–25% higher than the national median, with most non-frontline roles paying a 'London weighting' on top of the standard salary. Average pay is around £42,800, with senior professional roles often exceeding £80,000.",
              "Commuting patterns are gradually settling post-pandemic. Hybrid working remains common for office-based roles, with most teams in-office 2–3 days per week. On-site roles in healthcare, hospitality and logistics continue to require full attendance and often offer shift premiums.",
            ]}
          />
        }
        related={
          <HubRelatedLinks
            title="Related searches"
            links={[
              ['Part-time in London', '4,218'],
              ['Remote in London', '1,218'],
              ['Hospitality in London', '2,218'],
              ['Healthcare in London', '2,418'],
              ['Retail in London', '1,842'],
              ['Graduate in London', '612'],
              ['Hybrid jobs', '3,218'],
              ['£50k+ in London', '1,842'],
              ['Jobs near me', '14,218'],
              ['Manchester', '5,218'],
              ['Bristol', '2,418'],
              ['Edinburgh', '1,842'],
            ]}
          />
        }
      />
    </V2HubShell>
  );
}

// ─── COMPANY HUB ────────────────────────────────────────────────────────
function V2CompanyHubScreen() {
  return (
    <V2HubShell
      kicker="Company"
      badge={<V2VerifiedBadge />}
      title="Lavender House Care"
      count="14"
      subtitle="Family-owned residential care home in central Bristol. 14 open roles across day, night and bank shifts."
    >
      <V2HubLayout
        filters={
          <>
            <HubAlertCTA entity="Lavender House Care" />
            <HubFilterCard title="About the employer">
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
                <V2CompanyAvatar name="Lavender House Care" category="Healthcare" size={56} radius={14} />
                <div>
                  <div style={{ fontSize: 14, fontWeight: 700, color: V2.ink }}>Lavender House Care</div>
                  <div style={{ fontSize: 12.5, color: V2.muted, marginTop: 2, display: 'inline-flex', gap: 6, alignItems: 'center' }}>
                    <Icon name="starFill" size={12} color="#D97706" /> 4.7 · 842 reviews
                  </div>
                </div>
              </div>
              <div style={{ display: 'grid', gap: 8, fontSize: 13, color: V2.text }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: V2.muted }}>Industry</span><span style={{ fontWeight: 600 }}>Healthcare</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: V2.muted }}>Size</span><span style={{ fontWeight: 600 }}>32 staff</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: V2.muted }}>Founded</span><span style={{ fontWeight: 600 }}>2008</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: V2.muted }}>HQ</span><span style={{ fontWeight: 600 }}>Bristol, UK</span></div>
              </div>
              <V2Button variant="secondary" size="sm" full>View company profile</V2Button>
            </HubFilterCard>
            <HubFilterCard title="Role">
              {[['Care assistant', 8, true], ['Senior care assistant', 3], ['Care home cook', 1], ['Night carer', 2]].map(([l, c, on]) => (
                <FilterRow key={l} label={l} count={c} on={on} />
              ))}
            </HubFilterCard>
            <HubFilterCard title="Shift">
              {[['Day', 8, true], ['Night', 3], ['Bank/casual', 3]].map(([l, c, on]) => (
                <FilterRow key={l} label={l} count={c} on={on} />
              ))}
            </HubFilterCard>
          </>
        }
        results={
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <V2JobCard job={V2_JOBS[1]} featured saved />
            <V2JobCard job={V2_JOBS[1]} />
            <V2JobCard job={V2_JOBS[1]} />
            <V2JobCard job={V2_JOBS[1]} />
            <V2JobCard job={V2_JOBS[1]} />
          </div>
        }
        seoContent={
          <HubSEOContent
            heading="About Lavender House Care"
            paras={[
              "Lavender House is a 24-bedroom residential care home in Clifton, Bristol, supporting older adults including those living with dementia. The home is family-owned and run by Jane and Marcus Whitfield, who took over from the founders in 2014.",
              "The team prides itself on its 'small-and-stable' staffing model — most carers have been with the home for 3+ years, and the home consistently scores in the top 10% of CQC inspections in the South West region.",
              "We hire kind, patient and reliable care staff at all levels, from no-experience trainees through to NVQ Level 3 senior care assistants. Sponsorship under the Health and Care Worker route is available for senior roles.",
            ]}
          />
        }
        related={
          <>
            <HubRelatedLinks
              title="Other employers like this"
              links={[
                ['Sunrise Senior Living', '24 jobs'],
                ['Bupa Care Homes', '142 jobs'],
                ['Caremark', '38 jobs'],
                ['HC-One', '218 jobs'],
              ]}
            />
            <div style={{ marginTop: 14 }}>
              <HubRelatedLinks
                title="Lavender House locations"
                links={[
                  ['Bristol — main site', '14 jobs'],
                  ['Bath — sister home', '6 jobs'],
                ]}
              />
            </div>
          </>
        }
      />
    </V2HubShell>
  );
}

// ─── REMOTE HUB ────────────────────────────────────────────────────────
function V2RemoteHubScreen() {
  return (
    <V2HubShell
      kicker="Working pattern"
      title="Remote jobs in the UK"
      count="5,128"
      subtitle="Fully-remote and hybrid roles across the UK — customer support, sales, content, design, engineering. Filter by region preference and async-first cultures."
    >
      <V2HubLayout
        filters={
          <>
            <HubAlertCTA entity="Remote" />
            <HubFilterCard title="Region restriction">
              {[['Anywhere', 1218], ['UK-only', 2418, true], ['Europe', 1218], ['Same timezone', 274]].map(([l, c, on]) => (
                <FilterRow key={l} label={l} count={c} on={on} />
              ))}
            </HubFilterCard>
            <HubFilterCard title="Category">
              {V2_CATEGORIES.filter((c) => ['Remote', 'Office', 'Tech', 'Retail', 'Graduate'].includes(c.name)).map((c) => (
                <FilterRow key={c.name} label={c.name} count={Math.round(c.count * 0.15)} on={c.name === 'Office'} />
              ))}
            </HubFilterCard>
            <HubFilterCard title="Salary">
              {[['£25k+', 4218], ['£40k+', 2218, true], ['£60k+', 818], ['£100k+', 218]].map(([l, c, on]) => (
                <FilterRow key={l} label={l} count={c} on={on} />
              ))}
            </HubFilterCard>
            <HubFilterCard title="Culture">
              {[['Async-first', 1218, true], ['Travel monthly', 612], ['Bring your own kit', 318], ['Will sponsor visa', 218]].map(([l, c, on]) => (
                <FilterRow key={l} label={l} count={c} on={on} />
              ))}
            </HubFilterCard>
          </>
        }
        results={
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <V2JobCard job={V2_JOBS[5]} featured />
            <V2JobCard job={V2_JOBS[6]} />
            <V2JobCard job={V2_JOBS[5]} />
            <V2JobCard job={V2_JOBS[6]} />
            <V2JobCard job={V2_JOBS[5]} />
          </div>
        }
        seoContent={
          <HubSEOContent
            heading="Working remotely from the UK"
            paras={[
              "Remote and hybrid working in the UK have stabilised at roughly 35% of office-based roles offering some form of remote arrangement. Fully-remote (no office attendance) is rarer — around 8% of all listings — and concentrated in customer support, sales, design, content and engineering.",
              "UK employers generally hire UK-residents only when a role is listed as 'remote, UK'. Some companies (often US- or EU-headquartered) hire across Europe or globally, but tax, employment and right-to-work compliance is much more involved for both sides.",
              "If you're looking to work async-first or across timezones, look out for that wording explicitly in the listing — it's a stronger signal than 'flexible hours' or 'work from anywhere'.",
            ]}
          />
        }
        related={
          <HubRelatedLinks
            title="Related searches"
            links={[
              ['Hybrid jobs', '12,418'],
              ['Async-first', '1,218'],
              ['Customer support remote', '612'],
              ['Software engineer remote', '482'],
              ['Sales remote', '418'],
              ['Content writer remote', '218'],
              ['Remote UK only', '2,418'],
              ['Anywhere in Europe', '1,218'],
              ['Part-time remote', '612'],
              ['£50k+ remote', '1,218'],
            ]}
          />
        }
      />
    </V2HubShell>
  );
}

Object.assign(window, {
  V2CategoryHubScreen, V2LocationHubScreen, V2CompanyHubScreen, V2RemoteHubScreen,
});