/* ============================================================
   CROWDFUNDING PAGE — sponsor tier data
   ============================================================ */

const TITLE_SPONSOR = { name: "Hindustan Equipments", src: "uploads/sponsor/hindustan-equipments.png" };

const PLAT_SPONSORS = [
  { name: "Batch 1998", src: "uploads/sponsor/silver/batch-1998.jpg" },
  { name: "PATH", src: "uploads/sponsor/gold/path.png" },
  { name: "Virtuoso CNC Arts", src: "uploads/sponsor/gold/virtuoso-cnc-arts.png" },
  { name: "Bhagirath Brothers", src: "uploads/sponsor/gold/bhagirath-brothers.png" },
  { name: "Fluidomat", src: "uploads/sponsor/gold/fluidomat.png" },
  { name: "SGSITS Alumni Assoc.", src: "uploads/sponsor/gold/sgsits-alumni-assoc.png" },
  { name: "Wings", src: "uploads/sponsor/gold/wings.jpg" },
  { name: "Ascentt", src: "uploads/sponsor/gold/ascentt.jpg" },
  { name: "Vishalfab", src: "uploads/sponsor/gold/vishalfab.jpg" },
  { name: "JSW Sarbloh Motors", src: "uploads/sponsor/gold/jsw-sarbloh-motors.jpg" },
];
const GOLD_SPONSORS = [
  { name: "Tirupati Industries", src: "uploads/sponsor/silver/tirupati-industries.png" },
  { name: "Bajrang", src: "uploads/sponsor/silver/bajrang.png" },
  { name: "TPL", src: "uploads/sponsor/silver/tpl.png" },
  { name: "Neo Hydraulics", src: "uploads/sponsor/silver/neo-hydraulics.png" },
  { name: "Techforce Composites", src: "uploads/sponsor/silver/techforce-composites.jpg" },
  { name: "Mantra Composites", src: "uploads/sponsor/silver/mantra-composites.png" },
  { name: "Scientific", src: "uploads/sponsor/silver/scientific.jpg" },
  { name: "Robosol", src: "uploads/sponsor/silver/robosol.jpg" },
  { name: "Batch 1975", src: "uploads/sponsor/silver/batch-1975.jpg" },
  { name: "Khanwalkar Industries", src: "uploads/sponsor/silver/khanwalkar-industries.jpg" },
  { name: "Si Mangla", src: "uploads/sponsor/silver/si-mangla.jpg" },
];
const SILVER_SPONSORS = [
  { name: "Magpie", src: "uploads/sponsor/bronze/magpie.png" },
  { name: "Prashanti", src: "uploads/sponsor/bronze/prashanti.png" },
  { name: "SKF", src: "uploads/sponsor/bronze/skf.png" },
  { name: "IPG", src: "uploads/sponsor/bronze/ipg.png" },
  { name: "Ansys", src: "uploads/sponsor/bronze/ansys.png" },
  { name: "SolidWorks", src: "uploads/sponsor/bronze/solidworks.png" },
  { name: "Abhikalp", src: "uploads/sponsor/bronze/abhikalp.png" },
  { name: "AICTE IDEA Lab", src: "uploads/sponsor/bronze/aicte-idea-lab.png" },
  { name: "Monica Opto Hub", src: "uploads/sponsor/bronze/monica-opto-hub.png" },
  { name: "MPFC", src: "uploads/sponsor/bronze/mpfc.png" },
  { name: "Shubh Traders", src: "uploads/sponsor/bronze/shubh-traders.png" },
  { name: "T-Motor", src: "uploads/sponsor/bronze/t-motor.png" },
];

function SponsorTitleBlock() {
  const TITLE = TITLE_SPONSOR;
  return (
    <section style={{ borderTop: "1px solid var(--border)", background: "var(--bg)", position: "relative", overflow: "hidden" }}>
      <div aria-hidden style={{
        position: "absolute", left: -10, top: "50%", transform: "translateY(-50%)",
        fontFamily: "var(--f-head)", fontSize: "clamp(80px,14vw,200px)",
        color: "rgba(255,107,0,0.04)", lineHeight: 1, pointerEvents: "none", userSelect: "none"
      }}>TITLE</div>
      <div className="wrap" style={{ paddingTop: 64, paddingBottom: 64, position: "relative" }}>
        <div className="title-sponsor-grid" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 56, alignItems: "center" }}>
          <div>
            <div className="eyebrow" style={{ color: "var(--text)", fontWeight: 700, fontFamily: "var(--f-head)", marginBottom: 14 }}>TITLE SPONSOR</div>
            <div className="head" style={{ fontSize: "clamp(28px, 3vw, 48px)", lineHeight: 0.95, marginBottom: 18 }}>
              <span style={{ color: "var(--orange)" }}>HINDUSTAN EQUIPMENTS</span>
            </div>
            <p className="body muted" style={{ fontSize: 15, lineHeight: 1.65, margin: 0, maxWidth: 440 }}>
              Powering our 2026 campaign — Hindustan Equipments stands with Team Formula Student as our official title partner from concept to chequered flag.
            </p>
          </div>
          <div style={{ position: "relative" }}>
            <div className="title-sponsor-card">
              <img src={TITLE.src} alt={TITLE.name} />
            </div>
            <div className="label" style={{ position: "absolute", top: 14, right: 14, fontSize: 10, color: "var(--orange)", letterSpacing: "0.14em",
              background: "var(--bg)", padding: "4px 8px", border: "1px solid var(--orange)"
            }}>OFFICIAL TITLE PARTNER</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* Gold/Silver share this layout, sized via `size` */
