// VEXEL — About, Careers, Contact, Sign in, Dashboard
// useState is already in scope from ui.jsx (loaded first)

// ─── ABOUT ───────────────────────────────────────────────────────────────────
function AboutPage({ go }) {
  return (
    <main>
      {/* Hero */}
      <section style={{ position: "relative", minHeight: 540, overflow: "hidden" }}>
        <img src={PHOTOS.dubai2} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.5 }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 0%, rgba(10,10,15,0.85) 60%, var(--ink) 100%)" }} />
        <div className="bg-scan" style={{ position: "absolute", inset: 0 }} />
        <div className="shell" style={{ position: "relative", padding: "96px 32px" }}>
          <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>About Vexel</div>
          <h1 className="t-display" style={{ fontSize: "clamp(64px, 9vw, 144px)", marginTop: 12, lineHeight: 0.9, textWrap: "balance" }}>Built in Dubai.<br/><span className="italic-accent">For the Gulf.</span></h1>
        </div>
      </section>

      {/* Mission */}
      <section className="shell" style={{ marginTop: -60, position: "relative", zIndex: 2 }}>
        <div className="card-flat" style={{ padding: 48, display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 48 }}>
          <div>
            <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>The Mission</div>
            <h2 className="t-display" style={{ fontSize: 40, marginTop: 8 }}>Stop the talent drain.</h2>
          </div>
          <div style={{ fontSize: 17, lineHeight: 1.7, color: "var(--text-dim)" }}>
            <p>The GCC has a generational depth of competitive talent and zero infrastructure to keep them home. Every year, our best players sign with EU and NA orgs, train in Berlin or Seoul, and never come back. We're tired of it.</p>
            <p style={{ marginTop: 16 }}>Vexel is the operating system for what comes next — a tournament platform, broadcast network, ranking system and player pipeline, owned and operated out of Dubai. The point isn't to chase global esports. The point is to build a regional ecosystem so strong that the world has to come to us.</p>
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="shell" style={{ marginTop: 96 }}>
        <h2 className="t-display" style={{ fontSize: 40, marginBottom: 32 }}>The story so far.</h2>
        <div style={{ display: "grid", gridTemplateColumns: "200px 1fr", rowGap: 0 }}>
          {[
            ["2023 · Q1", "Wakefield Project Management is incorporated in Dubai. Trade Licence 1167116 issued. Founder Ibrahim Hussain Ahli writes the first business plan on the back of a napkin in DIFC."],
            ["2023 · Q4", "First exhibition tournament — a 32-player Tekken showcase at Dubai Mall. Sells out in under an hour. AED 25,000 prize pool, 4,200 viewers on a stream nobody planned to put online."],
            ["2024 · Q2", "Vexel platform officially launches. Six titles, three tournaments running, 1,400 registered players in the first week."],
            ["2024 · Q4", "First major: Vexel Winter Invitational. AED 600,000 prize pool. Coca-Cola Arena. Falcons GG take the crown."],
            ["2025", "Vexel becomes the official GCC qualifier path for two international circuits. Active player base passes 12,000."],
            ["2026", "Spring Open hits AED 450k — the largest single Valorant prize pool ever staged outside of Riot's official circuit. Diamond partners on board. Summer Invitational announced at AED 1.2M."],
          ].map(([year, body], i) => (
            <React.Fragment key={i}>
              <div style={{ padding: "24px 24px 24px 0", borderBottom: "1px solid var(--line)" }}>
                <div className="t-display" style={{ fontSize: 24, color: "var(--cyan)" }}>{year}</div>
              </div>
              <div style={{ padding: "24px 0 24px 24px", borderLeft: "1px solid var(--line)", borderBottom: "1px solid var(--line)", position: "relative" }}>
                <div style={{ position: "absolute", left: -5, top: 28, width: 9, height: 9, background: "var(--cyan)", borderRadius: "50%" }} />
                <p style={{ fontSize: 15, color: "var(--text)", lineHeight: 1.55, maxWidth: 720 }}>{body}</p>
              </div>
            </React.Fragment>
          ))}
        </div>
      </section>

      {/* Leadership */}
      <section className="shell" style={{ marginTop: 96 }}>
        <h2 className="t-display" style={{ fontSize: 40, marginBottom: 32 }}>Leadership.</h2>
        <div className="grid-4">
          {[
            ["Ibrahim Hussain Ahli", "Founder & CEO", PHOTOS.gamer1, "Wakefield owner. UAE-born, Dubai-built. 18 years in regional sport, three years in esports, zero patience for slow."],
            ["Shirley Bouchard", "Head of Partnerships", PHOTOS.player8, "Ran sponsorship for Dubai Tennis Championships before she crossed over. Speaks five languages, signs ten contracts a week."],
            ["Tariq Al-Saud", "Director of Esports", PHOTOS.gamer3, "Former pro Valorant player. Now decides which players become pros. Brutal but fair."],
            ["Aysha Al-Kaabi", "Head of Broadcast", PHOTOS.player5, "Built the production graph that runs every Vexel stream. Ex-MBC, ex-twitch.tv/middleeast."],
          ].map(([name, role, photo, bio]) => (
            <div key={name} className="card lift">
              <div style={{ aspectRatio: "3/4", overflow: "hidden", background: "var(--surface-2)" }}>
                <img src={photo} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
              <div style={{ padding: 18 }}>
                <div style={{ fontWeight: 700, fontSize: 16 }}>{name}</div>
                <div className="t-mono" style={{ fontSize: 11, color: "var(--cyan)", marginTop: 4, letterSpacing: "0.1em" }}>{role.toUpperCase()}</div>
                <p style={{ fontSize: 13, color: "var(--text-dim)", marginTop: 10, lineHeight: 1.5 }}>{bio}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* HQ photos */}
      <section className="shell" style={{ marginTop: 96 }}>
        <h2 className="t-display" style={{ fontSize: 40, marginBottom: 16 }}>HQ · DIFC, Dubai.</h2>
        <p style={{ color: "var(--text-dim)", maxWidth: 600, marginBottom: 24 }}>Our offices sit on Level 41 of the ICD Brookfield Place. Broadcast studio one floor down, training rooms in Marina, players sleep wherever they want — usually nowhere.</p>
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gridTemplateRows: "240px 240px", gap: 12 }}>
          <img src={PHOTOS.dubai1} alt="" style={{ gridRow: "span 2", width: "100%", height: "100%", objectFit: "cover", borderRadius: 4 }} />
          <img src={PHOTOS.setup1} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 4 }} />
          <img src={PHOTOS.dubai2} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 4 }} />
          <img src={PHOTOS.crowd2} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 4 }} />
          <img src={PHOTOS.dubai3} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 4 }} />
        </div>
      </section>

      {/* Press */}
      <section className="shell" style={{ marginTop: 96, marginBottom: 80 }}>
        <h2 className="t-display" style={{ fontSize: 40, marginBottom: 24 }}>Press.</h2>
        <div className="grid-3">
          {[
            ["Forbes Middle East", "\"The most ambitious esports operator working in the GCC.\""],
            ["The National", "\"Vexel just rewrote what a regional tournament looks like.\""],
            ["Esports Insider", "\"Dubai's answer to FACEIT, with a Gulf accent and double the ambition.\""],
          ].map(([source, quote]) => (
            <div key={source} className="card-flat" style={{ padding: 28 }}>
              <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>{source}</div>
              <p className="t-display" style={{ fontSize: 22, marginTop: 12, lineHeight: 1.2, textWrap: "balance" }}>{quote}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Wakefield strip */}
      <section style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", background: "var(--ink-2)", padding: "40px var(--gutter)" }}>
        <div className="shell" style={{ display: "flex", flexWrap: "wrap", gap: 32, alignItems: "center", justifyContent: "space-between" }}>
          <div>
            <div className="t-eyebrow">Owned & Operated By</div>
            <div className="t-display" style={{ fontSize: 32, marginTop: 4 }}>Wakefield Project Management</div>
            <div className="t-mono" style={{ fontSize: 12, color: "var(--text-dim)", marginTop: 6 }}>Trade Licence 1167116 · Owner: Ibrahim Hussain Ahli · Dubai, UAE</div>
          </div>
          <button onClick={() => go("contact")} className="btn btn-ghost">Get in touch →</button>
        </div>
      </section>
    </main>
  );
}

