'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 PhoneIcon = () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M22 16.92V19.92C22.0011 20.1986 21.9441 20.4742 21.8325 20.7294C21.7209 20.9846 21.5573 21.2137 21.3521 21.4019C21.1468 21.5902 20.9046 21.7336 20.6407 21.8228C20.3769 21.912 20.0974 21.9452 19.82 21.92C16.7428 21.5857 13.787 20.5342 11.19 18.85C8.77382 17.2436 6.72159 15.1913 5.115 12.775C3.4296 10.1764 2.37871 7.21876 2.045 4.14C2.01977 3.86249 2.0531 3.5828 2.14242 3.31885C2.23175 3.0549 2.37513 2.81263 2.56353 2.60733C2.75193 2.40203 2.98114 2.23838 3.23645 2.12674C3.49175 2.01511 3.76747 1.958 4.046 1.96H7.046C7.54518 1.95662 8.02636 2.14092 8.39706 2.47761C8.76776 2.81431 8.99905 3.27599 9.046 3.775C9.13327 4.73516 9.3101 5.68165 9.57 6.6C9.67389 6.96342 9.65431 7.35246 9.51368 7.70311C9.37305 8.05377 9.11979 8.34493 8.796 8.528L7.526 9.798C8.94838 12.2988 11.0022 14.3526 13.503 15.775L14.773 14.505C14.9561 14.1812 15.2472 13.928 15.5979 13.7873C15.9486 13.6467 16.3376 13.6271 16.701 13.731C17.6193 13.9909 18.5658 14.1677 19.526 14.255C20.0266 14.3023 20.4897 14.535 20.8267 14.9079C21.1637 15.2808 21.3472 15.7636 21.342 16.264V16.92Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
)

const testimonials = [
    {
        id: 1,
        text: "Refined presentation, authentic flavours, and smooth execution made our event memorable."
    },
    {
        id: 2,
        text: "Exceptional taste and thoughtful service impressed every guest and elevated the entire dining experience."
    },
    {
        id: 3,
        text: "Beautifully prepared dishes paired with attentive service created an elegant and enjoyable celebration."
    }
]

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="tel:+15195882037" className={styles.callWidgetLeft}>
                        <div className={styles.callIconCircleLeft}>
                            <PhoneIcon />
                        </div>
                        <div className={styles.callInfoLeft}>
                            <span className={styles.callLabelLeft}>Call Us anytime</span>
                            <span className={styles.callNumberLeft}>+1 519 588 2037</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>
                                    {/* <p>Tailored menus for every occasion.</p> */}
                                </div>
                            </motion.div>
                            <motion.div variants={itemVariants} className={styles.featureItem}>
                                <div className={styles.featureIconCircle}>
                                    <div className={styles.featureIcon}><CateringIcon /></div>
                                </div>
                                <div className={styles.featureContent}>
                                    <h4>Signature Cuisine & Drinks</h4>
                                    {/* <p>Traditional charcoal-grilled dishes.</p> */}
                                </div>
                            </motion.div>
                            <motion.div variants={itemVariants} className={styles.featureItem}>
                                <div className={styles.featureIconCircle}>
                                    <div className={styles.featureIcon}><VenueIcon /></div>
                                </div>
                                <div className={styles.featureContent}>
                                    <h4>End-to-End Event Support</h4>
                                    {/* <p>Traditional charcoal-grilled dishes.</p> */}
                                </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}>
                            Learn more →
                        </Link>
                    </motion.div>
                </motion.div>
            </div>
        </section>
    )
}
