/* ============================================================
   SCAFFOLD PAGES — generic, team-aware pages for the teams
   that don't yet have hand-built pages (GS Racers, YAN).
   Same visual system as Formula Student; content comes from
   team.content and all imagery is a striped placeholder until
   real assets are dropped in.
   ============================================================ */

/* shared page header with the big ghost word behind it */
function SHeader({ ghost, eyebrow, title, sub }) {
  return (
    <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: "color-mix(in oklab, var(--orange) 7%, transparent)", lineHeight: 1, pointerEvents: "none", userSelect: "none",
      }}>{ghost}</div>
      <div className="wrap" style={{ paddingTop: 0, paddingBottom: 0, width: "100%" }}>
        <div style={{ position: "relative", zIndex: 2 }}>
          {eyebrow && <div className="eyebrow" style={{ marginBottom: 10 }}>{eyebrow}</div>}
          <div className="sec-title" style={{ marginBottom: 12 }}>
            <span className="bar" />
            <h1 className="head" style={{ margin: 0, fontSize: "clamp(40px, 6vw, 80px)" }}>{title}</h1>
          </div>
          {sub && <p className="label" style={{ margin: "0 0 0 24px", fontSize: "clamp(13px,1.4vw,17px)", color: "var(--text)", maxWidth: 540 }}>{sub}</p>}
        </div>
      </div>
    </section>
  );
}

/* ---- stats row with count-up ---- */
function ScaffoldStats({ stats, t }) {
  const [ref, seen] = useInView(0.4);
  const boxed = t.statsStyle === "boxed";
  return (
    <section ref={ref} style={{ borderBottom: "1px solid var(--border)", background: boxed ? "var(--surface)" : "transparent" }}>
      <div className="wrap stats-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: boxed ? 1 : 0, background: boxed ? "var(--border)" : "transparent" }}>
        {stats.map((s, i) => <Stat key={i} {...s} run={seen} boxed={boxed} first={i === 0} />)}
      </div>
    </section>
  );
}

