// Sign-in screen — pure Discord OAuth handoff. The "Continue with Discord"
// button is a real anchor so a right-click "open in new tab" still works.

function LoginScreen({ dark }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div style={{
      minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 40,
    }}>
      <ApGlass dark={dark} radius={28} padding={48} style={{ width: 460, textAlign: 'center' }}>
        <div style={{
          width: 72, height: 72, borderRadius: 20, margin: '0 auto 22px',
          background: 'linear-gradient(135deg, #ff4d8d, #7c3aed)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 12px 36px rgba(255,77,141,0.4)',
        }}>
          <ApIcon name="music" size={34} color="#fff"/>
        </div>
        <div style={{ fontSize: 13, opacity: 0.55, letterSpacing: 1.5, textTransform: 'uppercase', fontWeight: 700, marginBottom: 6 }}>
          Storytime · Musik
        </div>
        <h1 style={{ fontSize: 28, fontWeight: 800, letterSpacing: -0.6, margin: '0 0 10px' }}>
          Teile deine Musik
        </h1>
        <p style={{ fontSize: 14, opacity: 0.65, lineHeight: 1.55, margin: '0 0 28px' }}>
          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"
          onMouseEnter={() => setHovered(true)}
          onMouseLeave={() => setHovered(false)}
          style={{
            width: '100%', padding: '14px 18px', borderRadius: 14,
            background: hovered ? '#4c52ea' : '#5865F2',
            border: 'none', color: '#fff', fontSize: 15, fontWeight: 700,
            cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            boxShadow: '0 8px 24px rgba(88,101,242,0.4)',
            transition: 'background 0.15s', textDecoration: 'none', boxSizing: 'border-box',
          }}
        >
          <ApIcon name="discord" size={22} color="#fff"/>
          Mit Discord anmelden
        </a>
        <div style={{ marginTop: 20, fontSize: 11.5, opacity: 0.5, lineHeight: 1.6 }}>
          Dein Discord-Account wird mit deinem Ingame-Charakter verknüpft.<br/>
          Rolle &amp; Berechtigungen kommen direkt vom Server.
        </div>
      </ApGlass>
    </div>
  );
}

window.LoginScreen = LoginScreen;