const { Button, Badge, Icon, InfoStat } = window.AntelopeDashDesignSystem_4664c0;

const RACE_DATE = new Date("2026-08-22T09:00:00");

function useCountdown(target) {
  const calc = () => {
    const diff = Math.max(0, target - new Date());
    return {
      days: Math.floor(diff / 86400000),
      hours: Math.floor((diff / 3600000) % 24),
      minutes: Math.floor((diff / 60000) % 60),
      seconds: Math.floor((diff / 1000) % 60),
      done: diff === 0,
    };
  };
  const [t, setT] = React.useState(calc);
  React.useEffect(() => {
    const id = setInterval(() => setT(calc()), 1000);
    return () => clearInterval(id);
  }, []);
  return t;
}

function Countdown() {
  const t = useCountdown(RACE_DATE);
  const units = [
    ["Days", t.days], ["Hours", t.hours], ["Minutes", t.minutes], ["Seconds", t.seconds],
  ];
  const pad = (n) => String(n).padStart(2, "0");
  if (t.done) {
    return (
      <div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(24px,3vw,32px)", textTransform: "uppercase", letterSpacing: "0.02em", color: "var(--copper-400)" }}>
        It's Race Day — Run The Dash!
      </div>
    );
  }
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
      <span style={{ fontFamily: "var(--font-heading)", fontWeight: 700, fontSize: 13, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--slate-200)" }}>Countdown To Race Day</span>
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "center" }}>
        {units.map(([label, val]) => (
          <div key={label} style={{
            minWidth: 78, padding: "14px 10px", borderRadius: "var(--radius-md)",
            background: "rgba(255,255,255,0.10)", border: "1px solid rgba(255,255,255,0.22)",
            backdropFilter: "blur(6px)", WebkitBackdropFilter: "blur(6px)",
            display: "flex", flexDirection: "column", alignItems: "center", gap: 2,
          }}>
            <span style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 34, lineHeight: 1, color: "#fff", fontVariantNumeric: "tabular-nums" }}>{pad(val)}</span>
            <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--slate-300)" }}>{label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function Hero({ onNav }) {
  return (
    <section style={{
      position: "relative", color: "#fff", padding: "128px 24px",
      backgroundImage: "linear-gradient(rgba(15,23,42,0.30), rgba(15,23,42,0.45)), url('./assets/landscape-hero.jpg')",
      backgroundSize: "cover", backgroundPosition: "center",
    }}>
      <div style={{ maxWidth: "80rem", margin: "0 auto", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 24 }}>
        <Badge variant="teal" shape="pill">Curt Gowdy State Park, WY</Badge>
        <h2 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(44px, 7vw, 72px)", textTransform: "uppercase", letterSpacing: "-0.02em", margin: 0, lineHeight: 1 }}>
          Run The <span style={{ color: "var(--copper-400)" }}>Dash</span>
        </h2>
        <p style={{ fontSize: "clamp(18px,2.2vw,24px)", color: "var(--slate-200)", maxWidth: "48rem", margin: 0, fontWeight: 300, lineHeight: 1.5 }}>
          Experience the rugged beauty and challenging terrain of Wyoming's Curt Gowdy State Park.
        </p>
        <div style={{ display: "flex", gap: 16, flexWrap: "wrap", justifyContent: "center", marginTop: 8 }}>
          <Button variant="primary" size="lg" as="a" href="https://ultrasignup.com/register.aspx?did=135646" target="_blank">
            Register Today <Icon name="arrow-right" size={20} />
          </Button>
          <Button variant="glass" size="lg" as="a" href="#races" onClick={(e) => { e.preventDefault(); onNav?.("races"); }}>
            View Course Maps
          </Button>
        </div>
        <div style={{ marginTop: 16 }}>
          <Countdown />
        </div>
      </div>
    </section>
  );
}

function InfoBar() {
  return (
    <div style={{ background: "var(--teal-600)", color: "var(--teal-50)", padding: "32px 0", borderTop: "4px solid var(--copper-600)", borderBottom: "4px solid var(--copper-600)" }}>
      <div style={{ maxWidth: "80rem", margin: "0 auto", padding: "0 24px", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" }}>
        <InfoStat icon={<Icon name="calendar" />} heading="August 22, 2026" caption="Race Day" />
        <InfoStat icon={<Icon name="map-pin" />} heading="Curt Gowdy State Park" caption="Cheyenne, WY" />
        <InfoStat icon={<Icon name="mountain" />} heading="Epic Terrain" caption="Granite Boulders & Pine Forests" />
      </div>
    </div>
  );
}
window.Hero = Hero;
window.InfoBar = InfoBar;