'use client'

import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'
import Navbar from '@/components/Navbar/Navbar'
import Footer from '@/components/Footer/Footer'
import Link from 'next/link'
import Image from 'next/image'
import styles from './catering.module.css'

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

    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, x: -50 },
        visible: {
            opacity: 1,
            x: 0,
            transition: {
                duration: 0.7
            }
        }
    };

    const slideInRight = {
        hidden: { opacity: 0, x: 50 },
        visible: {
            opacity: 1,
            x: 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}>
            <Navbar />

            {/* Page Hero */}
            <section className={styles.hero}>
                <div className={styles.heroContent}>
                    <h1 className={styles.heroTitle}>Catering</h1>
                    <p className={styles.breadcrumb}>
                        <Link href="/">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: 'center', gap: '10px' }}>
                            <Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
                            <span>ANTALYA</span>
                            <Image src="/images/eat.png" alt="Antalya 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} variants={scaleIn}>
                            <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}>Events & Celebrations</h3>
                                {/* <button className={styles.topCardButton}>
                                    <span>→</span>
                                </button> */}
                            </div>
                        </motion.div>

                        {/* Card 2: Food & Drinks */}
                        <motion.div className={styles.topCard} variants={scaleIn}>
                            <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}>Food & Beverage Catering</h3>
                                {/* <button className={styles.topCardButton}>
                                    <span>→</span>
                                </button> */}
                            </div>
                        </motion.div>

                        {/* Card 3: Venues */}
                        <motion.div className={styles.topCard} variants={scaleIn}>
                            <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}>Venue & Service Options</h3>
                                {/* <button className={styles.topCardButton}>
                                    <span>→</span>
                                </button> */}
                            </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="Antalya Dinner Icon" width={24} height={24} />
                            <span>ANTALYA</span>
                            <Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
                        </div>
                        <h2 className={styles.mainHeadingSection}>A Visual Journey Through Antalya Catering</h2>
                        {/* <div className={styles.welcomeDivider}>
                            <svg width="120" height="20" viewBox="0 0 120 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <line x1="0" y1="10" x2="45" y2="10" stroke="#d3cab3" strokeWidth="2" />
                                <path d="M52 5 Q60 10 52 15 M55 5 Q63 10 55 15 M58 5 Q66 10 58 15" stroke="#d3cab3" strokeWidth="1.5" fill="none" />
                                <line x1="75" y1="10" x2="120" y2="10" stroke="#d3cab3" strokeWidth="2" />
                            </svg>
                        </div> */}
                        <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', justifyContent: 'center', gap: '10px' }}>
                                <Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
                                <span>ANTALYA</span>
                                <Image src="/images/eat.png" alt="Antalya 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.servingImagesGrid}>
                            <div className={styles.servingImageLarge}>
                                <Image
                                    src="/images/catering/grid-1/culinary-experience-left.webp"
                                    alt="Restaurant interior"
                                    fill
                                    style={{ objectFit: 'cover' }}
                                />
                            </div>
                            <div className={styles.servingImageSmallTop}>
                                <Image
                                    src="/images/catering/grid-1/culinary-experience-bottom.webp"
                                    alt="Grilled steak"
                                    fill
                                    style={{ objectFit: 'cover' }}
                                />
                            </div>
                            <div className={styles.servingImageSmallBottom}>
                                <Image
                                    src="/images/catering/grid-1/culinary-experience-right.webp"
                                    alt="Delicious dish"
                                    fill
                                    style={{ objectFit: 'cover' }}
                                />
                            </div>
                        </div>
                    </motion.div>
                </motion.div>
            </section>

            {/* 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="Antalya Dinner Icon" width={24} height={24} />
                            <span>ANTALYA</span>
                            <Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
                        </div>
                    </motion.span>
                    <motion.h2 className={styles.storyTitle} variants={fadeInUp}>
                       Bring Authentic Turkish Flavour to Your Event - Contact Us Today.
                    </motion.h2>
                    <motion.a
                        href="tel:+15195882037"
                        className={styles.storydesc}
                        variants={fadeInUp}
                        style={{ display: "inline-block" }}
                    >
                        +1 519 588 2037
                    </motion.a>

                    {/* <motion.button className={styles.storyButton} variants={fadeInUp}>
                        <span className={styles.storyButtonIcon}>↗</span>
                        <span>Visit site</span>
                    </motion.button> */}
                </motion.div>
            </section>

            {/* Section 4: About Us - Restika One Of The Best Food Service */}
            <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="Antalya Dinner Icon" width={24} height={24} />
                            <span>ANTALYA</span>
                            <Image src="/images/eat.png" alt="Antalya 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}>
                            View Our Menu
                        </Link>
                    </motion.div>
                </motion.div>
            </section>

            <Footer />
        </main>
    )
}