'use client'

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

// Icons
const AwardIcon = () => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 15C15.866 15 19 11.866 19 8V3H5V8C5 11.866 8.13401 15 12 15Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M8.21 13.89L7 23L12 20L17 23L15.79 13.88" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
)

const EventsIcon = () => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M8 2V5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M16 2V5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M3 9H21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M21 8V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V8C3 6.89543 3.89543 6 5 6H19C20.1046 6 21 6.89543 21 8Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
)

const CateringIcon = () => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 21V22" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M3 13C3 13 3 8 12 8C21 8 21 13 21 13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M12 5V8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M3 13H21L22 16H2L3 13Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
)

const VenueIcon = () => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
)

const FamilyIcon = () => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <circle cx="9" cy="7" r="4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M23 21v-2a4 4 0 0 0-3-3.87" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M16 3.13a4 4 0 0 1 0 7.75" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
)

const BirthdayIcon = () => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M2 21h20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M7 8V5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M12 8V5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M17 8V5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M7 4h.01" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M12 4h.01" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M17 4h.01" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
)

const BabyIcon = () => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M8 14s1.5 2 4 2 4-2 4-2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <line x1="9" y1="9" x2="9.01" y2="9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <line x1="15" y1="9" x2="15.01" y2="9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
)

const WeddingIcon = () => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
)

const MailIcon = () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="m22 6-10 7L2 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
)

const testimonials = [
    {
        id: 1,
        text: "The service was seamless and the presentation was excellent. Antalya’s catering added a refined touch and authentic flavours to our event."
    },
    {
        id: 2,
        text: "Beautifully prepared dishes, professional coordination, and warm hospitality. Our guests truly enjoyed every part of the experience."
    },
    {
        id: 3,
        text: "From planning to execution, everything was handled perfectly. The food was outstanding and left a lasting impression on everyone."
    }
]

