function Connect() {
  const socials = window.RUN_DATA.socials;
  const [ref, visible] = useReveal();

  return (
    <section className="connect" id="connect">
      <SectionHead
        n="02"
        kicker="CONNECT"
        title="Find the next run."
      />

      <div className={`connect__grid ${visible ? "rv" : ""}`} ref={ref}>
        {socials.map((s, i) => (
          <a
            key={s.name}
            className="connect__card"
            href={s.url}
            target="_blank"
            rel="noreferrer"
            style={{ transitionDelay: `${i * 70}ms` }}
          >
            <div className="connect__card-name">{s.name}</div>
            <div className="connect__card-handle">{s.handle}</div>
            <div className="connect__card-arrow">↗</div>
          </a>
        ))}
      </div>

      <footer className="foot">
        <div className="foot__left">
          <div className="foot__mark">
            <svg viewBox="0 0 24 24" width="18" height="18">
              <path d="M2 18 L22 4 L22 10 L2 22 Z" fill="currentColor" />
            </svg>
            <span>mirrorsedger</span>
          </div>
          <div className="foot__tagline">Mirror's Edge speedruns</div>
        </div>
        <div className="foot__right">
          <span>Built for speed.</span>
          <span>© 2026</span>
        </div>
      </footer>
    </section>
  );
}

Object.assign(window, { Connect });