'use client';

import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import styles from "@/components/Menu/Menu.module.css";
import { menuData } from "@/utils/constant";

export default function HomeMenu() {

    // Show only first few menu items (change 6 as needed)
    const displayItems = menuData.flatMap(section => section.items).slice(0, 6);

    // Animation variants
    const gridVariants = {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: {
                staggerChildren: 0.1,
                delayChildren: 0.2
            }
        }
    };

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

    return (
        <section className={styles.menuSection}>

            {/* Heading Section (same structure) */}
            <section className={styles.sectionHeading}>
                <div
                    className={styles.smallHeading}
                    style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}
                >
                    <Image src="/images/dinner.png" alt="Home Menu Decorative Dinner Icon" width={24} height={24} />
                    <span>ANTALYA</span>
                    <Image src="/images/eat.png" alt="Home Menu Decorative Cutlery Icon" width={24} height={24} />
                </div>
                <h2 className={styles.mainHeading}>Explore Our Menu</h2>
                <p className={styles.description}>
                    Savour authentic Turkish cuisine at Antalya - from crisp appetisers to charcoal-grilled favourites crafted with tradition and passion.
                </p>
            </section>

            {/* Menu Items Grid - EXACT SAME STRUCTURE */}
            <motion.div
                className={styles.menuGrid}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true }}
                variants={gridVariants}
            >
                {displayItems.map((item, itemIndex) => (
                    <motion.div
                        key={itemIndex}
                        className={styles.menuCard}
                        variants={cardVariants}
                        whileHover={{
                            y: -8,
                            transition: { duration: 0.3 }
                        }}
                    >
                        <div className={styles.imageFrame}>
                            <div className={styles.imageWrapper}>
                                <Image
                                    src={item.image}
                                    alt={item.name}
                                    fill
                                    className={styles.dishImage}
                                />
                            </div>
                        </div>

                        <div className={styles.cardContent}>
                            <div className={styles.cardHeader}>
                                <h3 className={styles.dishName}>{item.name}</h3>
                            </div>
                            <p className={styles.description}>{item.description}</p>
                        </div>

                        <div className={styles.priceBubble}>
                            <span className={styles.price}>{item.price}</span>
                        </div>
                    </motion.div>
                ))}
            </motion.div>

            {/* View More Button */}
            <div style={{ textAlign: "center", marginTop: "80px" }}>
                <Link href="/antalya-restaurant-menu" className={styles.tab}>
                    View Full Menu
                </Link>
            </div>

        </section>
    );
}
