// ============================================================
// PROP ARENA · AUTH — Splash, Login, Register (desktop + mobile)
// Visual language: holographic dark, magenta+cyan, gaming/esports
// ============================================================

const arenaAuthCSS = `
.d-arena .auth-bg {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 900px 500px at 10% 0%, oklch(55% 0.28 320 / 0.30), transparent 60%),
    radial-gradient(ellipse 900px 500px at 95% 30%, oklch(60% 0.20 215 / 0.22), transparent 60%),
    radial-gradient(ellipse 1200px 700px at 50% 110%, oklch(50% 0.20 280 / 0.16), transparent 60%),
    var(--bg);
  position: relative;
  overflow: hidden;
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
}
.d-arena .auth-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(180,170,240,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,170,240,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent);
}

/* ===== SPLASH ===== */
.d-arena .splash {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  padding: 36px 56px;
  gap: 56px;
  position: relative;
  z-index: 1;
}
.d-arena .splash-left {
  display: flex; flex-direction: column;
  justify-content: space-between;
}
.d-arena .splash-top {
  display: flex; align-items: center; justify-content: space-between;
}
.d-arena .splash-top .alt {
  font-size: 13px; color: var(--text-dim);
}
.d-arena .splash-top .alt a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--magenta);
  padding-bottom: 1px;
  margin-left: 8px;
  cursor: pointer;
}
.d-arena .splash-hero {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center;
  max-width: 580px;
  margin: 40px 0;
}
.d-arena .splash-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-3);
  font-size: 11px; font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  width: fit-content;
  margin-bottom: 24px;
}
.d-arena .splash-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--positive);
  box-shadow: 0 0 6px var(--positive);
  animation: a-pulse 2s infinite;
}
.d-arena .splash-h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 76px;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
  margin: 0;
}
.d-arena .splash-h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--magenta), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.d-arena .splash-sub {
  font-size: 17px;
  color: var(--text-dim);
  margin-top: 22px;
  max-width: 520px;
  line-height: 1.5;
}
.d-arena .splash-cta {
  margin-top: 36px;
  display: flex; gap: 12px;
  flex-wrap: wrap;
}
.d-arena .splash-cta .a-btn {
  height: 52px; padding: 0 28px;
  font-size: 14px;
  border-radius: 14px;
}
.d-arena .splash-stats {
  display: flex; gap: 36px;
  padding-top: 36px;
  margin-top: 36px;
  border-top: 1px solid var(--line);
}
.d-arena .splash-stat .v {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  background: linear-gradient(120deg, var(--magenta), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.d-arena .splash-stat .l {
  font-size: 11px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 600;
  margin-top: 4px;
}
.d-arena .splash-bottom {
  display: flex; gap: 24px;
  align-items: center;
  color: var(--text-faint);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.d-arena .splash-bottom span {
  display: inline-flex; align-items: center; gap: 6px;
}

/* Right column — preview card */
.d-arena .splash-right {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.d-arena .splash-card {
  width: 100%;
  max-width: 460px;
  background:
    linear-gradient(135deg, rgba(255,92,245,0.10), rgba(92,217,255,0.06)),
    var(--surface);
  border: 1px solid var(--line-3);
  border-radius: 24px;
  padding: 24px;
  position: relative;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
}
.d-arena .splash-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, var(--magenta), var(--cyan), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
}
.d-arena .splash-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.d-arena .splash-card-head .tag {
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--magenta);
  font-weight: 700;
}
.d-arena .splash-card .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.d-arena .splash-card .num small {
  font-size: 20px;
  color: var(--text-dim);
  font-weight: 500;
}
.d-arena .splash-leader {
  margin-top: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.d-arena .splash-leader-row {
  display: grid;
  grid-template-columns: 32px 1fr 60px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--line);
}
.d-arena .splash-leader-row.self {
  background: linear-gradient(90deg, rgba(255,92,245,0.18), rgba(92,217,255,0.10));
  border-color: var(--magenta);
}
.d-arena .splash-leader-row .rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700;
  text-align: center;
}
.d-arena .splash-leader-row .gain {
  font-family: 'JetBrains Mono', monospace;
  color: var(--positive);
  font-weight: 600;
  font-size: 13px;
  text-align: right;
}

/* ===== AUTH FORMS (Login + Register) ===== */
.d-arena .auth-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  position: relative; z-index: 1;
}
.d-arena .auth-card {
  width: 100%;
  max-width: 480px;
  background:
    linear-gradient(135deg, rgba(255,92,245,0.08), rgba(92,217,255,0.05)),
    var(--surface);
  border: 1px solid var(--line-3);
  border-radius: 24px;
  padding: 36px;
  position: relative;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7);
}
.d-arena .auth-card::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 24px; padding: 1px;
  background: linear-gradient(180deg, var(--magenta), transparent 50%, var(--cyan));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
}
.d-arena .auth-back {
  background: transparent; border: 1px solid var(--line);
  color: var(--text-dim);
  height: 32px; padding: 0 12px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit; font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 22px;
}
.d-arena .auth-back:hover { color: var(--text); }

.d-arena .auth-h {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
}
.d-arena .auth-h em {
  font-style: normal;
  background: linear-gradient(120deg, var(--magenta), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.d-arena .auth-sub {
  color: var(--text-dim);
  font-size: 14px;
  margin-bottom: 30px;
}

.d-arena .field {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 16px;
}
.d-arena .field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.d-arena .field .ctrl {
  display: flex; align-items: center; gap: 10px;
  height: 48px;
  padding: 0 16px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--line-3);
  border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.d-arena .field .ctrl:focus-within {
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--magenta) 25%, transparent);
}
.d-arena .field input {
  flex: 1; min-width: 0;
  border: none; background: transparent;
  color: var(--text);
  font-family: inherit; font-size: 14px;
  outline: none;
}
.d-arena .field input::placeholder { color: var(--text-faint); }
.d-arena .field .helper {
  font-size: 11px; color: var(--text-faint);
}
.d-arena .field .helper.ok { color: var(--positive); }

.d-arena .auth-submit {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--magenta), var(--magenta-2));
  color: #fff;
  font-family: inherit; font-weight: 700; font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  margin-top: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 0 32px -8px var(--magenta);
}
.d-arena .auth-submit:hover { filter: brightness(1.08); }
.d-arena .auth-submit:active { transform: scale(0.99); }

.d-arena .auth-or {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-faint);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 22px 0;
}
.d-arena .auth-or::before, .d-arena .auth-or::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.d-arena .auth-oauth {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.d-arena .auth-oauth button {
  height: 44px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.d-arena .auth-oauth button:hover { background: rgba(255,255,255,0.08); }
.d-arena .auth-foot {
  text-align: center;
  margin-top: 24px;
  font-size: 13px;
  color: var(--text-dim);
}
.d-arena .auth-foot a {
  color: var(--text);
  border-bottom: 1px solid var(--magenta);
  padding-bottom: 1px;
  cursor: pointer;
  margin-left: 4px;
}

/* ===== Stepper ===== */
.d-arena .step-row {
  display: flex; gap: 8px;
  margin-bottom: 24px;
}
.d-arena .step-row .step {
  flex: 1; height: 4px;
  background: var(--surface-3);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.d-arena .step-row .step.on {
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
}

/* Pills (country selector style) */
.d-arena .pill-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.d-arena .pill-grid button {
  border: 1px solid var(--line-3);
  background: rgba(0,0,0,0.3);
  color: var(--text);
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  display: flex; align-items: center; gap: 8px;
}
.d-arena .pill-grid button:hover { border-color: var(--magenta); }
.d-arena .pill-grid button.active {
  border-color: var(--magenta);
  background: linear-gradient(135deg, rgba(255,92,245,0.12), rgba(92,217,255,0.06));
}
.d-arena .pill-grid button.active::before {
  content: '✓';
  margin-left: auto;
  color: var(--magenta);
  font-weight: 700;
}

/* Mobile auth */
.d-arena .auth-mobile {
  width: 100%; min-height: 100%;
  padding: 56px 22px 28px;
  position: relative;
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse 350px 250px at 0% 0%, rgba(255,92,245,0.30), transparent 70%),
    radial-gradient(ellipse 350px 250px at 100% 20%, rgba(92,217,255,0.18), transparent 70%),
    var(--bg);
}
.d-arena .auth-mobile-splash {
  padding-top: 80px;
}
.d-arena .auth-mobile-splash .h {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 32px 0 0;
}
.d-arena .auth-mobile-splash .h em {
  font-style: normal;
  background: linear-gradient(120deg, var(--magenta), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.d-arena .auth-mobile-splash .sub {
  color: var(--text-dim);
  font-size: 15px;
  margin-top: 16px;
  line-height: 1.5;
}
.d-arena .auth-mobile-stats {
  display: flex; gap: 18px;
  padding: 22px 0;
  margin-top: 22px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.d-arena .auth-mobile-stats .v {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  background: linear-gradient(120deg, var(--magenta), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.d-arena .auth-mobile-stats .l {
  font-size: 10px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 600;
  margin-top: 4px;
}
.d-arena .auth-mobile-bottom {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 10px;
}
`;

