// ScrollJob v2 — Error + Empty states (404, Job expired, Search empty, 500)
// Friendly line-art illustrations, always 2 CTAs.

function V2StateShell({ children }) {
  return (
    <div style={{ background: V2.bg, fontFamily: V2.font, color: V2.ink, minHeight: '100%' }}>
      <V2Header active="" />
      <main style={{
        maxWidth: 720, margin: '0 auto', padding: '64px 32px 0',
        textAlign: 'center',
      }}>{children}</main>
      <V2Footer />
    </div>
  );
}

// Shared line-art illustration helper. Stroke V2.line, highlight V2.primary.
function Illo({ children, width = 240, height = 160 }) {
  return (
    <svg viewBox={`0 0 ${width} ${height}`} style={{ width, height, marginBottom: 26 }}>
      {children}
    </svg>
  );
}

function V2NotFoundScreen() {
  return (
    <V2StateShell>
      <Illo>
        {/* Big 404 with magnifier */}
        <g stroke={V2.line} strokeWidth="2" fill="none">
          <rect x="20" y="40" width="200" height="80" rx="12" />
          <line x1="20" y1="60" x2="220" y2="60" />
          <circle cx="40" cy="50" r="3" fill={V2.line} stroke="none" />
          <circle cx="52" cy="50" r="3" fill={V2.line} stroke="none" />
          <circle cx="64" cy="50" r="3" fill={V2.line} stroke="none" />
        </g>
        <text x="120" y="100" textAnchor="middle" fontSize="36" fontWeight="800" fill={V2.lineStrong} fontFamily={V2.font} letterSpacing="-0.04em">404</text>
        <g stroke={V2.primary} strokeWidth="3" fill="none" strokeLinecap="round">
          <circle cx="170" cy="90" r="14" />
          <line x1="180" y1="100" x2="192" y2="112" />
        </g>
      </Illo>
      <h1 style={{ margin: '0 0 12px', fontSize: 32, fontWeight: 800, color: V2.ink, letterSpacing: '-0.02em' }}>
        We can't find that page
      </h1>
      <p style={{ margin: '0 0 24px', fontSize: 15.5, color: V2.text, lineHeight: 1.55, maxWidth: 480, marginLeft: 'auto', marginRight: 'auto' }}>
        The link may be broken or the job listing might have been taken down. Try searching for what you were looking for, or head back home.
      </p>
      <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
        <V2Button variant="primary" size="lg" icon="search">Search jobs</V2Button>
        <V2Button variant="secondary" size="lg" icon="home">Back home</V2Button>
      </div>
    </V2StateShell>
  );
}

function V2JobExpiredScreen() {
  return (
    <V2StateShell>
      <Illo width={260} height={180}>
        <g stroke={V2.line} strokeWidth="2" fill="none">
          {/* job card outline */}
          <rect x="40" y="30" width="180" height="120" rx="14" fill="#fff" />
          <circle cx="68" cy="56" r="10" />
          <line x1="86" y1="50" x2="190" y2="50" />
          <line x1="86" y1="62" x2="160" y2="62" />
          <line x1="50" y1="90" x2="210" y2="90" />
          <line x1="50" y1="104" x2="180" y2="104" />
          <line x1="50" y1="118" x2="190" y2="118" />
        </g>
        {/* clock badge */}
        <g>
          <circle cx="200" cy="40" r="18" fill={V2.warnBg} stroke={V2.warnLine} strokeWidth="2" />
          <path d="M200 30 v10 l6 4" stroke={V2.warn} strokeWidth="2.5" strokeLinecap="round" fill="none" />
        </g>
      </Illo>
      <V2Badge tone="warn" size="md" icon="clock">Listing expired</V2Badge>
      <h1 style={{ margin: '18px 0 12px', fontSize: 30, fontWeight: 800, color: V2.ink, letterSpacing: '-0.02em' }}>
        This role has been filled
      </h1>
      <p style={{ margin: '0 0 22px', fontSize: 15.5, color: V2.text, lineHeight: 1.55, maxWidth: 540, marginLeft: 'auto', marginRight: 'auto' }}>
        <strong>Care Assistant — Residential Home</strong> at Lavender House Care closed on 12 May 2026. There are <strong>14 more roles</strong> at Lavender House and <strong>248 similar roles</strong> in Bristol.
      </p>
      <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
        <V2Button variant="primary" size="lg" iconRight="arrow-right">See similar roles</V2Button>
        <V2Button variant="secondary" size="lg">More from Lavender House</V2Button>
      </div>
      <div style={{ marginTop: 18, fontSize: 13, color: V2.muted }}>
        Or <a style={{ color: V2.primary, fontWeight: 600, textDecoration: 'none' }}>set up an alert</a> for Care assistant roles in Bristol.
      </div>
    </V2StateShell>
  );
}

