---
import { Container } from '~/components/Container'
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid'

import Natura from '~/assets/logos/natura.svg'
import Nissan from '~/assets/logos/nissan.svg'
import Kordsa from '~/assets/logos/kordsa.svg'
import Manserv from '~/assets/logos/manserv.svg'
import Semeq from '~/assets/logos/semeq.svg'

const SVGLogos = [Natura, Nissan, Kordsa, Manserv, Semeq]
---

<Container className="lg:text-center space-y-2.5 lg:space-y-6">
  <h2 class="text-pretty font-semibold text-4xl">
    Alguns clientes que acreditam em nós
  </h2>
  <div id="carousel" class="relative">
    <button
      id="prev"
      class="inset-y-0 left-0 px-1.5 absolute cursor-pointer lg:hidden"
    >
      <ChevronLeftIcon className="w-6" />
    </button>
    <button
      id="next"
      class="inset-y-0 right-0 px-1.5 absolute cursor-pointer lg:hidden"
    >
      <ChevronRightIcon className="w-6" />
    </button>
    <div
      class="flex max-lg:overflow-x-scroll max-lg:snap-x snap-mandatory scroll-smooth scrollbar-hide space-x-4 lg:gap-8 lg:justify-center"
    >
      {
        SVGLogos.map((Logo, idx) => (
          <div
            class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
            key={idx}
          >
            <Logo
              class="size-48 lg:size-34 fill-white"
              id={`slide${idx + 1}`}
            />
          </div>
        ))
      }
    </div>
  </div>
</Container>

<script type="module">
  const carousel = document.getElementById('carousel')
  const slides = carousel.querySelectorAll('.snap-center')
  let currentIndex = 0

  const scrollToSlide = (index) => {
    if (index >= 0 && index < slides.length) {
      slides[index].scrollIntoView({
        behavior: 'smooth',
        block: 'nearest',
        inline: 'center',
      })
      currentIndex = index
    }
  }

  document.getElementById('prev').addEventListener('click', () => {
    scrollToSlide(currentIndex - 1)
  })

  document.getElementById('next').addEventListener('click', () => {
    scrollToSlide(currentIndex + 1)
  })
</script>