const Highlights = () => {
  const items = [
    {
      num: "GB-001",
      label: "Current Task",
      note: "Season 01 · Live",
    },
    {
      num: "5",
      label: "Submissions",
      note: "Sample data · not official",
    },
    {
      num: "94.2",
      label: "Top Score",
      note: "Polaris Lab / RustLoop VM",
    },
    {
      num: "T-12d",
      label: "Time Left",
      note: "Median score 87.4",
    },
  ];
  const section = { borderBottom: "1px solid var(--line)", background: "var(--bg-2)" };
  const wrap = { maxWidth: 1240, margin: "0 auto", padding: "0 28px", display: "grid", gridTemplateColumns: "repeat(4, 1fr)" };
  const cell = (i) => ({ padding: "32px 28px", borderRight: i < items.length - 1 ? "1px solid var(--line)" : "none" });
  const label = { fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "var(--muted)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 12 };
  const num = { fontFamily: "JetBrains Mono, monospace", fontSize: 32, fontWeight: 700, color: "var(--text)", letterSpacing: "-0.02em", lineHeight: 1 };
  const note = { fontSize: 12, color: "var(--muted-2)", marginTop: 10 };
  return (
    <section style={section} data-screen-label="Highlights">
      <style>{`@media (max-width: 900px){ .hl-grid{ grid-template-columns: repeat(2, 1fr) !important; } }`}</style>
      <div style={wrap} className="hl-grid">
        {items.map((it, i) => (
          <div key={i} style={cell(i)}>
            <div style={label}>{it.label}</div>
            <div style={num}>{it.num}</div>
            <div style={note}>{it.note}</div>
          </div>
        ))}
      </div>
    </section>
  );
};
window.Highlights = Highlights;