const { Button, Badge } = window.AntelopeDashDesignSystem_4664c0;

// Post-race hero. This is Hero.jsx with the countdown and register CTA removed, and a
// darker overlay (0.45/0.60 vs the marketing 0.30/0.45) because more text sits over it.
function RecapHero() {
  return (
    <section style={{
      position: "relative", color: "#fff", padding: "112px 24px",
      backgroundImage: "linear-gradient(rgba(15,23,42,0.45), rgba(15,23,42,0.60)), 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>
        <h1 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(40px, 6.5vw, 68px)", textTransform: "uppercase", letterSpacing: "-0.02em", margin: 0, lineHeight: 1 }}>
          The 2026 Dash Is <span style={{ color: "var(--copper-400)" }}>In The Books</span>
        </h1>
        <p style={{ fontSize: "clamp(18px,2.2vw,24px)", color: "var(--slate-200)", maxWidth: "46rem", margin: 0, fontWeight: 300, lineHeight: 1.5 }}>
          Thank you to every runner, volunteer, and crew member who made this year's Antelope Dash happen.
        </p>
        <div style={{ display: "flex", gap: 16, flexWrap: "wrap", justifyContent: "center", marginTop: 8 }}>
          <Button variant="primary" size="lg" as="a" href="results.html">See The Results</Button>
          <Button variant="glass" size="lg" as="a" href="photos.html">View Race Photos</Button>
        </div>
      </div>
    </section>
  );
}

// Same construction as InfoBar in Hero.jsx — teal band, copper rules top and bottom.
function SaveTheDate() {
  return (
    <div style={{ background: "var(--teal-600)", color: "var(--teal-50)", padding: "40px 24px", borderTop: "4px solid var(--copper-600)", borderBottom: "4px solid var(--copper-600)" }}>
      <div style={{ maxWidth: "80rem", margin: "0 auto", display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 24 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          <span style={{ fontFamily: "var(--font-heading)", fontWeight: 700, fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--copper-400)" }}>Save The Date</span>
          <span style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(28px, 4vw, 38px)", textTransform: "uppercase", letterSpacing: "-0.02em", color: "#fff", lineHeight: 1 }}>2027 Dates Coming Soon</span>
        </div>
        <p style={{ maxWidth: "34rem", fontSize: 17, lineHeight: 1.6, opacity: 0.92, margin: 0 }}>
          Same park, same singletrack. Watch this page and UltraSignup for the 2027 announcement.
        </p>
      </div>
    </div>
  );
}

function Recap() {
  return (
    <>
      <RecapHero />
      <SaveTheDate />
    </>
  );
}
window.Recap = Recap;