/* ============================================================
   ABOUT — common SGSITS org page. The institute, its three
   disciplines/teams, and what binds them.
   ============================================================ */

function AboutPage({ go, t, enterTeam }) {
  const disciplines = [
    {
      id: "gsm",
      power: "ic",
      img: "uploads/teams/gs-motorsports/achievements/formula-bharat-grid.png",
      imgPos: "center 35%",
      kicker: TEAMS.gsm.discipline,
      title: "Formula Bharat",
      body: "Students design, build and race a single-seat formula-style car, judged on engineering design, cost, business case and on-track dynamic events — acceleration, skid-pad, autocross and endurance.",
      eventUrl: "https://www.formulabharat.com",
    },
    {
      id: "gsm",
      power: "ic",
      img: "uploads/teams/gs-motorsports/achievements/supra-grid.png",
      imgPos: "center 40%",
      kicker: TEAMS.gsm.discipline,
      title: "Supra",
      body: "SUPRA SAE India — the second national formula circuit our car campaigns each season, testing the same car against a fresh field of teams and judges.",
      eventUrl: "https://www.suprasaeindia.org",
    },
    {
      id: "racers",
      power: "ev",
      img: "uploads/teams/gs-racers-baja/Baja_Event.jpg",
      imgPos: "center 40%",
      kicker: TEAMS.racers.discipline,
      title: "E-Baja",
      body: TEAMS.racers.content.whatIs.lead + " " + TEAMS.racers.content.whatIs.body,
      eventUrl: "https://www.bajasaeindia.org",
    },
    {
      id: "yaan",
      power: "ev",
      img: "uploads/teams/yaan/DDC24.jpg",
      imgPos: "center 40%",
      kicker: TEAMS.yaan.discipline,
      title: "SAEINDIA UAS Challenges",
      body: "National design-build-fly contests where student teams design, fabricate and fly uncrewed aircraft systems, judged on flight performance, autonomy and a full design report.",
      eventUrl: "https://www.saeindia.org",
      subEvents: ["SAE DDC", "SAE ADDC", "SAE Aerothon"],
    },
  ];

  const instituteChallenges = [
    { name: "Aero Artistry Competition", venue: "IIT Indore" },
    { name: "National Aeromodelling Competition", venue: "IIT Bombay" },
    { name: "AVATE TATHAVA", venue: "NIT Calicut" },
  ];

  return (
    <main>
      {/* Header */}
      <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: -30, top: "50%", transform: "translateY(-50%)",
          fontFamily: "var(--f-head)", fontSize: "clamp(110px,20vw,320px)",
          color: "rgba(255,107,0,0.05)", lineHeight: 1, pointerEvents: "none", userSelect: "none",
        }}>SGS</div>
        <div className="wrap" style={{ paddingTop: 0, paddingBottom: 0, width: "100%" }}>
          <div style={{ position: "relative", zIndex: 2 }}>
            <div className="eyebrow" style={{ marginBottom: 10 }}></div>
            <div className="sec-title" style={{ marginBottom: 12 }}>
              <span className="bar" />
              <h1 className="head" style={{ margin: 0, fontSize: "clamp(40px, 6vw, 80px)" }}>Our Story</h1>
            </div>
            <p className="label" style={{ margin: "0 0 0 24px", fontSize: "clamp(13px,1.4vw,17px)", color: "var(--text)", maxWidth: 560 }}>
              Three teams. <span style={{ color: "var(--orange)" }}>One engineering culture.</span>
            </p>
          </div>
        </div>
      </section>

      {/* Who we are (org) */}
      <section className="wrap" style={{ paddingTop: 84, paddingBottom: 80, borderBottom: "1px solid var(--border)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "center" }} className="mission-grid">
          <div>
            <h2 className="head" style={{ fontSize: "clamp(30px, 3.4vw, 46px)", lineHeight: 1.05, color: "var(--text)", margin: "0 0 26px" }}>One Institute,<br />Three Machines</h2>
            <p className="body" style={{ fontSize: 18, lineHeight: 1.7, margin: "0 0 18px" }}>
              At SGSITS Indore, students don't just study engineering — they put it on the grid. Three teams take ideas from a blank CAD file to the starting line: a Formula Student car, an off-road Baja ATV and a fleet of unmanned aircraft.
            </p>
            <p className="body muted" style={{ fontSize: 16, lineHeight: 1.7, margin: 0 }}>
              Different machines, shared DNA — design hard, fabricate it ourselves, test relentlessly, and race to win. Every team is open to students across branches and years.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 3 }}>
            <Ph label="WORKSHOP / BUILD" img="uploads/teams/gs-motorsports/car/FB2025_Main.jpeg" imgPos="center 40%" style={{ height: 200 }} />
            <Ph label="TEST DAY" img="uploads/teams/yaan/Yan_Team.jpg" imgPos="center 45%" style={{ height: 200, marginTop: 32 }} />
            <Ph label="ON THE GRID" img="uploads/teams/gs-racers-baja/Baja_Track.jpg" imgPos="center 75%" style={{ height: 170, gridColumn: "1 / 3" }} />
          </div>
        </div>
      </section>

      {/* Three disciplines, grouped by team */}
      <section className="wrap" style={{ paddingTop: 72, paddingBottom: 80, borderBottom: "1px solid var(--border)" }}>
        <div className="sec-title" style={{ marginBottom: 10 }}>
          <span className="bar" />
          <h2 className="head" style={{ margin: 0 }}>Events We Participate</h2>
        </div>
        <p className="body muted" style={{ margin: "0 0 44px 24px", fontSize: 15, maxWidth: 560 }}>Three teams, three national-level competition circuits.</p>
        <div style={{ display: "flex", flexDirection: "column", gap: 56 }}>
          {TEAM_ORDER.map((teamId) => {
            const team = TEAMS[teamId];
            const a = team.accent;
            const rows = disciplines.filter((d) => d.id === teamId);
            return (
              <div key={teamId} style={{ "--accent": a }}>
                <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 22, paddingBottom: 16, borderBottom: `1px solid var(--border-2)` }}>
                  <div>
                    <div className="label" style={{ fontSize: 11, color: a, letterSpacing: "0.12em", marginBottom: 4 }}>{team.discipline}</div>
                    <div className="head" style={{ fontSize: "clamp(22px,2.4vw,32px)", lineHeight: 1 }}>{team.name}</div>
                  </div>
                  <button className="btn btn-ghost" onClick={() => enterTeam(teamId)} style={{ whiteSpace: "nowrap", marginLeft: "auto" }}>
                    View Team <span className="arrow"><Icon name="arrow" size={15} /></span>
                  </button>
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
                  {rows.map((d) => (
                    <div key={d.title} className="discipline-row" style={{ "--accent": a, borderLeftColor: a }}>
                      <Ph className="discipline-photo" img={d.img} imgPos={d.imgPos} label={d.title.toUpperCase()} />
                      <div className="discipline-body">
                        <div className="discipline-heading">
                          <span className="discipline-icon" style={{ borderColor: a, color: a }} title={d.id === "yaan" ? "Unmanned aircraft" : d.power === "ev" ? "Electric powertrain" : "Internal combustion engine"}>
                            <Icon name={d.id === "yaan" ? "plane" : d.power === "ev" ? "bolt" : "engine"} size={19} />
                          </span>
                          <div>
                            <div className="label" style={{ fontSize: 11, color: a, letterSpacing: "0.12em", marginBottom: 8 }}>
                              {d.kicker} · {d.power === "ev" ? "Electric" : "IC Engine"}
                            </div>
                            <div className="head" style={{ fontSize: "clamp(24px,2.6vw,36px)", lineHeight: 0.95 }}>{d.title}</div>
                          </div>
                        </div>
                        <p className="body muted" style={{ fontSize: 15, lineHeight: 1.7, margin: "18px 0 0" }}>{d.body}</p>
                        {d.subEvents && (
                          <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 14 }}>
                            {d.subEvents.map((s) => (
                              <span key={s} className="label" style={{ fontSize: 11, letterSpacing: "0.08em", padding: "6px 12px", border: "1px solid var(--border-2)", borderRadius: 999, color: "var(--muted)" }}>{s}</span>
                            ))}
                          </div>
                        )}
                        <div style={{ display: "flex", gap: 12, marginTop: 22, flexWrap: "wrap" }}>
                          {d.eventUrl && <a className="btn btn-ghost" href={d.eventUrl} target="_blank" rel="noopener noreferrer" style={{ whiteSpace: "nowrap", alignSelf: "flex-start", textDecoration: "none" }}>
                            Event Website <span className="arrow"><Icon name="arrow" size={15} /></span>
                          </a>}
                        </div>
                      </div>
                    </div>
                  ))}
                  {teamId === "yaan" && (
                    <div className="discipline-row" style={{ "--accent": a, borderLeftColor: a }}>
                      <Ph className="discipline-photo" img="uploads/teams/yaan/Yan_Flight.jpeg" imgPos="center 35%" label="AERO CHALLENGES BY INSTITUTES" />
                      <div className="discipline-body">
                        <div className="discipline-heading">
                          <span className="discipline-icon" style={{ borderColor: a, color: a }} title="Inter-institute aeromodelling challenges">
                            <Icon name="plane" size={19} />
                          </span>
                          <div>
                            <div className="label" style={{ fontSize: 11, color: a, letterSpacing: "0.12em", marginBottom: 8 }}>Cross-Institute Events</div>
                            <div className="head" style={{ fontSize: "clamp(24px,2.6vw,36px)", lineHeight: 0.95 }}>Aero Challenges by Institutes</div>
                          </div>
                        </div>
                        <ul style={{ listStyle: "none", padding: 0, margin: "18px 0 0", display: "flex", flexDirection: "column", gap: 10 }}>
                          {instituteChallenges.map((c) => (
                            <li key={c.name} style={{ display: "flex", gap: 12 }}>
                              <span className="dot" />
                              <span className="body" style={{ fontSize: 15, lineHeight: 1.6 }}>{c.name}{c.venue && <> — <span className="muted">{c.venue}</span></>}</span>
                            </li>
                          ))}
                        </ul>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </section>

      <InstituteSection />

      {/* Join CTA */}
      <section style={{ borderTop: "1px solid var(--border)", background: "var(--surface)" }}>
        <div className="wrap" style={{ paddingTop: 64, paddingBottom: 64, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
          <div>
            <div className="head" style={{ fontSize: "clamp(32px, 5vw, 64px)" }}>Join a Team</div>
            <p className="label" style={{ margin: "10px 0 0", fontSize: 16, color: "var(--muted)" }}>Open to all SGSITS students. No prior experience required.</p>
          </div>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => { go("team"); window.scrollTo({ top: 0 }); }}>Meet the Teams <span className="arrow"><Icon name="arrow" size={16} color="#0A0A0A" /></span></button>
            <button className="btn btn-ghost" onClick={() => { go("contact"); window.scrollTo({ top: 0 }); }}>Get in Touch</button>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { AboutPage });