"use client";

interface LogoItem {
  name: string;
  color: string;
}

export const AI_TOOLS: LogoItem[] = [
  { name: "ChatGPT", color: "bg-green-400" },
  { name: "Claude", color: "bg-purple-400" },
  { name: "Gemini", color: "bg-blue-400" },
  { name: "n8n", color: "bg-orange-400" },
  { name: "Make", color: "bg-violet-400" },
  { name: "Zapier", color: "bg-yellow-400" },
  { name: "LangChain", color: "bg-emerald-400" },
  { name: "OpenAI", color: "bg-cyan-400" },
];

export const PLATFORMS: LogoItem[] = [
  { name: "HubSpot", color: "bg-orange-400" },
  { name: "Salesforce", color: "bg-sky-400" },
  { name: "Monday", color: "bg-red-400" },
  { name: "Notion", color: "bg-gray-300" },
  { name: "Sheets", color: "bg-green-400" },
  { name: "Slack", color: "bg-purple-400" },
  { name: "Airtable", color: "bg-cyan-400" },
  { name: "Jira", color: "bg-blue-400" },
];

function LogoBadge({ name, color }: LogoItem) {
  return (
    <div className="flex-shrink-0 h-14 px-6 rounded-full border border-gray-700/50 bg-gray-800/70 backdrop-blur-sm flex items-center gap-3">
      <div className={`w-2.5 h-2.5 rounded-full ${color}`} />
      <span className="text-gray-200 font-medium text-sm whitespace-nowrap">{name}</span>
    </div>
  );
}

export default function LogoCarousel({
  title,
  subtitle,
  logos,
  reverse = false,
}: {
  title: string;
  subtitle: string;
  logos: LogoItem[];
  reverse?: boolean;
}) {
  const doubled = [...logos, ...logos];

  return (
    <section className="py-14 overflow-hidden bg-gray-950">
      <div className="max-w-5xl mx-auto text-center mb-8 px-4">
        <h3 className="text-xl font-semibold text-white mb-1">{title}</h3>
        <p className="text-gray-500 text-sm">{subtitle}</p>
      </div>
      <div className="relative">
        <div className="absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-gray-950 via-gray-950/70 to-transparent z-10 pointer-events-none" />
        <div className="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-gray-950 via-gray-950/70 to-transparent z-10 pointer-events-none" />
        <div
          className="flex gap-4 w-max"
          style={{
            animation: `${reverse ? "carousel-right" : "carousel-left"} 40s linear infinite`,
          }}
        >
          {doubled.map((logo, i) => (
            <LogoBadge key={i} name={logo.name} color={logo.color} />
          ))}
        </div>
      </div>
    </section>
  );
}