// Sporda — Phase F desktop · Auth landing + 045D Login + 046D Signup at 1280×800.
// Two-pane pattern: marketing hero left, form right. Familiar from Linear/Arc.

// Shared atmospheric left pane
const AuthLeftPane = ({ variant = 'landing' }) => (
  <div style={{
    flex: 1,
    background:
      'radial-gradient(ellipse at 70% 30%, rgba(200,255,62,0.22), transparent 50%), ' +
      'radial-gradient(ellipse at 20% 80%, rgba(125,255,140,0.10), transparent 50%), ' +
      'linear-gradient(180deg, #0F2218 0%, #182320 60%, var(--bg-base) 100%)',
    position: 'relative',
    padding: '48px 56px',
    display: 'flex', flexDirection: 'column',
    overflow: 'hidden',
  }}>
    {/* Logo */}
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{ width: 36, height: 36, borderRadius: 9, background: 'var(--accent)', color: 'var(--accent-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M12 2 4 7v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V7l-8-5z"/></svg>
      </div>
      <span style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-0.02em' }}>Sporda</span>
    </div>

    {/* Mid headline */}
    <div style={{ marginTop: 'auto', marginBottom: 24 }}>
      <div style={{ fontSize: 56, fontWeight: 900, lineHeight: 1.0, letterSpacing: '-0.03em', textWrap: 'balance' }}>
        Live scores,<br/>your teams,<br/><span style={{ color: 'var(--accent)' }}>one tap away.</span>
      </div>
      <div style={{ marginTop: 16, fontSize: 16, color: 'var(--text-secondary)', textWrap: 'pretty', maxWidth: 480 }}>
        Football, NBA, F1, cricket, tennis, MMA, esports — built for fans who want depth, not noise.
      </div>
    </div>

    {/* Floating live cards */}
    <div style={{ position: 'absolute', top: 120, right: -40, width: 320, display: 'flex', flexDirection: 'column', gap: 12, opacity: 0.85 }}>
      {[
        { teams: 'Arsenal — Liverpool', score: '2 – 1', live: '67\'', tilt: -3, color: '#EF0107' },
        { teams: 'Lakers — Celtics',    score: '102 – 98', live: 'Q4', tilt: 2, color: '#552583' },
        { teams: 'Verstappen — Norris',  score: 'P1 vs P2',  live: 'L34/78', tilt: -1, color: '#1E5BC6' },
      ].map((c, i) => (
        <div key={i} style={{
          transform: `rotate(${c.tilt}deg)`,
          background: 'rgba(18,25,21,0.85)',
          backdropFilter: 'blur(12px) saturate(160%)',
          border: '1px solid rgba(255,255,255,0.08)',
          borderRadius: 14, padding: '12px 14px',
          display: 'flex', alignItems: 'center', gap: 12,
          fontSize: 13, fontWeight: 600,
          marginLeft: i * 24,
          boxShadow: '0 20px 40px rgba(0,0,0,0.4)',
        }}>
          <span style={{ width: 4, height: 32, borderRadius: 2, background: c.color }}/>
          <div style={{ flex: 1 }}>
            <div style={{ color: 'var(--text-secondary)', fontSize: 11 }}>{c.teams}</div>
            <div className="mono" style={{ fontWeight: 800, fontSize: 16 }}>{c.score}</div>
          </div>
          <div className="pill live" style={{ height: 22, fontSize: 9 }}><span className="dot"/>{c.live}</div>
        </div>
      ))}
    </div>

    {/* Logo strip */}
    <div style={{ position: 'absolute', bottom: 32, left: 56, right: 56, display: 'flex', alignItems: 'center', gap: 18, fontSize: 11, color: 'var(--text-muted)', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
      <span>Live across</span>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
        {[
          { c: 'PL', bg: '#3D5AFE' },
          { c: 'NBA', bg: '#C8102E' },
          { c: 'F1', bg: '#FFFFFF', dark: true },
          { c: 'ATP', bg: '#0066CC' },
          { c: 'ICC', bg: '#FFA42B' },
          { c: 'UFC', bg: '#7158E2' },
          { c: 'LEC', bg: '#E2012D' },
        ].map(l => (
          <span key={l.c} style={{ padding: '4px 8px', background: l.bg, color: l.dark ? '#0A1400' : 'white', borderRadius: 4, fontSize: 10, fontWeight: 800 }}>{l.c}</span>
        ))}
      </span>
    </div>
  </div>
);

// ===========================================================================
// AUTH LANDING (desktop) — landing → login/signup picker
// ===========================================================================
const ScreenAuthLandingDesktop = () => (
  <DesktopPage>
    <div style={{ display: 'flex', height: '100%' }}>
      <AuthLeftPane variant="landing"/>
      <div style={{ width: 480, padding: '48px 48px 32px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 700, letterSpacing: '0.06em' }}>WELCOME</div>
          <div style={{ marginTop: 8, fontSize: 32, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.15 }}>Get started.</div>
          <div style={{ marginTop: 8, fontSize: 14, color: 'var(--text-secondary)' }}>Sign in or create your free account.</div>

          <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 10 }}>
            <button style={{
              width: '100%', height: 52, borderRadius: 'var(--r-pill)',
              background: 'var(--accent)', color: 'var(--accent-ink)',
              fontWeight: 700, fontSize: 15, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            }}>Create account <I.chevR size={16}/></button>
            <button style={{
              width: '100%', height: 52, borderRadius: 'var(--r-pill)',
              background: 'var(--bg-surface)', border: '1px solid var(--border-strong)',
              color: 'var(--text-primary)', fontWeight: 700, fontSize: 15,
            }}>Sign in</button>
          </div>

          {/* Divider */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '24px 0' }}>
            <div style={{ flex: 1, height: 1, background: 'var(--border-hairline)' }}/>
            <span style={{ fontSize: 10, color: 'var(--text-muted)', fontWeight: 700, letterSpacing: '0.08em' }}>OR</span>
            <div style={{ flex: 1, height: 1, background: 'var(--border-hairline)' }}/>
          </div>

          <div style={{ display: 'flex', gap: 8 }}>
            <button style={{ flex: 1, height: 48, borderRadius: 12, background: 'var(--bg-surface)', border: '1px solid var(--border-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, fontWeight: 600, fontSize: 13 }}>
              <svg width="16" height="16" viewBox="0 0 24 24"><path fill="#fff" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z"/><path fill="#FBBC05" d="M5.84 14.1A6.6 6.6 0 0 1 5.5 12c0-.73.13-1.44.34-2.1V7.07H2.18A11 11 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.83z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.65l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.83C6.71 7.31 9.14 5.38 12 5.38z"/></svg>
              Google
            </button>
            <button style={{ flex: 1, height: 48, borderRadius: 12, background: 'var(--bg-surface)', border: '1px solid var(--border-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, fontWeight: 600, fontSize: 13 }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 12.5c0-2.7 2.2-4 2.3-4.1-1.3-1.8-3.3-2.1-4-2.1-1.7-.2-3.3 1-4.2 1-.9 0-2.2-1-3.6-.9-1.9 0-3.6 1.1-4.6 2.8-2 3.4-.5 8.4 1.4 11.2.9 1.3 2 2.8 3.5 2.7 1.4-.1 1.9-.9 3.6-.9s2.2.9 3.6.9c1.5 0 2.5-1.3 3.4-2.7.7-1 1.2-2.1 1.5-3.2-.1 0-2.9-1.1-2.9-4.7z"/></svg>
              Apple
            </button>
          </div>
        </div>

        <div style={{ fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.6, textWrap: 'pretty' }}>
          By continuing you agree to our <span style={{ textDecoration: 'underline', color: 'var(--text-secondary)' }}>Terms</span> and <span style={{ textDecoration: 'underline', color: 'var(--text-secondary)' }}>Privacy Policy</span>.
        </div>
      </div>
    </div>
  </DesktopPage>
);

// ===========================================================================
// 045D — LOGIN (desktop)
// ===========================================================================
const ScreenLoginDesktop = () => (
  <DesktopPage>
    <div style={{ display: 'flex', height: '100%' }}>
      <AuthLeftPane/>
      <div style={{ width: 480, padding: '48px 48px 32px', display: 'flex', flexDirection: 'column', overflow: 'auto' }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', minHeight: 0 }}>
          <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 700, letterSpacing: '0.06em' }}>SIGN IN</div>
          <div style={{ marginTop: 8, fontSize: 32, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.15 }}>Welcome back.</div>
          <div style={{ marginTop: 8, fontSize: 14, color: 'var(--text-secondary)' }}>Pick up where you left off.</div>

          <div style={{ marginTop: 28 }}>
            <Field label="Email" type="email" placeholder="you@example.com" value="ben@rascals.co"
                   icon={<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.75"><path d="M3 7l9 6 9-6M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z"/></svg>}/>
            <Field label="Password" type="password" placeholder="••••••••"
                   icon={<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>}
                   trailing={<button style={{ color: 'var(--text-secondary)', fontSize: 12, fontWeight: 600 }}>Show</button>}/>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: -8, marginBottom: 16 }}>
              <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--text-secondary)' }}>
                <div style={{ width: 16, height: 16, borderRadius: 4, background: 'var(--accent)', color: 'var(--accent-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><I.check size={10}/></div>
                Remember me on this device
              </label>
              <a style={{ color: 'var(--accent)', fontSize: 12, fontWeight: 700 }}>Forgot password?</a>
            </div>
            <AuthPrimary label="Sign in"/>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '20px 0' }}>
            <div style={{ flex: 1, height: 1, background: 'var(--border-hairline)' }}/>
            <span style={{ fontSize: 10, color: 'var(--text-muted)', fontWeight: 700, letterSpacing: '0.08em' }}>OR CONTINUE WITH</span>
            <div style={{ flex: 1, height: 1, background: 'var(--border-hairline)' }}/>
          </div>

          <div style={{ display: 'flex', gap: 8 }}>
            <button style={{ flex: 1, height: 44, borderRadius: 10, background: 'var(--bg-surface)', border: '1px solid var(--border-strong)', fontSize: 13, fontWeight: 600 }}>Google</button>
            <button style={{ flex: 1, height: 44, borderRadius: 10, background: 'var(--bg-surface)', border: '1px solid var(--border-strong)', fontSize: 13, fontWeight: 600 }}>Apple</button>
          </div>

          <div style={{ marginTop: 24, fontSize: 13, textAlign: 'center', color: 'var(--text-secondary)' }}>
            New here? <a style={{ color: 'var(--accent)', fontWeight: 700 }}>Create an account</a>
          </div>
        </div>
      </div>
    </div>
  </DesktopPage>
);

// ===========================================================================
// 046D — SIGN UP (desktop)
// ===========================================================================
const ScreenSignupDesktop = () => (
  <DesktopPage>
    <div style={{ display: 'flex', height: '100%' }}>
      <AuthLeftPane/>
      <div style={{ width: 480, padding: '48px 48px 32px', display: 'flex', flexDirection: 'column', overflow: 'auto' }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', minHeight: 0 }}>
          <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 700, letterSpacing: '0.06em' }}>CREATE ACCOUNT</div>
          <div style={{ marginTop: 8, fontSize: 32, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.15 }}>One last step.</div>
          <div style={{ marginTop: 8, fontSize: 14, color: 'var(--text-secondary)' }}>Free forever. No credit card.</div>

          <div style={{ marginTop: 24, display: 'flex', gap: 8, marginBottom: 18 }}>
            <button style={{ flex: 1, height: 48, borderRadius: 12, background: 'var(--bg-surface)', border: '1px solid var(--border-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, fontWeight: 600, fontSize: 13 }}>
              <svg width="16" height="16" viewBox="0 0 24 24"><path fill="#fff" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z"/><path fill="#FBBC05" d="M5.84 14.1A6.6 6.6 0 0 1 5.5 12c0-.73.13-1.44.34-2.1V7.07H2.18A11 11 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.83z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.65l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.83C6.71 7.31 9.14 5.38 12 5.38z"/></svg>
              Sign up with Google
            </button>
            <button style={{ flex: 1, height: 48, borderRadius: 12, background: 'var(--bg-surface)', border: '1px solid var(--border-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, fontWeight: 600, fontSize: 13 }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 12.5c0-2.7 2.2-4 2.3-4.1-1.3-1.8-3.3-2.1-4-2.1-1.7-.2-3.3 1-4.2 1-.9 0-2.2-1-3.6-.9-1.9 0-3.6 1.1-4.6 2.8-2 3.4-.5 8.4 1.4 11.2.9 1.3 2 2.8 3.5 2.7 1.4-.1 1.9-.9 3.6-.9s2.2.9 3.6.9c1.5 0 2.5-1.3 3.4-2.7.7-1 1.2-2.1 1.5-3.2-.1 0-2.9-1.1-2.9-4.7z"/></svg>
              Apple
            </button>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
            <div style={{ flex: 1, height: 1, background: 'var(--border-hairline)' }}/>
            <span style={{ fontSize: 10, color: 'var(--text-muted)', fontWeight: 700, letterSpacing: '0.08em' }}>OR WITH EMAIL</span>
            <div style={{ flex: 1, height: 1, background: 'var(--border-hairline)' }}/>
          </div>

          <Field label="Email" type="email" placeholder="you@example.com" value="ben@rascals.co"
                 icon={<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.75"><path d="M3 7l9 6 9-6M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z"/></svg>}/>
          <Field label="Password" type="password" placeholder="At least 8 characters" value="••••••••"
                 icon={<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>}
                 trailing={<button style={{ color: 'var(--text-secondary)', fontSize: 12, fontWeight: 600 }}>Show</button>}
                 hint="Mix of upper, lower, and a number"/>
          <Field label="Display name" placeholder="Ben Rascals" value="Ben Rascals"
                 icon={<I.user size={18}/>}/>

          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '4px 0 14px' }}>
            <div style={{
              width: 20, height: 20, borderRadius: 6,
              background: 'var(--accent)', color: 'var(--accent-ink)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none',
            }}><I.check size={12}/></div>
            <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Email me weekend match digests · I can unsubscribe anytime</span>
          </div>

          <AuthPrimary label="Create account"/>

          <div style={{ marginTop: 14, fontSize: 11, color: 'var(--text-muted)', textAlign: 'center', lineHeight: 1.5 }}>
            By signing up you agree to our <span style={{ textDecoration: 'underline' }}>Terms</span> and <span style={{ textDecoration: 'underline' }}>Privacy Policy</span>.
          </div>

          <div style={{ marginTop: 18, fontSize: 13, textAlign: 'center', color: 'var(--text-secondary)' }}>
            Already have an account? <a style={{ color: 'var(--accent)', fontWeight: 700 }}>Sign in</a>
          </div>
        </div>
      </div>
    </div>
  </DesktopPage>
);

Object.assign(window, {
  AuthLeftPane, ScreenAuthLandingDesktop, ScreenLoginDesktop, ScreenSignupDesktop,
});