function ArenaSplash() {
  const { setPage } = useApp();
  return (
    <div className="auth-bg splash">
      <div className="splash-left">
        <div className="splash-top">
          <PropArenaLockup size={28}/>
          <div className="alt">Already a trader?<a onClick={() => setPage('login')}>Log in</a></div>
        </div>

        <div className="splash-hero">
          <div className="splash-eyebrow"><span className="dot"></span>Season 6 · 14 days left · $50K prize pool</div>
          <h1 className="splash-h1">Trade <em>real</em> capital.<br/>Keep the upside.</h1>
          <p className="splash-sub">
            Pass a one, two or three-step evaluation. Get up to $200,000 in funded buying power.
            Keep <b style={{ color: 'var(--text)' }}>up to 90%</b> of every profit cycle. No skin in the game beyond the entry fee.
          </p>
          <div className="splash-cta">
            <button className="a-btn primary" onClick={() => setPage('register')}>
              <I.rocket size={14}/> Start a challenge
            </button>
            <button className="a-btn secondary" onClick={() => setPage('login')}>
              I already have an account
            </button>
          </div>

          <div className="splash-stats">
            <div className="splash-stat"><div className="v">$60M+</div><div className="l">Funded payouts</div></div>
            <div className="splash-stat"><div className="v">18,400</div><div className="l">Active traders</div></div>
            <div className="splash-stat"><div className="v">90%</div><div className="l">Max profit split</div></div>
            <div className="splash-stat"><div className="v">4.9★</div><div className="l">Trustpilot</div></div>
          </div>
        </div>

        <div className="splash-bottom">
          <span>● PROP60 CFD Markets, Ltd.</span>
          <span>SEZC · Cayman Islands</span>
          <span><I.shield size={11}/> Trust score 92</span>
        </div>
      </div>

      <div className="splash-right">
        <div className="splash-card">
          <div className="splash-card-head">
            <div>
              <div className="splash-card-head">
                <span className="tag" style={{ color: 'var(--magenta)' }}>● LIVE LEADERBOARD</span>
              </div>
              <div style={{ marginTop: 6, color: 'var(--text-dim)', fontSize: 12 }}>Grand Cup · S6</div>
            </div>
            <I.trophy size={28} style={{ color: 'var(--gold)' }}/>
          </div>
          <div className="num">$48,920<small> / $50K prize</small></div>
          <div style={{ marginTop: 14, height: 6, background: 'rgba(255,255,255,0.06)', borderRadius: 999, overflow: 'hidden' }}>
            <div style={{ width: '97%', height: '100%', background: 'linear-gradient(90deg, var(--magenta), var(--cyan))' }}/>
          </div>

          <div className="splash-leader">
            <div className="splash-leader-row">
              <div className="rank" style={{ color: 'var(--gold)' }}>#1</div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 13 }}>D. Vukovic</div>
                <div style={{ fontSize: 10, color: 'var(--text-faint)', marginTop: 2 }}>HR · Signature 200K</div>
              </div>
              <div className="gain">+18.4%</div>
            </div>
            <div className="splash-leader-row">
              <div className="rank">#2</div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 13 }}>P. Anand</div>
                <div style={{ fontSize: 10, color: 'var(--text-faint)', marginTop: 2 }}>IN · Signature Pro 100K</div>
              </div>
              <div className="gain">+17.1%</div>
            </div>
            <div className="splash-leader-row">
              <div className="rank">#3</div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 13 }}>M. Schmidt</div>
                <div style={{ fontSize: 10, color: 'var(--text-faint)', marginTop: 2 }}>DE · Signature 100K</div>
              </div>
              <div className="gain">+16.2%</div>
            </div>
            <div className="splash-leader-row" style={{ filter: 'blur(2px)', opacity: 0.6 }}>
              <div className="rank">#4</div>
              <div><div style={{ fontWeight: 600, fontSize: 13 }}>Hidden trader</div></div>
              <div className="gain">+15.8%</div>
            </div>
            <div style={{ textAlign: 'center', marginTop: 6, fontSize: 11, color: 'var(--text-faint)' }}>
              <I.lock size={10}/> Sign in to view full standings
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ArenaLogin() {
  const { setPage, setAuthed } = useApp();
  const [show, setShow] = useState(false);
  return (
    <div className="auth-bg auth-page">
      <div className="auth-card">
        <button className="auth-back" onClick={() => setPage('splash')}><I.chevronLeft size={11}/> Back</button>
        <div style={{ marginBottom: 22 }}><PropArenaLockup size={28}/></div>
        <h1 className="auth-h">Welcome <em>back</em>.</h1>
        <p className="auth-sub">Log in to access your accounts, withdraw, and trade.</p>

        <div className="field">
          <label>Email</label>
          <div className="ctrl">
            <I.mail size={15} style={{ color: 'var(--text-faint)' }}/>
            <input type="email" placeholder="you@email.com" defaultValue="yulia@example.com"/>
          </div>
        </div>
        <div className="field">
          <label>Password</label>
          <div className="ctrl">
            <I.lock size={15} style={{ color: 'var(--text-faint)' }}/>
            <input type={show ? 'text' : 'password'} placeholder="••••••••" defaultValue="••••••••"/>
            <span onClick={() => setShow(s => !s)} style={{ cursor: 'pointer', display: 'inline-flex' }}>
              {show ? <I.eyeOff size={15} style={{ color: 'var(--text-faint)' }}/> : <I.eye size={15} style={{ color: 'var(--text-faint)' }}/>}
            </span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 4 }}>
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--text-dim)', textTransform: 'none', letterSpacing: 0, fontWeight: 500 }}>
              <input type="checkbox" defaultChecked/> Remember me for 30 days
            </label>
            <a onClick={() => setPage('forgotPassword')} style={{ fontSize: 12, color: 'var(--cyan)', cursor: 'pointer' }}>Forgot password?</a>
          </div>
        </div>

        <button className="auth-submit" onClick={() => setAuthed(true)}>
          Log in <I.arrowRight size={14}/>
        </button>

        <div className="auth-or">or continue with</div>
        <div className="auth-oauth">
          <button><I.user size={14}/> Google</button>
          <button><I.diamond size={14}/> Discord</button>
        </div>

        <div className="auth-foot">
          New to Prop Arena? <a onClick={() => setPage('register')}>Create an account</a>
        </div>
      </div>
    </div>
  );
}

