'use client';

export const services = [
  { name: 'Booking.com',  logo: '/partner-logos/booking.png' },
  { name: 'Expedia',      logo: '/partner-logos/expedia.png' },
  { name: 'Hotels.com',   logo: '/partner-logos/hotels.png' },
  { name: 'Agoda',        logo: '/partner-logos/agoda.png' },
  { name: 'Trip.com',     logo: '/partner-logos/trip.png' },
  { name: 'Travelocity',  logo: '/partner-logos/travelocity.png' },
  { name: 'Airbnb',       logo: '/partner-logos/airbnb.png' },
  { name: 'VRBO',         logo: '/partner-logos/vrbo.png' },
  { name: 'HomeToGo',     logo: '/partner-logos/hometogo.png' },
  { name: 'Homestay',     logo: '/partner-logos/homestay.png' },
  { name: 'Plum Guide',   logo: '/partner-logos/plumguide.png' },
  { name: 'Hipcamp',      logo: '/partner-logos/hipcamp.png' },
  { name: 'Misterb&b',   logo: '/partner-logos/misterbandb.png' },
  { name: 'RedAwning',    logo: '/partner-logos/redawning.png' },
  { name: 'Hostelworld',  logo: '/partner-logos/hostelworld.png' },
  { name: 'MakeMyTrip',   logo: '/partner-logos/makemytrip.png' },
  { name: 'Goibibo',      logo: '/partner-logos/goibibo.png' },
  { name: 'Cleartrip',    logo: '/partner-logos/cleartrip.png' },
  { name: 'Yatra',        logo: '/partner-logos/yatra.png' },
  { name: 'OYO',          logo: '/partner-logos/oyo.png' },
  { name: 'Fliggy',       logo: '/partner-logos/fliggy.png' },
  { name: 'Ostrovok',     logo: '/partner-logos/ostrovok.png' },
  { name: 'CasasRurales', logo: '/partner-logos/casasrurales.png' },
];

export default function SupportedServicesSection() {
  return (
    <section className="bg-white py-16">
      <style>{`
        @keyframes marquee {
          0%   { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .marquee-track {
          animation: marquee 40s linear infinite;
        }
        .marquee-track:hover {
          animation-play-state: paused;
        }
      `}</style>

      <div className="max-w-6xl mx-auto px-4 sm:px-6">
        <h2 className="text-2xl font-bold text-brand-purple text-center mb-12">Supported platforms</h2>
      </div>

      <div className="overflow-hidden py-6">
        <div className="marquee-track flex items-center gap-16" style={{ width: 'max-content' }}>
          {[...services, ...services].map((service, i) => (
            <div key={i} className="flex flex-col items-center gap-2 flex-shrink-0">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={service.logo}
                alt={service.name}
                className="h-8 w-auto object-contain grayscale opacity-50 hover:grayscale-0 hover:opacity-100 transition-all duration-300"
              />
              <span className="text-xs text-gray-400">{service.name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}