const { SectionHeading, Accordion, Icon } = window.AntelopeDashDesignSystem_4664c0;

function EventInfoSection() {
  const faqs = [
    { q: "Packet Pickup", a: <p style={{ margin: 0 }}>Race day packet pickup opens at 7:30 AM at the start line in Curt Gowdy State Park.</p> },
    { q: "Park Entry Fees & Parking", a: <p style={{ margin: 0 }}>A Wyoming State Parks day-use fee is required for all vehicles entering the park (not included in registration). Carpooling is highly encouraged as parking at the trailhead is limited.</p> },
    { q: "Aid Stations & Cupless Race", a: <p style={{ margin: 0 }}>The Antelope Dash is a cupless event. You must carry your own hydration system or reusable cup. Aid stations will be stocked with water, electrolyte drinks, and basic ultra-style snacks (fruit, pretzels, gummies).</p> },
  ];
  return (
    <section id="info" style={{ padding: "80px 24px", background: "#fff" }}>
      <div style={{ maxWidth: "56rem", margin: "0 auto", display: "flex", flexDirection: "column", gap: 40 }}>
        <SectionHeading title="Event Information" />
        <Accordion items={faqs} defaultOpen={0} />
      </div>
    </section>
  );
}

function ClubsSection() {
  const clubs = [
    { name: "High Plains Harriers", href: "https://www.highplainsharriers.org/", logo: "./assets/high-plains-harriers.jpg", logoFit: "contain", blurb: "A local running club dedicated to promoting running and fitness in the Laramie community. Join them for local events and group runs." },
    { name: "Cheyenne Running Club", href: "https://www.cheyennerunningclub.org/", logo: "./assets/cheyenne-running-club.jpg", blurb: "Join runners of all levels for group runs, social events, and support on the roads and trails throughout the Cheyenne area." },
  ];
  return (
    <section id="clubs" style={{ padding: "80px 24px", background: "var(--slate-100)", borderTop: "1px solid var(--slate-200)" }}>
      <div style={{ maxWidth: "64rem", margin: "0 auto", display: "flex", flexDirection: "column", gap: 40 }}>
        <SectionHeading title="Local Running Community" subtitle="Connect with the local running community! Check out these great organizations in the Cheyenne and Laramie areas for group runs, training, and camaraderie." />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px,1fr))", gap: 32 }}>
          {clubs.map((c) => (
            <a key={c.name} href={c.href} target="_blank" rel="noopener noreferrer" className="ad-club-card"
               style={{ display: "block", background: "#fff", padding: 32, borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-md)", border: "2px solid transparent", textDecoration: "none", transition: "all var(--dur-normal) var(--ease-standard)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 16 }}>
                {c.logo ? (
                  <span style={{ width: 48, height: 48, borderRadius: "9999px", overflow: "hidden", flex: "none", boxShadow: "var(--shadow-sm)", display: "inline-flex", background: "#fff" }}>
                    <img src={c.logo} alt={c.name + " logo"} style={{ width: "100%", height: "100%", objectFit: c.logoFit || "cover" }} />
                  </span>
                ) : (
                  <span className="ad-club-icon" style={{ background: "var(--teal-600)", color: "#fff", padding: 12, borderRadius: "var(--radius-md)", display: "inline-flex", transition: "background var(--dur-normal)" }}><Icon name="users" size={24} /></span>
                )}
                <h3 style={{ fontFamily: "var(--font-heading)", fontWeight: 700, fontSize: 20, color: "var(--slate-800)", margin: 0 }}>{c.name}</h3>
              </div>
              <p style={{ color: "var(--text-body)", margin: "0 0 24px", lineHeight: 1.6 }}>{c.blurb}</p>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 14, fontWeight: 700, color: "var(--copper-600)" }}>Visit Website <Icon name="external-link" size={16} /></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.EventInfoSection = EventInfoSection;
window.ClubsSection = ClubsSection;