'use client'

import Image from 'next/image'
import Link from 'next/link'
import styles from './PopularDishes.module.css'
import { motion } from 'framer-motion'

const dishes = [
    {
        id: 1,
        name: 'Adana Kebab',
        image: '/images/home/popular-dish/popular-dish-1.webp',
        description: 'Charcoal-grilled minced lamb with warm pita, rice, and mezze for a bold authentic Turkish flavour.'
    },
    {
        id: 2,
        name: 'Mixed Grill',
        image: '/images/home/popular-dish/popular-dish-2.webp',
        description: 'A feast of lamb chops, kebabs, chicken, and mezze - perfect for sharing true Turkish taste.'
    },
    {
        id: 3,
        name: 'Baklava',
        // Reusing dish-1 as placeholder since generation limit reached
        image: '/images/home/popular-dish/popular-dish-3.webp',
        description: 'Crisp filo pastry layered with pistachios and honey syrup for a classic Turkish dessert.'
    }
]

export default function PopularDishes() {
    const containerVariants = {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: {
                staggerChildren: 0.2,
                delayChildren: 0.2
            }
        }
    };

    const cardVariants = {
        hidden: { opacity: 0, y: 40 },
        visible: {
            opacity: 1,
            y: 0,
            transition: { duration: 0.6 }
        }
    };

    return (
        <section className={styles.section} id="menu" >
            <div
                className={styles.smallHeading}
                style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}
            >
                <Image src="/images/dinner.png" alt="Popular Dishes Decorative Dinner Icon" width={24} height={24} />
                <span>ANTALYA</span>
                <Image src="/images/eat.png" alt="Popular Dishes Decorative Cutlery Icon" width={24} height={24} />
            </div>
            <motion.h2
                className={styles.title}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6 }}
            >
                Popular Dishes
            </motion.h2>
            <motion.div
                className={styles.grid}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true, margin: "-100px" }}
                variants={containerVariants}
            >
                {dishes.map((dish) => (
                    <motion.div
                        key={dish.id}
                        className={styles.card}
                        variants={cardVariants}
                        whileHover={{
                            y: -10,
                            transition: { duration: 0.3 }
                        }}
                    >
                        <div className={styles.imageContainer}>
                            <Image
                                src={dish.image}
                                alt={dish.name}
                                fill
                                style={{ objectFit: 'cover' }}
                            />
                        </div>
                        <h3 className={styles.dishName}>{dish.name}</h3>
                        <p className={styles.description}>{dish.description}</p>
                        <Link href="/antalya-restaurant-menu" className={styles.button}>
                            View More
                        </Link>
                    </motion.div>
                ))}
            </motion.div>
            <motion.div
                className={styles.viewMoreContainer}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.4 }}
            >
                <Link href="/antalya-restaurant-menu" className={styles.viewMoreButton}>
                    View More
                </Link>
            </motion.div>
        </section>
    )
}