// ─── CAREERS ─────────────────────────────────────────────────────────────────
function CareersPage({ go }) {
  return (
    <main>
      <section style={{ position: "relative", minHeight: 440, overflow: "hidden" }}>
        <img src={PHOTOS.setup1} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.4 }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 0%, rgba(10,10,15,0.85) 70%, var(--ink) 100%)" }} />
        <div className="shell" style={{ position: "relative", padding: "96px 32px" }}>
          <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>Careers · Hiring across 4 teams</div>
          <h1 className="t-display" style={{ fontSize: "clamp(56px, 9vw, 144px)", marginTop: 12, lineHeight: 0.9, textWrap: "balance" }}>Build the future of<br/><span className="italic-accent">competitive gaming.</span></h1>
          <p style={{ fontSize: 18, color: "var(--text-dim)", marginTop: 24, maxWidth: 640 }}>We're a tight team in Dubai (and remote-friendly) building the operating system for Gulf esports. We move fast, take swings, and don't pretend to know everything. Sound right?</p>
        </div>
      </section>

      {/* Values */}
      <section className="shell" style={{ marginTop: 64 }}>
        <div className="grid-4">
          {[
            ["01", "Compete or coach", "Either you play, or you build for people who do. There's no third option."],
            ["02", "GCC-first, not GCC-only", "We're built here. We don't apologise for that. But our platform speaks five languages."],
            ["03", "Operate in public", "Every roadmap, prize pool, and post-mortem is in the open. No secret KPIs."],
            ["04", "Pay above the meta", "Top-quartile salaries, full healthcare, four-day Eid week, 26 days off, ESOP for first 50."],
          ].map(([n, t, b]) => (
            <div key={n} className="card-flat" style={{ padding: 24 }}>
              <div className="t-mono" style={{ fontSize: 11, color: "var(--cyan)", letterSpacing: "0.12em" }}>VALUE {n}</div>
              <h3 className="t-display" style={{ fontSize: 22, marginTop: 8 }}>{t}</h3>
              <p style={{ fontSize: 13, color: "var(--text-dim)", marginTop: 8, lineHeight: 1.5 }}>{b}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Open roles */}
      <section className="shell" style={{ marginTop: 80 }}>
        <div className="sec-head">
          <h2>Open roles · {POSITIONS.length}</h2>
          <div className="t-eyebrow">All postings · Updated May 14</div>
        </div>
        <div className="card-flat">
          {POSITIONS.map((p, i) => (
            <div key={p.id} className="sweep" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr auto", padding: "20px 24px", borderBottom: i < POSITIONS.length - 1 ? "1px solid var(--line)" : "none", alignItems: "center", gap: 16, cursor: "pointer", position: "relative" }}>
              <div>
                <div style={{ fontWeight: 700, fontSize: 16 }}>{p.title}</div>
                <div className="t-mono" style={{ fontSize: 11, color: "var(--text-mute)", marginTop: 2 }}>{p.team.toUpperCase()}</div>
              </div>
              <div className="t-mono" style={{ fontSize: 12, color: "var(--text-dim)" }}>{p.location}</div>
              <div><span className="pill pill-up">{p.type}</span></div>
              <button className="btn btn-ghost btn-sm">Apply →</button>
            </div>
          ))}
        </div>
      </section>

      {/* Apply form */}
      <section className="shell" style={{ marginTop: 80, marginBottom: 80 }}>
        <div className="card-flat" style={{ padding: 40, display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 48 }}>
          <div>
            <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>Don't see a fit?</div>
            <h2 className="t-display" style={{ fontSize: 36, marginTop: 8 }}>Tell us anyway.</h2>
            <p style={{ color: "var(--text-dim)", marginTop: 12, fontSize: 15 }}>We hire people, not roles. If you've got something the team needs and we don't have a posting for it, write to us. Worst case we email back.</p>
          </div>
          <CareersForm />
        </div>
      </section>
    </main>
  );
}

