"use client";

import Marquee from "react-fast-marquee";
import { Coffee, ShoppingBag, Music, Film, Dumbbell, Ticket, Sparkles } from "lucide-react";

export default function BrandMarquee() {
  const brands = [
    { name: "Starbucks", icon: <Coffee className="w-5 h-5 text-emerald-400" />, color: "text-emerald-400" },
    { name: "Nike", icon: <ShoppingBag className="w-5 h-5 text-white" />, color: "text-white" },
    { name: "Spotify", icon: <Music className="w-5 h-5 text-green-400" />, color: "text-green-400" },
    { name: "Netflix", icon: <Film className="w-5 h-5 text-red-500" />, color: "text-red-500" },
    { name: "Gymshark", icon: <Dumbbell className="w-5 h-5 text-amber-500" />, color: "text-amber-500" },
    { name: "Ticketmaster", icon: <Ticket className="w-5 h-5 text-sky-400" />, color: "text-sky-400" },
  ];

  return (
    <section className="w-full bg-[#070707] border-y border-white/5 py-8 relative z-10 overflow-hidden">
      <Marquee gradient={false} speed={40} className="font-sora text-sm font-extrabold tracking-wider">
        {brands.concat(brands).map((brand, idx) => (
          <div key={idx} className="flex items-center mx-12 space-x-3 text-white/70 hover:text-white transition-colors duration-200">
            <span className="p-2 bg-white/5 rounded-xl border border-white/10 flex items-center justify-center">
              {brand.icon}
            </span>
            <span className="text-base font-bold">{brand.name}</span>
            <Sparkles className="w-3 h-3 text-primary animate-pulse" />
          </div>
        ))}
      </Marquee>
    </section>
  );
}
