'use client'

import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'

import Footer from '@/components/Footer/Footer'
import Link from 'next/link'
import Image from 'next/image'
import styles from './catering.module.css'

import CateringPackages from './CateringPackages';
import CateringPopup from './CateringPopup';

export default function CateringContent() {
    // Slider state for Visual Journey section
    const [currentSlide, setCurrentSlide] = useState(0);
    const [mounted, setMounted] = useState(false);
    const [isPopupOpen, setIsPopupOpen] = useState(false);
    const [selectedEventType, setSelectedEventType] = useState('');

    const openPopup = (type: string) => {
        setSelectedEventType(type);
        setIsPopupOpen(true);
    };

    const sliderImages = [
        '/images/catering/visual-slider/visual-journey-1.webp',
        '/images/catering/visual-slider/visual-journey-2.webp',
        '/images/catering/visual-slider/visual-journey-3.webp',
        '/images/catering/visual-slider/visual-journey-4.webp',
        '/images/catering/visual-slider/visual-journey-5.webp'
    ];

    // Set mounted state after component mounts (client-side only)
    useEffect(() => {
        setMounted(true);
    }, []);

    // Auto-slide effect (only runs after mount)
    useEffect(() => {
        if (!mounted) return;

        const interval = setInterval(() => {
            setCurrentSlide((prev) => (prev + 1) % sliderImages.length);
        }, 3000); // Change slide every 3 seconds

        return () => clearInterval(interval);
    }, [mounted, sliderImages.length]);

    // Manual navigation
    const nextSlide = () => {
        setCurrentSlide((prev) => (prev + 1) % sliderImages.length);
    };

    const prevSlide = () => {
        setCurrentSlide((prev) => (prev - 1 + sliderImages.length) % sliderImages.length);
    };

    // Animation variants
    const fadeInUp = {
        hidden: { opacity: 0, y: 30 },
        visible: {
            opacity: 1,
            y: 0,
            transition: {
                duration: 0.6
            }
        }
    };

    const fadeIn = {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: { duration: 0.8 }
        }
    };

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

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

    const staggerContainer = {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: {
                staggerChildren: 0.2,
                delayChildren: 0.1
            }
        }
    };

    const scaleIn = {
        hidden: { opacity: 0, scale: 0.8 },
        visible: {
            opacity: 1,
            scale: 1,
            transition: {
                duration: 0.6
            }
        }
    };

    return (
        <main className={styles.main}>
            {/* Catering Popup Modal */}
            <CateringPopup
                isOpen={isPopupOpen}
                onClose={() => setIsPopupOpen(false)}
                initialEventType={selectedEventType}
            />

            {/* Page Hero */}
            <section className={styles.hero}>
                <div className={styles.heroContent}>
                    <h1 className={styles.heroTitle}>Catering</h1>
                    <p className={styles.breadcrumb}>
                        <Link href="/" prefetch={false}>Home</Link> / Catering
                    </p>
                </div>
            </section>

            {/* Section 1: Top 3 Cards - Events, Food & Drinks, Venues */}
            <section className={styles.topSection}>
                <motion.div
                    className={styles.topContainer}
                    initial="hidden"
                    whileInView="visible"
                    viewport={{ once: true, margin: "-100px" }}
                    variants={staggerContainer}
                >
                    <section className={styles.sectionHeading1}>
                        <div className={styles.smallHeading1} style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', gap: '10px' }}>
                            <Image src="/images/dinner.png" alt="Catering Event Decorative Dinner Icon" width={24} height={24} />
                            <span>ANTALYA</span>
                            <Image src="/images/eat.png" alt="Catering Event Decorative Cutlery Icon" width={24} height={24} />
                        </div>
                        <h2 className={styles.mainHeading1}>Exceptional Turkish Catering for Every Occasion</h2>
                        <p className={styles.description1}>
                            Planning an event and looking for authentic Turkish flavours? At Antalya, our catering service brings a wide selection of traditional dishes - from mezze platters to charcoal-grilled kebabs - prepared fresh for your guests. Whether it’s a corporate gathering, celebration, or private dinner, our catering menu offers something memorable for everyone.
                        </p>
                    </section>

                    <div className={styles.topCardsGrid}>
                        {/* Card 1: Events */}
                        <motion.div
                            className={`${styles.topCard} ${styles.clickableCard}`}
                            variants={scaleIn}
                            onClick={() => openPopup('Corporate & Social Events')}
                        >
                            <div className={styles.topCardImage}>
                                <Image
                                    src="/images/catering/card/card-1.webp"
                                    alt="Events"
                                    fill
                                    style={{ objectFit: 'cover' }}
                                />
                                <div className={styles.topCardOverlay}></div>
                            </div>
                            <div className={styles.topCardContent}>
                                <h3 className={styles.topCardTitle}>Corporate & Social Events</h3>
                            </div>
                        </motion.div>

                        {/* Card 2: Food & Drinks */}
                        <motion.div
                            className={`${styles.topCard} ${styles.clickableCard}`}
                            variants={scaleIn}
                            onClick={() => openPopup('Family Gatherings & Weddings')}
                        >
                            <div className={styles.topCardImage}>
                                <Image
                                    src="/images/catering/card/card-2.webp"
                                    alt="Food & Drinks"
                                    fill
                                    style={{ objectFit: 'cover' }}
                                />
                                <div className={styles.topCardOverlay}></div>
                            </div>
                            <div className={styles.topCardContent}>
                                <h3 className={styles.topCardTitle}>Family Gatherings & Weddings</h3>
                            </div>
                        </motion.div>

                        {/* Card 3: Venues */}
                        <motion.div
                            className={`${styles.topCard} ${styles.clickableCard}`}
                            variants={scaleIn}
                            onClick={() => openPopup('Birthday Party & Baby Shower')}
                        >
                            <div className={styles.topCardImage}>
                                <Image
                                    src="/images/catering/card/card-3.webp"
                                    alt="Venues"
                                    fill
                                    style={{ objectFit: 'cover' }}
                                />
                                <div className={styles.topCardOverlay}></div>
                            </div>
                            <div className={styles.topCardContent}>
                                <h3 className={styles.topCardTitle}>Birthday Party & Baby Shower</h3>
                            </div>
                        </motion.div>
                    </div>
                </motion.div>
            </section>

            {/* Section 2: Welcome To SeaBreeze */}
            <section className={styles.welcomeSection}>
                <motion.div
                    className={styles.welcomeContainer}
                    initial="hidden"
                    whileInView="visible"
                    viewport={{ once: true, margin: "-100px" }}
                    variants={staggerContainer}
                >
                    {/* Left Side: Image Slider */}
                    <motion.div className={styles.welcomeImagesWrapper} variants={slideInLeft}>
                        <div className={styles.sliderContainer}>
                            <div className={styles.sliderWrapper}>
                                {sliderImages.map((image, index) => (
                                    <div
                                        key={index}
                                        className={`${styles.sliderSlide} ${index === currentSlide ? styles.sliderSlideActive : ''}`}
                                    >
                                        <Image
                                            src={image}
                                            alt={`Slide ${index + 1}`}
                                            fill
                                            style={{ objectFit: 'cover' }}
                                        />
                                    </div>
                                ))}
                            </div>

                            {/* Navigation Arrows */}
                            <button
                                className={`${styles.sliderArrow} ${styles.sliderArrowLeft}`}
                                onClick={prevSlide}
                                aria-label="Previous slide"
                            >
                                ←
                            </button>
                            <button
                                className={`${styles.sliderArrow} ${styles.sliderArrowRight}`}
                                onClick={nextSlide}
                                aria-label="Next slide"
                            >
                                →
                            </button>

                            {/* Slide Indicators */}
                            <div className={styles.sliderIndicators}>
                                {sliderImages.map((_, index) => (
                                    <button
                                        key={index}
                                        className={`${styles.sliderIndicator} ${index === currentSlide ? styles.sliderIndicatorActive : ''}`}
                                        onClick={() => setCurrentSlide(index)}
                                        aria-label={`Go to slide ${index + 1}`}
                                    />
                                ))}
                            </div>
                        </div>
                    </motion.div>

                    {/* Right Side: Content */}
                    <motion.div className={styles.welcomeContent} variants={slideInRight}>
                        <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
                            <Image src="/images/dinner.png" alt="Catering Visualization Decorative Dinner Icon" width={24} height={24} />
                            <span>ANTALYA</span>
                            <Image src="/images/eat.png" alt="Catering Visualization Decorative Cutlery Icon" width={24} height={24} />
                        </div>
                        <h2 className={styles.mainHeadingSection}>A Visual Journey Through Antalya Catering</h2>
                        <p className={styles.welcomeDescription}>
                            Experience the essence of Antalya brought to your event - from beautifully presented dishes to elegant setups that elevate every occasion. Our catering blends authentic Turkish flavours with refined presentation, creating a feast that delights both the eyes and the palate.
                        </p>
                    </motion.div>
                </motion.div>
            </section>

            {/* Section 3: Serving Great-Tasting Food Since 1991 */}
            <section className={styles.servingSection}>
                <motion.div
                    className={styles.servingContainer}
                    initial="hidden"
                    whileInView="visible"
                    viewport={{ once: true, margin: "-100px" }}
                    variants={staggerContainer}
                >
                    {/* Left Side: Content */}
                    <motion.div className={styles.servingContent} variants={slideInLeft}>
                        <section className={styles.sectionHeading3}>
                            <div className={styles.smallHeading3} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                                <Image src="/images/dinner.png" alt="Culinary Experience Decorative Dinner Icon" width={24} height={24} />
                                <span>ANTALYA</span>
                                <Image src="/images/eat.png" alt="Culinary Experience Decorative Cutlery Icon" width={24} height={24} />
                            </div>
                        </section>
                        <h2 className={styles.mainHeading}>A Culinary Experience Crafted for Your Event</h2>
                        <p className={styles.servingDescription}>
                            From intimate dinners to grand celebrations, our catering is designed to complement your occasion with flavour, finesse, and thoughtful presentation. Every menu is curated to suit your theme, guest preferences, and event style - ensuring a seamless dining experience from start to finish.
                        </p>
                        <p className={styles.servingDescription}>
                            Our team handles preparation, setup, and service with attention to detail, so you can focus on hosting while we take care of the rest. With Antalya, catering becomes more than food delivery - it becomes an elevated expression of hospitality, culture, and celebration.
                        </p>
                    </motion.div>

                    {/* Right Side: Images */}
                    <motion.div className={styles.servingImagesWrapper} variants={slideInRight}>
                        <div className={styles.servingImagesContainer}>
                            <div className={styles.servingImageBack}>
                                <Image
                                    src="/images/catering/grid-1/culinary-experience-left.webp"
                                    alt="Restaurant interior"
                                    fill
                                    style={{ objectFit: 'cover' }}
                                />
                            </div>
                            <div className={styles.servingImageFront}>
                                <Image
                                    src="/images/catering/grid-1/culinary-experience-right.webp"
                                    alt="Delicious dish"
                                    fill
                                    style={{ objectFit: 'cover' }}
                                />
                            </div>
                            <div className={styles.servingBadge}>
                                <span className={styles.badgeText}>Antalya Restaurant</span>
                            </div>
                        </div>
                    </motion.div>
                </motion.div>
            </section>

            {/* Packages Section */}
            <CateringPackages />

            {/* Section 4: Our Story of Success */}
            <section className={styles.storySection}>
                <motion.div
                    className={styles.storyContent}
                    initial="hidden"
                    whileInView="visible"
                    viewport={{ once: true, margin: "-100px" }}
                    variants={fadeIn}
                >
                    <motion.span className={styles.storyLabel} variants={fadeInUp}>
                        <div className={styles.smallHeading3} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
                            <Image src="/images/dinner.png" alt="Success Story Decorative Dinner Icon" width={24} height={24} />
                            <span>ANTALYA</span>
                            <Image src="/images/eat.png" alt="Success Story Decorative Cutlery Icon" width={24} height={24} />
                        </div>
                    </motion.span>
                    <motion.h2 className={styles.storyTitle} variants={fadeInUp}>
                        Bring Authentic Turkish Flavour to Your Event - Email Us Today.
                    </motion.h2>
                    <motion.a
                        href="mailto:hello@antalyarestaurant.ca"
                        className={styles.storydesc}
                        variants={fadeInUp}
                        style={{ display: "inline-block" }}
                    >
                        hello@antalyarestaurant.ca
                    </motion.a>
                </motion.div>
            </section>

            {/* Section 4: About Us */}
            <section className={styles.aboutSection}>
                <motion.div
                    className={styles.aboutContainer}
                    initial="hidden"
                    whileInView="visible"
                    viewport={{ once: true, margin: "-100px" }}
                    variants={staggerContainer}
                >
                    {/* Left Side: Images */}
                    <motion.div className={styles.aboutImagesWrapper} variants={slideInLeft}>
                        <div className={styles.aboutImagesGrid}>
                            <div className={styles.aboutImageLarge}>
                                <Image
                                    src="/images/catering/grid-2/ontario-centre.webp"
                                    alt="Food service"
                                    fill
                                    style={{ objectFit: 'cover' }}
                                />
                            </div>
                            <div className={styles.aboutImageSmallTop}>
                                <Image
                                    src="/images/catering/grid-2/ontario-top-right.webp"
                                    alt="Dining experience"
                                    fill
                                    style={{ objectFit: 'cover' }}
                                />
                            </div>
                            <div className={styles.aboutImageSmallBottom}>
                                <Image
                                    src="/images/catering/grid-2/ontario--bottom-left.webp"
                                    alt="Special dishes"
                                    fill
                                    style={{ objectFit: 'cover' }}
                                />
                            </div>
                        </div>
                    </motion.div>

                    {/* Right Side: Content */}
                    <motion.div className={styles.aboutContent} variants={slideInRight}>
                        <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
                            <Image src="/images/dinner.png" alt="About Catering Decorative Dinner Icon" width={24} height={24} />
                            <span>ANTALYA</span>
                            <Image src="/images/eat.png" alt="About Catering Decorative Cutlery Icon" width={24} height={24} />
                        </div>
                        <h2 className={styles.mainHeading}>
                            Antalya - One of Ontario’s Finest Catering Experiences
                        </h2>
                        <p className={styles.servingDescription}>
                            From intimate gatherings to grand celebrations, Antalya delivers authentic Turkish flavours with unmatched hospitality. Our curated catering selections bring the taste of Istanbul to your events - beautifully presented, freshly prepared, and crafted with tradition.
                        </p>
                        <div className={styles.aboutSpecials}>
                            <ul className={styles.aboutSpecialsList}>
                                <li className={styles.aboutSpecialsItem}>
                                    <span className={styles.aboutSpecialsIcon}>✓</span>
                                    <span>Signature charcoal-grilled kebabs with house dips</span>
                                </li>
                                <li className={styles.aboutSpecialsItem}>
                                    <span className={styles.aboutSpecialsIcon}>✓</span>
                                    <span>Mezze platters featuring fresh salads, spreads & baked breads</span>
                                </li>
                                <li className={styles.aboutSpecialsItem}>
                                    <span className={styles.aboutSpecialsIcon}>✓</span>
                                    <span>Handcrafted rice dishes, wraps & specialty mains for every palate</span>
                                </li>
                            </ul>
                        </div>
                        <p className={styles.servingDescription}>
                            Whether hosting a corporate lunch, wedding, or private dinner, Antalya ensures your guests enjoy a memorable culinary experience.
                        </p>
                        <Link href="/antalya-restaurant-menu" className={styles.lastButton} prefetch={false}>
                            View Our Menu
                        </Link>
                    </motion.div>
                </motion.div>
            </section>

            <Footer />
        </main >
    )
}