// screens-ob.jsx — Login + a minimal "welcome back" onboarding for Derek

function ScreenLogin({ onContinue }) {
  const tenant = (window.TENANTS && window.TENANTS[WVU.id]) || null;
  const nickPlural   = tenant?.nick || 'Mountaineers';
  const nickSingular = nickPlural.replace(/s$/i, ''); // Mountaineer / Ute / Buckeye
  const short = tenant?.short || 'WVU';

  const loginByTenant = {
    wvu:  'mountaineer/assets/login-wvu.png',
    utah: 'mountaineer/assets/login-utah.png',
    osu:  'mountaineer/assets/login-osu.png',
  };
  const bgSrc = loginByTenant[WVU.id] || loginByTenant.wvu;

  return (
    <div style={{
      position: 'absolute', inset: 0, overflow: 'hidden',
      background: '#0a0805', color: WVU.cream,
      display: 'flex', flexDirection: 'column',
    }}>
      {/* Full-bleed tenant photo */}
      <img
        src={bgSrc}
        alt={`${short} home`}
        style={{
          position: 'absolute', inset: 0,
          width: '100%', height: '100%',
          objectFit: 'cover', objectPosition: 'center',
          zIndex: 0,
        }}
      />
      {/* Dark scrim — heavier at top (status bar + wordmark) and bottom (CTAs / footer) */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: `
          linear-gradient(180deg,
            rgba(10,8,5,0.55) 0%,
            rgba(10,8,5,0.20) 22%,
            rgba(10,8,5,0.55) 55%,
            rgba(10,8,5,0.92) 100%)
        `,
      }} />
      {/* Subtle vignette so the centered hero copy holds */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: 'radial-gradient(120% 80% at 50% 60%, transparent 0%, rgba(0,0,0,0.45) 100%)',
        pointerEvents: 'none',
      }} />
      {/* Faint diagonal texture (kept from prior design) */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: `repeating-linear-gradient(-20deg, rgba(245,236,217,0.012) 0 1px, transparent 1px 9px)`,
        pointerEvents: 'none',
      }} />

      {/* Header */}
      <div style={{ position: 'relative', zIndex: 2, paddingTop: 64, paddingLeft: 24, paddingRight: 24 }}>
        <WVUMark size={12} />
      </div>

      {/* Hero copy */}
      <div style={{
        position: 'relative', zIndex: 2, flex: 1,
        padding: '0 28px', display: 'flex', flexDirection: 'column', justifyContent: 'center',
      }}>
        <div style={{
          fontFamily: DS.sans, fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', color: WVU.gold, textTransform: 'uppercase',
          marginBottom: 20, textShadow: '0 2px 10px rgba(0,0,0,0.7)',
        }}>
          SEASON · 2025–26
        </div>
        <div style={{
          fontFamily: DS.display, fontSize: 40, fontWeight: 800,
          letterSpacing: '-0.03em', lineHeight: 1.02, color: WVU.cream,
          marginBottom: 14,
          textShadow: '0 2px 16px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.85)',
        }}>
          One login.<br/>
          Every&nbsp;<span style={{ color: WVU.gold }}>{nickSingular}</span><br/>
          moment.
        </div>
        <div style={{
          fontFamily: DS.sans, fontSize: 14, lineHeight: 1.5,
          color: WVU.creamDim, maxWidth: 300, marginBottom: 36,
          textShadow: '0 1px 6px rgba(0,0,0,0.85)',
        }}>
          Tickets, watch, check-in, merch, and the athletes you follow — connected across every {short} sport.
        </div>

        <MtnButton full size="lg" onClick={onContinue} icon={
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M11 3a3 3 0 11-6 0 3 3 0 016 0z" stroke="currentColor" strokeWidth="1.6"/>
            <path d="M2 14c1-3 3.5-5 6-5s5 2 6 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
          </svg>
        }>Sign in with {nickSingular} ID</MtnButton>

        <div style={{ height: 10 }} />
        <MtnButton full size="lg" variant="ghost" onClick={onContinue}>
          Continue with Apple
        </MtnButton>
      </div>

      {/* Footer fine print */}
      <div style={{
        position: 'relative', zIndex: 2, padding: '0 28px 44px',
        fontFamily: DS.mono, fontSize: 9, color: WVU.creamDim, letterSpacing: '0.08em',
        textAlign: 'center',
      }}>
        Create account · Help · Privacy
      </div>
    </div>
  );
}

