/* Teams index — constructors ranked by Season 6. */
function TeamsPage() {
  const FD = window.FD;
  const standings = FD.teamStandings(FD.currentSid).filter(t => t.roster.length);
  return (
    <div style={{ maxWidth: 1280, margin: "0 auto", padding: "48px 36px 90px" }}>
      <PageHead kicker={`${FD.season} · ${standings.length} Constructors`} title="Teams"
        right={<span style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".1em", color: "var(--ink-3)", textTransform: "uppercase", paddingBottom: 8 }}>Constructors' standings</span>} />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: 14 }}>
        {standings.map((t, i) => (
          <a key={t.id} href={`team.html?t=${t.id}`} className="fd-card" style={{ textDecoration: "none", position: "relative", overflow: "hidden",
            border: "1px solid var(--line)", borderRadius: 16, background: "var(--panel)", display: "block", transition: "transform .2s, border-color .2s" }}
            onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-5px)"; e.currentTarget.style.borderColor = t.color; }}
            onMouseLeave={e => { e.currentTarget.style.transform = "none"; e.currentTarget.style.borderColor = "var(--line)"; }}>
            <div style={{ position: "relative", padding: "22px 22px 18px", background: `linear-gradient(150deg, color-mix(in srgb, ${t.color} 26%, var(--panel)), var(--panel))` }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <div>
                  <span className="display" style={{ fontSize: 15, color: i === 0 ? "var(--accent)" : "rgba(255,255,255,.7)" }}>P{i + 1}</span>
                  <div className="display" style={{ fontSize: 40, color: "var(--ink)", lineHeight: .9, marginTop: 6 }}>{t.name}</div>
                  <div style={{ fontFamily: "var(--ui)", fontSize: 13, color: "var(--ink-3)", marginTop: 4 }}>{t.full}</div>
                </div>
                <TeamLogo team={t} size={62} />
              </div>
            </div>
            <div style={{ padding: "14px 22px 18px" }}>
              <div style={{ display: "flex", flexWrap: "wrap", gap: "4px 10px", marginBottom: 16 }}>
                {t.roster.map(d => (
                  <span key={d.num} style={{ fontFamily: "var(--ui)", fontSize: 13, color: "var(--ink-2)" }}>{d.username} <span style={{ color: "var(--ink-4)", fontFamily: "var(--mono)", fontSize: 11 }}>#{d.num}</span></span>
                ))}
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", borderTop: "1px solid var(--line-soft)", paddingTop: 14 }}>
                <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-4)", letterSpacing: ".06em" }}>{t.wins} WINS · {t.podiums} PODIUMS</span>
                <span style={{ display: "flex", alignItems: "baseline", gap: 5 }}>
                  <AnimatedNumber value={t.points} className="display" style={{ fontSize: 28, color: "var(--ink)" }} />
                  <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--ink-4)", letterSpacing: ".1em" }}>PTS</span>
                </span>
              </div>
            </div>
          </a>
        ))}
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<SiteChrome active="teams"><TeamsPage /></SiteChrome>);