function CareersForm() {
  const [data, setData] = useState({ name: "", email: "", role: "Surprise me", link: "", message: "" });
  const [status, setStatus] = useState("idle");
  const [error, setError] = useState("");
  const onSubmit = async (e) => {
    e.preventDefault(); setStatus("sending"); setError("");
    const r = await window.VexelAPI.careers(data);
    if (r.ok) setStatus("ok"); else { setStatus("err"); setError(r.error || "Please try again."); }
  };
  if (status === "ok") return (
    <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", padding: 16 }}>
      <div className="t-eyebrow" style={{ color: "var(--lime)" }}>Application received</div>
      <h3 className="t-display" style={{ fontSize: 28, marginTop: 8, color: "var(--white)" }}>Thank you.</h3>
      <p style={{ color: "var(--text-dim)", marginTop: 8, fontSize: 14 }}>We read every application. Expect a reply within five working days.</p>
    </div>
  );
  return (
    <form onSubmit={onSubmit}>
      <div className="grid-2" style={{ gap: 12 }}>
        <div><label className="label">Name</label><input className="input" required value={data.name} onChange={e => setData({ ...data, name: e.target.value })} /></div>
        <div><label className="label">Email</label><input className="input" type="email" required value={data.email} onChange={e => setData({ ...data, email: e.target.value })} /></div>
      </div>
      <div style={{ marginTop: 12 }}><label className="label">Role / Team interested in</label>
        <select className="input" value={data.role} onChange={e => setData({ ...data, role: e.target.value })}>
          <option>Surprise me</option>
          {POSITIONS.map(p => <option key={p.id}>{p.title}</option>)}
        </select>
      </div>
      <div style={{ marginTop: 12 }}><label className="label">Link to portfolio / GitHub / LinkedIn</label><input className="input" placeholder="https://..." value={data.link} onChange={e => setData({ ...data, link: e.target.value })} /></div>
      <div style={{ marginTop: 12 }}><label className="label">Why Vexel?</label><textarea className="input" rows="4" value={data.message} onChange={e => setData({ ...data, message: e.target.value })} /></div>
      {error && <div style={{ marginTop: 12, padding: "8px 12px", color: "var(--red)", fontSize: 13, border: "1px solid var(--red)", borderRadius: 4 }}>{error}</div>}
      <button type="submit" disabled={status === "sending"} className="btn btn-primary" style={{ marginTop: 16 }}>{status === "sending" ? "Sending..." : "Send application →"}</button>
    </form>
  );
}

// ─── CONTACT ─────────────────────────────────────────────────────────────────
function ContactPage({ go }) {
  return (
    <main>
      <section className="shell" style={{ paddingTop: 64 }}>
        <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>Get in touch</div>
        <h1 className="t-display" style={{ fontSize: 96, marginTop: 8 }}>Contact.</h1>
      </section>

      <section className="shell" style={{ marginTop: 48, display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48 }}>
        <ContactForm />

        <aside style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div className="card-flat" style={{ padding: 24 }}>
            <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>Direct lines</div>
            <div style={{ marginTop: 16, fontFamily: "var(--font-mono)" }}>
              <div style={{ fontSize: 11, color: "var(--text-mute)", letterSpacing: "0.1em" }}>GENERAL</div>
              <a style={{ fontSize: 18, color: "var(--cyan)" }}>info@clutchscan.online</a>
              <div style={{ marginTop: 14, fontSize: 11, color: "var(--text-mute)", letterSpacing: "0.1em" }}>PARTNERSHIPS</div>
              <a style={{ fontSize: 18, color: "var(--cyan)" }}>shirley@clutchscan.online</a>
            </div>
          </div>
          <div className="card-flat" style={{ padding: 24 }}>
            <div className="t-eyebrow" style={{ color: "var(--lime)" }}>WhatsApp concierge</div>
            <div className="t-mono" style={{ fontSize: 24, fontWeight: 700, marginTop: 8 }}>+971 50 200 1167</div>
            <p style={{ fontSize: 13, color: "var(--text-dim)", marginTop: 8 }}>Live 7-day support, in English and Arabic. Average response 4 minutes.</p>
            <a href="https://wa.me/971502001167" target="_blank" rel="noopener" className="btn btn-primary btn-sm" style={{ marginTop: 12, textDecoration: "none" }}>Open in WhatsApp →</a>
          </div>
          <div className="card-flat" style={{ padding: 24 }}>
            <div className="t-eyebrow">HQ</div>
            <p style={{ marginTop: 8, fontSize: 14, color: "var(--text-dim)", lineHeight: 1.6 }}>
              ICD Brookfield Place, Level 41<br/>
              DIFC, Dubai, UAE<br/>
              Sun – Thu · 9am – 6pm GST
            </p>
            <div style={{ marginTop: 12, position: "relative", aspectRatio: "16/9", overflow: "hidden", borderRadius: 4 }}>
              <img src={PHOTOS.dubai1} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 60%, rgba(10,10,15,0.95) 100%)" }} />
              <div style={{ position: "absolute", left: "50%", top: "40%", transform: "translate(-50%, -50%)", width: 20, height: 20, borderRadius: "50%", background: "var(--cyan)", boxShadow: "0 0 0 6px rgba(0,229,255,0.3), 0 0 0 12px rgba(0,229,255,0.15)" }} />
              <div className="t-mono" style={{ position: "absolute", bottom: 8, left: 12, fontSize: 11, color: "var(--white)" }}>25.213° N · 55.279° E</div>
            </div>
          </div>
        </aside>
      </section>

      {/* Big footer CTA */}
      <section style={{ marginTop: 96, padding: "80px var(--gutter)", borderTop: "1px solid var(--line)", background: "var(--ink-2)" }}>
        <div className="shell" style={{ textAlign: "center" }}>
          <h2 className="t-display" style={{ fontSize: 64, textWrap: "balance" }}>The Gulf gaming scene is about to <span className="italic-accent">explode.</span></h2>
          <p style={{ color: "var(--text-dim)", marginTop: 16, fontSize: 18 }}>You can talk to us about it.</p>
        </div>
      </section>
    </main>
  );
}

