'use client';

import React, { useState } from 'react';
import Image from 'next/image';

interface Testimonial {
    id: number;
    name: string;
    city: string;
    image: string;
    text: string;
    rating: number;
}

const testimonials: Testimonial[] = [
    {
        id: 1,
        name: 'Anya Petrova',
        city: 'City',
        image: '/images/testimonials/avatar1.jpg',
        text: '"An unforgettable journey of flavors and warmt. The ambiance is exquisite is Turkish fusion dishes simply divine.',
        rating: 5,
    },
    {
        id: 2,
        name: 'Tuest Khan',
        city: 'City',
        image: '/images/testimonials/avatar2.jpg',
        text: '"An unforgettable journey of flavors and warmt. The ambiance is exquisite is Turkish fusion dishes simply divine.',
        rating: 5,
    },
    {
        id: 3,
        name: 'Tariq Name',
        city: 'City',
        image: '/images/testimonials/avatar3.jpg',
        text: '"An unfogettable journey of flavors and warmt. The ambiene exquisite, and Turkish fusion dishes simply divine.',
        rating: 5,
    },
];

const TestimonialsSection: React.FC = () => {
    const [currentIndex, setCurrentIndex] = useState(0);

    const handlePrev = () => {
        setCurrentIndex((prev) => (prev === 0 ? testimonials.length - 3 : prev - 1));
    };

    const handleNext = () => {
        setCurrentIndex((prev) => (prev === testimonials.length - 3 ? 0 : prev + 1));
    };

    return (
        <section className="relative w-full bg-[#0a0a0a] py-16 md:py-20 lg:py-24 overflow-hidden">
            {/* Background Pattern */}
            <div className="absolute inset-0 opacity-30">
                <div className="absolute inset-0" style={{
                    backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(255, 215, 0, 0.1) 1px, transparent 1px)',
                    backgroundSize: '40px 40px'
                }}></div>
            </div>

            {/* Decorative Lanterns */}
            <div className="absolute top-8 right-8 md:right-16 lg:right-24 flex gap-6 z-10">
                <div className="w-12 h-16 md:w-14 md:h-20 relative">
                    <svg viewBox="0 0 48 64" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full">
                        <rect x="2" y="8" width="44" height="8" rx="2" fill="#8B6914" />
                        <path d="M8 16 L8 12 L24 4 L40 12 L40 16" fill="#B8860B" />
                        <rect x="8" y="16" width="32" height="36" rx="4" fill="url(#lanternGradient)" />
                        <rect x="12" y="20" width="24" height="28" rx="2" fill="#FDB913" opacity="0.9" />
                        <line x1="24" y1="0" x2="24" y2="8" stroke="#8B6914" strokeWidth="2" />
                        <defs>
                            <linearGradient id="lanternGradient" x1="24" y1="16" x2="24" y2="52" gradientUnits="userSpaceOnUse">
                                <stop stopColor="#D4AF37" />
                                <stop offset="1" stopColor="#8B6914" />
                            </linearGradient>
                        </defs>
                    </svg>
                </div>
                <div className="w-10 h-14 md:w-12 md:h-18 relative mt-8">
                    <svg viewBox="0 0 48 64" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full">
                        <rect x="2" y="8" width="44" height="8" rx="2" fill="#8B6914" />
                        <path d="M8 16 L8 12 L24 4 L40 12 L40 16" fill="#B8860B" />
                        <rect x="8" y="16" width="32" height="36" rx="4" fill="url(#lanternGradient2)" />
                        <rect x="12" y="20" width="24" height="28" rx="2" fill="#FDB913" opacity="0.9" />
                        <line x1="24" y1="0" x2="24" y2="8" stroke="#8B6914" strokeWidth="2" />
                        <defs>
                            <linearGradient id="lanternGradient2" x1="24" y1="16" x2="24" y2="52" gradientUnits="userSpaceOnUse">
                                <stop stopColor="#D4AF37" />
                                <stop offset="1" stopColor="#8B6914" />
                            </linearGradient>
                        </defs>
                    </svg>
                </div>
            </div>

            <div className="container mx-auto px-4 relative z-10">
                {/* Title */}
                <h2 className="text-center text-4xl md:text-5xl lg:text-6xl font-serif font-bold mb-12 md:mb-16 lg:mb-20 tracking-[0.2em] text-transparent bg-clip-text bg-gradient-to-r from-[#D4AF37] via-[#F4E5A6] to-[#D4AF37]">
                    TESTIMONIALS
                </h2>

                {/* Testimonials Container */}
                <div className="relative max-w-7xl mx-auto">
                    {/* Navigation Arrows */}
                    <button
                        onClick={handlePrev}
                        className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 md:-translate-x-12 z-20 text-[#D4AF37] hover:text-[#F4E5A6] transition-colors duration-300"
                        aria-label="Previous testimonial"
                    >
                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M25 30 L15 20 L25 10" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
                        </svg>
                    </button>

                    <button
                        onClick={handleNext}
                        className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 md:translate-x-12 z-20 text-[#D4AF37] hover:text-[#F4E5A6] transition-colors duration-300"
                        aria-label="Next testimonial"
                    >
                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15 10 L25 20 L15 30" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
                        </svg>
                    </button>

                    {/* Cards Grid */}
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
                        {testimonials.map((testimonial) => (
                            <div
                                key={testimonial.id}
                                className="relative group"
                            >
                                {/* Card with Gradient Border */}
                                <div className="relative p-[3px] rounded-[28px] bg-gradient-to-br from-[#D4AF37] via-[#F4E5A6] to-[#D4AF37]">
                                    <div className="relative bg-[#2a2a2a] rounded-[26px] p-8 md:p-10 h-full flex flex-col items-center">
                                        {/* Avatar */}
                                        <div className="relative mb-6">
                                            <div className="relative p-[3px] rounded-full bg-gradient-to-br from-[#D4AF37] via-[#F4E5A6] to-[#D4AF37]">
                                                <div className="relative w-24 h-24 md:w-28 md:h-28 rounded-full overflow-hidden bg-[#2a2a2a]">
                                                    <Image
                                                        src={testimonial.image}
                                                        alt={testimonial.name}
                                                        fill
                                                        className="object-cover"
                                                        sizes="(max-width: 768px) 96px, 112px"
                                                    />
                                                </div>
                                            </div>
                                        </div>

                                        {/* Name and City */}
                                        <div className="text-center mb-6">
                                            <p className="text-[#C9C9C9] text-base md:text-lg font-light tracking-wide">
                                                — {testimonial.name}, <span className="text-[#999999]">[{testimonial.city}]</span>
                                            </p>
                                        </div>

                                        {/* Testimonial Text */}
                                        <div className="flex-grow flex items-center mb-6">
                                            <p className="text-white text-center text-base md:text-lg leading-relaxed font-light tracking-wide">
                                                {testimonial.text}
                                            </p>
                                        </div>

                                        {/* Star Rating */}
                                        <div className="flex gap-2">
                                            {[...Array(testimonial.rating)].map((_, index) => (
                                                <svg
                                                    key={index}
                                                    width="24"
                                                    height="24"
                                                    viewBox="0 0 24 24"
                                                    fill="none"
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    className="w-6 h-6 md:w-7 md:h-7"
                                                >
                                                    <path
                                                        d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"
                                                        fill="#D4AF37"
                                                    />
                                                </svg>
                                            ))}
                                        </div>
                                        <button className="px-8 py-3 border-2 border-[#c49c5c] text-[#c49c5c] uppercase tracking-wider hover:bg-[#c49c5c] hover:text-black transition-all duration-300 font-medium">
                                            Learn More
                                        </button>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>

                </div>
            </div>
        </section>
    );
};

export default TestimonialsSection;