function ArenaRegister() {
  const { setPage, setAuthed } = useApp();
  const [step, setStep] = useState(0);
  const [show, setShow] = useState(false);
  const [data, setData] = useState({ email: 'yulia@example.com', name: '', country: 'IT', phonePrefix: '+39', phone: '', exp: '' });
  const next = () => step < 2 ? setStep(s => s+1) : setAuthed(true);
  const back = () => step > 0 ? setStep(s => s-1) : setPage('splash');

  return (
    <div className="auth-bg auth-page">
      <div className="auth-card">
        <button className="auth-back" onClick={back}><I.chevronLeft size={11}/> {step === 0 ? 'Back' : 'Previous'}</button>
        <div style={{ marginBottom: 22 }}><PropArenaLockup size={28}/></div>

        <div className="step-row">
          {[0,1,2].map(i => <div key={i} className={'step ' + (i <= step ? 'on' : '')}/>)}
        </div>

        {step === 0 && (
          <>
            <h1 className="auth-h">Enter the <em>arena</em>.</h1>
            <p className="auth-sub">Step 1 of 3 · Create your account credentials.</p>
            <div className="field">
              <label>Email</label>
              <div className="ctrl">
                <I.mail size={15} style={{ color: 'var(--text-faint)' }}/>
                <input type="email" placeholder="you@email.com" value={data.email} onChange={e=>setData({...data, email:e.target.value})}/>
              </div>
            </div>
            <div className="field">
              <label>Password</label>
              <div className="ctrl">
                <I.lock size={15} style={{ color: 'var(--text-faint)' }}/>
                <input type={show ? 'text' : 'password'} placeholder="At least 12 characters"/>
                <span onClick={() => setShow(s => !s)} style={{ cursor: 'pointer', display: 'inline-flex' }}>
                  {show ? <I.eyeOff size={15} style={{ color: 'var(--text-faint)' }}/> : <I.eye size={15} style={{ color: 'var(--text-faint)' }}/>}
                </span>
              </div>
              <div className="helper ok">✓ Strong password</div>
            </div>
            <div className="field">
              <label>Confirm password</label>
              <div className="ctrl">
                <I.lock size={15} style={{ color: 'var(--text-faint)' }}/>
                <input type="password" placeholder="Repeat password"/>
              </div>
            </div>
          </>
        )}

        {step === 1 && (
          <>
            <h1 className="auth-h">About <em>you</em>.</h1>
            <p className="auth-sub">Step 2 of 3 · We need a name on your funded account.</p>
            <div className="field">
              <label>Full name</label>
              <div className="ctrl">
                <I.user size={15} style={{ color: 'var(--text-faint)' }}/>
                <input type="text" placeholder="As shown on government ID" value={data.name} onChange={e=>setData({...data, name:e.target.value})}/>
              </div>
            </div>
            <div className="field">
              <label>Country of residence</label>
              <select className="a-input" value={data.country} onChange={e => setData({...data, country: e.target.value, phonePrefix: ({IT:'+39',DE:'+49',FR:'+33',GB:'+44',US:'+1',IN:'+91',AE:'+971'})[e.target.value] || '+1'})}>
                {[
                  ['IT','Italy'],['DE','Germany'],['FR','France'],['GB','United Kingdom'],
                  ['US','United States'],['IN','India'],['AE','UAE'],['..','Other'],
                ].map(([c,l]) => <option key={c} value={c}>{c} — {l}</option>)}
              </select>
            </div>
            <div className="field">
              <label>Phone</label>
              <div style={{ display: 'grid', gridTemplateColumns: '100px 1fr', gap: 8 }}>
                <select className="a-input" value={data.phonePrefix} onChange={e => setData({...data, phonePrefix: e.target.value})}>
                  {['+1','+39','+44','+49','+33','+91','+971','+34','+81'].map(p => <option key={p}>{p}</option>)}
                </select>
                <div className="ctrl">
                  <input type="tel" placeholder="Phone number" value={data.phone} onChange={e => setData({...data, phone: e.target.value})}/>
                </div>
              </div>
            </div>
          </>
        )}

        {step === 2 && (
          <>
            <h1 className="auth-h">Almost <em>there</em>.</h1>
            <p className="auth-sub">Step 3 of 3 · How much have you traded before?</p>
            <div className="field">
              <label>Trading experience</label>
              <div className="pill-grid" style={{ gridTemplateColumns: '1fr' }}>
                {[
                  { v: 'new',  l: 'New to trading', sub: '< 6 months' },
                  { v: 'some', l: 'Some experience', sub: '6 months – 2 years' },
                  { v: 'exp',  l: 'Experienced', sub: '2 – 5 years' },
                  { v: 'pro',  l: 'Professional', sub: '5+ years or institutional' },
                ].map(o => (
                  <button key={o.v} className={data.exp===o.v?'active':''} onClick={()=>setData({...data, exp:o.v})}>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                      <span>{o.l}</span>
                      <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>{o.sub}</span>
                    </div>
                  </button>
                ))}
              </div>
            </div>
            <label style={{ display: 'flex', alignItems: 'flex-start', gap: 8, fontSize: 12, color: 'var(--text-dim)', marginTop: 14, lineHeight: 1.5 }}>
              <input type="checkbox" defaultChecked style={{ marginTop: 3 }}/>
              <span>I agree to the <a style={{ color: 'var(--cyan)' }}>Trading Terms</a> and <a style={{ color: 'var(--cyan)' }}>Risk Disclosure</a>. I confirm I am 18+ and not a US person for tax purposes.</span>
            </label>
          </>
        )}

        <button className="auth-submit" onClick={next} style={{ marginTop: 20 }}>
          {step === 2 ? <>Create my account <I.rocket size={14}/></> : <>Continue <I.arrowRight size={14}/></>}
        </button>

        <div className="auth-foot">
          Already have an account? <a onClick={() => setPage('login')}>Log in</a>
        </div>
      </div>
    </div>
  );
}

