// Gaming landing — live match HUD hero, tactics board, ticker, club picker

/* ===== Last-user persistence (localStorage) ===== */
const PM_LAST_USER_KEY = "pm_last_user";
const readLastUser = () => {
  try {
    const s = localStorage.getItem(PM_LAST_USER_KEY);
    if (!s) return null;
    const p = JSON.parse(s);
    if (p && p.name) return p;
  } catch (e) {}
  return null;
};
const writeLastUser = (name, password) => {
  try {
    const clean = (name || "").toString().trim();
    if (!clean) return;
    // Initials seeded from the username; later overwritten by nd2_top.asp
    // with the real club name + its initials once the session lands.
    const initials = clean.replace(/[^A-Za-z0-9]/g, "").slice(0, 2).toUpperCase() || "PM";
    const entry = { name: clean, initials };
    if (password) entry.password = password;
    localStorage.setItem(PM_LAST_USER_KEY, JSON.stringify(entry));
  } catch (e) {}
};
const clearLastUser = () => { try { localStorage.removeItem(PM_LAST_USER_KEY); } catch (e) {} };

/* ===== REUSABLE LOGIN FORM (posts to default.asp?action=login) ===== */
const LoginForm = ({ username, setUsername, pwd, setPwd, showPwd, setShowPwd, onForgot, onBack, title, subtitle }) => {
  const [keepSignedIn, setKeepSignedIn] = React.useState(true);
  const onSubmit = () => {
    // Only persist the saved-user chip when the visitor opted in. If the box
    // is unchecked, actively clear any previous entry so a shared machine
    // doesn't leak a previous login.
    if (keepSignedIn) writeLastUser(username, pwd); else clearLastUser();
  };
  return (
  <form className="qlogin__form" method="POST" action="default.asp?action=login" onSubmit={onSubmit}>
    {onBack && (
      <button type="button" className="qlogin__back" onClick={onBack}>‹ Back</button>
    )}
    <div className="qlogin__form-head">
      <b>{title}</b>
      <span>{subtitle}</span>
    </div>
    <label className="qlogin__field">
      <span>Username or email</span>
      <div className="qlogin__input-wrap">
        <span className="qlogin__lead">@</span>
        <input
          type="text"
          name="utilizador"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          placeholder="e.g. Sporting_CEO"
          autoFocus
          autoComplete="username"
          className="qlogin__input--lead"
        />
      </div>
    </label>
    <label className="qlogin__field">
      <span>Password</span>
      <div className="qlogin__input-wrap">
        <input
          type={showPwd ? "text" : "password"}
          name="password"
          value={pwd}
          onChange={(e) => setPwd(e.target.value)}
          placeholder="Enter your password"
          autoComplete="current-password"
        />
        <button type="button" className="qlogin__eye" onClick={() => setShowPwd(s => !s)} aria-label={showPwd ? "Hide password" : "Show password"}>
          {showPwd ? (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-10-8-10-8a18.4 18.4 0 0 1 5.06-5.94M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 10 8 10 8a18.5 18.5 0 0 1-2.16 3.19M9.88 9.88a3 3 0 0 0 4.24 4.24"/><line x1="2" y1="2" x2="22" y2="22"/></svg>
          ) : (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M2 12s3-8 10-8 10 8 10 8-3 8-10 8S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>
          )}
        </button>
      </div>
    </label>
    <div className="qlogin__row">
      <label className="qlogin__check">
        <input type="checkbox" checked={keepSignedIn} onChange={(e) => setKeepSignedIn(e.target.checked)}/>
        <span>Keep me signed in</span>
      </label>
      <button type="button" className="qlogin__forgot" onClick={onForgot}>Forgot?</button>
    </div>
    <button type="submit" className="qlogin__primary" disabled={username.length < 1 || pwd.length < 1}>
      ▶ Sign in
    </button>
    <div className="qlogin__divider"><span>or</span></div>
    <button type="button" className="qlogin__alt" onClick={() => { if (typeof callGmail === 'function') callGmail(); else parent.location = 'gmail.asp'; }}>
      <svg width="14" height="14" viewBox="0 0 18 18"><path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.17-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.79 2.72v2.25h2.9c1.7-1.57 2.69-3.88 2.69-6.61z"/><path fill="#34A853" d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.9-2.25c-.8.54-1.83.86-3.06.86-2.36 0-4.35-1.59-5.06-3.73H.95v2.33A9 9 0 0 0 9 18z"/><path fill="#FBBC05" d="M3.94 10.7a5.4 5.4 0 0 1 0-3.42V4.96H.95a9 9 0 0 0 0 8.07l3-2.33z"/><path fill="#EA4335" d="M9 3.58c1.32 0 2.5.46 3.44 1.35l2.58-2.58C13.46.89 11.43 0 9 0A9 9 0 0 0 .95 4.96l3 2.33C4.65 5.17 6.64 3.58 9 3.58z"/></svg>
      Sign in with Google
    </button>
  </form>
  );
};

