// Login — pure Discord OAuth handoff.
//
// The CTA is a real <a>, not a button, so right-click → open in new
// tab still works. The OAuth redirect URL was set up server-side
// (auth/discord/login route) — clicking the link takes the browser
// straight to Discord's consent page and back with a cookie.

function LoginScreen() {
  return (
    <div style={{
      minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40,
    }}>
      <Glass radius={28} padding={48} style={{ width: 480, textAlign: 'center' }} orb="var(--coral)">

        {/* App icon — sunset-gradient square with a music note, the
            Beachy-Lila analogue of the pink-on-violet square the old
            login used. The Pacifico wordmark right below it carries
            the brand without needing a logo file. */}
        <div style={{
          width: 88, height: 88, borderRadius: 24, margin: '0 auto 24px',
          background: 'var(--grad-sunset)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 18px 48px rgba(233,76,208,0.4), var(--glow-coral)',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', top: '-20%', right: '-20%', width: '60%', height: '60%',
            borderRadius: '50%', background: 'rgba(255,247,236,0.3)', filter: 'blur(12px)',
          }}/>
          <ApIcon name="music" size={36} color="var(--foam)" style={{ position: 'relative' }}/>
        </div>

        <Eyebrow style={{ marginBottom: 8 }}>Storytime · Musik</Eyebrow>

        <div style={{
          fontFamily: 'var(--font-display)', fontSize: 56, lineHeight: 1, marginBottom: 12,
          background: 'var(--grad-sunset)',
          WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
        }}>
          Teile deine Musik
        </div>

        <p style={{
          fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.55,
          margin: '0 0 28px', opacity: 0.85,
        }}>
          Lade eigene Tracks hoch und mach sie ingame für alle hörbar.<br/>
          Ab 100 Stunden Spielzeit kannst du veröffentlichen.
        </p>

        <a
          href="/auth/discord/login"
          style={{
            width: '100%', padding: '14px 18px', borderRadius: 14,
            background: '#5865F2', border: 'none', color: 'var(--foam)',
            fontSize: 15, fontWeight: 700, fontFamily: 'inherit', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            boxShadow: '0 8px 24px rgba(88,101,242,0.45)',
            textDecoration: 'none', boxSizing: 'border-box',
          }}
        >
          <ApIcon name="discord" size={20}/>
          Mit Discord anmelden
        </a>

        <div style={{ marginTop: 22, fontSize: 11.5, color: 'var(--fg-3)', lineHeight: 1.6 }}>
          Dein Discord-Account wird mit deinem Ingame-Charakter verknüpft.<br/>
          Rolle &amp; Berechtigungen kommen direkt vom Server.
        </div>

      </Glass>
    </div>
  );
}

window.LoginScreen = LoginScreen;