// ===== MOBILE =====
function ArenaSplashMobile() {
  const { setPage } = useApp();
  return (
    <div className="auth-mobile auth-mobile-splash">
      <PropArenaLockup size={26}/>
      <div className="splash-eyebrow" style={{ marginTop: 30 }}><span className="dot"></span>Season 6 · 14 days left</div>
      <h1 className="h">Trade <em>real</em> capital.<br/>Keep the upside.</h1>
      <p className="sub">Pass a one, two or three-step evaluation. Get up to $200K funded. Keep up to 90%.</p>
      <div className="auth-mobile-stats">
        <div><div className="v">$60M+</div><div className="l">Paid out</div></div>
        <div><div className="v">18.4k</div><div className="l">Traders</div></div>
        <div><div className="v">90%</div><div className="l">Split</div></div>
      </div>
      <div className="auth-mobile-bottom">
        <button className="a-btn primary lg" style={{ height: 52, justifyContent: 'center' }} onClick={() => setPage('register')}>
          <I.rocket size={14}/> Start a challenge
        </button>
        <button className="a-btn secondary lg" style={{ height: 52, justifyContent: 'center' }} onClick={() => setPage('login')}>
          I already have an account
        </button>
      </div>
    </div>
  );
}

function ArenaLoginMobile() {
  const { setPage, setAuthed } = useApp();
  const [show, setShow] = useState(false);
  return (
    <div className="auth-mobile">
      <button className="auth-back" onClick={() => setPage('splash')}><I.chevronLeft size={11}/> Back</button>
      <div style={{ marginTop: 8 }}><PropArenaLockup size={26}/></div>
      <h1 className="auth-h" style={{ fontSize: 30, marginTop: 30 }}>Welcome <em>back</em>.</h1>
      <p className="auth-sub">Log in to your trader account.</p>

      <div className="field">
        <label>Email</label>
        <div className="ctrl">
          <I.mail size={15} style={{ color: 'var(--text-faint)' }}/>
          <input type="email" placeholder="you@email.com" defaultValue="yulia@example.com"/>
        </div>
      </div>
      <div className="field">
        <label>Password</label>
        <div className="ctrl">
          <I.lock size={15} style={{ color: 'var(--text-faint)' }}/>
          <input type={show ? 'text' : 'password'} placeholder="••••••••" defaultValue="••••••••"/>
          <span onClick={() => setShow(s => !s)} style={{ cursor: 'pointer', display: 'inline-flex' }}>
            {show ? <I.eyeOff size={15} style={{ color: 'var(--text-faint)' }}/> : <I.eye size={15} style={{ color: 'var(--text-faint)' }}/>}
          </span>
        </div>
      </div>
      <a onClick={() => setPage('forgotPassword')} style={{ color: 'var(--cyan)', fontSize: 12, marginTop: -4, marginBottom: 14, display: 'block', cursor: 'pointer' }}>Forgot password?</a>

      <button className="auth-submit" onClick={() => setAuthed(true)}>Log in <I.arrowRight size={14}/></button>

      <div className="auth-or">or</div>
      <div className="auth-oauth">
        <button><I.user size={14}/> Google</button>
        <button><I.diamond size={14}/> Discord</button>
      </div>
      <div className="auth-foot">
        New trader? <a onClick={() => setPage('register')}>Create account</a>
      </div>
    </div>
  );
}

