'use client';

import React from 'react';
import Link from 'next/link';
import { useLanguage } from '@/context/LanguageContext';

// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

// Import required modules
import { Pagination, Navigation } from 'swiper/modules';

export default function TreatmentCategories() {
  const { t } = useLanguage();

  const treatments = [
    { id: 'facial-treatment', name: 'Facial Treatment', icon: '✨', teaser: '9 tahapan facial untuk membersihkan pori, angkat komedo dan menutrisi kulit.' },
    { id: 'hair-removal', name: 'Hair Removal', icon: '🔬', teaser: 'Laser hair removal menggunakan teknologi Diode & IPL untuk hasil maksimal dan permanen.' },
    { id: 'acne-treatment', name: 'Acne Treatment', icon: '🎯', teaser: 'Atasi permasalahan peradangan jerawatmu dalam tahapan komplit dengan teknologi terkini.' },
    { id: 'anti-aging', name: 'Anti-Aging & Lifting', icon: '👑', teaser: 'Kencangkan kulit dan tampil lebih muda dengan non-surgical face lifting.' },
    { id: 'body-slimming', name: 'Body Slimming', icon: '⚡', teaser: 'Pengurangan lemak lokal tanpa operasi dan tanpa rasa sakit.' },
    { id: 'brightening', name: 'Brightening', icon: '✨', teaser: 'Pencerah kulit dan meratakan warna kulit agar tampil lebih cerah alami.' },
  ];

  return (
    <section className="relative overflow-hidden bg-white py-16 md:py-20">
      <div className="grid md:grid-cols-8">
        {/* Left: Title Section */}
        <div className="md:col-span-3 relative flex items-center">
          <div className="container-custom md:pr-0">
            <div className="flex flex-col gap-4 max-w-md">
              <h2 className="font-cormorant text-3xl md:text-5xl text-espresso font-bold leading-tight">
                {t('treatments.title')}
              </h2>
              <div className="w-12 h-0.5 bg-gold"></div>
              <p className="text-grey-dark leading-relaxed">{t('treatments.subtitle')}</p>
              <Link
                href="/treatments"
                className="hidden md:inline-block px-8 py-3 bg-gold text-white text-xs uppercase tracking-widest font-semibold rounded hover:bg-gold-dark hover:text-white transition duration-300"
              >
                {t('treatments.see-all')}
              </Link>
            </div>
          </div>
        </div>

        {/* Right: Treatment Cards */}
        <div className="md:col-span-5 md:pl-8 mt-8 md:mt-0 relative">
          <Swiper
            modules={[Pagination, Navigation]}
            spaceBetween={20}
            slidesPerView={1.5}
            centeredSlides={true}
            loop={true}
            navigation={{
              nextEl: '.swiper-button-next-treatments',
              prevEl: '.swiper-button-prev-treatments',
            }}
            pagination={{ clickable: true, el: '.swiper-pagination-treatments' }}
            breakpoints={{
              640: {
                slidesPerView: 2,
                spaceBetween: 30,
              },
              1024: {
                slidesPerView: 2.5,
                spaceBetween: 30,
              },
            }}
            className="treatment-swiper py-5"
          >
            {treatments.map((treatment) => (
              <SwiperSlide key={treatment.id}>
                <Link key={treatment.id} href={`/treatments`} className="group block h-full">
                  <div className="bg-ivory border border-blush rounded-lg p-5 hover:outline hover:outline-2 hover:outline-gold hover:bg-blush/30 transition-all duration-300 h-full min-h-[220px] flex flex-col justify-between">
                    {/* Title */}
                    <h3 className="font-cormorant text-xl font-semibold text-espresso mb-2 group-hover:text-gold transition-colors">
                      {treatment.name}
                    </h3>

                    {/* Divider */}
                    <div className="w-8 h-0.5 bg-gold/60 mb-3"></div>

                    {/* Teaser */}
                    <p className="text-xs text-grey-dark leading-relaxed mb-4 line-clamp-3">
                      {treatment.teaser}
                    </p>

                    {/* CTA */}
                    <div className="mt-auto">
                      <span className="text-xs text-gold font-semibold group-hover:translate-x-1 transition inline-flex items-center gap-1">
                        {t('treatments.detail')}
                      </span>
                    </div>
                  </div>
                </Link>
              </SwiperSlide>
            ))}
          </Swiper>

          {/* Custom Navigation */}
          <div className="swiper-nav-treatments hidden md:flex justify-end gap-2 mt-4 px-3 md:px-0">
            <button className="swiper-button-prev-treatments w-10 h-10 rounded-full bg-blush flex items-center justify-center hover:bg-gold-dark transition-colors duration-300 text-espresso hover:text-white">
              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2"><path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" /></svg>
            </button>
            <button className="swiper-button-next-treatments w-10 h-10 rounded-full bg-blush flex items-center justify-center hover:bg-gold-dark transition-colors duration-300 text-espresso hover:text-white">
              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2"><path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" /></svg>
            </button>
          </div>

          {/* Custom Pagination */}
          <div className="swiper-pagination-treatments md:hidden text-center mt-4"></div>

          {/* Mobile CTA */}
          <div className="md:hidden text-center mt-6">
            <Link
              href="/treatments"
              className="inline-block px-8 py-3 bg-gold text-white text-xs uppercase tracking-widest font-semibold rounded hover:bg-gold-dark hover:text-white transition duration-300"
            >
              {t('treatments.see-all')}
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}
