/* Formula Destruction — shared site chrome: header nav, footer, theme + tweaks.
   Loads AFTER components.jsx (uses Logo) and tweaks-panel.jsx (uses useTweaks). */
const { useState: useSiteState, useEffect: useSiteEffect } = React;

const FD_NAV = [
  { id: "home",      label: "Home",      href: "home-poster.html" },
  { id: "calendar",  label: "Calendar",  href: "calendar.html" },
  { id: "standings", label: "Standings", href: "standings.html" },
  { id: "drivers",   label: "Drivers",   href: "drivers.html" },
  { id: "teams",     label: "Teams",     href: "teams.html" },
  { id: "series",    label: "Series",    href: "series.html" },
  { id: "funfacts",  label: "Fun Facts", href: "funfacts.html" },
];

function SiteHeader({ active }) {
  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: "15px 36px", display: "flex", alignItems: "center", gap: 24 }}>
        <a href="home-poster.html" style={{ textDecoration: "none", display: "inline-flex" }}><Logo size={19} /></a>
        <nav style={{ marginLeft: "auto", display: "flex", gap: 24, alignItems: "center" }}>
          {FD_NAV.map(n => {
            const on = n.id === active;
            return (
              <a key={n.id} href={n.href} style={{ fontFamily: "var(--mono)", fontWeight: 500, fontSize: 12, letterSpacing: ".14em",
                color: on ? "var(--ink)" : "var(--ink-3)", textDecoration: "none", textTransform: "uppercase",
                borderBottom: on ? "2px solid var(--accent)" : "2px solid transparent", paddingBottom: 4, transition: "color .15s" }}
                onMouseEnter={e => e.currentTarget.style.color = "var(--ink)"}
                onMouseLeave={e => e.currentTarget.style.color = on ? "var(--ink)" : "var(--ink-3)"}>{n.label}</a>
            );
          })}
        </nav>
      </div>
    </header>
  );
}

function SiteFooter() {
  return (
    <footer style={{ background: "var(--bg)", borderTop: "1px solid var(--line)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "40px 36px", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 18 }}>
        <a href="home-poster.html" style={{ textDecoration: "none", display: "inline-flex" }}><Logo size={17} /></a>
        <div style={{ display: "flex", gap: 22, flexWrap: "wrap" }}>
          {FD_NAV.slice(1).map(n => (
            <a key={n.id} href={n.href} style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".12em", color: "var(--ink-3)", textDecoration: "none", textTransform: "uppercase" }}>{n.label}</a>
          ))}
        </div>
        <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>
  );
}

const SITE_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FF3B2F",
  "theme": "dark"
}/*EDITMODE-END*/;

function SiteChrome({ active, children }) {
  const [t, setTweak] = useTweaks(SITE_TWEAK_DEFAULTS);
  useSiteEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.setAttribute("data-theme", t.theme);
  }, [t.accent, t.theme]);
  return (
    <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
      <SiteHeader active={active} />
      <main style={{ flex: 1 }}>{children}</main>
      <SiteFooter />
      <TweaksPanel>
        <TweakSection label="Brand accent" />
        <TweakColor label="Accent" value={t.accent}
          options={["#FF3B2F", "#FFB400", "#2BD96B", "#2E9CFF", "#A66BFF"]}
          onChange={v => setTweak("accent", v)} />
        <TweakSection label="Theme" />
        <TweakRadio label="Mode" value={t.theme} options={["dark", "light"]} onChange={v => setTweak("theme", v)} />
      </TweaksPanel>
    </div>
  );
}

/* small shared building blocks for the inner pages */
function PageHead({ kicker, title, right }) {
  return (
    <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 20, flexWrap: "wrap", marginBottom: 30 }}>
      <div>
        <div className="eyebrow" style={{ marginBottom: 10 }}>{kicker}</div>
        <h1 className="display" style={{ fontSize: "clamp(40px,6vw,80px)", margin: 0, color: "var(--ink)", lineHeight: .9 }}>{title}</h1>
      </div>
      {right}
    </div>
  );
}

function PosBadge({ pos, size = 30, accent }) {
  return <span className="display" style={{ fontSize: size, lineHeight: 1, color: pos === 1 ? (accent || "var(--accent)") : "var(--ink-3)" }}>{String(pos).padStart(2, "0")}</span>;
}

Object.assign(window, { FD_NAV, SiteHeader, SiteFooter, SiteChrome, PageHead, PosBadge });
