export function MarqueeStrip() {
  return (
    <div className="relative z-10 mx-[-5px] mb-[-90px] mt-[20px] overflow-hidden bg-gradient-to-r from-[#45D0BD] to-[#44B6E9] py-[42px]" style={{ transform: "rotate(-2.07deg)" }}>
      <div className="flex w-[200%] whitespace-nowrap">
        {/* Marquee track 1 */}
        <div className="animate-marquee flex gap-8">
          {[...Array(6)].map((_, i) => (
            <div key={i} className="flex items-center gap-8">
              <span className="text-[60px] font-bold leading-none text-white" style={{ fontFamily: "var(--font-sora)" }}>
                Artificial Intelligence
              </span>
              <span className="flex h-3 w-3 rounded-full bg-white opacity-50" />
            </div>
          ))}
        </div>
        {/* Marquee track 2 (seamless loop) */}
        <div className="animate-marquee flex gap-8">
          {[...Array(6)].map((_, i) => (
            <div key={`dup-${i}`} className="flex items-center gap-8">
              <span className="text-[60px] font-bold leading-none text-white" style={{ fontFamily: "var(--font-sora)" }}>
                Artificial Intelligence
              </span>
              <span className="flex h-3 w-3 rounded-full bg-white opacity-50" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}