function V2SearchEmptyScreen() {
  return (
    <V2StateShell>
      <Illo>
        <g stroke={V2.line} strokeWidth="2" fill="none">
          <rect x="40" y="60" width="160" height="32" rx="16" />
          <line x1="60" y1="76" x2="170" y2="76" />
        </g>
        <g stroke={V2.primary} strokeWidth="3" fill="none" strokeLinecap="round">
          <circle cx="170" cy="76" r="16" />
          <line x1="184" y1="90" x2="200" y2="106" />
        </g>
        <g stroke={V2.line} strokeWidth="2" fill="none" strokeLinecap="round">
          <path d="M64 110 q12 -10 24 0" />
          <path d="M112 110 q12 -10 24 0" />
          <path d="M160 110 q12 -10 24 0" />
        </g>
      </Illo>
      <h1 style={{ margin: '0 0 12px', fontSize: 30, fontWeight: 800, color: V2.ink, letterSpacing: '-0.02em' }}>
        No jobs match those filters yet
      </h1>
      <p style={{ margin: '0 0 8px', fontSize: 15.5, color: V2.text, lineHeight: 1.55, maxWidth: 520, marginLeft: 'auto', marginRight: 'auto' }}>
        We didn't find anything for <strong>"Care assistant · Bristol · within 1 mile · £18/hr+"</strong>.
      </p>
      <p style={{ margin: '0 0 22px', fontSize: 14, color: V2.muted }}>Try removing a filter, or widen the distance.</p>
      <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 24 }}>
        <V2Button variant="primary" size="lg" icon="bell">Set up alert · notify when matches appear</V2Button>
        <V2Button variant="secondary" size="lg" icon="sliders">Loosen filters</V2Button>
      </div>
      {/* Suggested loosenings */}
      <div style={{
        marginTop: 16, padding: 18, textAlign: 'left',
        background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
        maxWidth: 520, marginLeft: 'auto', marginRight: 'auto',
      }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: V2.ink, marginBottom: 10 }}>Try one of these instead</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {[
            ['Within 10 miles', '248 jobs'],
            ['£12/hr+', '184 jobs'],
            ['Without the distance filter', '482 jobs'],
            ['In Greater Bristol', '618 jobs'],
          ].map(([t, c]) => (
            <a key={t} style={{
              padding: '7px 12px', borderRadius: 999,
              background: V2.bgAlt, border: `1px solid ${V2.line}`,
              fontSize: 12.5, color: V2.text, fontWeight: 500, textDecoration: 'none',
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              {t} <span style={{ color: V2.faint }}>· {c}</span>
            </a>
          ))}
        </div>
      </div>
    </V2StateShell>
  );
}

function V2ServerErrorScreen() {
  return (
    <V2StateShell>
      <Illo>
        <g stroke={V2.line} strokeWidth="2" fill="none">
          <rect x="40" y="40" width="160" height="100" rx="12" />
          <line x1="40" y1="64" x2="200" y2="64" />
          <circle cx="56" cy="52" r="3" fill={V2.line} stroke="none" />
          <circle cx="68" cy="52" r="3" fill={V2.line} stroke="none" />
          <circle cx="80" cy="52" r="3" fill={V2.line} stroke="none" />
        </g>
        <g stroke={V2.primary} strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round">
          <path d="M104 90 l32 32 M136 90 l-32 32" />
        </g>
      </Illo>
      <h1 style={{ margin: '0 0 12px', fontSize: 30, fontWeight: 800, color: V2.ink, letterSpacing: '-0.02em' }}>
        Something went wrong on our side
      </h1>
      <p style={{ margin: '0 0 22px', fontSize: 15.5, color: V2.text, lineHeight: 1.55, maxWidth: 500, marginLeft: 'auto', marginRight: 'auto' }}>
        We've logged the error and our team has been notified. It usually takes us under 5 minutes to recover. Please try again in a moment.
      </p>
      <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
        <V2Button variant="primary" size="lg" icon="arrow-right">Try again</V2Button>
        <V2Button variant="secondary" size="lg" icon="home">Back home</V2Button>
      </div>
      <div style={{
        marginTop: 24, padding: '8px 14px', display: 'inline-block',
        background: V2.bgAlt, border: `1px solid ${V2.line}`, borderRadius: 999,
        fontSize: 12, color: V2.muted, fontFamily: V2.fontMono,
      }}>
        Reference: <strong>err_20260514_a91f</strong> · 14 May 2026 · 09:42 UTC
      </div>
    </V2StateShell>
  );
}

Object.assign(window, { V2NotFoundScreen, V2JobExpiredScreen, V2SearchEmptyScreen, V2ServerErrorScreen });