function ArenaRegisterMobile() {
  const { setPage, setAuthed } = useApp();
  const [step, setStep] = useState(0);
  const [data, setData] = useState({ email: '', name: '', country: 'IT', exp: '' });
  const next = () => step < 2 ? setStep(s => s+1) : setAuthed(true);
  const back = () => step > 0 ? setStep(s => s-1) : setPage('splash');

  return (
    <div className="auth-mobile">
      <button className="auth-back" onClick={back}><I.chevronLeft size={11}/> {step === 0 ? 'Back' : 'Previous'}</button>
      <div style={{ marginTop: 8 }}><PropArenaLockup size={26}/></div>
      <div className="step-row" style={{ marginTop: 22 }}>
        {[0,1,2].map(i => <div key={i} className={'step ' + (i <= step ? 'on' : '')}/>)}
      </div>

      {step === 0 && (
        <>
          <h1 className="auth-h" style={{ fontSize: 30 }}>Enter the <em>arena</em>.</h1>
          <p className="auth-sub">Step 1 of 3</p>
          <div className="field">
            <label>Email</label>
            <div className="ctrl">
              <I.mail size={15} style={{ color: 'var(--text-faint)' }}/>
              <input type="email" placeholder="you@email.com"/>
            </div>
          </div>
          <div className="field">
            <label>Password</label>
            <div className="ctrl">
              <I.lock size={15} style={{ color: 'var(--text-faint)' }}/>
              <input type="password" placeholder="12+ characters"/>
            </div>
          </div>
        </>
      )}

      {step === 1 && (
        <>
          <h1 className="auth-h" style={{ fontSize: 30 }}>About <em>you</em>.</h1>
          <p className="auth-sub">Step 2 of 3</p>
          <div className="field">
            <label>Full name</label>
            <div className="ctrl">
              <I.user size={15} style={{ color: 'var(--text-faint)' }}/>
              <input type="text" placeholder="As on government ID"/>
            </div>
          </div>
          <div className="field">
            <label>Country</label>
            <div className="pill-grid">
              {['IT','DE','FR','GB','US','IN'].map(c => (
                <button key={c} className={data.country===c?'active':''} onClick={()=>setData({...data, country:c})}>
                  <CountryDot c={c}/> {c}
                </button>
              ))}
            </div>
          </div>
        </>
      )}

      {step === 2 && (
        <>
          <h1 className="auth-h" style={{ fontSize: 30 }}>Almost <em>there</em>.</h1>
          <p className="auth-sub">Step 3 of 3</p>
          <div className="field">
            <label>Experience</label>
            <div className="pill-grid" style={{ gridTemplateColumns: '1fr' }}>
              {[
                { v: 'new', l: 'New', s: '< 6 months' },
                { v: 'some', l: 'Some', s: '6m – 2y' },
                { v: 'exp', l: 'Experienced', s: '2 – 5y' },
                { v: 'pro', l: 'Professional', s: '5+ years' },
              ].map(o => (
                <button key={o.v} className={data.exp===o.v?'active':''} onClick={()=>setData({...data, exp:o.v})}>
                  <div><div>{o.l}</div><div style={{ fontSize: 11, color: 'var(--text-faint)' }}>{o.s}</div></div>
                </button>
              ))}
            </div>
          </div>
        </>
      )}

      <button className="auth-submit" onClick={next} style={{ marginTop: 16 }}>
        {step === 2 ? <>Create account <I.rocket size={14}/></> : <>Continue <I.arrowRight size={14}/></>}
      </button>
    </div>
  );
}

