import Image from 'next/image';

import { Marquee } from '@/components/ui/marquee';

const customerLogos = [
  {
    name: 'Next.js',
    src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/nextjs-logo.svg',
    width: 394,
    height: 80,
  },
  {
    name: 'OpenAI',
    src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/openai-logo.svg',
    width: 512,
    height: 126,
  },
  {
    name: 'Stripe',
    src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/stripe-logo.svg',
    width: 73,
    height: 31,
  },
  {
    name: 'Vercel',
    src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/vercel-logo.svg',
    width: 2048,
    height: 407,
  },
  {
    name: 'Supabase',
    src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/supabase-logo.svg',
    width: 581,
    height: 113,
  },
  {
    name: 'Anthropic',
    src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/anthropic-logo.svg',
    width: 579,
    height: 65,
  },
  {
    name: 'Tailwind CSS',
    src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/tailwindcss-logo.svg',
    width: 665,
    height: 82,
  },
  {
    name: 'Linear',
    src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/linear-logo.svg',
    width: 122,
    height: 31,
  },
];

export function LogoCloud() {
  return (
    <section className="border-y border-white/10 bg-white/[0.02]">
      <div className="mx-auto max-w-6xl px-6 py-12">
        <p className="text-center text-xs font-medium uppercase tracking-[0.2em] text-white/40">
          Trusted by fast-moving teams shipping to millions
        </p>
        <div className="relative mt-8 overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_15%,black_85%,transparent)]">
          <Marquee pauseOnHover className="[--duration:40s] [--gap:4rem]">
            {customerLogos.map((logo) => (
              <div
                key={logo.name}
                className="group flex h-12 items-center justify-center px-2"
              >
                <Image
                  src={logo.src}
                  alt={`${logo.name} logo`}
                  width={logo.width}
                  height={logo.height}
                  unoptimized
                  className="h-7 w-[120px] max-w-full object-contain opacity-40 brightness-0 invert transition-opacity duration-200 group-hover:opacity-80"
                />
              </div>
            ))}
          </Marquee>
        </div>
      </div>
    </section>
  );
}