// screens-login.jsx — Login screens for all 3 directions
// Discord + email magic-link

// Discord logo
const DiscordLogo = ({ size = 18, color = '#fff' }) => (
  <svg width={size} height={size * (16/20)} viewBox="0 0 20 16" fill={color}>
    <path d="M16.93 1.18A16.46 16.46 0 0 0 12.91.05a.06.06 0 0 0-.07.03c-.17.31-.37.71-.5 1.02a15.18 15.18 0 0 0-4.66 0c-.14-.31-.34-.71-.52-1.02a.07.07 0 0 0-.06-.03A16.42 16.42 0 0 0 3.07 1.18.06.06 0 0 0 3.04 1.2C.5 5.05-.19 8.8.15 12.51c0 .02.01.04.03.05a16.51 16.51 0 0 0 4.94 2.5c.03.01.06 0 .07-.02.38-.51.72-1.05 1.01-1.62a.06.06 0 0 0-.04-.09 11 11 0 0 1-1.55-.74.06.06 0 0 1 0-.1c.1-.08.21-.16.31-.25a.06.06 0 0 1 .06 0c3.25 1.48 6.76 1.48 9.97 0a.06.06 0 0 1 .06 0c.1.09.21.17.32.25a.06.06 0 0 1-.01.1c-.49.29-1 .53-1.55.74a.06.06 0 0 0-.03.09c.3.57.64 1.11 1.01 1.62.01.02.04.03.07.02a16.46 16.46 0 0 0 4.95-2.5.06.06 0 0 0 .03-.04c.4-4.29-.68-8-2.89-11.32a.05.05 0 0 0-.03-.02ZM6.68 10.26c-.96 0-1.76-.88-1.76-1.96 0-1.08.78-1.96 1.76-1.96.98 0 1.78.89 1.76 1.96 0 1.08-.79 1.96-1.76 1.96Zm6.5 0c-.97 0-1.76-.88-1.76-1.96 0-1.08.78-1.96 1.76-1.96.98 0 1.77.89 1.76 1.96 0 1.08-.78 1.96-1.76 1.96Z"/>
  </svg>
);

// ───────────────────────────────────────────────
// TERMINAL LOGIN
// ───────────────────────────────────────────────
function TerminalLogin({ accent }) {
  const T = { bg: '#0A0A0E', text: '#E8E8EF', dim: '#7A7A88', mute: '#4D4D58', line: '#26262F', line2: '#3A3A47' };
  return (
    <div style={{ height: '100%', background: T.bg, color: T.text, position: 'relative', overflow: 'hidden' }}>
      {/* Top status strip */}
      <div className="mono" style={{ padding: '54px 14px 0', display: 'flex', justifyContent: 'space-between', fontSize: 9, color: T.mute, letterSpacing: 2 }}>
        <span>ADLEY // v0.4.1</span>
        <span><span style={{ color: '#3DDC97' }}>●</span> EDGE READY</span>
      </div>

      <div style={{ padding: '14px 14px 0' }}>
        <div className="mono" style={{ color: T.line2, fontSize: 10, letterSpacing: 0, lineHeight: 1 }}>{'═'.repeat(80)}</div>
      </div>

      {/* Wordmark — ASCII-art style */}
      <div style={{ padding: '64px 14px 0' }}>
        <div className="mono" style={{ color: accent, fontSize: 10, letterSpacing: 4, marginBottom: 14 }}>OPS ACCESS REQUIRED</div>
        <div className="mono" style={{ fontSize: 72, fontWeight: 700, color: T.text, letterSpacing: 8, lineHeight: 0.9 }}>ADLEY</div>
        <div className="mono" style={{ fontSize: 10, color: T.dim, letterSpacing: 1.5, marginTop: 12, lineHeight: 1.5 }}>
          A tactical companion for Rust CE.<br/>
          Watch your TC. Arm RF trip-wires.<br/>
          Push raids to your lock screen.
        </div>
      </div>

      <div style={{ padding: '40px 14px 0' }}>
        <div className="mono" style={{ color: T.line2, fontSize: 10, letterSpacing: 0, lineHeight: 1, marginBottom: 14 }}>{'─'.repeat(80)}</div>

        {/* Discord btn */}
        <button className="mono" style={{
          width: '100%', padding: '14px 14px', border: 0, background: '#5865F2', color: '#fff',
          cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          fontSize: 13, letterSpacing: 2, fontWeight: 700, borderRadius: 0,
        }}>
          <DiscordLogo size={18}/>
          CONTINUE WITH DISCORD
        </button>
        <div className="mono" style={{ fontSize: 9, color: T.mute, marginTop: 6, letterSpacing: 1.5, textAlign: 'center' }}>
          ▸ OAUTH · PSN / XBOX TAG LINKED
        </div>

        {/* Divider */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '24px 0 16px' }}>
          <div className="mono" style={{ flex: 1, color: T.line2, lineHeight: 1, fontSize: 10 }}>{'─'.repeat(80)}</div>
          <span className="mono" style={{ fontSize: 9, color: T.mute, letterSpacing: 2 }}>OR EMAIL</span>
          <div className="mono" style={{ flex: 1, color: T.line2, lineHeight: 1, fontSize: 10 }}>{'─'.repeat(80)}</div>
        </div>

        {/* Email input */}
        <div className="mono" style={{ fontSize: 9, color: T.mute, letterSpacing: 2, marginBottom: 6 }}>▸ EMAIL</div>
        <div className="mono" style={{
          border: `1px solid ${T.line2}`, background: '#11111A', padding: '12px 14px',
          fontSize: 14, color: T.text, letterSpacing: 0.5, display: 'flex', alignItems: 'center',
        }}>
          <span>koma@adley.gg</span>
          <span style={{ marginLeft: 4, animation: 'adley-blink 1s steps(1) infinite', color: accent }}>█</span>
        </div>

        <button className="mono" style={{
          width: '100%', marginTop: 12, padding: '12px 14px', background: accent, color: '#000', border: 0,
          fontSize: 12, letterSpacing: 3, fontWeight: 700, cursor: 'pointer',
        }}>
          ▸ MAIL ME A 6-DIGIT CODE
        </button>

        {/* Footer */}
        <div className="mono" style={{ fontSize: 9, color: T.mute, marginTop: 28, letterSpacing: 1, lineHeight: 1.7, textAlign: 'center' }}>
          [ TOS ] · [ PRIVACY ] · [ NOT AFFILIATED W/ FACEPUNCH ]
        </div>
      </div>

      <div className="adley-scanline-overlay" style={{ opacity: 0.4 }}/>
    </div>
  );
}

