"use client";

import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";

import "swiper/css";

import SectionTitle from "./SectionTitle";

interface Client {
  name: string;
  logo: string;
}

const clients: Client[] = [
  { name: "badoo", logo: "/images/client-logos/badoo.svg" },
  { name: "etsy", logo: "/images/client-logos/etsy.svg" },
  { name: "secretbenefits", logo: "/images/client-logos/secretbenefits.svg" },
  { name: "client4", logo: "/images/client-logos/etsy.svg" },
  { name: "client5", logo: "/images/client-logos/badoo.svg" },
  { name: "client6", logo: "/images/client-logos/secretbenefits.svg" },
];

export default function TrustedClientsSection() {
  return (
    <section className="relative overflow-hidden py-12 md:py-16 2xl:py-section">
      <div className="absolute left-1/2 top-0 h-88 w-175 -translate-x-1/2 rounded-full bg-primary/10 blur-[140px]" />

      <div className="container-k relative">
        <SectionTitle
          badge="Trusted By"
          title='Trusted by Teams Who <span class="text-gradient">Care About Accuracy</span>'
          className="max-w-3xl!"
        >
          {/* From independent creators to enterprise teams, AI Analyzer powers
          image verification at scale. */}
        </SectionTitle>

        <div className="glass-card mt-10 rounded-3xl p-6 md:p-8">
          <Swiper
            modules={[Autoplay]}
            loop={true}
            speed={1000}
            spaceBetween={30}
            autoplay={{
              delay: 2000,
              disableOnInteraction: false,
              pauseOnMouseEnter: true,
            }}
            breakpoints={{
              0: {
                slidesPerView: 2,
              },
              640: {
                slidesPerView: 3,
              },
              768: {
                slidesPerView: 4,
              },
              1024: {
                slidesPerView: 5,
              },
              1280: {
                slidesPerView: 6,
              },
            }}
          >
            {clients.map((client) => (
              <SwiperSlide key={client.name}>
                <div className="flex h-24 items-center justify-center rounded-xl transition-transform duration-300 hover:scale-105 px-2">
                  <Image
                    src={client.logo}
                    alt={client.name}
                    width={140}
                    height={60}
                    className="h-10 w-auto object-contain"
                  />
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </div>
    </section>
  );
}