const Sponsors = () => {
  const orgs = [
    { code: "OpenAI" },
    { code: "Anthropic" },
    { code: "DeepSeek" },
    { code: "Moonshot AI" },
    { code: "AzureBench" },
    { code: "GraphLabs" },
    { code: "Polyhedra" },
    { code: "Aethir" },
  ];
  const individuals = [
    { code: "HJ", name: "@hank",     note: "Indie developer · Rust toolchain" },
    { code: "ML", name: "@mira",     note: "Full-stack engineer · local-first" },
    { code: "AK", name: "@akumar",   note: "Open-source supporter" },
    { code: "ST", name: "@s-tan",    note: "ML researcher · inference systems" },
    { code: "YJ", name: "@yujie",    note: "" },
    { code: "WX", name: "@wenxin",   note: "Technical writer" },
    { code: "LR", name: "@liren",    note: "Backend engineer" },
    { code: "ZP", name: "@zp",       note: "" },
  ];

  // ---------- styles ----------
  const section = { borderBottom: "1px solid var(--line)", padding: "100px 0" };
  const wrap = { maxWidth: 1280, margin: "0 auto", padding: "0 28px" };
  const eyebrow = {
    display: "inline-flex", alignItems: "center", gap: 8,
    fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "var(--muted)",
    letterSpacing: "0.12em", marginBottom: 18, textTransform: "uppercase",
  };
  const bracket = { color: "var(--accent)" };
  const h2 = {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 40, fontWeight: 700, letterSpacing: "-0.025em",
    margin: 0, lineHeight: 1.05,
  };
  const lead = { fontSize: 17, color: "var(--muted)", marginTop: 18, marginBottom: 48, maxWidth: 720, lineHeight: 1.55 };

  // pool
  const poolWrap = {
    border: "1px solid var(--line)", background: "var(--panel)",
    padding: "32px 36px",
    display: "grid", gridTemplateColumns: "auto 1fr auto",
    gap: 36, alignItems: "center",
    marginBottom: 56, position: "relative", overflow: "hidden",
  };
  const poolGlow = {
    position: "absolute", top: "50%", left: "32%",
    width: 400, height: 400,
    background: "radial-gradient(circle, rgba(74,222,128,0.18), transparent 60%)",
    pointerEvents: "none", transform: "translate(-50%,-50%)",
  };
  const poolEyebrow = {
    fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "var(--muted-2)",
    letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 8,
  };
  const poolNum = {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: "clamp(48px, 6vw, 76px)", fontWeight: 700, letterSpacing: "-0.03em",
    color: "var(--accent)", lineHeight: 1,
    textShadow: "0 0 24px rgba(74,222,128,0.3)",
  };
  const poolSub = {
    fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "var(--muted)",
    marginTop: 10, letterSpacing: "0.06em",
  };
  const poolMeta = {
    display: "flex", flexDirection: "column", gap: 14,
    fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "var(--muted)",
    position: "relative",
  };
  const poolMetaRow = {
    display: "flex", justifyContent: "space-between", gap: 24,
    paddingBottom: 10, borderBottom: "1px dashed var(--line)",
  };
  const poolMetaK = { color: "var(--muted-2)", letterSpacing: "0.08em" };
  const poolMetaV = { color: "var(--text)", fontWeight: 600 };
  const poolCta = {
    background: "var(--accent)", color: "#06170D",
    padding: "16px 24px", fontWeight: 600, fontSize: 14, cursor: "pointer",
    display: "inline-flex", alignItems: "center", gap: 8, border: "none",
    fontFamily: "inherit", position: "relative",
  };

  // Section sub-header (above org grid / individual grid)
  const groupHeader = (variant) => ({
    display: "flex", alignItems: "center", justifyContent: "space-between",
    marginBottom: 16,
    paddingBottom: 12,
    borderBottom: "1px solid var(--line)",
  });
  const groupTag = (color) => ({
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 12, letterSpacing: "0.14em",
    color, textTransform: "uppercase",
  });
  const groupTitle = {
    fontFamily: "Inter, sans-serif",
    fontSize: 22, fontWeight: 700, letterSpacing: "-0.015em",
    color: "var(--text)",
    marginTop: 6,
  };

  // ===== ORG LOGO WALL (zkpass-style, 4-col, logo only) =====
  const orgGrid = {
    display: "grid",
    gridTemplateColumns: "repeat(4, 1fr)",
    border: "1px solid var(--line)",
    background: "var(--panel)",
  };
  const orgTile = (i, total) => {
    const cols = 4;
    const col = i % cols;
    const row = Math.floor(i / cols);
    const totalRows = Math.ceil(total / cols);
    return {
      height: 140,
      borderRight: col < cols - 1 ? "1px solid var(--line)" : "none",
      borderBottom: row < totalRows - 1 ? "1px solid var(--line)" : "none",
      display: "flex", alignItems: "center", justifyContent: "center",
      position: "relative",
      transition: "background .2s",
      cursor: "pointer",
    };
  };
  const orgLogo = {
    fontFamily: "JetBrains Mono, monospace",
    fontWeight: 700,
    fontSize: 22,
    letterSpacing: "-0.02em",
    color: "var(--text)",
    transition: "color .15s",
  };
  const orgNameTag = {
    position: "absolute",
    top: 12, left: 14,
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 10, letterSpacing: "0.16em",
    color: "var(--muted-2)",
    textTransform: "uppercase",
  };

  // ===== INDIVIDUAL CARD GRID (4-col, same tile size as orgs) =====
  const indGrid = {
    display: "grid",
    gridTemplateColumns: "repeat(4, 1fr)",
    border: "1px solid var(--line)",
    background: "var(--panel)",
  };
  const indTile = (i, total) => {
    const cols = 4;
    const col = i % cols;
    const row = Math.floor(i / cols);
    const totalRows = Math.ceil(total / cols);
    return {
      height: 140,
      padding: "16px 18px",
      borderRight: col < cols - 1 ? "1px solid var(--line)" : "none",
      borderBottom: row < totalRows - 1 ? "1px solid var(--line)" : "none",
      display: "flex", alignItems: "center", gap: 14,
      cursor: "pointer",
      transition: "background .15s",
    };
  };
  const avatar = {
    width: 44, height: 44, borderRadius: "50%",
    border: "1px solid var(--accent-line)",
    background: "var(--accent-soft)",
    display: "flex", alignItems: "center", justifyContent: "center",
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 13, fontWeight: 700, color: "var(--accent)",
    letterSpacing: "0.02em",
    flexShrink: 0,
  };
  const indName = {
    fontFamily: "Inter, sans-serif",
    fontSize: 15, fontWeight: 600,
    color: "var(--text)",
    letterSpacing: "-0.005em",
  };
  const indNote = {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 11, color: "var(--muted)",
    marginTop: 4, lineHeight: 1.4,
  };

  const ctaLine = {
    marginTop: 32, padding: "20px 22px",
    border: "1px dashed var(--line)",
    display: "flex", alignItems: "center", justifyContent: "space-between",
    fontFamily: "JetBrains Mono, monospace", fontSize: 13,
    gap: 16, flexWrap: "wrap",
  };

  return (
    <section style={section} id="sponsors" data-screen-label="Sponsors">
      <style>{`
        .sp-grid-4 {
          gap: 1px;
          background: var(--line) !important;
        }
        .sp-grid-4 > div {
          border: none !important;
          background: var(--panel);
          min-width: 0;
        }
        @media (max-width: 980px) {
          .sp-pool { grid-template-columns: 1fr !important; gap: 20px !important; }
          .sp-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
        }
        @media (max-width: 760px) {
          .sp-wrap { padding: 0 20px !important; }
          .sp-pool { padding: 24px 20px !important; margin-bottom: 42px !important; }
          .sp-pool button { width: 100% !important; justify-content: center !important; }
          .sp-group-header { align-items: flex-start !important; gap: 12px !important; }
          .sp-org-tile { height: 86px !important; }
          .sp-org-logo { font-size: 15px !important; max-width: calc(100% - 22px); text-align: center; overflow-wrap: anywhere; line-height: 1.15; }
          .sp-org-tag { top: 8px !important; left: 10px !important; font-size: 8px !important; }
          .sp-ind-tile {
            height: 78px !important;
            padding: 10px 12px !important;
            gap: 9px !important;
            align-items: flex-start !important;
          }
          .sp-avatar { width: 34px !important; height: 34px !important; font-size: 10px !important; }
          .sp-ind-copy { min-width: 0; padding-top: 1px; }
          .sp-ind-name { font-size: 13px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
          .sp-ind-note {
            font-size: 9.5px !important;
            line-height: 1.25 !important;
            margin-top: 2px !important;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            overflow-wrap: anywhere;
          }
        }
        @media (max-width: 560px) {
          .sp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        }
        @media (max-width: 260px) {
          .sp-grid-4 { grid-template-columns: 1fr !important; }
          .sp-ind-tile { height: auto !important; min-height: 76px !important; }
        }
        .sp-org-tile:hover { background: rgba(255,255,255,0.025); }
        .sp-org-tile:hover .sp-org-logo { color: var(--accent); }
        .sp-ind-tile:hover { background: rgba(255,255,255,0.025); }
      `}</style>
      <div style={wrap} className="sp-wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24 }}>
          <div>
            <div style={eyebrow}>
              <span style={bracket}>[</span>
              {"POWERED BY OUR SPONSORS"}
              <span style={bracket}>]</span>
            </div>
            <h2 style={h2}>{"Built by every "}<span style={{ color: "var(--accent)" }}>{"supporter"}</span>{", a shared prize pool"}</h2>
            <p style={lead}>{"All sponsorship goes into the season prize pool, awarded to the top-scoring team or individual. Every contribution and every distribution is recorded publicly."}</p>
          </div>
          <span style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "var(--muted-2)" }}>{"Sample listing · not confirmed sponsors"}</span>
        </div>

        {/* POOL */}
        <div style={poolWrap} className="sp-pool">
          <div style={poolGlow}></div>
          <div style={{ position: "relative" }}>
            <div style={poolEyebrow}>{"S01 PRIZE POOL"}</div>
            <div style={poolNum}>¥ 674,500</div>
            <div style={poolSub}>{`From ${orgs.length + individuals.length} supporters · awarded to GB-001 Season 01`}</div>
          </div>
          <div style={poolMeta}>
            <div style={poolMetaRow}>
              <span style={poolMetaK}>{"Allocation"}</span>
              <span style={poolMetaV}>{"Winner takes all"}</span>
            </div>
            <div style={{ ...poolMetaRow, borderBottom: "none", paddingBottom: 0 }}>
              <span style={poolMetaK}>{"Details"}</span>
              <span style={{ ...poolMetaV, fontWeight: 400, color: "var(--muted)", textAlign: "right", maxWidth: 280, lineHeight: 1.5 }}>
                {"The full pool is awarded to the top-scoring team or individual of the season; results and artifacts are published together."}
              </span>
            </div>
          </div>
          <button style={poolCta}>{"Become a sponsor →"}</button>
        </div>

        {/* ORGS — logo wall */}
        <div style={groupHeader()} className="sp-group-header">
          <div>
            <div style={groupTag("var(--blue)")}>{"[ ORGANIZATIONS ]"}</div>
            <div style={groupTitle}>{"Organization sponsors"}</div>
          </div>
          <span style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "var(--muted-2)", letterSpacing: "0.1em" }}>
            {String(orgs.length).padStart(2, "0")} ENTRIES
          </span>
        </div>
        <div style={orgGrid} className="sp-grid-4">
          {orgs.map((o, i) => (
            <div key={o.code} style={orgTile(i, orgs.length)} className="sp-org-tile">
              <span style={orgNameTag} className="sp-org-tag">{o.code}</span>
              <span style={orgLogo} className="sp-org-logo">{o.code}</span>
            </div>
          ))}
        </div>

        {/* INDIVIDUALS — compact card */}
        <div style={{ ...groupHeader(), marginTop: 56 }} className="sp-group-header">
          <div>
            <div style={groupTag("var(--accent)")}>{"[ INDIVIDUALS ]"}</div>
            <div style={groupTitle}>{"Individual sponsors"}</div>
          </div>
          <span style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "var(--muted-2)", letterSpacing: "0.1em" }}>
            {String(individuals.length).padStart(2, "0")} ENTRIES
          </span>
        </div>
        <div style={indGrid} className="sp-grid-4">
          {individuals.map((p, i) => (
            <div key={p.code + p.name} style={indTile(i, individuals.length)} className="sp-ind-tile">
              <div style={avatar} className="sp-avatar">{p.code}</div>
              <div style={{ minWidth: 0 }} className="sp-ind-copy">
                <div style={indName} className="sp-ind-name">{p.name}</div>
                {p.note && <div style={indNote} className="sp-ind-note">{p.note}</div>}
              </div>
            </div>
          ))}
        </div>

        <div style={ctaLine}>
          <span style={{ color: "var(--muted)" }}>{"From ¥50K for orgs · any amount for individuals, listed instantly"}</span>
          <a style={{ color: "var(--accent)", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 6 }}>
            {"Become a sponsor →"}
          </a>
        </div>
      </div>
    </section>
  );
};
window.Sponsors = Sponsors;