'use client';

/**
 * Offline fallback (Session 27).
 *
 * Served by the service worker's navigation handler when a page request
 * fails on the network AND misses the runtime cache. Pre-cached on SW
 * install so it's always available. Kept dependency-free so it renders
 * with zero network.
 */
export default function OfflinePage() {
  return (
    <div
      style={{
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        background: 'var(--bg-0, #06060B)',
        color: 'var(--text-0, #F0F0F5)',
        padding: 24,
        textAlign: 'center',
      }}
    >
      <div
        className="mono"
        style={{
          fontSize: 11,
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
          color: 'var(--grade-a, #00D4A0)',
          marginBottom: 16,
        }}
      >
        VYNDR
      </div>
      <h1 style={{ fontSize: 28, fontWeight: 800, marginBottom: 8, letterSpacing: '-0.02em' }}>
        You&apos;re offline
      </h1>
      <p
        style={{
          fontSize: 16,
          color: 'var(--text-secondary, #8A8A9A)',
          maxWidth: 400,
          marginBottom: 24,
          lineHeight: 1.5,
        }}
      >
        Scores and grades will refresh the moment you reconnect. Anything you
        loaded earlier is still cached and available.
      </p>
      <button
        type="button"
        onClick={() => window.location.reload()}
        style={{
          padding: '12px 24px',
          background: 'var(--grade-a, #00D4A0)',
          color: '#06060B',
          border: 'none',
          borderRadius: 6,
          fontWeight: 700,
          fontSize: 14,
          cursor: 'pointer',
        }}
      >
        Try again
      </button>
    </div>
  );
}