// ─── SIGN IN / REGISTER ──────────────────────────────────────────────────────
function SignInPage({ params, go, setSignedIn }) {
  const [mode, setMode] = useState(params.register ? "register" : "signin");
  const [signinForm, setSigninForm]   = useState({ email: "", password: "" });
  const [registerForm, setRegisterForm] = useState({ handle: "", country: "UAE", email: "", password: "", favGame: "val" });
  const [error, setError]   = useState("");
  const [busy, setBusy]     = useState(false);

  const onSignIn = async (e) => {
    e.preventDefault(); setError(""); setBusy(true);
    const r = await window.VexelAPI.signIn(signinForm);
    setBusy(false);
    if (r.ok) { setSignedIn(true); go("dashboard"); }
    else      { setError(r.error || "Sign in failed."); }
  };
  const onRegister = async (e) => {
    e.preventDefault(); setError(""); setBusy(true);
    const r = await window.VexelAPI.register(registerForm);
    setBusy(false);
    if (r.ok) { setSignedIn(true); go("dashboard"); }
    else      { setError(r.error || "Registration failed."); }
  };

  return (
    <main style={{ minHeight: "calc(100vh - 100px)", display: "grid", gridTemplateColumns: "1fr 1.2fr" }}>
      {/* Left form */}
      <div style={{ padding: "64px 48px", display: "flex", flexDirection: "column", justifyContent: "center", maxWidth: 540, margin: "0 auto", width: "100%" }}>
        <div style={{ marginBottom: 32 }}>
          <Wordmark size={26} />
        </div>
        <div style={{ display: "flex", gap: 4, marginBottom: 32, borderBottom: "1px solid var(--line)" }}>
          {[["signin", "Sign in"], ["register", "Create account"]].map(([k, l]) => (
            <button key={k} type="button" className={"tab" + (mode === k ? " active" : "")} onClick={() => { setMode(k); setError(""); }}>{l}</button>
          ))}
        </div>

        {error && <div style={{ padding: "10px 14px", background: "rgba(255,59,71,0.12)", border: "1px solid var(--red)", color: "var(--red)", fontSize: 13, marginBottom: 16, borderRadius: 4 }}>{error}</div>}

        {mode === "signin" ? (
          <form onSubmit={onSignIn}>
            <h1 className="t-display" style={{ fontSize: 48, marginBottom: 8 }}>Welcome back.</h1>
            <p style={{ color: "var(--text-dim)", marginBottom: 32 }}>Sign in to view your tournaments, register your team, and chat in live matches.</p>
            <label className="label">Email</label>
            <input className="input" type="email" required autoComplete="email"
                   value={signinForm.email} onChange={e => setSigninForm({ ...signinForm, email: e.target.value })} />
            <div style={{ marginTop: 16 }}>
              <div className="spread"><label className="label">Password</label><a style={{ fontSize: 11, color: "var(--cyan)", cursor: "pointer" }}>Forgot?</a></div>
              <input className="input" type="password" required autoComplete="current-password"
                     value={signinForm.password} onChange={e => setSigninForm({ ...signinForm, password: e.target.value })} />
            </div>
            <div className="row" style={{ marginTop: 12, fontSize: 12 }}>
              <input type="checkbox" defaultChecked style={{ accentColor: "var(--cyan)" }} /> Remember me on this device
            </div>
            <button type="submit" disabled={busy} className="btn btn-primary btn-lg" style={{ width: "100%", justifyContent: "center", marginTop: 24 }}>
              {busy ? "Signing in..." : "Sign in →"}
            </button>
          </form>
        ) : (
          <form onSubmit={onRegister}>
            <h1 className="t-display" style={{ fontSize: 48, marginBottom: 8 }}>Join Vexel.</h1>
            <p style={{ color: "var(--text-dim)", marginBottom: 32 }}>Free forever. Get matched, get ranked, get paid.</p>
            <div className="grid-2" style={{ gap: 12 }}>
              <div><label className="label">Handle</label>
                <input className="input" placeholder="sandstorm" required minLength={3} maxLength={20}
                       value={registerForm.handle} onChange={e => setRegisterForm({ ...registerForm, handle: e.target.value })} />
              </div>
              <div><label className="label">Country</label>
                <select className="input" value={registerForm.country} onChange={e => setRegisterForm({ ...registerForm, country: e.target.value })}>
                  {["UAE","KSA","QAT","KWT","OMN","BHR","EGY","JOR","LBN","TUR","INT"].map(c => <option key={c}>{c}</option>)}
                </select>
              </div>
            </div>
            <div style={{ marginTop: 12 }}>
              <label className="label">Email</label>
              <input className="input" type="email" required autoComplete="email"
                     value={registerForm.email} onChange={e => setRegisterForm({ ...registerForm, email: e.target.value })} />
            </div>
            <div style={{ marginTop: 12 }}>
              <label className="label">Password (min 6 characters)</label>
              <input className="input" type="password" required minLength={6} autoComplete="new-password"
                     value={registerForm.password} onChange={e => setRegisterForm({ ...registerForm, password: e.target.value })} />
            </div>
            <div style={{ marginTop: 12 }}><label className="label">Favourite game</label>
              <select className="input" value={registerForm.favGame} onChange={e => setRegisterForm({ ...registerForm, favGame: e.target.value })}>
                {GAMES.map(g => <option key={g.id} value={g.id}>{g.name}</option>)}
              </select>
            </div>
            <div className="row" style={{ marginTop: 14, fontSize: 12, color: "var(--text-dim)" }}>
              <input type="checkbox" defaultChecked required style={{ accentColor: "var(--cyan)" }} /> I'm 16+ and agree to the Code of Conduct and Anti-cheat policy
            </div>
            <button type="submit" disabled={busy} className="btn btn-primary btn-lg" style={{ width: "100%", justifyContent: "center", marginTop: 20 }}>
              {busy ? "Creating account..." : "Create account →"}
            </button>
          </form>
        )}
      </div>

      {/* Right artwork */}
      <div style={{ position: "relative", overflow: "hidden", background: "var(--ink-2)" }}>
        <img src={PHOTOS.gamer2} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.7 }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(135deg, rgba(255,45,135,0.3) 0%, transparent 50%, rgba(0,229,255,0.2) 100%)" }} />
        <div className="bg-scan" style={{ position: "absolute", inset: 0 }} />
        <div style={{ position: "absolute", inset: 0, padding: 64, display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
          <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>VEXEL Member Benefits</div>
          <h2 className="t-display" style={{ fontSize: 56, marginTop: 12, lineHeight: 0.9 }}>Built for<br/>the players,<br/><span className="italic-accent">not the suits.</span></h2>
          <ul style={{ listStyle: "none", marginTop: 24, display: "flex", flexDirection: "column", gap: 14 }}>
            {[
              ["▸", "Free entry into 8 weekly tournaments"],
              ["▸", "Anti-cheat protected matchmaking, every match"],
              ["▸", "Direct payouts to local bank account (AED)"],
              ["▸", "First-look access to limited Vexel drops"],
              ["▸", "Climb the GCC ladder — top 100 get scouted"],
            ].map(([s, t]) => (
              <li key={t} className="row" style={{ fontSize: 15, color: "var(--white)" }}>
                <span style={{ color: "var(--cyan)" }}>{s}</span>{t}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </main>
  );
}

// ─── DASHBOARD ───────────────────────────────────────────────────────────────
function DashboardPage({ go, setSignedIn }) {
  const [tab, setTab]   = useState("overview");
  const [user, setUser] = useState(null);
  const player = PLAYERS[0];
  const team = teamById(player.team);

  useEffect(() => {
    (async () => {
      const r = await window.VexelAPI.me();
      if (r.ok && r.user) { setUser(r.user); setSignedIn(true); }
    })();
  }, []);

  const signOut = async () => {
    await window.VexelAPI.signOut();
    setSignedIn(false);
    go("home");
  };

  // Display name for the avatar/sidebar — use real user if available, fall back to demo
  const displayHandle  = user?.handle || "sandstorm";
  const displayCountry = user?.country || "UAE";
  const initial = (displayHandle[0] || "S").toUpperCase();

  return (
    <main style={{ display: "grid", gridTemplateColumns: "240px 1fr" }}>
      {/* Sidebar */}
      <aside style={{ borderRight: "1px solid var(--line)", padding: "32px 0", minHeight: "calc(100vh - 100px)", background: "var(--ink-2)" }}>
        <div style={{ padding: "0 24px 24px", borderBottom: "1px solid var(--line)" }}>
          <div className="row">
            <div style={{ width: 44, height: 44, borderRadius: "50%", background: `linear-gradient(135deg, var(--cyan), var(--magenta))`, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, color: "var(--ink)" }}>{initial}</div>
            <div>
              <div style={{ fontWeight: 700 }}>{displayHandle}</div>
              <div className="t-mono" style={{ fontSize: 10, color: "var(--text-mute)" }}>RANK #001 · {displayCountry}</div>
            </div>
          </div>
        </div>
        <nav style={{ padding: 12 }}>
          {[
            ["overview", "Overview", "▦"],
            ["tournaments", "My tournaments", "◆"],
            ["team", "My team", "▲"],
            ["matches", "Match history", "≡"],
            ["earnings", "Earnings", "$"],
            ["settings", "Settings", "⌥"],
          ].map(([k, l, ic]) => (
            <button key={k} onClick={() => setTab(k)} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 12px", borderRadius: 4, width: "100%", textAlign: "left", fontSize: 13, color: tab === k ? "var(--cyan)" : "var(--text-dim)", background: tab === k ? "rgba(0,229,255,0.08)" : "transparent", borderLeft: tab === k ? "2px solid var(--cyan)" : "2px solid transparent", marginBottom: 2 }}>
              <span style={{ fontSize: 14 }}>{ic}</span> {l}
            </button>
          ))}
          <div style={{ marginTop: 24, paddingTop: 16, borderTop: "1px solid var(--line)" }}>
            <button onClick={signOut} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 12px", fontSize: 13, color: "var(--text-mute)" }}>↳ Sign out</button>
          </div>
        </nav>
      </aside>

      {/* Main */}
      <div style={{ padding: 40 }}>
        {tab === "overview" && (
          <>
            <h1 className="t-display" style={{ fontSize: 48 }}>Hey, sandstorm.</h1>
            <p style={{ color: "var(--text-dim)", marginTop: 8 }}>Two matches today. One trophy on the line. Let's go.</p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginTop: 32 }}>
              {[["#001", "Rank", "var(--gold)"], ["AED 250k", "Earnings YTD", "var(--cyan)"], ["1.90", "K/D", "var(--lime)"], ["78%", "Win rate", "var(--magenta)"]].map(([v, l, c]) => (
                <div key={l} className="card-flat" style={{ padding: 24 }}>
                  <div className="t-eyebrow">{l}</div>
                  <div className="t-display" style={{ fontSize: 36, color: c, marginTop: 4 }}>{v}</div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 24 }}>
              <div>
                <div className="row" style={{ marginBottom: 12 }}>
                  <h2 className="t-display" style={{ fontSize: 22 }}>Next matches</h2>
                  <button className="btn btn-dark btn-sm" style={{ marginLeft: "auto" }}>Full schedule</button>
                </div>
                <div className="card-flat">
                  {[
                    ["TODAY · 16:00", "vs Falcons GG", "Vexel Spring Open · Semi-final · Bo5", true],
                    ["TODAY · 20:00", "vs Kuwait Vipers (potential)", "Vexel Spring Open · Grand Final · Bo7", false],
                    ["MAY 23 · 18:00", "vs TBD", "Vexel Spring Open · Award Ceremony", false],
                  ].map((m, i) => (
                    <div key={i} style={{ display: "grid", gridTemplateColumns: "150px 1fr auto", gap: 12, padding: "16px 20px", borderBottom: i < 2 ? "1px solid var(--line)" : "none", alignItems: "center" }}>
                      <span className="t-mono" style={{ fontSize: 12, color: m[3] ? "var(--orange)" : "var(--text-dim)", fontWeight: 700 }}>{m[0]}</span>
                      <div><div style={{ fontWeight: 600, fontSize: 14 }}>{m[1]}</div><div className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)", marginTop: 2 }}>{m[2]}</div></div>
                      {m[3] ? <LiveBadge>STARTING SOON</LiveBadge> : <button className="btn btn-dark btn-sm">Reminder</button>}
                    </div>
                  ))}
                </div>

                <div className="row" style={{ marginTop: 32, marginBottom: 12 }}>
                  <h2 className="t-display" style={{ fontSize: 22 }}>Recent activity</h2>
                </div>
                <div className="card-flat">
                  {[
                    ["W", "Beat Mirage Collective 2-1 in Vexel Spring Open Quarter-final", "+38 rating", "2h ago"],
                    ["✦", "Earned 'Clutch Master' achievement (5 1vN wins in 7 days)", "+50 rating", "5h ago"],
                    ["W", "Beat Dune Wolves 2-0 in Vexel Spring Open Round of 16", "+22 rating", "yesterday"],
                    ["$", "Cash-out processed: AED 24,200", "to Emirates NBD", "yesterday"],
                  ].map((a, i) => (
                    <div key={i} style={{ padding: "14px 20px", borderBottom: i < 3 ? "1px solid var(--line)" : "none", display: "grid", gridTemplateColumns: "32px 1fr auto auto", gap: 12, alignItems: "center" }}>
                      <span style={{ width: 28, height: 28, borderRadius: "50%", background: a[0] === "W" ? "rgba(155,255,61,0.15)" : a[0] === "✦" ? "rgba(255,201,60,0.15)" : "rgba(0,229,255,0.15)", color: a[0] === "W" ? "var(--lime)" : a[0] === "✦" ? "var(--gold)" : "var(--cyan)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 12 }}>{a[0]}</span>
                      <span style={{ fontSize: 13 }}>{a[1]}</span>
                      <span className="t-mono" style={{ fontSize: 11, color: "var(--lime)" }}>{a[2]}</span>
                      <span className="t-mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>{a[3]}</span>
                    </div>
                  ))}
                </div>
              </div>

              <aside>
                <div className="card-flat" style={{ padding: 20, marginBottom: 16, position: "relative", overflow: "hidden" }}>
                  <img src={team.banner} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.2 }} />
                  <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>Your team</div>
                  <div className="row" style={{ marginTop: 12, gap: 12, position: "relative" }}>
                    <TeamLogo team={team} size={48} />
                    <div>
                      <div style={{ fontWeight: 700, fontSize: 16 }}>{team.name}</div>
                      <div className="t-mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>{team.tag} · STARTING DUELIST</div>
                    </div>
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, marginTop: 16, paddingTop: 12, borderTop: "1px solid var(--line)", position: "relative" }}>
                    <div><div className="t-eyebrow" style={{ fontSize: 9 }}>STREAK</div><div className="t-mono" style={{ color: "var(--lime)", fontWeight: 700 }}>W7</div></div>
                    <div><div className="t-eyebrow" style={{ fontSize: 9 }}>RANK</div><div className="t-mono" style={{ color: "var(--gold)" }}>#1</div></div>
                    <div><div className="t-eyebrow" style={{ fontSize: 9 }}>WIN%</div><div className="t-mono" style={{ color: "var(--cyan)" }}>{team.winRate}%</div></div>
                  </div>
                  <button onClick={() => go("team", { id: team.id })} className="btn btn-dark btn-sm" style={{ marginTop: 16, width: "100%", justifyContent: "center", position: "relative" }}>Team page →</button>
                </div>

                <div className="card-flat" style={{ padding: 20, marginBottom: 16 }}>
                  <div className="t-eyebrow" style={{ color: "var(--lime)" }}>Wallet</div>
                  <div className="t-display" style={{ fontSize: 32, color: "var(--cyan)", marginTop: 4 }}>AED 24,200</div>
                  <div className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)", marginTop: 4 }}>Available · last cash-out yesterday</div>
                  <div className="row" style={{ marginTop: 12, gap: 8 }}>
                    <button className="btn btn-primary btn-sm" style={{ flex: 1, justifyContent: "center" }}>Cash out</button>
                    <button className="btn btn-dark btn-sm" style={{ flex: 1, justifyContent: "center" }}>History</button>
                  </div>
                </div>

                <div className="card-flat" style={{ padding: 20 }}>
                  <div className="t-eyebrow" style={{ color: "var(--magenta)" }}>Next reward</div>
                  <p style={{ fontSize: 13, marginTop: 8 }}>Win 3 more matches this week to unlock the Spring Open exclusive emblem.</p>
                  <div style={{ marginTop: 10, height: 6, background: "var(--surface-3)", borderRadius: 3, overflow: "hidden" }}>
                    <div style={{ width: "66%", height: "100%", background: "var(--magenta)" }} />
                  </div>
                  <div className="t-mono" style={{ fontSize: 11, color: "var(--text-mute)", marginTop: 6 }}>2 / 3 wins</div>
                </div>
              </aside>
            </div>
          </>
        )}

        {tab === "tournaments" && (
          <>
            <h1 className="t-display" style={{ fontSize: 36, marginBottom: 16 }}>My tournaments</h1>
            <div className="row" style={{ marginBottom: 20 }}>
              {[["registered", "Registered (3)"], ["upcoming", "Upcoming"], ["history", "History (28)"]].map(([k, l], i) => (
                <button key={k} className={"tab" + (i === 0 ? " active" : "")} style={{ paddingLeft: 0 }}>{l}</button>
              ))}
            </div>
            <div className="grid-3">
              {TOURNAMENTS.slice(0, 3).map(t => <TournamentCard key={t.id} t={t} go={go} currency="AED" />)}
            </div>
            <h3 className="t-display" style={{ fontSize: 22, marginTop: 40, marginBottom: 12 }}>History</h3>
            <div className="card-flat">
              {TOURNAMENTS.filter(t => t.status === "past").map((t, i) => (
                <div key={t.id} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto auto", gap: 16, padding: "16px 20px", borderBottom: i < 2 ? "1px solid var(--line)" : "none", alignItems: "center" }}>
                  <GameGlyph game={t.game} size={32} />
                  <div>
                    <div style={{ fontWeight: 600 }}>{t.name}</div>
                    <div className="t-mono" style={{ fontSize: 11, color: "var(--text-mute)", marginTop: 2 }}>{t.date.toUpperCase()}</div>
                  </div>
                  <span className="pill pill-win">{i === 0 ? "1ST" : i === 1 ? "QF" : "3RD"}</span>
                  <span className="t-mono" style={{ color: "var(--cyan)", minWidth: 100, textAlign: "right" }}>{fmtAED(t.prize * (i === 0 ? 0.6 : 0.05))}</span>
                </div>
              ))}
            </div>
          </>
        )}

        {tab === "team" && (
          <>
            <h1 className="t-display" style={{ fontSize: 36, marginBottom: 16 }}>My team · {team.name}</h1>
            <div className="card-flat" style={{ padding: 24 }}>
              <div className="row" style={{ gap: 16 }}>
                <TeamLogo team={team} size={72} />
                <div>
                  <div className="t-display" style={{ fontSize: 32 }}>{team.name}</div>
                  <p style={{ color: team.color, fontStyle: "italic", marginTop: 4 }}>"{team.motto}"</p>
                </div>
                <button onClick={() => go("team", { id: team.id })} className="btn btn-ghost" style={{ marginLeft: "auto" }}>Public page →</button>
              </div>
            </div>
            <h3 className="t-display" style={{ fontSize: 22, marginTop: 40, marginBottom: 12 }}>Starting five</h3>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
              {PLAYERS.slice(0, 5).map(p => (
                <div key={p.id} className="card-flat" style={{ padding: 12, textAlign: "center" }}>
                  <div style={{ width: 56, height: 56, borderRadius: "50%", background: `linear-gradient(135deg, ${team.color}, var(--ink))`, margin: "0 auto", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, color: team.color === "#FFFFFF" ? "#000" : "#fff" }}>{p.handle[0]}</div>
                  <div style={{ fontWeight: 600, fontSize: 13, marginTop: 8 }}>{p.handle}</div>
                  <div className="t-mono" style={{ fontSize: 10, color: "var(--text-mute)" }}>{p.role.toUpperCase()}</div>
                </div>
              ))}
            </div>
          </>
        )}

        {tab === "matches" && (
          <>
            <h1 className="t-display" style={{ fontSize: 36, marginBottom: 16 }}>Match history</h1>
            <div className="card-flat">
              <div style={{ display: "grid", gridTemplateColumns: "60px 1fr 1fr 100px 90px 60px", padding: "12px 20px", borderBottom: "1px solid var(--line)", fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--text-mute)", letterSpacing: "0.1em" }}>
                <span>DATE</span><span>EVENT</span><span>vs</span><span>K/D/A</span><span>RATING</span><span>RESULT</span>
              </div>
              {[
                ["MAY 18", "Vexel Spring Open · QF", "Mirage Collective", "24/14/8", "1.62", true],
                ["MAY 16", "Vexel Spring Open · R16", "Dune Wolves", "29/8/4", "2.18", true],
                ["MAY 14", "Vexel Spring Open · Group", "Beirut Bullets", "18/16/11", "1.04", false],
                ["MAY 09", "GCC Pro League S3 · Final", "Riyadh Royals", "31/11/6", "1.94", true],
                ["MAY 05", "GCC Pro League S3 · SF", "Cairo Sphinx", "22/15/9", "1.32", true],
                ["MAY 02", "GCC Pro League S3 · QF", "Bedouin Black", "26/12/5", "1.71", true],
                ["APR 28", "Vexel Open · Final", "Doha Demons", "19/17/12", "1.06", false],
              ].map((m, i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "60px 1fr 1fr 100px 90px 60px", padding: "14px 20px", borderBottom: i < 6 ? "1px solid var(--line)" : "none", alignItems: "center", fontSize: 13 }}>
                  <span className="t-mono" style={{ color: "var(--text-mute)", fontSize: 11 }}>{m[0]}</span>
                  <span>{m[1]}</span><span style={{ color: "var(--text-dim)" }}>{m[2]}</span>
                  <span className="t-mono" style={{ color: "var(--cyan)" }}>{m[3]}</span>
                  <span className="t-mono" style={{ color: m[4] >= "1.5" ? "var(--lime)" : "var(--text)", fontWeight: 700 }}>{m[4]}</span>
                  <span className={"pill " + (m[5] ? "pill-win" : "pill-past")} style={{ fontSize: 10, padding: "2px 8px", justifyContent: "center" }}>{m[5] ? "W" : "L"}</span>
                </div>
              ))}
            </div>
          </>
        )}

        {tab === "earnings" && (
          <>
            <h1 className="t-display" style={{ fontSize: 36, marginBottom: 16 }}>Earnings</h1>
            <div className="grid-4">
              {[["AED 248,200", "Total earned", "var(--cyan)"], ["AED 24,200", "Available", "var(--lime)"], ["AED 12,000", "Pending", "var(--gold)"], ["AED 212,000", "Paid out", "var(--text-dim)"]].map(([v, l, c]) => (
                <div key={l} className="card-flat" style={{ padding: 24 }}>
                  <div className="t-eyebrow">{l}</div>
                  <div className="t-display" style={{ fontSize: 30, color: c, marginTop: 4 }}>{v}</div>
                </div>
              ))}
            </div>
            <h3 className="t-display" style={{ fontSize: 22, marginTop: 32, marginBottom: 12 }}>Transactions</h3>
            <div className="card-flat">
              {[
                ["MAY 17", "Cash-out · Emirates NBD ••2204", "var(--text-mute)", "−AED 24,200"],
                ["MAY 09", "GCC Pro League S3 · 1st place prize", "var(--lime)", "+AED 108,000"],
                ["APR 28", "Vexel Open · 2nd place prize", "var(--lime)", "+AED 38,400"],
                ["APR 12", "Cash-out · Emirates NBD ••2204", "var(--text-mute)", "−AED 64,000"],
                ["MAR 22", "Riyadh Major Qualifier · 1st prize", "var(--lime)", "+AED 72,000"],
              ].map((tx, i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "80px 1fr auto", gap: 16, padding: "14px 20px", borderBottom: i < 4 ? "1px solid var(--line)" : "none", alignItems: "center" }}>
                  <span className="t-mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>{tx[0]}</span>
                  <span style={{ fontSize: 13 }}>{tx[1]}</span>
                  <span className="t-mono" style={{ fontWeight: 700, color: tx[2] }}>{tx[3]}</span>
                </div>
              ))}
            </div>
          </>
        )}

        {tab === "settings" && (
          <>
            <h1 className="t-display" style={{ fontSize: 36, marginBottom: 24 }}>Settings</h1>
            <div className="card-flat" style={{ padding: 32 }}>
              <div className="t-eyebrow" style={{ color: "var(--cyan)", marginBottom: 16 }}>Profile</div>
              <div className="grid-2" style={{ gap: 12 }}>
                <div><label className="label">Handle</label><input className="input" defaultValue="sandstorm" /></div>
                <div><label className="label">Email</label><input className="input" defaultValue="sandstorm@vexel.com" /></div>
                <div><label className="label">Country</label><input className="input" defaultValue="UAE" /></div>
                <div><label className="label">Main game</label><input className="input" defaultValue="Valorant" /></div>
              </div>
              <div className="t-eyebrow" style={{ color: "var(--cyan)", marginTop: 32, marginBottom: 16 }}>Notifications</div>
              {[
                ["Email me when matches are 15 minutes from starting", true],
                ["Push me on iOS / Android for live tournament invites", true],
                ["Weekly drop newsletter", true],
                ["Marketing from partner publishers", false],
              ].map(([l, on], i) => (
                <div key={i} className="row" style={{ padding: "10px 0", borderBottom: i < 3 ? "1px solid var(--line)" : "none" }}>
                  <span style={{ flex: 1, fontSize: 14 }}>{l}</span>
                  <div style={{ width: 40, height: 22, borderRadius: 11, background: on ? "var(--cyan)" : "var(--surface-3)", padding: 2 }}>
                    <div style={{ width: 18, height: 18, borderRadius: "50%", background: on ? "var(--ink)" : "var(--text-dim)", marginLeft: on ? 18 : 0, transition: "margin 0.15s" }} />
                  </div>
                </div>
              ))}
              <button className="btn btn-primary" style={{ marginTop: 24 }}>Save changes</button>
            </div>
          </>
        )}
      </div>
    </main>
  );
}