export default function Catering() {
    const [activeQuote, setActiveQuote] = useState(0)

    useEffect(() => {
        const timer = setInterval(() => {
            setActiveQuote((prev) => (prev + 1) % testimonials.length)
        }, 4000)
        return () => clearInterval(timer)
    }, [])

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

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

    return (
        <section className={styles.cateringSection}>
            <div className={styles.container}>
                {/* Left Side: Collage */}
                <motion.div
                    className={styles.leftSide}
                    initial={{ opacity: 0, x: -30 }} // Slide slightly from left for images
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true, margin: "-100px" }}
                    transition={{ duration: 0.8 }}
                >
                    {/* Decorative Frame */}
                    <div className={styles.decorativeFrame}></div>

                    {/* 1. Top Left Image */}
                    <div className={styles.topLeftImage}>
                        <Image
                            src="/images/home/top.webp"
                            alt="Catering Team"
                            fill
                            className={styles.image}
                        />
                    </div>

                    {/* 2. Bottom Right Image */}
                    <div className={styles.bottomRightImage}>
                        <Image
                            src="/images/home/bottom.webp"
                            alt="Chef Working"
                            fill
                            className={styles.image}
                        />
                    </div>

                    {/* 3. Floating Call Widget (Clickable) */}
                    <a href="mailto:hello@antalyarestaurant.ca" className={styles.callWidgetLeft}>
                        <div className={styles.callIconCircleLeft}>
                            <MailIcon />
                        </div>
                        <div className={styles.callInfoLeft}>
                            <span className={styles.callLabelLeft}>Email us anytime</span>
                            <span className={styles.callNumberLeft}>hello@antalyarestaurant.ca</span>
                        </div>
                    </a>
                </motion.div>

                {/* Right Side: Content */}
                <motion.div
                    className={styles.rightSide}
                    initial="hidden"
                    whileInView="visible"
                    viewport={{ once: true, margin: "-100px" }}
                    variants={containerVariants}
                >
                    <motion.div variants={itemVariants} className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
                        <Image src="/images/dinner.png" alt="Home Gallery Decorative Dinner Icon" width={24} height={24} />
                        <span>CATERING & EVENTS</span>
                        <Image src="/images/eat.png" alt="Home Gallery Decorative Cutlery Icon" width={24} height={24} />
                    </motion.div>

                    <motion.h2 variants={itemVariants} className={styles.title}>
                        Moments Made Delicious
                    </motion.h2>

                    <motion.p variants={itemVariants} className={styles.description}>
                        Bring the soul of Turkish cuisine to your special occasions. Whether you’re hosting an intimate gathering or a large-scale celebration, Antalya creates memorable dining experiences with thoughtful service, elegant presentation, and fire-grilled flavours crafted to impress every guest.
                    </motion.p>

                    {/* Middle Row: Features + Quote Box */}
                    <div className={styles.middleContentRow}>
                        {/* Features Column */}
                        <div className={styles.featuresColumn}>
                            <motion.div variants={itemVariants} className={styles.featureItem}>
                                <div className={styles.featureIconCircle}>
                                    <div className={styles.featureIcon}><EventsIcon /></div>
                                </div>
                                <div className={styles.featureContent}>
                                    <h4>Corporate & Social Events</h4>
                                </div>
                            </motion.div>
                            <motion.div variants={itemVariants} className={styles.featureItem}>
                                <div className={styles.featureIconCircle}>
                                    <div className={styles.featureIcon}><FamilyIcon /></div>
                                </div>
                                <div className={styles.featureContent}>
                                    <h4>Family Gatherings & Weddings</h4>
                                </div>
                            </motion.div>
                            <motion.div variants={itemVariants} className={styles.featureItem}>
                                <div className={styles.featureIconCircle}>
                                    <div className={styles.featureIcon}><BirthdayIcon /></div>
                                </div>
                                <div className={styles.featureContent}>
                                    <h4>Birthday Party & Baby Shower</h4>
                                </div>
                            </motion.div>
                            {/* <motion.div variants={itemVariants} className={styles.featureItem}>
                                <div className={styles.featureIconCircle}>
                                    <div className={styles.featureIcon}><BabyIcon /></div>
                                </div>
                                <div className={styles.featureContent}>
                                    <h4>Baby Shower</h4>
                                </div>
                            </motion.div> */}
                            {/* <motion.div variants={itemVariants} className={styles.featureItem}>
                                <div className={styles.featureIconCircle}>
                                    <div className={styles.featureIcon}><WeddingIcon /></div>
                                </div>
                                <div className={styles.featureContent}>
                                    <h4>Weddings</h4>
                                </div>
                            </motion.div> */}
                        </div>

                        {/* Quote Box Slider */}
                        <motion.div variants={itemVariants} className={styles.quoteBoxWrapper}>
                            <AnimatePresence mode='wait'>
                                <motion.div
                                    key={activeQuote}
                                    initial={{ opacity: 0, x: 20 }}
                                    animate={{ opacity: 1, x: 0 }}
                                    exit={{ opacity: 0, x: -20 }}
                                    transition={{ duration: 0.5 }}
                                    className={styles.quoteBox}
                                >
                                    <p className={styles.quoteText}>
                                        "{testimonials[activeQuote].text}"
                                    </p>
                                    <span className={styles.quoteIcon}>,,</span>
                                </motion.div>
                            </AnimatePresence>
                            {/* Optional Dots/Indicators can be added here if needed, but user just asked for sliding */}
                            <div className={styles.sliderdots}>
                                {testimonials.map((_, index) => (
                                    <span
                                        key={index}
                                        className={`${styles.dot} ${index === activeQuote ? styles.activeDot : ''}`}
                                        onClick={() => setActiveQuote(index)}
                                    />
                                ))}
                            </div>
                        </motion.div>
                    </div>

                    {/* Bottom Action Row */}
                    <motion.div variants={itemVariants} className={styles.actionRow}>
                        <Link href="/catering-services-ontario" className={styles.discoverBtn} prefetch={false}>
                            Learn more →
                        </Link>
                    </motion.div>
                </motion.div>
            </div>
        </section>
    )
}