// ───────────────────────────────────────────────
// HUD LOGIN
// ───────────────────────────────────────────────
function HudLogin({ accent }) {
  const H = { bg: '#0B0D11', panel: '#10141B', line: '#1E2330', line2: '#2B3243', text: '#E7ECF2', dim: '#8B94A6', mute: '#4E5564' };
  return (
    <div style={{ height: '100%', background: H.bg, color: H.text, position: 'relative', overflow: 'hidden' }}>
      {/* Background grid */}
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.08 }}>
        <defs>
          <pattern id="lgrid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M40 0H0V40" fill="none" stroke={accent} strokeWidth="0.5"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#lgrid)"/>
      </svg>
      {/* Top crosshairs (using shared HUDCorners would need import, so inline) */}
      <svg width="20" height="20" viewBox="0 0 20 20" style={{ position: 'absolute', top: 60, left: 16 }}>
        <path d="M0,0 L10,0 M0,0 L0,10" stroke={accent} strokeWidth="1.2" fill="none"/>
      </svg>
      <svg width="20" height="20" viewBox="0 0 20 20" style={{ position: 'absolute', top: 60, right: 16, transform: 'scaleX(-1)' }}>
        <path d="M0,0 L10,0 M0,0 L0,10" stroke={accent} strokeWidth="1.2" fill="none"/>
      </svg>

      {/* Sticky info strip */}
      <div className="geist-mono" style={{ padding: '52px 18px 6px', display: 'flex', justifyContent: 'space-between', fontSize: 9, letterSpacing: 2, color: H.dim }}>
        <span>ADLEY · OPS</span>
        <span>SECURE CHANNEL</span>
        <span style={{ color: '#46D1A0' }}>● READY</span>
      </div>

      <div style={{ padding: '56px 24px 0', position: 'relative', zIndex: 5 }}>
        <div className="geist-mono" style={{ color: accent, fontSize: 10, letterSpacing: 5, fontWeight: 600, marginBottom: 10 }}>◢ AUTHENTICATE</div>
        <div className="geist" style={{ fontSize: 44, fontWeight: 800, letterSpacing: -1, lineHeight: 1, color: H.text }}>
          Adley
        </div>
        <div className="geist" style={{ fontSize: 16, fontWeight: 500, color: H.dim, marginTop: 14, letterSpacing: -0.2, lineHeight: 1.4 }}>
          Tactical companion for Rust CE.<br/>Watch your base while you sleep.
        </div>
      </div>

      {/* ID card panel */}
      <div style={{ padding: '40px 18px 0' }}>
        <div style={{ position: 'relative', background: H.panel, border: `1px solid ${H.line2}`, padding: 18 }}>
          {/* corner ticks */}
          {[
            { top: 4, left: 4, t: '' },
            { top: 4, right: 4, t: 'scaleX(-1)' },
            { bottom: 4, left: 4, t: 'scaleY(-1)' },
            { bottom: 4, right: 4, t: 'scale(-1)' },
          ].map((p, i) => (
            <svg key={i} width="10" height="10" viewBox="0 0 10 10" style={{ position: 'absolute', ...p, transform: p.t }}>
              <path d="M0,0 L8,0 M0,0 L0,8" stroke={accent} strokeWidth="1" fill="none"/>
            </svg>
          ))}
          <div className="geist-mono" style={{ fontSize: 9, color: accent, letterSpacing: 3, marginBottom: 12 }}>◢ ENROL</div>

          {/* Discord button */}
          <button className="geist-mono" style={{
            width: '100%', padding: '14px 14px', background: '#5865F2', color: '#fff', border: 0,
            cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            fontSize: 12, letterSpacing: 2, fontWeight: 700,
            clipPath: 'polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px))',
          }}>
            <DiscordLogo size={18}/>
            DISCORD
          </button>
          <div className="geist-mono" style={{ fontSize: 9, color: H.mute, marginTop: 6, letterSpacing: 1.5, textAlign: 'center' }}>
            RECOMMENDED · LINKS PSN / XBOX TAG
          </div>

          {/* Divider */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, margin: '20px 0 12px' }}>
            <div style={{ flex: 1, height: 1, background: H.line2 }}/>
            <span className="geist-mono" style={{ fontSize: 9, color: H.mute, letterSpacing: 3, fontWeight: 600 }}>OR</span>
            <div style={{ flex: 1, height: 1, background: H.line2 }}/>
          </div>

          <div className="geist-mono" style={{ fontSize: 9, color: H.mute, letterSpacing: 3, marginBottom: 6, fontWeight: 600 }}>◢ EMAIL</div>
          <div style={{ display: 'flex', border: `1px solid ${H.line2}`, background: H.bg }}>
            <div style={{ padding: '12px 12px', borderRight: `1px solid ${H.line2}` }}>
              <Icon name="envelope" size={16} color={H.dim}/>
            </div>
            <div className="geist-mono" style={{ flex: 1, padding: '12px 12px', fontSize: 14, color: H.text, letterSpacing: 0.3 }}>
              koma@adley.gg
            </div>
          </div>

          <button className="geist-mono" style={{
            marginTop: 12, width: '100%', padding: '12px', background: accent, color: '#000', border: `1px solid ${accent}`,
            fontSize: 11, letterSpacing: 3, fontWeight: 700, cursor: 'pointer',
            clipPath: 'polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px))',
          }}>
            SEND 6-DIGIT CODE →
          </button>
        </div>

        <div className="geist-mono" style={{ fontSize: 9, color: H.mute, marginTop: 20, letterSpacing: 1.5, lineHeight: 1.7, textAlign: 'center' }}>
          BY CONTINUING YOU ACCEPT TOS · PRIVACY<br/>
          UNAFFILIATED WITH FACEPUNCH STUDIOS
        </div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────
