'use client'

import { useState, useEffect } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import styles from './Hero.module.css'
import { motion, AnimatePresence } from 'framer-motion'

const slides = [
    {
        id: 1,
        image: '/images/home/home-banner-1.webp',
        title: 'Experience Authentic Turkish Dining',
        subtitle: 'Authentic Turkish flavours await at Antalya.',
        btn1: 'View Menu',
        btn2: 'Reserve Your Table'
    },
    {
        id: 2,
        image: '/images/home/home-banner-2.webp',
        title: 'Taste Masterfully Crafted Turkish Flavours',
        subtitle: 'Discover Anatolian fire-kissed flavours.',
        btn1: 'Explore Our Menu',
        btn2: 'Book A Table'
    },
    {
        id: 3,
        image: '/images/home/home-banner-3.webp',
        title: 'Luxury Turkish Dining Atmosphere',
        subtitle: 'Where elegance meets Turkish taste.',
        btn1: 'View Menu',
        btn2: 'Reserve Now'
    }
]

export default function Hero() {
    const [currentSlide, setCurrentSlide] = useState(0)

    useEffect(() => {
        const interval = setInterval(() => {
            setCurrentSlide((prev) => (prev + 1) % slides.length)
        }, 5000)
        return () => clearInterval(interval)
    }, [])

    return (
        <section className={styles.hero}>
            <AnimatePresence mode="wait">
                <motion.div
                    key={currentSlide}
                    className={`${styles.slide} ${styles.active}`}
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    transition={{ duration: 0.7 }}
                >
                    <Image
                        src={slides[currentSlide].image}
                        alt={slides[currentSlide].title}
                        fill
                        style={{ objectFit: 'cover' }}
                        priority={currentSlide === 0}
                    />
                    <div className={styles.overlay}>
                        <motion.div
                            className={styles.content}
                            initial={{ opacity: 0, y: 30 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ duration: 0.8, delay: 0.3 }}
                        >
                            <motion.h1
                                className={styles.title}
                                initial={{ opacity: 0, y: 20 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ duration: 0.6, delay: 0.5 }}
                            >
                                {slides[currentSlide].title}
                            </motion.h1>
                            <motion.p
                                className={styles.subtitle}
                                initial={{ opacity: 0, y: 20 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ duration: 0.6, delay: 0.7 }}
                            >
                                {slides[currentSlide].subtitle}
                            </motion.p>
                            <motion.div
                                className={styles.buttons}
                                initial={{ opacity: 0, y: 20 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ duration: 0.6, delay: 0.9 }}
                            >
                                <Link href="/antalya-restaurant-menu" className={`${styles.btn} ${styles.btnPrimary}`} prefetch={false}>
                                    {slides[currentSlide].btn1}
                                </Link>
                                <Link href="/book-a-table" className={`${styles.btn} ${styles.btnSecondary}`} prefetch={false}>
                                    {slides[currentSlide].btn2}
                                </Link>
                            </motion.div>
                        </motion.div>
                    </div>
                </motion.div>
            </AnimatePresence>

            <div className={styles.dots}>
                {slides.map((_, index) => (
                    <div
                        key={index}
                        className={`${styles.dot} ${index === currentSlide ? styles.active : ''}`}
                        onClick={() => setCurrentSlide(index)}
                    />
                ))}
            </div>
        </section>
    )
}