// ─── ContactForm component (used inside ContactPage) ──────────────────────
function ContactForm() {
  const [data, setData] = useState({ firstName: "", lastName: "", email: "", phone: "", topic: "General enquiry", message: "" });
  const [status, setStatus] = useState("idle");
  const [error, setError] = useState("");
  const onSubmit = async (e) => {
    e.preventDefault(); setStatus("sending"); setError("");
    const r = await window.VexelAPI.contact(data);
    if (r.ok) setStatus("ok"); else { setStatus("err"); setError(r.error || "Please try again."); }
  };
  if (status === "ok") return (
    <div className="card-flat" style={{ padding: 48, textAlign: "center" }}>
      <div className="t-eyebrow" style={{ color: "var(--lime)" }}>Message sent</div>
      <h2 className="t-display" style={{ fontSize: 40, marginTop: 12, color: "var(--white)" }}>Thank you.</h2>
      <p style={{ color: "var(--text-dim)", marginTop: 12, fontSize: 15 }}>Our concierge replies within 24 hours, 7 days a week.</p>
    </div>
  );
  return (
    <form onSubmit={onSubmit} className="card-flat" style={{ padding: 32 }}>
      <div className="t-eyebrow" style={{ color: "var(--cyan)", marginBottom: 24 }}>Send a message</div>
      <div className="grid-2" style={{ gap: 12 }}>
        <div><label className="label">First name</label><input className="input" required value={data.firstName} onChange={e => setData({ ...data, firstName: e.target.value })} /></div>
        <div><label className="label">Last name</label><input className="input" required value={data.lastName} onChange={e => setData({ ...data, lastName: e.target.value })} /></div>
        <div><label className="label">Email</label><input className="input" type="email" required value={data.email} onChange={e => setData({ ...data, email: e.target.value })} /></div>
        <div><label className="label">Phone</label><input className="input" type="tel" value={data.phone} onChange={e => setData({ ...data, phone: e.target.value })} /></div>
      </div>
      <div style={{ marginTop: 12 }}>
        <label className="label">What's this about?</label>
        <select className="input" value={data.topic} onChange={e => setData({ ...data, topic: e.target.value })}>
          <option>General enquiry</option><option>Tournament registration</option><option>Press / Media</option><option>Partnership</option><option>Career</option><option>Anti-cheat report</option>
        </select>
      </div>
      <div style={{ marginTop: 12 }}><label className="label">Message</label><textarea className="input" rows="6" required value={data.message} onChange={e => setData({ ...data, message: e.target.value })} /></div>
      {error && <div style={{ marginTop: 12, padding: "8px 12px", color: "var(--red)", fontSize: 13, border: "1px solid var(--red)", borderRadius: 4 }}>{error}</div>}
      <button type="submit" disabled={status === "sending"} className="btn btn-primary btn-lg" style={{ marginTop: 20 }}>
        {status === "sending" ? "Sending..." : "Send message →"}
      </button>
    </form>
  );
}

Object.assign(window, { AboutPage, CareersPage, ContactPage, SignInPage, DashboardPage, ContactForm, CareersForm });