function Marquee({ items, className = "", speed = "normal", opacity = 0.22 }) {
  const row = items.join("  •  ");
  return (
    <div className={`overflow-hidden select-none ${className}`} aria-hidden="true">
      <div className={`marquee-track ${speed === "slow" ? "slow" : ""}`}>
        <div
          className="whitespace-nowrap pr-12 uppercase"
          style={{
            letterSpacing: "0.4em",
            color: `rgba(255,255,255,${opacity})`,
          }}
        >
          {row}
          <span className="px-6">•</span>
          {row}
          <span className="px-6">•</span>
        </div>
        <div
          className="whitespace-nowrap pr-12 uppercase"
          style={{
            letterSpacing: "0.4em",
            color: `rgba(255,255,255,${opacity})`,
          }}
        >
          {row}
          <span className="px-6">•</span>
          {row}
          <span className="px-6">•</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Marquee });