const { SectionHeading, Card, Button, Icon } = window.AntelopeDashDesignSystem_4664c0;

// A trimmed RacesSection: maps and GPX only. No pricing, no register CTA, no 12-Mile
// card. Kept as its own file so RacesSection.jsx stays untouched for index-2026.html.
const COURSES = [
  {
    name: "4-Mile Dash", band: "4-Mile Dash", bandColor: "teal",
    map: "course-4mile.png", gpx: "course-4mile.gpx",
    stats: ["4.0 mi", "~490 ft gain", "9:15 AM start"],
  },
  {
    name: "8-Mile Grind", band: "8-Mile Grind", bandColor: "copper",
    map: "course-8mile.png", gpx: "course-8mile.gpx",
    stats: ["8.0 mi", "~1,000 ft gain", "9:00 AM start"],
  },
];

function CourseMaps({ onOpenMap }) {
  // Same fetch-and-blob download as RacesSection.jsx, so the saved filename is
  // AntelopeDash-4MileDash.gpx rather than whatever the host serves it as.
  async function downloadGpx(e, file, label) {
    e.preventDefault();
    try {
      const res = await fetch(`./assets/${file}`);
      const blob = await res.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `AntelopeDash-${label.replace(/[^0-9A-Za-z]+/g, "")}.gpx`;
      document.body.appendChild(a);
      a.click();
      a.remove();
      setTimeout(() => URL.revokeObjectURL(url), 1000);
    } catch (err) {
      window.open(`./assets/${file}`, "_blank");
    }
  }

  return (
    <section style={{ padding: "80px 24px", background: "#fff" }}>
      <div style={{ maxWidth: "72rem", margin: "0 auto", display: "flex", flexDirection: "column", gap: 32 }}>
        <SectionHeading
          eyebrow="The 2026 Courses"
          title="Course Maps"
          subtitle="Both loops ran out of the Aspen Grove Trailhead. The park is open year round if you want to run them again." />

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 32 }}>
          {COURSES.map((c) => (
            <Card key={c.name} band={c.band} bandColor={c.bandColor} hoverable={false}>
              <button onClick={() => onOpenMap(c.name + " Route Map", c.map)} aria-label={`Expand the ${c.name} route map`}
                style={{
                  cursor: "zoom-in", border: "1px solid var(--slate-200)", borderRadius: "var(--radius-md)",
                  overflow: "hidden", width: "100%", padding: 0, background: "var(--slate-50)", display: "block",
                  transition: "border-color var(--dur-normal) var(--ease-standard)",
                }}
                onMouseEnter={(e) => (e.currentTarget.style.borderColor = "var(--copper-500)")}
                onMouseLeave={(e) => (e.currentTarget.style.borderColor = "var(--slate-200)")}>
                <img src={`./assets/${c.map}`} alt={`${c.name} route map`} loading="lazy"
                  style={{ width: "100%", display: "block" }} />
              </button>

              <div style={{ display: "flex", gap: 24, marginTop: 20, flexWrap: "wrap", fontFamily: "var(--font-mono)", fontSize: 14, color: "var(--slate-600)" }}>
                {c.stats.map((s) => <span key={s}>{s}</span>)}
              </div>

              <div style={{ display: "flex", gap: 12, marginTop: 20 }}>
                <Button variant="outline" size="sm" onClick={() => onOpenMap(c.name + " Route Map", c.map)}>
                  <Icon name="map" size={16} /> Map
                </Button>
                <Button variant="outline" size="sm" as="a" href={`./assets/${c.gpx}`} onClick={(e) => downloadGpx(e, c.gpx, c.name)}>
                  <Icon name="download" size={16} /> GPX
                </Button>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}
window.CourseMaps = CourseMaps;