/* 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 (
    <header style={{ position: "sticky", top: 0, zIndex: 40, backdropFilter: "blur(14px)",
      background: "color-mix(in srgb, var(--bg) 72%, transparent)", borderBottom: "1px solid var(--line)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "16px 36px", display: "flex", alignItems: "center" }}>
        <Logo size={19} />
        <nav style={{ marginLeft: "auto", display: "flex", gap: 26 }}>
          {links.map((l, i) => (
            <a key={l} href="#" style={{ fontFamily: "var(--mono)", fontWeight: 500, fontSize: 12, letterSpacing: ".14em",
              color: i === 1 ? "var(--ink)" : "var(--ink-3)", textDecoration: "none", textTransform: "uppercase",
              borderBottom: i === 1 ? "2px solid var(--accent)" : "2px solid transparent", paddingBottom: 4 }}
              onMouseEnter={e => e.currentTarget.style.color = "var(--ink)"}
              onMouseLeave={e => e.currentTarget.style.color = i === 1 ? "var(--ink)" : "var(--ink-3)"}>{l}</a>
          ))}
        </nav>
      </div>
    </header>
  );
}

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 (
    <section style={{ position: "relative", overflow: "hidden", borderBottom: "1px solid var(--line)",
      background: `radial-gradient(90% 120% at 78% 18%, color-mix(in srgb, ${team.color} 26%, transparent), transparent 60%)` }}>
      {/* giant number watermark */}
      <span className="display" aria-hidden="true" style={{ position: "absolute", right: "-2%", top: "-14%",
        fontSize: "clamp(280px, 42vw, 640px)", color: team.color, opacity: .12, lineHeight: .8, pointerEvents: "none", userSelect: "none" }}>
        {leader.num}
      </span>

      <div style={{ position: "relative", maxWidth: 1280, margin: "0 auto", padding: "60px 36px 0",
        display: "grid", gridTemplateColumns: "1.15fr .85fr", gap: 36, alignItems: "center", minHeight: 520 }}>
        {/* LEFT */}
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
            <span style={{ width: 30, height: 3, background: "var(--accent)" }} />
            <span className="eyebrow" style={{ color: "var(--ink-2)" }}>{FD.season} · Championship Leader</span>
          </div>
          <div className="display" style={{ fontSize: "clamp(64px, 9vw, 132px)", lineHeight: .84, color: "var(--ink)", marginBottom: 22 }}>
            <span style={{ WebkitTextStroke: `0px`, color: "var(--ink)" }}>{leader.username}</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 30, flexWrap: "wrap" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 9, background: team.color, color: "#0a0c10",
              fontFamily: "var(--ui)", fontWeight: 700, fontSize: 13, letterSpacing: ".04em", padding: "7px 13px", borderRadius: 8, textTransform: "uppercase" }}>
              <Flag code={leader.country} w={20} /> {team.name}
            </span>
            <span style={{ fontFamily: "var(--mono)", fontSize: 13, color: "var(--ink-3)", letterSpacing: ".08em" }}>CAR #{leader.num}</span>
          </div>
          {/* stat line */}
          <div style={{ display: "flex", gap: 30, marginBottom: 34 }}>
            {[["Points", leader.points], ["Wins", leader.wins], ["Podiums", leader.podiums], ["Poles", leader.poles]].map(([lab, val]) => (
              <div key={lab}>
                <AnimatedNumber value={val} className="display" style={{ fontSize: 40, color: "var(--ink)", display: "block", lineHeight: 1 }} />
                <span style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: ".16em", color: "var(--ink-3)", textTransform: "uppercase" }}>{lab}</span>
              </div>
            ))}
          </div>
          <a href={`driver.html?d=${leader.num}`} style={{ fontFamily: "var(--ui)", fontWeight: 700, fontSize: 14, textTransform: "uppercase", letterSpacing: ".03em",
            background: "var(--ink)", color: "var(--bg)", padding: "13px 24px", borderRadius: 10, textDecoration: "none" }}>Driver Profile →</a>
        </div>

        {/* RIGHT — featured photo slot */}
        <div style={{ position: "relative", height: 460, display: "flex", alignItems: "flex-end", justifyContent: "center" }}>
          <div style={{ position: "absolute", bottom: 0, width: "86%", height: "92%", borderRadius: "18px 18px 0 0",
            background: `linear-gradient(180deg, color-mix(in srgb, ${team.color} 26%, transparent), transparent 70%)`,
            border: `1px solid ${team.color}44`, borderBottom: "none" }} />
          <image-slot id="fd-leader" src={leader.photoUrl || undefined} shape="rounded" radius="16"
            placeholder={`Drop ${leader.username}'s photo`}
            style={{ position: "relative", width: "84%", height: "100%", filter: `drop-shadow(0 30px 50px color-mix(in srgb, ${team.color} 40%, transparent))` }}></image-slot>
        </div>
      </div>

      {/* lower-third NEXT RACE strip */}
      <div style={{ position: "relative", borderTop: "1px solid var(--line)", background: "color-mix(in srgb, var(--bg) 60%, transparent)", backdropFilter: "blur(6px)" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "16px 36px", display: "flex", alignItems: "center", gap: 22, flexWrap: "wrap" }}>
          {r ? (
            <React.Fragment>
              <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".2em", color: "var(--accent)", textTransform: "uppercase", display: "inline-flex", gap: 8, alignItems: "center" }}>
                <span className="live-dot" style={{ background: "var(--accent)" }} /> {r.offseason ? "Next Up · Offseason" : "Next Race"}
              </span>
              <Flag code={r.country} w={26} />
              <a href={r.id ? `race.html?r=${r.id}` : "#"} className="display" style={{ fontSize: 22, color: "var(--ink)", textDecoration: "none" }}>{r.name}</a>
              <span style={{ fontFamily: "var(--ui)", fontSize: 13, color: "var(--ink-3)" }}>{r.circuit ? `${r.circuit} · ` : ""}{r.offseason ? (r.seasonLabel || "Offseason") : `Round ${r.rd}`}</span>
              <div style={{ marginLeft: "auto", display: "flex", gap: 14, fontFamily: "var(--display)" }}>
                {[["D", d], ["H", h], ["M", m], ["S", s]].map(([lab, val]) => (
                  <span key={lab} style={{ display: "flex", alignItems: "baseline", gap: 3 }}>
                    <span style={{ fontSize: 28, color: "var(--ink)", fontVariantNumeric: "tabular-nums" }}>{String(val).padStart(2, "0")}</span>
                    <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--ink-3)" }}>{lab}</span>
                  </span>
                ))}
              </div>
            </React.Fragment>
          ) : (
            <React.Fragment>
              <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".2em", color: "var(--ink-3)", textTransform: "uppercase", display: "inline-flex", gap: 8, alignItems: "center" }}>
                <span style={{ width: 7, height: 7, borderRadius: "50%", border: "1px solid var(--ink-4)" }} /> No Next Race
              </span>
              <span className="display" style={{ fontSize: 22, color: "var(--ink-2)" }}>No next race planned</span>
              <span style={{ fontFamily: "var(--ui)", fontSize: 13, color: "var(--ink-3)" }}>The countdown returns once the next round is scheduled.</span>
            </React.Fragment>
          )}
        </div>
      </div>
    </section>
  );
}