function SponsorTierRow({ label, sponsors, size }) {
  const dims = { plat: 160, gold: 125, silver: 100 }[size];
  return (
    <section style={{ borderTop: "1px solid var(--border)", background: "var(--bg)", padding: "40px 0" }}>
      <div className="wrap">
        <div style={{ marginBottom: 22, display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16, flexWrap: "wrap" }}>
          <div className="sec-title" style={{ marginBottom: 0 }}>
            <span className="bar" style={{ plat: { background: "#E5E4E2" }, gold: { background: "#D4AF37" }, silver: { background: "#9AA0A6" } }[size]} />
            <h2 style={{ fontSize: { plat: "clamp(20px,2.2vw,30px)", gold: "clamp(18px,2vw,26px)", silver: "clamp(16px,1.8vw,22px)" }[size] }}>{label}</h2>
          </div>
          <span className="label" style={{ fontSize: 11, color: "var(--muted-2)", letterSpacing: "0.16em" }}>{sponsors.length} PARTNER{sponsors.length === 1 ? "" : "S"}</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: `repeat(auto-fit, minmax(${dims * 1.5}px, 1fr))`, gap: 16 }}>
          {sponsors.map((s, i) =>
            <div key={i} className="sponsor-tier-card" title={s.name} style={{ height: dims }}>
              <img src={s.src} alt={s.name} loading="lazy" />
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   CROWDFUNDING PAGE
   ============================================================ */

function CrowdfundingPage({ go, t }) {
  return (
    <main>
      {/* Hero */}
      <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,20vw,300px)",
          color: "rgba(255,107,0,0.05)", lineHeight: 1, pointerEvents: "none", userSelect: "none",
        }}>FUND</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(34px, 5vw, 66px)", lineHeight: 0.9 }}>
                Fuel the <span style={{ color: "var(--orange)" }}>Dream</span>
              </h1>
            </div>
            <p className="label" style={{ margin: "0 0 0 24px", fontSize: "clamp(13px,1.4vw,17px)", color: "var(--text)", maxWidth: 480 }}>
              <span style={{ color: "var(--orange)" }}></span>
            </p>
          </div>
        </div>
      </section>

      {/* Partner CTA */}
      <section style={{ background: "var(--surface)" }}>
        <div className="wrap" style={{ paddingTop: 72, paddingBottom: 80 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 36, flexWrap: "wrap", gap: 14 }}>
            <div className="sec-title">
              <span className="bar" />
              <h2>Partner With Us</h2>
            </div>
            <span className="label" style={{ fontSize: 13, color: "var(--muted)" }}>For brands &amp; corporate sponsors</span>
          </div>
          <div className="partner-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
            <PartnerCard
              icon="file-download"
              title="Sponsorship Brochure"
              body="Detailed insights into our teams' achievements, media reach, and the various tiers of sponsorship benefits available for your brand."
              cta="Download PDF"
              href="uploads/docs/GSR_Sponsorship_Brochure_2026.pdf"
              t={t}
            />
            <PartnerCard
              icon="mail"
              title="Get In Touch"
              body="Ready to collaborate? Connect directly with our corporate relations team to discuss how we can create value for your organization."
              cta="Contact Us"
              onClick={() => { if (go) { go("contact"); window.scrollTo({ top: 0 }); } }}
              t={t}
            />
          </div>
        </div>
      </section>

      {/* Title Sponsor — featured */}
      <SponsorTitleBlock />

      {/* Platinum Sponsors */}
      <SponsorTierRow label="Platinum Sponsors" sponsors={PLAT_SPONSORS} size="plat" />

      {/* Gold Sponsors */}
      <SponsorTierRow label="Gold Sponsors" sponsors={GOLD_SPONSORS} size="gold" />

      {/* Silver Sponsors */}
      <SponsorTierRow label="Silver Sponsors" sponsors={SILVER_SPONSORS} size="silver" />
    </main>
  );
}

function PartnerCard({ icon, title, body, cta, onClick, href, t }) {
  const round = t.cardShape === "rounded";
  const Wrap = href ? "a" : "div";
  const wrapProps = href ? { href, download: true, target: "_blank", rel: "noopener" } : { onClick };
  return (
    <Wrap className="card partner-card" {...wrapProps} style={{
      padding: "clamp(28px,3vw,44px)",
      borderRadius: round ? 12 : 0,
      cursor: (onClick || href) ? "pointer" : "default",
      display: "flex", flexDirection: "column", alignItems: "flex-start", textDecoration: "none", color: "inherit",
    }}>
      <div style={{
        width: 60, height: 60, display: "flex", alignItems: "center", justifyContent: "center",
        background: "var(--border)", borderRadius: round ? 12 : 0, marginBottom: 28,
      }}>
        <Icon name={icon} size={26} color="var(--text)" strokeWidth={1.7} />
      </div>
      <h3 className="head" style={{ margin: "0 0 14px", fontSize: "clamp(26px,2.6vw,34px)", lineHeight: 0.95 }}>{title}</h3>
      <p className="body muted" style={{ margin: "0 0 28px", fontSize: 15, lineHeight: 1.7, maxWidth: 420 }}>{body}</p>
      <span className="partner-link label" style={{
        display: "inline-flex", alignItems: "center", gap: 10, marginTop: "auto",
        fontSize: 14, color: "var(--text)", letterSpacing: "0.08em",
      }}>
        {cta}
        <span className="arrow"><Icon name="arrow" size={15} color="currentColor" /></span>
      </span>
    </Wrap>
  );
}

Object.assign(window, { CrowdfundingPage });