'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: "It is a long established fact that our catering will distract you with delicious content of a page when looking at its layout."
    },
    {
        id: 2,
        text: "The authentic flavors transported us straight to Turkey. An unforgettable culinary experience for our wedding guests."
    },
    {
        id: 3,
        text: "Professional service and exquisite presentation. Antalya Catering made our corporate event truly spectacular."
    }
]

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

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

    return (
        <section className={styles.cateringSection}>
            <div className={styles.container}>
                {/* Left Side: Collage */}
                <div className={styles.leftSide}>
                    {/* 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>
                </div>

                {/* Right Side: Content */}
                <div className={styles.rightSide}>
                    <div 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} />
                    </div>
                    <h2 className={styles.title}>Turkish Catering Excellence
                    </h2>

                    <p className={styles.description}>
                        Experience authentic Turkish cuisine at your next event. From intimate gatherings to grand celebrations, we provide exceptional service and unforgettable flavors that will delight your guests.
                    </p>

                    {/* Middle Row: Features + Quote Box */}
                    <div className={styles.middleContentRow}>
                        {/* Features Column */}
                        <div className={styles.featuresColumn}>
                            <div className={styles.featureItem}>
                                <div className={styles.featureIconCircle}>
                                    <div className={styles.featureIcon}><EventsIcon /></div>
                                </div>
                                <div className={styles.featureContent}>
                                    <h4>Events & Celebrations</h4>
                                    {/* <p>Tailored menus for every occasion.</p> */}
                                </div>
                            </div>
                            <div className={styles.featureItem}>
                                <div className={styles.featureIconCircle}>
                                    <div className={styles.featureIcon}><CateringIcon /></div>
                                </div>
                                <div className={styles.featureContent}>
                                    <h4>Food & Beverage Catering</h4>
                                    {/* <p>Traditional charcoal-grilled dishes.</p> */}
                                </div>
                            </div>
                            <div className={styles.featureItem}>
                                <div className={styles.featureIconCircle}>
                                    <div className={styles.featureIcon}><VenueIcon /></div>
                                </div>
                                <div className={styles.featureContent}>
                                    <h4>Venue & Service Options</h4>
                                    {/* <p>Traditional charcoal-grilled dishes.</p> */}
                                </div>
                            </div>
                        </div>

                        {/* Quote Box Slider */}
                        <div 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>
                        </div>
                    </div>

                    {/* Bottom Action Row */}
                    <div className={styles.actionRow}>
                        <Link href="/catering-services-ontario" className={styles.discoverBtn}>
                            Discover More →
                        </Link>
                    </div>
                </div>
            </div>
        </section>
    )
}