/* Direction B — "Poster / Full-bleed" home/landing. Editorial magazine-cover energy: oversized type, featured leader, bold standings list. */ const { useState: useStateB, useEffect: useEffectB } = React; const TWEAK_DEFAULTS_B = /*EDITMODE-BEGIN*/{ "accent": "#FF3B2F", "theme": "dark" }/*EDITMODE-END*/; function NavB() { const links = ["Calendar", "Standings", "Drivers", "Teams", "Series"]; return (
); } function HeroB() { const FD = window.FD; const leader = FD.driversByPoints[0]; const team = FD.teamById[leader.team]; const r = FD.nextRace; const { d, h, m, s } = useCountdown(r && r.date); return (
{/* giant number watermark */}
{/* LEFT */}
{FD.season} · Championship Leader
{leader.username}
{team.name} CAR #{leader.num}
{/* stat line */}
{[["Points", leader.points], ["Wins", leader.wins], ["Podiums", leader.podiums], ["Poles", leader.poles]].map(([lab, val]) => (
{lab}
))}
Driver Profile →
{/* RIGHT — featured photo slot */}
{/* lower-third NEXT RACE strip */}
{r ? ( {r.offseason ? "Next Up · Offseason" : "Next Race"} {r.name} {r.circuit ? `${r.circuit} · ` : ""}{r.offseason ? (r.seasonLabel || "Offseason") : `Round ${r.rd}`}
{[["D", d], ["H", h], ["M", m], ["S", s]].map(([lab, val]) => ( {String(val).padStart(2, "0")} {lab} ))}
) : ( No Next Race No next race planned The countdown returns once the next round is scheduled. )}
); } function StandingsB() { const FD = window.FD; const rows = FD.driversByPoints.slice(0, 12); const max = rows[0].points; return (
Drivers' Championship

Standings

Full points grid →
{rows.map((dr, i) => { const team = FD.teamById[dr.team]; const lead = i === 0; return (
location.href = `driver.html?d=${dr.num}`} onMouseEnter={e => { if (!lead) e.currentTarget.style.background = "var(--panel)"; e.currentTarget.style.transform = "translateX(4px)"; }} onMouseLeave={e => { if (!lead) e.currentTarget.style.background = "transparent"; e.currentTarget.style.transform = "none"; }}> {String(i + 1).padStart(2, "0")}
{dr.username}
{team.full} · #{dr.num}
{dr.wins} W{dr.podiums} POD
PTS
); })}
); } function CalendarTimelineB() { const FD = window.FD; return (
{FD.season} — {FD.races.length} Rounds

The Schedule

{FD.races.map(r => { const done = r.status === "done", next = r.status === "next"; const dt = new Date(r.date); return (
e.currentTarget.style.opacity = 1} onMouseLeave={e => e.currentTarget.style.opacity = done ? .6 : 1}> {String(r.rd).padStart(2, "0")} {dt.toLocaleDateString("en-GB", { day: "2-digit", month: "short" }).toUpperCase()}
{r.name}
{r.circuit}
{done ? `🏆 ${r.winner}` : next ? "NEXT" : "—"}
); })}
); } function TeamsBandB() { const FD = window.FD; return (
Constructors

The Grid

All teams →
{FD.teamPoints.map((t, i) => { const roster = FD.drivers.filter(d => d.team === t.id); return (
location.href = `team.html?t=${t.id}`} onMouseEnter={e => e.currentTarget.style.transform = "translateY(-3px)"} onMouseLeave={e => e.currentTarget.style.transform = "none"}>
{t.name} P{i + 1}
{roster.map(d => `${d.username} #${d.num}`).join(" · ")}
PTS · {t.wins} W
); })}
); } function OffseasonB() { const FD = window.FD; return (
Between Seasons

Offseason Events

{FD.offseason.map((o, i) => (
{i === 0 &&
}
{o.year} {o.status}
{o.label}

{o.desc}

))}
); } function FooterB() { return ( ); } function AppB() { return ( ); } ReactDOM.createRoot(document.getElementById("root")).render();