// MISSION CONTROL LOGIN
// ───────────────────────────────────────────────
function MCLogin({ accent }) {
  const M = { bg: '#08090D', card: '#13151D', cardHi: '#191C26', line: '#252834', line2: '#363A48', text: '#ECEDF1', dim: '#8B8F9E', mute: '#54586A' };
  return (
    <div style={{ height: '100%', background: M.bg, color: M.text, position: 'relative', overflow: 'hidden' }}>
      {/* Ambient glow bg */}
      <div style={{ position: 'absolute', inset: 0, background: `
        radial-gradient(ellipse at 50% 0%, ${accent}1A, transparent 50%),
        radial-gradient(ellipse at 80% 100%, ${accent}11, transparent 60%)
      `}}/>
      {/* Map silhouette */}
      <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, opacity: 0.12 }}>
        <path d="M8,28 Q22,16 38,22 T62,26 Q78,16 92,30 L92,72 Q82,86 60,82 T28,78 Q8,80 8,72 Z" fill={`${accent}33`} stroke={accent} strokeWidth="0.2"/>
      </svg>
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.06 }}>
        <defs>
          <pattern id="mclpat" width="32" height="32" patternUnits="userSpaceOnUse">
            <circle cx="0" cy="0" r="0.8" fill={accent}/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#mclpat)"/>
      </svg>

      <div style={{ padding: '80px 24px 0', position: 'relative', zIndex: 5 }}>
        {/* Logo */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 36 }}>
          <div style={{
            width: 64, height: 64, borderRadius: 16,
            background: `linear-gradient(135deg, ${accent}, ${accent}88)`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: `0 0 32px ${accent}66, 0 0 64px ${accent}33, inset 0 1px 0 rgba(255,255,255,0.4)`,
            marginBottom: 18,
          }}>
            <span className="sans" style={{ color: '#000', fontSize: 36, fontWeight: 800, letterSpacing: -1 }}>A</span>
          </div>
          <div className="sans" style={{ fontSize: 32, fontWeight: 700, letterSpacing: -0.5, textShadow: `0 0 24px ${accent}33` }}>Adley</div>
          <div className="sans" style={{ fontSize: 14, color: M.dim, marginTop: 6, fontWeight: 500, textAlign: 'center', lineHeight: 1.4 }}>
            Tactical companion for Rust CE.<br/>Sleep through your next raid.
          </div>
        </div>

        {/* Glass card with buttons */}
        <div style={{
          background: 'rgba(19,21,29,0.7)', border: `1px solid ${accent}33`, borderRadius: 18,
          padding: 18, backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
          boxShadow: `0 0 0 1px ${accent}11, 0 12px 40px rgba(0,0,0,0.4)`,
        }}>
          <button className="sans" style={{
            width: '100%', padding: '14px 16px', background: '#5865F2', color: '#fff',
            border: 0, borderRadius: 12, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            fontSize: 14, fontWeight: 700, letterSpacing: 0.2,
            boxShadow: '0 4px 12px rgba(88,101,242,0.4), inset 0 1px 0 rgba(255,255,255,0.2)',
          }}>
            <DiscordLogo size={18}/>
            Continue with Discord
          </button>
          <div className="sans" style={{ fontSize: 11, color: M.mute, marginTop: 6, textAlign: 'center' }}>
            Auto-links your PSN or Xbox tag
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 10, margin: '20px 0 14px' }}>
            <div style={{ flex: 1, height: 1, background: M.line2 }}/>
            <span className="sans" style={{ fontSize: 11, color: M.mute, fontWeight: 500 }}>or email</span>
            <div style={{ flex: 1, height: 1, background: M.line2 }}/>
          </div>

          {/* Email input */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10,
            background: M.cardHi, border: `1px solid ${M.line2}`, borderRadius: 12,
            padding: '12px 14px',
          }}>
            <Icon name="envelope" size={16} color={M.dim}/>
            <span className="sans" style={{ flex: 1, fontSize: 15, color: M.text }}>koma@adley.gg</span>
            <span style={{ width: 6, height: 6, borderRadius: 3, background: '#3DDC97', boxShadow: '0 0 4px #3DDC97' }}/>
          </div>

          <button className="sans" style={{
            marginTop: 10, width: '100%', padding: '13px 14px',
            background: accent, color: '#000', border: 0, borderRadius: 12, cursor: 'pointer',
            fontSize: 14, fontWeight: 700, letterSpacing: 0.2,
            boxShadow: `0 4px 12px ${accent}55, inset 0 1px 0 rgba(255,255,255,0.3)`,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          }}>
            Send 6-digit code <Icon name="arrow-right" size={14}/>
          </button>
        </div>

        {/* Trust line */}
        <div style={{ display: 'flex', gap: 16, justifyContent: 'center', alignItems: 'center', marginTop: 28 }}>
          {[
            ['shield-check', 'OAuth 2.0'],
            ['lock-key', 'Encrypted'],
            ['users-three', '12K ops'],
          ].map(([icon, label]) => (
            <div key={label} style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
              <Icon name={icon} size={11} color={M.mute}/>
              <span className="sans" style={{ fontSize: 10, color: M.mute, fontWeight: 500 }}>{label}</span>
            </div>
          ))}
        </div>

        <div className="sans" style={{ fontSize: 10, color: M.mute, marginTop: 18, lineHeight: 1.5, textAlign: 'center' }}>
          By continuing you agree to our <span style={{ color: M.dim, textDecoration: 'underline' }}>Terms</span> &{' '}
          <span style={{ color: M.dim, textDecoration: 'underline' }}>Privacy</span>.<br/>
          Not affiliated with Facepunch Studios.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TerminalLogin, HudLogin, MCLogin, DiscordLogo });