// Welcome-back interstitial (appears after auth, just before home)
function ScreenWelcomeBack({ onContinue }) {
  const stadiumByTenant = {
    wvu:  'mountaineer/assets/stadium-wvu.png',
    utah: 'mountaineer/assets/stadium-utah.png',
    osu:  'mountaineer/assets/stadium-osu.png',
  };
  const stadiumSrc = stadiumByTenant[WVU.id] || stadiumByTenant.wvu;

  return (
    <div style={{
      position: 'absolute', inset: 0, overflow: 'hidden',
      background: WVU.ink, color: WVU.cream,
    }}>
      {/* Stadium hero photo (per-tenant) */}
      <img
        src={stadiumSrc}
        alt={`${WVU.short} stadium`}
        style={{
          position: 'absolute', inset: 0,
          width: '100%', height: '100%',
          objectFit: 'cover', objectPosition: 'center 30%',
          zIndex: 0,
        }}
      />
      {/* Dark gradient for legibility — bottom-heavy so type sits comfortably */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(10,9,5,0.35) 0%, rgba(10,9,5,0.55) 45%, rgba(10,9,5,0.92) 100%)',
        zIndex: 1,
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
        padding: '0 28px', zIndex: 2,
      }}>
        <div style={{
          fontFamily: DS.sans, fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', color: WVU.gold, textTransform: 'uppercase', marginBottom: 14,
        }}>
          WELCOME BACK
        </div>
        <div style={{
          fontFamily: DS.display, fontSize: 48, fontWeight: 800,
          letterSpacing: '-0.035em', lineHeight: 0.98, color: WVU.cream,
          marginBottom: 24,
        }}>
          Hey, {DEREK.firstName}.
        </div>

        {/* Identity card — makes the spine visible without labelling it */}
        <div style={{
          background: 'rgba(20,17,12,0.6)', backdropFilter: 'blur(20px)',
          border: `0.5px solid ${WVU.lineBold}`,
          borderRadius: DS.r.lg, padding: 18, marginBottom: 20,
        }}>
          <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
            <div style={{
              width: 44, height: 44, borderRadius: 22,
              background: `linear-gradient(135deg, ${WVU.goldDim}, ${WVU.gold})`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: DS.sans, fontWeight: 800, fontSize: 15, color: WVU.blueDim,
              flexShrink: 0,
            }}>{DEREK.initials}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: DS.sans, fontSize: 14, fontWeight: 700, color: WVU.cream }}>
                {DEREK.firstName} {DEREK.lastName}
              </div>
              <div style={{ fontFamily: DS.sans, fontSize: 11, color: WVU.creamDim, marginTop: 2 }}>
                {DEREK.affiliation}
              </div>
              <div style={{ marginTop: 10, display: 'flex', flexWrap: 'wrap', gap: 5 }}>
                <MtnChip>{DEREK.donorLevel}</MtnChip>
                <MtnChip>{DEREK.seasonTickets.sport} ST · {DEREK.seasonTickets.section}</MtnChip>
                <MtnChip>Member · {DEREK.memberSince}</MtnChip>
              </div>
            </div>
          </div>
        </div>

        <div style={{
          fontFamily: DS.sans, fontSize: 12, color: WVU.creamDim,
          marginBottom: 20, lineHeight: 1.5,
        }}>
          Your season is already set up. We'll remember where you were watching,
          your seat, and the athletes you're rooting for.
        </div>

        <MtnButton full size="lg" onClick={onContinue}>
          Take me home
        </MtnButton>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenLogin, ScreenWelcomeBack });