/* ============================================================
   TEAM PAGE — multi-year crew sections
   ============================================================ */

function TeamHeader() {
  return (
    <section className="team-header" 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"
      }}>CREW</div>
      <div className="wrap" style={{ paddingTop: 0, paddingBottom: 0, width: "100%", position: "relative", zIndex: 2 }}>
        <div className="eyebrow" style={{ marginBottom: 10 }}>The People Behind the Machine</div>
        <div style={{ display: "flex", gap: 16 }}>
          <span style={{ width: 8, background: "var(--orange)", alignSelf: "stretch" }} />
          <h1 className="head" style={{ margin: 0, fontSize: "clamp(40px, 6vw, 80px)" }}>Our Team</h1>
        </div>

      </div>
    </section>);

}

function FacultyAdvisorCard({ img, name, role, title }) {
  return (
    <div className="card" style={{
      display: "flex", alignItems: "center", gap: 18,
      borderLeft: "4px solid var(--orange)", padding: 18
    }}>
      {img ?
      <img src={img} alt={name} style={{ width: 108, height: 134, objectFit: "cover", objectPosition: "center top", flex: "0 0 auto", border: "1px solid var(--border-2)" }} /> :
      <div style={{ width: 108, height: 134, flex: "0 0 auto", border: "1px dashed var(--border-2)", display: "grid", placeItems: "center", fontFamily: "monospace", fontSize: 10, color: "var(--muted)", textAlign: "center", lineHeight: 1.3 }}>photo</div>}
      <div style={{ minWidth: 0 }}>
        <div className="label" style={{ fontSize: 10, color: "var(--orange)", marginBottom: 5 }}>{role}</div>
        <div className="head" style={{ fontSize: "clamp(20px,2vw,26px)", lineHeight: 1 }}>{name}</div>
        {title && <p className="body muted" style={{ fontSize: 12, lineHeight: 1.4, margin: "6px 0 0" }}>{title}</p>}
      </div>
    </div>);

}

function FacultyCard() {
  const advisors = [
  { img: "uploads/teams/gs-motorsports/team/faculty-advisor-balsara.png", name: "Dr. Sachin Balsara", role: "Faculty Advisor", title: "Associate Professor of Industrial and Production Engineering" },
  { img: "uploads/teams/gs-motorsports/team/faculty-advisor-thakar.png", name: "Dr. Girish Thakar", role: "Faculty Advisor", title: "HOD, Industrial and Production Engineering" }];

  return (
    <section className="wrap" style={{ paddingTop: 70 }}>
      <div className="label" style={{ fontSize: 12, color: "var(--orange)", marginBottom: 16 }}>Faculty Advisors</div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(280px,1fr))", gap: 16 }}>
        {advisors.map((a, i) => <FacultyAdvisorCard key={i} {...a} />)}
      </div>
    </section>);

}

// Reusable crew section for any year
function CrewYear({ year, car, members, comps, overflow, t }) {
  return (
    <section className="wrap crew-year-section" style={{ paddingTop: 72, paddingBottom: 20 }}>
      {/* year heading */}
      <div data-reveal="true" style={{ display: "flex", alignItems: "baseline", gap: 18, marginBottom: 40, flexWrap: "wrap" }}>
        <span className="label" style={{ fontSize: "clamp(52px,8vw,108px)", color: "var(--orange)", lineHeight: 0.8 }}>{year}</span>
        <span className="head" style={{ fontSize: "clamp(40px,6vw,82px)", lineHeight: 0.85 }}>Crew</span>
        {car && <span className="label" style={{ fontSize: 16, color: "var(--orange)", marginLeft: 10, alignSelf: "flex-end", opacity: 0.85 }}>{car}</span>}
        <span className="body muted" style={{ marginLeft: "auto", fontSize: 14, alignSelf: "flex-end" }}>{members.length} listed &middot; {overflow}+ total</span>
      </div>

      <div className="crew-grid" style={{ display: "grid", gridTemplateColumns: "0.5fr 2.4fr", gap: 40 }}>
        {/* left: competition participation */}
        <div>
          <div className="label" style={{ fontSize: 13, color: "var(--muted)", letterSpacing: "0.1em", marginBottom: 22 }}>
            Season Campaign
          </div>
          <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 22 }}>
            {comps.map(([title, sub], i) =>
            <li key={i} style={{ display: "flex", gap: 14 }}>
                <span className="dot" />
                <div>
                  <div className="label" style={{ fontSize: 18, color: "var(--text)" }}>{title}</div>
                  <div className="body muted" style={{ fontSize: 14, marginTop: 3, lineHeight: 1.5, whiteSpace: "pre-line" }}>{sub}</div>
                </div>
              </li>
            )}
          </ul>
        </div>

        {/* right: member cards */}
        <div>
          <div className="crew-cards" style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 14 }}>
            {members.map(([name, role, tag, src], i) =>
            <MemberCard key={i} name={name} role={role} tag={tag} src={src} t={t} compact fallbackSrc="uploads/teams/gs-motorsports/team/formula-student-placeholder.png" />
            )}
          </div>
        </div>
      </div>
    </section>);

}