/* ===== FORGOT-PASSWORD FORM (posts to default.asp?action=rpassword) ===== */
const ForgotForm = ({ onBack }) => {
  const [email, setEmail] = React.useState("");
  return (
    <form className="qlogin__form" method="POST" action="default.asp?action=rpassword">
      <button type="button" className="qlogin__back" onClick={onBack}>‹ Back to sign in</button>
      <div className="qlogin__form-head">
        <b>Reset your password</b>
        <span>We'll send a reset link to your email</span>
      </div>
      <label className="qlogin__field">
        <span>Email address</span>
        <div className="qlogin__input-wrap">
          <input
            type="email"
            name="emailRec"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="you@example.com"
            autoFocus
            autoComplete="email"
            required
          />
        </div>
      </label>
      <button type="submit" className="qlogin__primary" disabled={!email.includes("@")}>
        ▶ Send reset link
      </button>
      <div className="qlogin__help">
        Remembered it? <button type="button" className="qlogin__inline-link" onClick={onBack}>Back to sign in</button>
      </div>
    </form>
  );
};

/* ===== QUICK LOGIN (HUD top-bar dropdown) ===== */
const QuickLogin = () => {
  const [saved, setSaved] = React.useState(() => readLastUser());
  const [open, setOpen] = React.useState(false);
  // "menu" (saved-user landing view) | "password" | "forgot"
  const [view, setView] = React.useState(saved ? "menu" : "password");
  const loginName = (s) => s ? (s.user || s.name || "") : "";
  const displayName = (s) => s ? (s.alias || s.user || s.name || "") : "";
  const [username, setUsername] = React.useState(loginName(saved));
  const [pwd, setPwd] = React.useState("");
  const [showPwd, setShowPwd] = React.useState(false);
  const wrapRef = React.useRef(null);
  const closeTimer = React.useRef(null);
  React.useEffect(() => {
    const onDoc = (e) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) {
        setOpen(false);
        setView(saved ? "menu" : "password");
      }
    };
    document.addEventListener("click", onDoc);
    return () => document.removeEventListener("click", onDoc);
  }, [saved]);
  const handleEnter = () => {
    if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; }
    setOpen(true);
    if (!saved) setView("password");
  };
  const handleLeave = () => {
    if (closeTimer.current) clearTimeout(closeTimer.current);
    closeTimer.current = setTimeout(() => {
      if (username.length > 0 || pwd.length > 0) return;
      if (wrapRef.current && wrapRef.current.contains(document.activeElement)) return;
      setOpen(false); setView(saved ? "menu" : "password");
    }, 300);
  };
  const googleSignIn = () => { if (typeof callGmail === 'function') callGmail(); else parent.location = 'gmail.asp'; };
  const forget = () => {
    clearLastUser();
    setSaved(null);
    setUsername("");
    setView("password");
  };

  const autoSubmitRef = React.useRef(null);
  const onPillClick = (e) => {
    e.stopPropagation();
    // If a password is saved alongside the entry, submit the login form
    // directly — the returning visitor intentionally opted in at the last
    // sign-in. Otherwise fall back to the existing open-the-menu behaviour.
    if (saved && saved.password && autoSubmitRef.current) {
      autoSubmitRef.current.submit();
      return;
    }
    setOpen(o => !o);
    setView(saved ? "menu" : "password");
  };
  return (
    <div className="qlogin" ref={wrapRef} onMouseEnter={handleEnter} onMouseLeave={handleLeave}>
      {saved && saved.password && (
        <form ref={autoSubmitRef} method="POST" action="default.asp?action=login" style={{ display: "none" }}>
          <input type="hidden" name="utilizador" value={loginName(saved)}/>
          <input type="hidden" name="password" value={saved.password}/>
        </form>
      )}
      {saved ? (
        <button className="qlogin__btn" onClick={onPillClick}>
          <span className="qlogin__avatar">{saved.initials}</span>
          <span className="qlogin__main">
            <span className="qlogin__hello">Login to</span>
            <b className="qlogin__name">{saved.club || displayName(saved)}</b>
          </span>
          <span className="qlogin__caret">▾</span>
        </button>
      ) : (
        <button className="gbtn gbtn--ghost" onClick={(e) => { e.stopPropagation(); setOpen(o => !o); setView("password"); }}>LOG IN</button>
      )}
      {open && (
        <div className="qlogin__menu" onClick={(e) => e.stopPropagation()}>
          {saved && view === "menu" && (
            <>
              <div className="qlogin__card">
                <span className="qlogin__avatar qlogin__avatar--lg">{saved.initials}</span>
                <div>
                  <b>{displayName(saved)}</b>
                  {saved.club && <span className="qlogin__sub">{saved.club}</span>}
                </div>
              </div>
              <button type="button" className="qlogin__primary" onClick={() => { setUsername(loginName(saved)); setView("password"); }}>
                ▶ Sign in as {displayName(saved)}
              </button>
              <div className="qlogin__divider"><span>or</span></div>
              <button type="button" className="qlogin__alt" onClick={googleSignIn}>
                <svg width="14" height="14" viewBox="0 0 18 18"><path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.17-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.79 2.72v2.25h2.9c1.7-1.57 2.69-3.88 2.69-6.61z"/><path fill="#34A853" d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.9-2.25c-.8.54-1.83.86-3.06.86-2.36 0-4.35-1.59-5.06-3.73H.95v2.33A9 9 0 0 0 9 18z"/><path fill="#FBBC05" d="M3.94 10.7a5.4 5.4 0 0 1 0-3.42V4.96H.95a9 9 0 0 0 0 8.07l3-2.33z"/><path fill="#EA4335" d="M9 3.58c1.32 0 2.5.46 3.44 1.35l2.58-2.58C13.46.89 11.43 0 9 0A9 9 0 0 0 .95 4.96l3 2.33C4.65 5.17 6.64 3.58 9 3.58z"/></svg>
                Sign in with Google
              </button>
              <button type="button" className="qlogin__alt" onClick={() => { setUsername(""); setView("password"); }}>
                Sign in with different account
              </button>
              <button type="button" className="qlogin__forget" onClick={forget}>Forget this account</button>
            </>
          )}
          {view === "password" && (
            <LoginForm
              username={username} setUsername={setUsername}
              pwd={pwd} setPwd={setPwd}
              showPwd={showPwd} setShowPwd={setShowPwd}
              onForgot={() => setView("forgot")}
              onBack={saved ? () => { setView("menu"); setPwd(""); setShowPwd(false); } : null}
              title={saved ? "Sign in with password" : "Sign in"}
              subtitle={saved ? "Use your PManager credentials" : "Welcome back to PManager"}
            />
          )}
          {view === "forgot" && (
            <ForgotForm onBack={() => setView("password")}/>
          )}
        </div>
      )}
    </div>
  );
};

