/* ============================================================
   ALUMNI PAGE — coming soon
   ============================================================ */

function AlumniPage({ go, t }) {
  return (
    <main>
      <section style={{ borderBottom: "1px solid var(--border)", position: "relative", overflow: "hidden", minHeight: 200, paddingTop: 44, paddingBottom: 44, display: "flex", alignItems: "center" }}>
        <div aria-hidden style={{
          position: "absolute", right: -20, top: "50%", transform: "translateY(-50%)",
          fontFamily: "var(--f-head)", fontSize: "clamp(100px,18vw,280px)",
          color: "rgba(255,107,0,0.05)", lineHeight: 1, pointerEvents: "none", userSelect: "none"
        }}>ALUMNI</div>
        <div className="wrap" style={{ paddingTop: 0, paddingBottom: 0, width: "100%" }}>
          <div style={{ position: "relative", zIndex: 2 }}>
            <div className="eyebrow" style={{ marginBottom: 10 }}>The Ones Who Came Before</div>
            <div className="sec-title" style={{ marginBottom: 12 }}>
              <span className="bar" />
              <h1 className="head" style={{ margin: 0, fontSize: "clamp(40px,6vw,80px)" }}>Our Alumni</h1>
            </div>
            <p className="label" style={{ margin: "0 0 0 24px", fontSize: "clamp(13px,1.4vw,17px)", color: "var(--text)", maxWidth: 520 }}>
              Every engineer who built, raced, and led before us — <span style={{ color: "var(--orange)" }}>still part of the crew.</span>
            </p>
          </div>
        </div>
      </section>

      <section className="wrap" style={{ paddingTop: 90, paddingBottom: 100, display: "flex", justifyContent: "center" }}>
        <div className="card" style={{ padding: "64px 56px", textAlign: "center", maxWidth: 620, borderLeft: "6px solid var(--orange)" }}>
          <div className="label" style={{ fontSize: 12, color: "var(--orange)", letterSpacing: "0.14em", marginBottom: 18 }}>Coming Soon</div>
          <div className="head" style={{ fontSize: "clamp(30px,4vw,48px)", marginBottom: 18 }}>We're building this page.</div>
          <p className="body muted" style={{ fontSize: 16, lineHeight: 1.7, margin: "0 0 32px" }}>
            An alumni directory, stories, and where they are now — on the way. In the meantime, if you're an alumnus and want to be featured, reach out.
          </p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => go("contact")}>
              Contact Us <span className="arrow"><Icon name="arrow" size={16} color="#0A0A0A" /></span>
            </button>
            <button className="btn btn-ghost" onClick={() => go("home")}>Back to Home</button>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { AlumniPage });