function StandingsB() {
  const FD = window.FD;
  const rows = FD.driversByPoints.slice(0, 12);
  const max = rows[0].points;
  return (
    <section style={{ maxWidth: 1280, margin: "0 auto", padding: "70px 36px" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 30, gap: 20 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Drivers' Championship</div>
          <h2 className="display" style={{ fontSize: "clamp(40px,5.5vw,72px)", margin: 0, color: "var(--ink)" }}>Standings</h2>
        </div>
        <a href="standings.html" style={{ fontFamily: "var(--mono)", fontSize: 11.5, letterSpacing: ".14em", color: "var(--ink-2)", textDecoration: "none", textTransform: "uppercase", paddingBottom: 8 }}>Full points grid →</a>
      </div>
      <div style={{ display: "flex", flexDirection: "column" }}>
        {rows.map((dr, i) => {
          const team = FD.teamById[dr.team];
          const lead = i === 0;
          return (
            <div key={dr.num} className="fd-row" style={{ display: "grid", gridTemplateColumns: "64px 56px 1fr 130px 110px",
              alignItems: "center", gap: 16, padding: lead ? "20px 22px" : "15px 22px", borderTop: i === 0 ? "none" : "1px solid var(--line-soft)",
              borderRadius: lead ? 14 : 0, background: lead ? `linear-gradient(90deg, color-mix(in srgb,${team.color} 12%, var(--panel)), var(--panel))` : "transparent",
              position: "relative", transition: "background .2s, transform .15s", cursor: "pointer" }}
              onClick={() => 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"; }}>
              <span className="display" style={{ fontSize: lead ? 44 : 30, color: lead ? "var(--accent)" : "var(--ink-3)", lineHeight: 1 }}>{String(i + 1).padStart(2, "0")}</span>
              <Avatar driver={dr} size={lead ? 52 : 44} />
              <div style={{ minWidth: 0 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span className="display" style={{ fontSize: lead ? 30 : 23, color: "var(--ink)", lineHeight: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 }}>{dr.username}</span>
                  <Flag code={dr.country} w={20} />
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 9, marginTop: 5, whiteSpace: "nowrap", overflow: "hidden" }}>
                  <span style={{ width: 9, height: 9, borderRadius: 2, background: team.color, flex: "none" }} />
                  <span style={{ fontFamily: "var(--ui)", fontSize: 12.5, color: "var(--ink-3)", overflow: "hidden", textOverflow: "ellipsis" }}>{team.full}</span>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-4)", flex: "none" }}>· #{dr.num}</span>
                </div>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                <div style={{ height: 6, borderRadius: 99, background: "var(--line)", overflow: "hidden" }}>
                  <div className="fd-bar" style={{ height: "100%", width: (dr.points / max * 100) + "%", background: team.color, borderRadius: 99 }} />
                </div>
                <div style={{ display: "flex", gap: 12, fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--ink-4)", letterSpacing: ".06em" }}>
                  <span>{dr.wins} W</span><span>{dr.podiums} POD</span>
                </div>
              </div>
              <div style={{ textAlign: "right" }}>
                <AnimatedNumber value={dr.points} className="display" style={{ fontSize: lead ? 46 : 34, color: "var(--ink)", lineHeight: 1 }} />
                <span style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".14em", color: "var(--ink-3)", display: "block", marginTop: 2 }}>PTS</span>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

function CalendarTimelineB() {
  const FD = window.FD;
  return (
    <section style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "70px 36px" }}>
        <div className="eyebrow" style={{ marginBottom: 8 }}>{FD.season} — {FD.races.length} Rounds</div>
        <h2 className="display" style={{ fontSize: "clamp(40px,5.5vw,72px)", margin: "0 0 34px", color: "var(--ink)" }}>The Schedule</h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 48px" }}>
          {FD.races.map(r => {
            const done = r.status === "done", next = r.status === "next";
            const dt = new Date(r.date);
            return (
              <div key={r.rd} className="fd-row" style={{ display: "grid", gridTemplateColumns: "44px 80px 1fr auto", alignItems: "center", gap: 14,
                padding: "16px 14px", borderBottom: "1px solid var(--line-soft)", opacity: done ? .6 : 1,
                background: next ? "color-mix(in srgb, var(--accent) 8%, transparent)" : "transparent", borderRadius: next ? 10 : 0,
                transition: "opacity .2s" }}
                onMouseEnter={e => e.currentTarget.style.opacity = 1}
                onMouseLeave={e => e.currentTarget.style.opacity = done ? .6 : 1}>
                <span className="display" style={{ fontSize: 22, color: next ? "var(--accent)" : "var(--ink-4)" }}>{String(r.rd).padStart(2, "0")}</span>
                <span style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--ink-2)", letterSpacing: ".04em" }}>{dt.toLocaleDateString("en-GB", { day: "2-digit", month: "short" }).toUpperCase()}</span>
                <div>
                  <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
                    <Flag code={r.country} w={20} />
                    <span style={{ fontFamily: "var(--ui)", fontWeight: 700, fontSize: 16, color: "var(--ink)" }}>{r.name}</span>
                  </div>
                  <div style={{ fontFamily: "var(--ui)", fontSize: 12.5, color: "var(--ink-3)", marginTop: 2, paddingLeft: 29 }}>{r.circuit}</div>
                </div>
                <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".1em", textTransform: "uppercase",
                  color: next ? "var(--accent)" : done ? "var(--ink-2)" : "var(--ink-4)" }}>
                  {done ? `🏆 ${r.winner}` : next ? "NEXT" : "—"}
                </span>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function TeamsBandB() {
  const FD = window.FD;
  return (
    <section style={{ maxWidth: 1280, margin: "0 auto", padding: "70px 36px" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 30, gap: 20 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Constructors</div>
          <h2 className="display" style={{ fontSize: "clamp(40px,5.5vw,72px)", margin: 0, color: "var(--ink)" }}>The Grid</h2>
        </div>
        <a href="teams.html" style={{ fontFamily: "var(--mono)", fontSize: 11.5, letterSpacing: ".14em", color: "var(--ink-2)", textDecoration: "none", textTransform: "uppercase", paddingBottom: 8 }}>All teams →</a>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 14 }}>
        {FD.teamPoints.map((t, i) => {
          const roster = FD.drivers.filter(d => d.team === t.id);
          return (
            <div key={t.id} className="fd-row" style={{ position: "relative", overflow: "hidden", borderRadius: 14, cursor: "pointer",
              border: "1px solid var(--line)", background: "var(--panel)", display: "flex", alignItems: "center", transition: "transform .2s" }}
              onClick={() => location.href = `team.html?t=${t.id}`}
              onMouseEnter={e => e.currentTarget.style.transform = "translateY(-3px)"}
              onMouseLeave={e => e.currentTarget.style.transform = "none"}>
              <div style={{ width: 8, alignSelf: "stretch", background: t.color }} />
              <div style={{ padding: "18px 22px", flex: 1, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 15, minWidth: 0 }}>
                  <TeamLogo team={t} size={46} />
                  <div style={{ minWidth: 0 }}>
                    <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
                      <span className="display" style={{ fontSize: 30, color: "var(--ink)", lineHeight: 1 }}>{t.name}</span>
                      <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: t.color, letterSpacing: ".1em" }}>P{i + 1}</span>
                    </div>
                    <div style={{ fontFamily: "var(--ui)", fontSize: 13, color: "var(--ink-3)", marginTop: 4 }}>{roster.map(d => `${d.username} #${d.num}`).join("  ·  ")}</div>
                  </div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <AnimatedNumber value={t.points} className="display" style={{ fontSize: 34, color: "var(--ink)", lineHeight: 1 }} />
                  <span style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".14em", color: "var(--ink-3)", display: "block" }}>PTS · {t.wins} W</span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

function OffseasonB() {
  const FD = window.FD;
  return (
    <section style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "70px 36px 84px" }}>
        <div className="eyebrow" style={{ marginBottom: 8 }}>Between Seasons</div>
        <h2 className="display" style={{ fontSize: "clamp(40px,5.5vw,72px)", margin: "0 0 30px", color: "var(--ink)" }}>Offseason Events</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
          {FD.offseason.map((o, i) => (
            <div key={o.year} style={{ background: "var(--panel)", border: i === 0 ? "1px solid color-mix(in srgb, var(--accent) 50%, var(--line))" : "1px solid var(--line)",
              borderRadius: 14, padding: 22, position: "relative", overflow: "hidden" }}>
              {i === 0 && <div style={{ position: "absolute", right: -40, top: -40, width: 160, height: 160, borderRadius: "50%", background: "radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent), transparent 65%)" }} />}
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14, position: "relative" }}>
                <span className="display" style={{ fontSize: 30, color: "var(--ink)" }}>{o.year}</span>
                <span style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase",
                  color: i === 0 ? "var(--accent)" : "var(--ink-4)" }}>{o.status}</span>
              </div>
              <div className="display" style={{ fontSize: 26, color: "var(--ink)", marginBottom: 10, lineHeight: 1, position: "relative" }}>{o.label}</div>
              <p style={{ fontFamily: "var(--ui)", fontSize: 14, lineHeight: 1.5, color: "var(--ink-2)", margin: 0, position: "relative" }}>{o.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FooterB() {
  return (
    <footer style={{ background: "var(--bg)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "44px 36px", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 20 }}>
        <Logo size={18} />
        <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".12em", color: "var(--ink-4)", textTransform: "uppercase" }}>
          {window.FD.season} · {window.FD.teamPoints.length} Teams · {window.FD.driversByPoints.length} Drivers · Est. 2021
        </div>
      </div>
    </footer>
  );
}

function AppB() {
  return (
    <SiteChrome active="home">
      <HeroB />
      <StandingsB />
      <CalendarTimelineB />
      <TeamsBandB />
      <OffseasonB />
    </SiteChrome>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<AppB />);