function TeamPage({ go, t, team }) {
  const crews = [
  {
    year: "2026", car: "Sumit 2.0",
    overflow: 0,
    comps: [
      ["FORMULA BHARAT 2027", "19th Jan - 24th Jan\nKari Motor Speedway, Coimbatore"]],
    members: [
    ["Tanmay Gomkale", "4th Year · Mechanical", "TEAM CAPTAIN"],
    ["Vishesh Pratap Singh Bundela", "3rd Year · Mechanical", "VICE CAPTAIN"],
    ["Misba Khan", "3rd Year · IP", "TEAM MANAGER"],
    ["Sourabh Mehra", "4th Year · IP", "MANUFACTURING LEAD"],
    ["Dilraj Kalesh", "4th Year · Civil", "ENGINE LEAD"],
    ["Manas Barot", "3rd Year · Mechanical", "SPONSORSHIP LEAD"],
    ["Deepanshu Gupta", "3rd Year · IP", "STATICS LEAD"],
    ["Priyansh Kartikeya", "3rd Year · EE", "ELECTRONICS & DAQ LEAD"],
    ["Hiya Namdeo", "3rd Year · Mechanical", "POWERTRAIN LEAD"],
    ["Anushka Nayak", "3rd Year · EI", "MEDIA LEAD"],
    ["Lakshya Agrawal", "2nd Year · EI", "IT HEAD"],
    ["Sneha Tiwari", "3rd Year · Mechanical", "STEERING & BRAKE"],
    ["Nivedan Saini", "3rd Year · IP", "DRIVETRAIN & MEDIA"],
    ["Lalit Kumar Malviya", "2nd Year · EI", "POWERTRAIN"],
    ["Megha Verma", "2nd Year · Mechanical", "DRIVETRAIN"],
    ["Navneet Goutam Ahirwar", "2nd Year · Mechanical", "COOLING SYSTEM"],
    ["Abhishek Saryam", "2nd Year · Mechanical", "STEERING & BRAKES"],
    ["Ayush Chouragade", "2nd Year · IP", "ROLLCAGE"],
    ["Shreyansh Agrawal", "2nd Year · Mechanical", "SUSPENSION & WHEEL ASSEMBLY"],
    ["Ishaan Joshi", "2nd Year · CE", "ELECTRONICS"],
    ["Atharv Bansod", "2nd Year · EI", "ELECTRONICS"]]
  }];


  return (
    <main>
      <TeamHeader />
      <FacultyCard />
      {crews.map((c, i) =>
      <CrewYear key={c.year} {...c} t={t} />
      )}
      <hr className="divider-orange wrap" style={{ marginTop: 30, width: "auto" }} />
      <QuoteStrip team={team} />
    </main>);

}

function QuoteStrip({ team }) {
  const label = (team && team.short) ? `Team ${team.short === "FS" ? "GS Racers" : team.name}` : "Team GS Racers";
  return (
    <section style={{ borderTop: "1px solid var(--border)", background: "var(--surface)" }}>
      <div className="wrap" style={{ padding: "clamp(56px,8vw,110px) 0", textAlign: "center", position: "relative" }}>
        <span className="label" aria-hidden style={{
          position: "absolute", top: 20, left: "50%", transform: "translateX(-50%)",
          fontSize: 160, color: "rgba(255,107,0,0.06)", lineHeight: 1
        }}>&ldquo;</span>
        <p className="head" style={{ margin: "0 auto", maxWidth: 980, fontSize: "clamp(30px,4.6vw,68px)", lineHeight: 1.02, position: "relative" }}>
          When passion meets,<br />
          <span style={{ color: "var(--orange)" }}>engineering.</span>
        </p>
        <div className="label" style={{ marginTop: 30, fontSize: 14, color: "var(--muted)" }}>
          &mdash; {label}
        </div>
      </div>
    </section>);

}

Object.assign(window, { TeamPage });