import Image from 'next/image'

import { Button } from '@/components/Button'
import { Container } from '@/components/Container'


export function Logos() {
  return (
    <Container>
      <div className="relative z-10 pt-10">
        <p className="mt-10 font-display text-large lg:text-2xl font-semibold italic text-slate-900">
          As seen and featured on
        </p>
        <ul
          role="list"
          className="mt-8 flex items-center flex-wrap justify-center gap-x-8 sm:flex-col sm:gap-x-0 sm:gap-y-10 xl:flex-row xl:gap-x-12 xl:gap-y-0"
        >
          {[
            [
              { name: 'CNN', logo: '/images/logos/1.svg' },
              { name: 'HLS', logo: '/images/logos/2.svg' },
              { name: 'Bookretreats', logo: '/images/logos/3.svg' },
            ],
            [
              { name: 'Beaviajera', logo: '/images/logos/4.svg' },
              { name: 'Egytalloyd', logo: '/images/logos/5.svg' },
              { name: 'AST', logo: '/images/logos/6.svg' },
            ],
          ].map((group, groupIndex) => (
            <li key={groupIndex}>
              <ul
                role="list"
                className="flex flex-col items-center gap-y-8 sm:flex-row sm:gap-x-12 sm:gap-y-0"
              >
                {group.map((company) => (
                  <li key={company.name} className="flex">
                    <Image src={company.logo} alt={company.name} width={120} height={40} unoptimized />
                  </li>
                ))}
              </ul>
            </li>
          ))}
        </ul>
      </div>
    </Container>
  )
}