const { SectionHeading, Icon } = window.AntelopeDashDesignSystem_4664c0;

function AboutSection() {
  const perks = [
    "Custom top-3 awards in every division",
    "Premium race shirts featuring our 2026 logo",
    "Post-race celebration and camaraderie",
  ];
  return (
    <section id="about" style={{ padding: "80px 24px", background: "#fff" }}>
      <div style={{ maxWidth: "80rem", margin: "0 auto", display: "flex", gap: 48, alignItems: "center", flexWrap: "wrap" }}>
        <div style={{ flex: "1 1 320px", display: "flex", justifyContent: "center" }}>
          <img src="./assets/logo-full.png" alt="Antelope Dash patch" style={{ width: "100%", maxWidth: 380, filter: "drop-shadow(0 20px 25px rgba(15,23,42,0.18))" }} />
        </div>
        <div style={{ flex: "1 1 380px", display: "flex", flexDirection: "column", gap: 20 }}>
          <SectionHeading align="left" title="About The Antelope Dash" />
          <p style={{ color: "var(--text-body)", fontSize: 18, lineHeight: 1.65, margin: 0 }}>
            Nestled in the foothills of the Laramie Mountains, Curt Gowdy State Park offers a hidden gem of a trail system. The Antelope Dash takes runners through a stunning landscape of massive granite boulders, dense pine forests, and open meadows.
          </p>
          <p style={{ color: "var(--text-body)", fontSize: 18, lineHeight: 1.65, margin: 0 }}>
            Whether you're tackling the fast and flowing 4-Mile or testing your endurance on the longer routes, you'll be treated to world-class singletrack, challenging climbs, and sweeping views. Earn your patch and conquer the dash!
          </p>
          <ul style={{ listStyle: "none", padding: 0, margin: "8px 0 0", display: "flex", flexDirection: "column", gap: 14 }}>
            {perks.map((p) => (
              <li key={p} style={{ display: "flex", alignItems: "center", gap: 12, color: "var(--text-strong)", fontWeight: 600 }}>
                <span style={{ color: "var(--copper-600)", display: "inline-flex" }}><Icon name="check-circle-2" size={24} /></span> {p}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}
window.AboutSection = AboutSection;