/* ---- HOME ---- */
function ScaffoldHome({ go, t, team }) {
  const c = team.content;
  const h = c.hero;
  const centered = t.heroLayout === "centered";
  return (
    <main>
      {/* hero */}
      <section style={{ position: "relative", overflow: "hidden", borderBottom: "1px solid var(--border)", minHeight: "calc(100vh - 112px)", display: "flex" }}>
        {h.bg ? (
          <img src={h.bg} alt="" aria-hidden="true" className="hero-bg"
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: h.bgPos, zIndex: 0 }} />
        ) : (
          <Ph label={h.caption} style={{ position: "absolute", inset: 0, zIndex: 0 }} />
        )}
        <div aria-hidden style={{ position: "absolute", inset: 0, zIndex: 1, background: "linear-gradient(100deg, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.78) 55%, rgba(10,10,10,0.5) 100%)" }} />
        <div aria-hidden className="label" style={{
          position: "absolute", right: centered ? "50%" : "4%", top: 60,
          transform: centered ? "translateX(50%)" : "none",
          fontSize: "clamp(140px, 26vw, 420px)", color: "color-mix(in oklab, var(--orange) 8%, transparent)",
          lineHeight: 1, pointerEvents: "none", userSelect: "none", zIndex: 2,
        }}>{h.ghost}</div>

        <div className="wrap hero-grid" style={{
          display: "grid", gridTemplateColumns: "1fr", alignItems: "center",
          textAlign: centered ? "center" : "left", paddingTop: 40, paddingBottom: 40,
          position: "relative", zIndex: 3, width: "100%",
        }}>
          <div style={{ maxWidth: centered ? 900 : 720, justifySelf: centered ? "center" : "start" }}>
            <div className="eyebrow" style={{ marginBottom: 18, justifyContent: centered ? "center" : "flex-start" }}>{team.discipline}</div>
            <h1 className="head" style={{ margin: 0, fontSize: "clamp(34px, 5.2vw, 74px)", letterSpacing: 0 }}>
              {h.titleLines.map((line, i) => (
                <span key={i} className="hero-line" style={{ display: "block" }}>
                  <span style={{ color: i === h.titleLines.length - 1 ? "var(--orange)" : "var(--text)" }}>{line}</span>
                </span>
              ))}
            </h1>
            <p className="label" style={{ margin: "22px 0 0", fontSize: "clamp(16px, 1.9vw, 24px)", color: "var(--text)", fontWeight: 700, maxWidth: 560, marginLeft: centered ? "auto" : 0, marginRight: centered ? "auto" : 0 }}>
              {h.tagline[0]} <span style={{ color: "var(--orange)" }}>{h.tagline[1]}</span>
            </p>
            <p className="body muted" style={{ margin: "16px 0 0", fontSize: 16, lineHeight: 1.65, maxWidth: 500, marginLeft: centered ? "auto" : 0, marginRight: centered ? "auto" : 0 }}>{h.sub}</p>
            <div style={{ display: "flex", gap: 14, marginTop: 34, flexWrap: "wrap", justifyContent: centered ? "center" : "flex-start" }}>
              <button className="btn btn-primary" onClick={() => go("team")}>
                Meet the Team <span className="arrow"><Icon name="arrow" size={16} color="#0A0A0A" /></span>
              </button>
              <button className="btn btn-ghost" onClick={() => go("crowdfunding")}>Support Us</button>
            </div>
          </div>
        </div>
      </section>

      <ScaffoldStats stats={c.stats} t={t} />

      {/* who we are teaser */}
      <section className="wrap" style={{ paddingTop: 90, paddingBottom: 80 }}>
        <div className="about-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
          <div>
            <div className="sec-title" style={{ marginBottom: 26 }}>
              <span className="bar" />
              <h2>{c.who.title[0]}<br />{c.who.title[1]}</h2>
            </div>
            <p className="body" style={{ fontSize: 17, lineHeight: 1.7, color: "var(--text)", margin: "0 0 16px" }}>{c.who.lead}</p>
            <p className="body muted" style={{ fontSize: 16, lineHeight: 1.7, margin: "0 0 28px" }}>{c.who.body}</p>
            <button className="btn btn-ghost" onClick={() => go("about")}>
              Read Our Story <span className="arrow"><Icon name="arrow" size={16} /></span>
            </button>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gridTemplateRows: "auto auto", gap: 14 }}>
            <Ph label={c.who.gallery[0]} img={c.who.galleryImages?.[0]} imgPos={c.who.galleryPos?.[0]} style={{ height: 200, gridColumn: "1 / 2" }} />
            <Ph label={c.who.gallery[1]} img={c.who.galleryImages?.[1]} imgPos={c.who.galleryPos?.[1]} style={{ height: 200, gridColumn: "2 / 3", marginTop: 36 }} />
            <Ph label={c.who.gallery[2]} img={c.who.galleryImages?.[2]} imgPos={c.who.galleryPos?.[2]} style={{ height: 160, gridColumn: "1 / 3" }} />
          </div>
        </div>
      </section>

      {/* updates placeholder */}
      <section style={{ borderTop: "1px solid var(--border)" }}>
        <div className="wrap" style={{ paddingTop: 80, paddingBottom: 80 }}>
          <div className="sec-title" style={{ marginBottom: 34 }}>
            <span className="bar" />
            <h2>Updates</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }} className="teaser-grid">
            {["Latest build update", "Competition recap", "Newsletter"].map((label, i) => (
              <div key={i} className="card" style={{ overflow: "hidden" }}>
                <Ph label="PHOTO" style={{ height: 200 }} />
                <div style={{ padding: "18px 20px" }}>
                  <div className="label" style={{ fontSize: 11, color: "var(--orange)", marginBottom: 8 }}>Coming soon</div>
                  <div className="head" style={{ fontSize: 19 }}>{label}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* sponsors placeholder */}
      <section style={{ borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)", background: "var(--surface)" }}>
        <div className="wrap" style={{ paddingTop: 56, paddingBottom: 56 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24, flexWrap: "wrap", gap: 14 }}>
            <span className="eyebrow">Our Partners</span>
            <span className="label" style={{ fontSize: 11, color: "var(--muted-2)", letterSpacing: "0.16em" }}>ADD SPONSOR LOGOS</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 14 }}>
            {Array.from({ length: 5 }).map((_, i) => <Ph key={i} label="SPONSOR" style={{ height: 90 }} />)}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ---- TEAM ---- */
function ScaffoldCrewYear({ year, vehicle, members, comps, overflow, t, fallbackSrc }) {
  return (
    <section className="wrap crew-year-section" style={{ paddingTop: 72, paddingBottom: 20 }}>
      <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>
        {vehicle && <span className="label" style={{ fontSize: 16, color: "var(--orange)", marginLeft: 10, alignSelf: "flex-end", opacity: 0.85 }}>{vehicle}</span>}
        <span className="body muted" style={{ marginLeft: "auto", fontSize: 14, alignSelf: "flex-end" }}>{members.length} listed · {overflow}+ total</span>
      </div>
      <div className="crew-grid" style={{ display: "grid", gridTemplateColumns: "0.5fr 2.4fr", gap: 40 }}>
        <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>
        <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={fallbackSrc} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

function ScaffoldTeam({ go, t, team }) {
  const c = team.content;
  return (
    <main>
      <SHeader ghost={c.ghost.team} eyebrow="The People Behind the Machine" title="Our Team" />

      {/* faculty card */}
      <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 }}>
          {(team.facultyAdvisors || [
            { 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" },
            { img: null, name: "Mr. Harshit Choubey", role: "Faculty Advisor", title: "Assistant Professor of Electrical Engineering" },
          ]).map((a, i) => (
            <div key={i} className="card" style={{ display: "flex", alignItems: "center", gap: 18, borderLeft: "4px solid var(--orange)", padding: 18 }}>
              {a.img ? (
                <img src={a.img} alt={a.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 }}>{a.role}</div>
                <div className="head" style={{ fontSize: "clamp(20px,2vw,26px)", lineHeight: 1 }}>{a.name}</div>
                {a.title && <p className="body muted" style={{ fontSize: 12, lineHeight: 1.4, margin: "6px 0 0" }}>{a.title}</p>}
              </div>
            </div>
          ))}
        </div>
      </section>

      {c.crew.years.map((y, i) => (
        <ScaffoldCrewYear key={y.year} {...y} t={t} fallbackSrc={team.id === "racers" ? "uploads/teams/gs-racers-baja/team/baja-placeholder.png" : team.id === "yaan" ? "uploads/teams/yaan/members/yaan-placeholder.jpg" : "uploads/teams/gs-motorsports/team/formula-student-placeholder.png"} />
      ))}
      <hr className="divider-orange wrap" style={{ marginTop: 30, width: "auto" }} />

      {/* quote */}
      <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: "color-mix(in oklab, var(--orange) 8%, transparent)", lineHeight: 1 }}>&ldquo;</span>
          <p className="head" style={{ margin: "0 auto", maxWidth: 980, fontSize: "clamp(30px,4.6vw,68px)", lineHeight: 1.02, position: "relative" }}>
            {c.quote[0]}<br /><span style={{ color: "var(--orange)" }}>{c.quote[1]}</span>
          </p>
          <div className="label" style={{ marginTop: 30, fontSize: 14, color: "var(--muted)" }}>&mdash; Team {team.name}</div>
        </div>
      </section>
    </main>
  );
}

/* ---- LEGACY / ACHIEVEMENTS ---- */
function ScaffoldLegacy({ go, t, team }) {
  const c = team.content;
  const ev = c.legacy.events;
  const yr = (name) => { const m = String(name).match(/\b(19|20)\d{2}\b/); return m ? m[0] : ""; };
  const noVenue = (v) => !v || /to be added/i.test(v);
  const seriesLabel = team.id === "racers" ? "Baja SAE India" : team.id === "yaan" ? "Aerial Robotics" : team.discipline;

  const chapters = ev.map((e) => ({
    year: yr(e.name),
    series: seriesLabel,
    event: e.name,
    venue: noVenue(e.venue) ? "" : e.venue,
    photo: e.photo,
    car: e.vehicle,
    tag: e.tag,
    story: e.story,
    milestone: e.milestone,
    results: e.results,
  }));

  const firstV = ev[0] && ev[0].vehicle;
  const lastV = ev[ev.length - 1] && ev[ev.length - 1].vehicle;
  const firstYear = yr(ev[0] && ev[0].name);

  const figures = (c.stats || []).slice(0, 3).map((s) => ({ n: s.n, suffix: s.suffix, label: s.label }));

  return (
    <LegacyStory
      go={go}
      eyebrow={`${c.legacy.since} · The Story So Far`}
      ghost={firstYear}
      lead={<>From <span className="accent">{firstV}</span> to {lastV} — {ev.length} machines, one relentless team.</>}
      sub={team.blurb}
      figures={figures}
      chapters={chapters}
    />
  );
}

/* ---- ABOUT ---- */
function ScaffoldAbout({ go, t, team }) {
  const c = team.content;
  return (
    <main>
      <SHeader ghost={c.ghost.about} title="Our Story" sub={<span>Not a club. <span style={{ color: "var(--orange)" }}>A team.</span></span>} />

      {/* what is <discipline> */}
      <section className="wrap" style={{ paddingTop: 80, paddingBottom: 80, borderBottom: "1px solid var(--border)" }}>
        <div className="fs-explainer" style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.85fr) minmax(0, 1fr)", gap: "clamp(32px, 6vw, 96px)", alignItems: "start" }}>
          <div>
            <h3 className="head" style={{ margin: 0, fontSize: "clamp(34px, 4.6vw, 64px)", lineHeight: 1.0 }}>
              {c.whatIs.title[0]}<br /><span style={{ color: "var(--orange)" }}>{c.whatIs.title[1]}</span>
            </h3>
          </div>
          <div>
            <p className="body" style={{ fontSize: "clamp(18px, 1.6vw, 23px)", lineHeight: 1.6, margin: 0, color: "var(--text)" }}>{c.whatIs.lead}</p>
            <p className="body muted" style={{ fontSize: 16, lineHeight: 1.8, margin: "20px 0 0", maxWidth: 560 }}>{c.whatIs.body}</p>
          </div>
        </div>
      </section>

      {/* who we are */}
      <section className="wrap" style={{ paddingTop: 80, 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" }}>Who We Are</h2>
            <p className="body" style={{ fontSize: 18, lineHeight: 1.7, margin: "0 0 18px" }}>{c.who.lead}</p>
            <p className="body muted" style={{ fontSize: 16, lineHeight: 1.7, margin: 0 }}>{c.who.body}</p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 3 }}>
            <Ph label={c.who.gallery[0]} img={c.who.galleryImages?.[0]} imgPos={c.who.galleryPos?.[0]} style={{ height: 200 }} />
            <Ph label={c.who.gallery[1]} img={c.who.galleryImages?.[1]} imgPos={c.who.galleryPos?.[1]} style={{ height: 200, marginTop: 32 }} />
            <Ph label={c.who.gallery[2]} img={c.who.galleryImages?.[2]} imgPos={c.who.galleryPos?.[2]} style={{ height: 170, gridColumn: "1 / 3" }} />
          </div>
        </div>
      </section>

      {/* events we compete in */}
      <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 Compete In</h2>
        </div>
        <p className="body muted" style={{ margin: "0 0 40px 24px", fontSize: 15, maxWidth: 560 }}>{c.compete.subtitle}</p>
        <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          {c.compete.events.map((ev, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 440px", gap: 0, background: ev.accent ? "var(--surface)" : "var(--surface-2)", border: "1px solid var(--border)", overflow: "hidden" }} className="event-card-grid">
              <div style={{ padding: "48px 52px", display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 32 }}>
                <div>
                  <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
                    <span className="eyebrow" style={{ fontSize: 11 }}>{ev.tag}</span>
                    {ev.accent && <span style={{ background: "var(--orange)", color: "#0A0A0A", fontFamily: "var(--f-label)", fontWeight: 700, fontSize: 10, letterSpacing: "0.1em", padding: "3px 10px" }}>ACTIVE</span>}
                  </div>
                  <h3 className="head" style={{ margin: "0 0 6px", fontSize: "clamp(26px, 3.5vw, 44px)" }}>{ev.name}</h3>
                  <div className="label" style={{ fontSize: 13, color: "var(--muted)", marginBottom: 24 }}>{ev.sub}</div>
                  <p className="body" style={{ fontSize: 15, lineHeight: 1.75, margin: "0 0 24px", color: "var(--text)", opacity: 0.8, maxWidth: 520 }}>{ev.body}</p>
                  <a href={ev.url} target="_blank" rel="noopener noreferrer" className="btn btn-ghost" style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
                    Know More <span className="arrow"><Icon name="arrow" size={15} /></span>
                  </a>
                </div>
              </div>
              <div style={{ position: "relative", minHeight: 340 }}>
                <Ph label={`${ev.name.toUpperCase()} — PHOTO`} style={{ position: "absolute", inset: 0 }} />
              </div>
            </div>
          ))}
        </div>
      </section>

      <InstituteSection />

      {/* 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 the 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")}>Meet the Team <span className="arrow"><Icon name="arrow" size={16} color="#0A0A0A" /></span></button>
            <button className="btn btn-ghost" onClick={() => go("crowdfunding")}>Support Us</button>
          </div>
        </div>
      </section>
    </main>
  );
}

/* shared institute block — same college for every team */
function InstituteSection() {
  return (
    <section style={{ borderBottom: "1px solid var(--border)", background: "var(--surface)" }}>
      <div className="wrap" style={{ paddingTop: 72, paddingBottom: 80 }}>
        <div className="sec-title" style={{ marginBottom: 10 }}>
          <span className="bar" />
          <h2 className="head" style={{ margin: 0 }}>Our Institute</h2>
        </div>
        <p className="body muted" style={{ margin: "0 0 52px 24px", fontSize: 15, maxWidth: 480 }}>The institution behind every team.</p>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 3 }} className="institute-grid">
          <div style={{ background: "var(--bg)", border: "1px solid var(--border)", padding: "48px 44px", display: "flex", flexDirection: "column", gap: 24 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Est. 1952 · Indore, M.P.</div>
              <h3 className="head" style={{ margin: "0 0 6px", fontSize: "clamp(22px, 2.8vw, 38px)", lineHeight: 1.1 }}>Shri G.S. Institute of<br />Technology &amp; Science</h3>
              <div className="label" style={{ fontSize: 13, color: "var(--orange)", marginTop: 8 }}>SGSITS — Indore</div>
            </div>
            <p className="body" style={{ fontSize: 15, lineHeight: 1.75, margin: 0, color: "var(--text)", opacity: 0.8 }}>
              One of Madhya Pradesh's oldest and most respected engineering institutions, SGSITS has been shaping engineers since 1952. Affiliated to RGPV and accredited by NAAC, it offers undergraduate and postgraduate programmes across engineering and technology disciplines.
            </p>
            <div style={{ display: "flex", gap: 3, marginTop: 8, flexWrap: "wrap" }}>
              {["NAAC Accredited", "RGPV Affiliated", "Est. 1952", "Indore, M.P."].map((b, i) => (
                <span key={i} style={{ background: "var(--surface-2)", border: "1px solid var(--border)", fontFamily: "var(--f-label)", fontWeight: 700, fontSize: 11, letterSpacing: "0.1em", color: "var(--muted)", padding: "6px 14px" }}>{b}</span>
              ))}
            </div>
          </div>
          <a href="https://sgsits.ac.in" target="_blank" rel="noopener noreferrer" style={{ position: "relative", display: "flex", minHeight: 240, overflow: "hidden", textDecoration: "none" }}>
            <img src="uploads/teams/gs-motorsports/car/sgsits-campus.png" alt="SGSITS campus" style={{ width: "100%", objectFit: "cover", objectPosition: "center" }} />
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, color-mix(in oklab, var(--bg) 35%, transparent) 0%, transparent 35%, color-mix(in oklab, var(--bg) 72%, transparent) 100%)", pointerEvents: "none" }} />
            <div className="label" style={{ position: "absolute", left: 20, bottom: 18, fontSize: 11, letterSpacing: "0.14em", color: "var(--text)", display: "flex", alignItems: "center", gap: 8 }}>
              SGSITS.AC.IN <span style={{ color: "var(--orange)" }}>&rarr;</span>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ScaffoldHome, ScaffoldTeam, ScaffoldLegacy, ScaffoldAbout, InstituteSection });