/* ===== Flag helper — sigla → 🇽🇽 emoji ===== */
const SIGLA_TO_ISO = { EN: "GB", AR: "SA", BR: "BR", ARG: "AR", AL: "DE" };
const siglaToFlag = (sigla) => {
  if (!sigla) return "";
  const key = String(sigla).toUpperCase();
  const iso = (SIGLA_TO_ISO[key] || key).slice(0, 2);
  if (!/^[A-Z]{2}$/.test(iso)) return "";
  const A = 0x1F1E6, base = "A".charCodeAt(0);
  return String.fromCodePoint(A + iso.charCodeAt(0) - base) + String.fromCodePoint(A + iso.charCodeAt(1) - base);
};

/* ===== LANGUAGE PICKER ===== */
const LangPicker = () => {
  const d = (window.PM_DATA || {});
  const langs = d.languages || [];
  const current = d.currentLanguage || "";
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("click", onDoc);
    return () => document.removeEventListener("click", onDoc);
  }, []);
  const pick = (sigla) => {
    if (!sigla || sigla === current) { setOpen(false); return; }
    window.location.href = "default.asp?action=idioma&linguagem=" + encodeURIComponent(sigla);
  };
  const cur = langs.find(l => l.sigla === current) || langs[0] || { sigla: "", descricao: "" };
  return (
    <div className="langp" ref={ref}>
      <button type="button" className="langp__btn" onClick={(e) => { e.stopPropagation(); setOpen(o => !o); }} aria-label="Language">
        <span className="langp__flag">{siglaToFlag(cur.sigla)}</span>
        <span className="langp__code">{cur.sigla}</span>
        <span className="langp__caret">▾</span>
      </button>
      {open && (
        <div className="langp__menu" onClick={(e) => e.stopPropagation()}>
          {langs.map(l => (
            <button key={l.sigla} type="button" className={"langp__opt" + (l.sigla === current ? " is-active" : "")} onClick={() => pick(l.sigla)}>
              <span className="langp__flag">{siglaToFlag(l.sigla)}</span>
              <span className="langp__name">{l.descricao}</span>
              <span className="langp__code langp__code--mute">{l.sigla}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

/* ===== TOP BAR — HUD style (V1 Clubhouse Door) ===== */
const HudTopBar = () => {
  const d = (window.PM_DATA || {});
  const stats = d.stats || {};
  const T = d.t || {};
  return (
    <>
      <div className="util-strip">
        <div className="util-strip__left">
          <a href="manual.asp">{T.rules || "Rules"}</a>
          <a href="contactos.asp">{T.help || "Help"}</a>
          <a href="privacy_policy.asp">{T.privacy || "Privacy Policy"}</a>
          <a href="tos.asp">{T.terms || "Terms of Service"}</a>
        </div>
        <div className="util-strip__right">
          {stats.online ? (
            <span className="util-strip__live"><i className="dot"/> <b>{stats.online}</b> {T.playingNow || "playing now"}</span>
          ) : null}
          <LangPicker/>
        </div>
      </div>
      <header className="hud-top">
        <div className="hud-top__left">
          <a href="default.asp"><img src="/images/pmanager-logo.png" alt="PManager" className="hud-top__logo"/></a>
          <div className="hud-top__wordmark">
            <b>PMANAGER</b>
            <span>{T.brandTagline || "Football Manager MMO · since 2008"}</span>
          </div>
        </div>
        <div className="hud-top__mid">
          <div className="hud-stat">
            <span className="hud-stat__label">{T.season || "Season"}</span>
            <b className="hud-stat__num">{stats.season || ""}</b>
          </div>
          <div className="hud-stat__sep" aria-hidden/>
          <div className="hud-stat">
            <span className="hud-stat__label">{T.week || "Week"}</span>
            <b className="hud-stat__num">{stats.week || ""}</b>
          </div>
          <div className="hud-stat__sep" aria-hidden/>
          <div className="hud-stat">
            <span className="hud-stat__label"><span className="hud-top__livedot"/> {T.matchesLive || "Matches live"}</span>
            <b className="hud-stat__num hud-stat__num--live">{stats.matchesLive || ""}</b>
          </div>
        </div>
        <div className="hud-top__right">
          <QuickLogin/>
          <a href="#register" className="cta-register">▶ {T.getTeam || "GET A TEAM"}</a>
        </div>
      </header>
    </>
  );
};

/* ===== TRANSFER / ACHIEVEMENT TICKER ===== */
const Ticker = () => {
  const items = [
    { t: "TRANSFER", body: "Rafa Neves (19) → Juventino · €1.4M" },
    { t: "ACHIEVEMENT", body: "Juventino unlocked 'Treble Winner' 🏆" },
    { t: "GOAL", body: "GOAL! FC Odivelas 2-1 Pelouros · 73'" },
    { t: "SIGNING", body: "Colin Davidson → Saraiva · €420k · 4-yr" },
    { t: "PROMOTED", body: "Giannis promoted to Division B-1" },
    { t: "RED CARD", body: "Pelouros — Marques sent off · 78'" },
    { t: "TRANSFER", body: "Skywalker66 sold Vitor Reis · €3.8M" },
    { t: "MATCH", body: "KICKOFF · Cup QF · Giant vs. Alas" },
    { t: "ACHIEVEMENT", body: "Mafalda hit 1000 games managed" },
    { t: "TROPHY", body: "Giants FC won Division B-4 🏆" },
  ];
  const toneFor = (t) => t === "GOAL" || t === "RED CARD" ? "hot" : t === "ACHIEVEMENT" || t === "TROPHY" ? "gold" : t === "PROMOTED" ? "good" : "warn";
  const row = [...items, ...items];
  return (
    <div className="ticker" aria-label="Live ticker">
      <div className="ticker__label">LIVE</div>
      <div className="ticker__track">
        <div className="ticker__row">
          {row.map((it, i) => (
            <span key={i} className={"ticker__item ticker__item--" + toneFor(it.t)}>
              <b>{it.t}</b><span>{it.body}</span>
              <em>•</em>
            </span>
          ))}
        </div>
      </div>
    </div>
  );
};

/* ===== LIVE MATCH HUD HERO ===== */
const MatchHudHero = () => {
  const d = (window.PM_DATA || {});
  const lm = d.liveMatch || null;

  // Default kit palette (green home / red away) used when clubes.cor_shirt is empty
  // and pm_parse_kit returned its neutral grey fallback.
  const GREY = "#888888";
  const defaultHome = { body: "#2a6a3a", collar: "#f4c040", shorts: "#1e5e30" };
  const defaultAway = { body: "#b53a3a", collar: "#ffffff", shorts: "#7a2020" };
  const applyDefault = (side, def) => ({
    ...side,
    body:   (!side.body   || side.body   === GREY) ? def.body   : side.body,
    collar: (!side.collar || side.collar === "#222222") ? def.collar : side.collar,
    shorts: (!side.shorts || side.shorts === "#222222") ? def.shorts : side.shorts,
  });

  // Seed clock/score from server pick when present; otherwise fall back to demo values.
  const rawSeed = lm || {
    home: { name: "FC ODIVELAS", sigla: "FCO", body: "#2a6a3a", collar: "#f4c040", shorts: "#1e5e30", score: 2, manager: "", human: true, country: "PT", paisId: 0 },
    away: { name: "PELOUROS FC", sigla: "PEL", body: "#b53a3a", collar: "#ffffff", shorts: "#7a2020", score: 1, manager: "", human: false, country: "PT", paisId: 0 },
    minute: 72,
    jogoId: 0,
    events: [],
  };
  const seed = {
    ...rawSeed,
    home: applyDefault(rawSeed.home, defaultHome),
    away: applyDefault(rawSeed.away, defaultAway),
  };

  const initials = (s, fallback) => {
    const clean = (s || "").toString().replace(/[^A-Za-z]/g, "").toUpperCase();
    return (clean || (fallback || "")).slice(0, 3).padEnd(3, " ").trim();
  };
  const homeSigla = seed.home.sigla || initials(seed.home.name, "HOM");
  const awaySigla = seed.away.sigla || initials(seed.away.name, "AWY");

  const [min, setMin] = React.useState(seed.minute || 0);
  const [sec, setSec] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => {
      setSec(s => {
        if (s >= 59) { setMin(m => Math.min(m + 1, 125)); return 0; }
        return s + 1;
      });
    }, 1000);
    return () => clearInterval(id);
  }, []);

  const poss = 58 + Math.round(Math.sin(min / 4) * 6);
  const half = min > 90 ? "EXTRA TIME" : (min >= 45 ? "2ND HALF" : "1ST HALF");
  const matchId = seed.jogoId ? ("ID #" + seed.jogoId) : "ID #47-12-8321";
  const flagSrc = (seed.home.paisId && seed.home.paisId > 0) ? ("/img/bandeiras-small/" + seed.home.paisId + ".gif") : null;

  // Manager sub-lines: show real manager alias if team is human, else "CPU"
  const homeSub = lm ? (seed.home.human && seed.home.manager ? ("Home · " + seed.home.manager) : "Home · CPU") : "Home · 1,247 fans";
  const awaySub = lm ? (seed.away.human && seed.away.manager ? ("Away · " + seed.away.manager) : "Away · CPU") : "Away · visiting";

  // Event feed: when we have real events from the server, only show those whose
  // minute has already elapsed in the ticking clock — match the in-game behaviour
  // of only revealing events up to the current minute. Always anchor the feed
  // with a kick-off row at 0' and a half-time row at 45' once it's reached.
  // Fall back to static demo entries if the server had no match data.
  const liveRaw = (seed.events || []).filter(e => e.m <= min).map(e => ({
    m: e.m,
    kind: e.kind,
    text: (e.kind === "goal" ? "⚽ " : e.kind === "yellow" ? "🟨 " : e.kind === "red" ? "🟥 " : e.kind === "sub" ? "🔄 " : "") + e.text,
  }));
  if (lm) {
    liveRaw.push({ m: 0, kind: "kickoff", text: "🏁 Kick-off · " + seed.home.name + " vs " + seed.away.name });
    if (min >= 45) liveRaw.push({ m: 45, kind: "ht", text: "⏸ Half-time" });
  }
  liveRaw.sort((a, b) => b.m - a.m);
  const liveEvents = liveRaw.map(e => ({ m: e.m + "'", kind: e.kind, text: e.text }));
  const demoEvents = [
    { m: "72'", kind: "shot",   text: "Neves shoots from 20 yards — over the bar" },
    { m: "68'", kind: "corner", text: "Corner · " + seed.home.name },
    { m: "64'", kind: "sub",    text: "Substitution · " + seed.away.name },
    { m: "58'", kind: "goal",   text: "⚽ GOAL · Neves 58' · " + seed.home.name + " " + seed.home.score + "-" + seed.away.score + " " + seed.away.name },
    { m: "43'", kind: "yellow", text: "🟨 Yellow · Marques" },
    { m: "31'", kind: "goal",   text: "⚽ GOAL · " + seed.away.name },
    { m: "12'", kind: "goal",   text: "⚽ GOAL · " + seed.home.name },
  ];
  const events = lm ? liveEvents : demoEvents;

  return (
    <section className="hero-hud">
      <div className="hero-hud__illus" aria-hidden>
        <FMPitch/>
      </div>
      <div className="hero-hud__scanlines" aria-hidden/>

      <div className="hero-hud__inner">
        {/* LEFT — HUD scoreboard + copy */}
        <div className="hero-hud__left">
          <div className="hud-bracket hud-bracket--tl"/>
          <div className="hud-bracket hud-bracket--tr"/>
          <div className="hud-bracket hud-bracket--bl"/>
          <div className="hud-bracket hud-bracket--br"/>

          <div className="hero-hud__eyebrow">
            <span className="hero-hud__live">
              <span className="hero-hud__livedot"/>
              LIVE MATCH
              {flagSrc
                ? <img src={flagSrc} alt={seed.home.country} style={{height: 11, width: "auto", marginLeft: 8, verticalAlign: "middle", borderRadius: 1}}/>
                : <span style={{marginLeft: 8}}>· {(seed.home.country || "").toUpperCase()}</span>}
            </span>
            <span className="hero-hud__id">{matchId}</span>
          </div>

          <div className="score">
            <div className="score__team score__team--home">
              <div className="score__crest" style={{background: "linear-gradient(135deg, " + seed.home.body + ", " + seed.home.shorts + ")", borderColor: seed.home.collar}}><span>{homeSigla}</span></div>
              <div className="score__info">
                <div className="score__name">{(seed.home.name || "").toUpperCase()}</div>
                <div className="score__sub">{homeSub}</div>
              </div>
              <div className="score__num">{seed.home.score}</div>
            </div>
            <div className="score__clock">
              <div className="score__time">{String(min).padStart(2,"0")}:{String(sec).padStart(2,"0")}</div>
              <div className="score__half">{half}</div>
            </div>
            <div className="score__team score__team--away">
              <div className="score__num">{seed.away.score}</div>
              <div className="score__info">
                <div className="score__name">{(seed.away.name || "").toUpperCase()}</div>
                <div className="score__sub">{awaySub}</div>
              </div>
              <div className="score__crest" style={{background: "linear-gradient(135deg, " + seed.away.body + ", " + seed.away.shorts + ")", borderColor: seed.away.collar}}><span>{awaySigla}</span></div>
            </div>
          </div>

          {/* possession + stats — server-pulled from per-country jogos row */}
          <div className="score-stats">
            <div className="score-stats__row">
              <span>POSSESSION</span>
              <div className="score-stats__bar">
                <div className="score-stats__fill" style={{width: poss + "%"}}/>
                <b className="score-stats__h">{poss}%</b>
                <b className="score-stats__a">{100 - poss}%</b>
              </div>
            </div>
            <div className="score-stats__grid">
              {(() => {
                const s = (lm && lm.stats) || {};
                const cell = (h, label, a) => (
                  <div><b>{h == null ? "—" : h}</b><span>{label}</span><b>{a == null ? "—" : a}</b></div>
                );
                return (
                  <>
                    {cell(s.shotsH, "SHOTS", s.shotsA)}
                    {cell(s.onTargetH, "ON TARGET", s.onTargetA)}
                    {cell(s.yellowsH, "YELLOW", s.yellowsA)}
                    {cell(s.redsH, "RED", s.redsA)}
                  </>
                );
              })()}
            </div>
          </div>

          <div className="hero-hud__copy">
            <h1 className="hero-hud__h1">
              This is <span>your</span> match.<br/>Take the manager's seat.
            </h1>
            <p className="hero-hud__lede">
              PManager is a free, real-time football management MMO. 12,847 managers are online right now — running clubs, signing teenagers, winning leagues. Your club is already waiting.
            </p>
            <div className="hero-hud__cta">
              <a href="#pick" className="gbtn gbtn--cta gbtn--xl">▶ GET A TEAM <kbd>ENTER</kbd></a>
              <a href="#how" className="gbtn gbtn--ghost gbtn--xl">HOW TO PLAY</a>
            </div>
            <div className="hero-hud__meta">
              <span>▸ FREE FOREVER</span>
              <span>▸ NO DOWNLOAD</span>
              <span>▸ SINCE 2008</span>
              <span>▸ 148 COUNTRIES</span>
            </div>
          </div>
        </div>

        {/* RIGHT — live commentary feed (absolute inside wrapper so it
            inherits the left panel's height and clips old events instead
            of stretching the row) */}
        <div className="hero-hud__feed-wrap">
          <aside className="hero-hud__feed">
            <div className="feed__head">
              <span>MATCH FEED</span>
              <span className="feed__dot"><span/> LIVE</span>
            </div>
            <div className="feed__list">
              {events.map((e, i) => (
                <div key={i} className={"feed__row feed__row--" + e.kind}>
                  <span className="feed__m">{e.m}</span>
                  <span className="feed__t">{e.text}</span>
                </div>
              ))}
            </div>
            <div className="feed__foot">ENGINE: MATCHSIM v4.2 · 90-MIN SIMULATION</div>
          </aside>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { HudTopBar, QuickLogin, LangPicker, Ticker, MatchHudHero });