function ArenaAuth() {
  useEffect(() => {
    if (!document.getElementById('arena-auth-css')) {
      const s = document.createElement('style');
      s.id = 'arena-auth-css';
      s.textContent = arenaAuthCSS;
      document.head.appendChild(s);
    }
  }, []);
  const { page, view } = useApp();
  if (view === 'mobile') {
    return (
      <div className="d-arena">
        <Phone w={390} h={844}>
          {page === 'splash' && <ArenaSplashMobile/>}
          {page === 'login' && <ArenaLoginMobile/>}
          {page === 'register' && <ArenaRegisterMobile/>}
          {page === 'forgotPassword' && (window.ArenaForgotPassword ? <window.ArenaForgotPassword/> : null)}
        </Phone>
      </div>
    );
  }
  return (
    <div className="d-arena">
      {page === 'splash' && <ArenaSplash/>}
      {page === 'login' && <ArenaLogin/>}
      {page === 'register' && <ArenaRegister/>}
      {page === 'forgotPassword' && (window.ArenaForgotPassword ? <window.ArenaForgotPassword/> : null)}
    </div>
  );
}

window.ArenaAuth = ArenaAuth;

// Inject CSS immediately on script load (so auth screens get the base styles too).
(function() {
  if (typeof document === 'undefined') return;
  if (document.getElementById('arena-auth-css')) return;
  const s = document.createElement('style');
  s.id = 'arena-auth-css';
  s.textContent = arenaAuthCSS;
  document.head.appendChild(s);
})();