import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay, Pagination } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/pagination'
import Seo from '../components/Seo'
import Reveal from '../components/Reveal'
import PageHero from '../components/PageHero'
import { TestimonialCard } from '../components/cards'
import { useContent, getTestimonials, getSettings } from '../lib/api'

export default function Testimonials() {
  const testimonials = useContent(getTestimonials)
  const settings = useContent(getSettings)

  return (
    <>
      <Seo
        title={`Testimonials — ${settings?.company_name ?? 'Touch Therapies Antigua'}`}
        description="Rated 5.0 on TripAdvisor and Google by more than 10,000 guests. Read their stories."
      />
      <PageHero
        kicker="Guest Stories"
        title="Loved by 10,000+ Guests"
        lead="Rated 5.0 on TripAdvisor and Google."
      />
      <section className="py-20">
        <div className="wrap">
          <Reveal>
            <Swiper
              modules={[Autoplay, Pagination]}
              spaceBetween={24}
              slidesPerView={1}
              breakpoints={{ 768: { slidesPerView: 2 }, 1100: { slidesPerView: 3 } }}
              autoplay={{ delay: 4500, disableOnInteraction: true }}
              pagination={{ clickable: true }}
              className="!pb-12"
            >
              {(testimonials ?? []).map((t) => (
                <SwiperSlide key={t.id} className="!h-auto">
                  <TestimonialCard t={t} />
                </SwiperSlide>
              ))}
            </Swiper>
          </Reveal>
          <Reveal className="mt-8 text-center">
            <p className="text-muted">
              Enjoyed your visit?{' '}
              <a
                href={settings?.social.whatsapp ?? '#'}
                className="font-semibold text-turquoise-500 hover:underline"
              >
                Tell us about it
              </a>{' '}
              — or leave a review on TripAdvisor or Google.
            </p>
          </Reveal>
        </div>
      </section>
    </>
  )
}
