function SiteMarquee() {
  const items = [
    "MARTIAN FRONTIER · WAVE 12",
    "DRAGONFALL · CO-OP · 4P",
    "GRIDPUNK · LIVE TOURNAMENT",
    "ECHO PROTOCOL · BETA",
    "STARFORGE · DESIGNER PREVIEW",
    "TABLETOP UNTETHERED · 24.2",
  ];
  const row = [...items, ...items];
  return (
    <section style={{
      borderTop: "1px solid var(--border-1)",
      borderBottom: "1px solid var(--border-1)",
      background: "rgba(17,19,26,0.6)",
      overflow: "hidden",
      marginTop: 24,
    }}>
      <div style={{
        display: "flex", gap: 56, padding: "18px 0",
        whiteSpace: "nowrap", width: "max-content",
        animation: "ps-marquee 38s linear infinite",
      }}>
        {row.map((label, i) => (
          <span key={i} style={{
            display: "inline-flex", alignItems: "center", gap: 16,
            fontFamily: "var(--font-display)", fontSize: 13,
            letterSpacing: "0.22em", color: "var(--fg-2)",
            textTransform: "uppercase",
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                 stroke="url(#mg)" strokeWidth="1.8" strokeLinecap="round">
              <defs>
                <linearGradient id="mg" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0" stopColor="#00D4FF"/>
                  <stop offset="1" stopColor="#C44DFF"/>
                </linearGradient>
              </defs>
              <path d="M5 12h14M13 6l6 6-6 6"/>
            </svg>
            {label}
          </span>
        ))}
      </div>
    </section>
  );
}

window.SiteMarquee = SiteMarquee;