import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import { Heart, Users, Calendar, Music, Camera, Utensils, Gift, PartyPopper, Sparkles, X, ChevronLeft, ChevronRight } from 'lucide-react';
import ParticlesBackground from '../components/ParticlesBackground';
import BookingForm from '../components/BookingForm';
import { Helmet } from "react-helmet";

const weddingServices = [
  {
    title: 'Pre-Wedding Events',
    items: ['Engagement Ceremony', 'Haldi Ceremony', 'Mehendi Celebration', 'Sangeet Night'],
    image: 'https://ik.imagekit.io/PROIMG92/2.%20Content-cover/Content%20B/WhatsApp%20Image%202025-03-19%20at%2014.09.56%20(1).jpeg?updatedAt=174354334386',
  },
  {
    title: 'Wedding Day',
    items: ['Wedding Ceremony', 'Reception Party', 'Cocktail Evening', 'Theme Decoration'],
    image: 'https://ik.imagekit.io/PROIMG92/2.%20Content-cover/Content%20Pics/Wedding%20Services/photorealistic-wedding-venue-with-intricate-decor-ornaments%20(2).jpg?updatedAt=1743541391679',
  },
  {
    title: 'Special Services',
    items: ['Bridal Entry', 'Pre-Wedding Shoot', 'Camera Crew', 'Makeup Artist'],
    image: 'https://ik.imagekit.io/PROIMG92/2.%20Content-cover/Content%20B/WhatsApp%20Image%202025-04-01%20at%2013.40.32.jpeg?updatedAt=1743545236473',
  },
];

const corporateEvents = [
  {
    icon: <Users className="w-8 h-8" />,
    title: 'Conferences & Seminars',
    description: 'Professional events with state-of-the-art facilities and seamless coordination.',
  },
  {
    icon: <Calendar className="w-8 h-8" />,
    title: 'Product Launches',
    description: 'End-to-end product launches with seamless planning, impactful branding, and engaging audience experiences.',
  },
  {
    icon: <PartyPopper className="w-8 h-8" />,
    title: 'Inauguration',
    description: 'Inauguration events that create lasting impressions.',
  },
  {
    icon: <Music className="w-8 h-8" />,
    title: 'Team Building Events',
    description: 'Engaging activities that strengthen team bonds and corporate culture.',
  },
];

const anniversaryGallery = [
  {
    image: 'https://ik.imagekit.io/PROIMG92/2.%20Content-cover/Content%20Pics/Birthday/0654fe7482b6588568585d695d1ab56f.jpg?updatedAt=1743668095388',
    title: 'Romantic Setup',
  },
  {
    image: 'https://ik.imagekit.io/PROIMG92/paras%20celebration/WhatsApp%20Image%202022-12-12%20at%201.47.13%20PM%20(1).jpeg?updatedAt=1742585806220',
    title: 'Decoration',
  },
  {
    image: 'https://ik.imagekit.io/PROIMG92/Cake%20Designs%205k%20to%207k/WhatsApp%20Image%202025-02-18%20at%2018.51.45.jpeg?updatedAt=1743896911238',
    title: 'Anniversary Cake',
  },
  {
    image: 'https://ik.imagekit.io/PROIMG92/2.%20Content-cover/Content%20B/WhatsApp%20Image%202025-01-19%20at%2015.36.06.jpeg?updatedAt=1743547529108',
    title: 'Singers',
  },
];

const birthdayFeatures = [
  {
    icon: <Sparkles className="w-12 h-12 text-primary" />,
    title: 'Theme Parties',
    items: ['Custom Themes','Superhero Theme', 'Princess Parties', 'Jungle Theme'],
  },
  {
    icon: <Utensils className="w-12 h-12 text-primary" />,
    title: 'Catering',
    items: ['Custom Menu', 'Live Stations', 'Theme Cakes', 'Beverages'],
  },
  {
    icon: <Camera className="w-12 h-12 text-primary" />,
    title: 'Entertainment',
    items: ['Live Music', 'Magic Shows', 'Game Zones', 'Photo Booths'],
  },
  {
    icon: <Gift className="w-12 h-12 text-primary" />,
    title: 'Extras',
    items: ['Return Gifts', 'Balloon Decor', 'Party Props', 'Invitation Cards'],
  },
];

const Services = () => {
  const [isBookingOpen, setIsBookingOpen] = useState(false);
  const [ref, inView] = useInView({
    triggerOnce: true,
    threshold: 0.1,
  });
  
  // State for image gallery popup
  const [selectedImageIndex, setSelectedImageIndex] = useState<number | null>(null);
  const [autoPlay, setAutoPlay] = useState(true);
  
  // Auto slider effect
  useEffect(() => {
    let interval: NodeJS.Timeout | null = null;
    
    if (selectedImageIndex !== null && autoPlay) {
      interval = setInterval(() => {
        setSelectedImageIndex((prev) => 
          prev === null ? null : (prev + 1) % anniversaryGallery.length
        );
      }, 3000); // Change slide every 3 seconds
    }
    
    return () => {
      if (interval) clearInterval(interval);
    };
  }, [selectedImageIndex, autoPlay]);
  
  // Go to next image
  const nextImage = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (selectedImageIndex !== null) {
      setSelectedImageIndex((selectedImageIndex + 1) % anniversaryGallery.length);
    }
  };
  
  // Go to previous image
  const prevImage = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (selectedImageIndex !== null) {
      setSelectedImageIndex(
        selectedImageIndex === 0 
          ? anniversaryGallery.length - 1 
          : selectedImageIndex - 1
      );
    }
  };
  
  // Open the image popup
  const openImagePopup = (index: number) => {
    setSelectedImageIndex(index);
  };
  
  // Close the image popup
  const closeImagePopup = () => {
    setSelectedImageIndex(null);
  };
  
  // Toggle autoplay
  const toggleAutoPlay = (e: React.MouseEvent) => {
    e.stopPropagation();
    setAutoPlay(!autoPlay);
  };

  return (
    <div>
      <Helmet>
        <title>Services | Amoeba Productions - Event Management, Marketing & Advertising Patna</title>
        <meta name="description" content="Explore the full range of event management, marketing, advertising, and creative services offered by Amoeba Productions in Patna, Bihar, Delhi, and Ranchi." />
        <meta name="keywords" content="Event Management Services Patna, Corporate Events, Wedding Planning, Brand Promotion, Marketing, Advertising, Social Media, Creative Agency, Bihar, Delhi, Ranchi" />
        <link rel="canonical" href="https://www.amoebaproductions.com/services" />
        <meta property="og:title" content="Services | Amoeba Productions - Event Management, Marketing & Advertising Patna" />
        <meta property="og:description" content="Discover our event management, marketing, and creative services for weddings, corporates, and brands in Patna and beyond." />
        <meta property="og:image" content="https://www.amoebaproductions.com/images/logo.png" />
        <meta property="og:url" content="https://www.amoebaproductions.com/services" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="Services | Amoeba Productions - Event Management, Marketing & Advertising Patna" />
        <meta name="twitter:description" content="Explore the full range of event management, marketing, and creative services by Amoeba Productions." />
        <meta name="twitter:image" content="https://www.amoebaproductions.com/images/logo.png" />
      </Helmet>
      {/* Hero Section */}
      <section className="relative h-[60vh] flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0">
          <div
            className="absolute inset-0 bg-cover bg-center"
            style={{
              backgroundImage: "url('https://images.unsplash.com/photo-1469371670807-013ccf25f16a?auto=format&fit=crop&q=80&w=2000')",
            }}
          >
            <div className="absolute inset-0 bg-black bg-opacity-60" />
            <ParticlesBackground />
          </div>
        </div>
        <div className="relative z-10 text-center text-white px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <h1 className="text-5xl md:text-7xl font-playfair font-bold mb-6">
              Our Services
            </h1>
            <p className="text-xl md:text-2xl text-gray-200 max-w-3xl mx-auto">
              Creating Memorable Experiences for Every Occasion
            </p>
          </motion.div>
        </div>
      </section>

      {/* Wedding Services Section */}
      <section className="py-20" ref={ref}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-4xl font-playfair font-bold text-center mb-16">Wedding Services</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {weddingServices.map((service, idx) => (
              <motion.div
                key={idx}
                initial={{ opacity: 0, y: 20 }}
                animate={inView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.5, delay: idx * 0.2 }}
                className="bg-white rounded-xl shadow-lg overflow-hidden"
              >
                <div className="aspect-w-16 aspect-h-9">
                  <img
                    src={service.image}
                    alt={service.title}
                    className="w-full h-48 object-cover"
                  />
                </div>
                <div className="p-6">
                  <h3 className="text-xl font-bold mb-4">{service.title}</h3>
                  <ul className="space-y-2">
                    {service.items.map((item, itemIdx) => (
                      <li key={itemIdx} className="flex items-center">
                        <Heart className="w-4 h-4 text-primary mr-2" />
                        <span>{item}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Corporate Events Section */}
      <section className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-4xl font-playfair font-bold text-center mb-16">Corporate Events</h2>
          <div className="relative">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <motion.div
                initial={{ opacity: 0, x: -50 }}
                animate={inView ? { opacity: 1, x: 0 } : {}}
                transition={{ duration: 0.6 }}
                className="flex flex-col justify-center"
              >
                <div className="grid grid-cols-1 gap-6">
                  {corporateEvents.map((event, idx) => (
                    <div
                      key={idx}
                      className="bg-white p-6 rounded-xl shadow-lg flex items-start space-x-4"
                    >
                      <div className="text-primary">{event.icon}</div>
                      <div>
                        <h3 className="text-lg font-bold mb-2">{event.title}</h3>
                        <p className="text-gray-600">{event.description}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </motion.div>
              <motion.div
                initial={{ opacity: 0, x: 50 }}
                animate={inView ? { opacity: 1, x: 0 } : {}}
                transition={{ duration: 0.6 }}
                className="relative"
              >
                <img
                  src="https://ik.imagekit.io/PROIMG92/2.%20Content-cover/Content%20B/WhatsApp%20Image%202025-03-16%20at%2014.34.40%20(1).jpeg?updatedAt=1743543346716"
                  alt="Corporate event"
                  className="rounded-xl shadow-xl"
                />
              </motion.div>
            </div>
          </div>
        </div>
      </section>

      {/* Anniversary Section */}
      <section className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-4xl font-playfair font-bold text-center mb-16">Anniversary Celebrations</h2>
          <div className="text-center mb-12">
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Celebrate your special moments with our curated anniversary packages. From intimate dinners to grand celebrations, we create magical experiences that honor your journey together.
            </p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {anniversaryGallery.map((item, idx) => (
              <motion.div
                key={idx}
                initial={{ opacity: 0, scale: 0.9 }}
                animate={inView ? { opacity: 1, scale: 1 } : {}}
                transition={{ duration: 0.5, delay: idx * 0.1 }}
                className="relative group overflow-hidden rounded-xl cursor-pointer"
                onClick={() => openImagePopup(idx)}
              >
                <img
                  src={item.image}
                  alt={item.title}
                  className="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-300"
                />
                <div className="absolute inset-0 bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                  <p className="text-white text-center font-semibold px-4">{item.title}</p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Birthday Section */}
      <section className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-4xl font-playfair font-bold text-center mb-16">Birthday Celebrations</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {birthdayFeatures.map((feature, idx) => (
              <motion.div
                key={idx}
                initial={{ opacity: 0, y: 20 }}
                animate={inView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.5, delay: idx * 0.2 }}
                className="bg-white p-6 rounded-xl shadow-lg text-center"
              >
                <div className="flex justify-center mb-4">{feature.icon}</div>
                <h3 className="text-xl font-bold mb-4">{feature.title}</h3>
                <ul className="space-y-2 text-left">
                  {feature.items.map((item, itemIdx) => (
                    <li key={itemIdx} className="flex items-center">
                      <PartyPopper className="w-4 h-4 text-primary mr-2" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="relative py-20 bg-fixed bg-cover bg-center" style={{
        backgroundImage: "url('https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?auto=format&fit=crop&q=80&w=2000')"
      }}>
        <div className="absolute inset-0 bg-black bg-opacity-60" />
        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-4xl font-playfair font-bold text-white mb-8">Ready to Plan Your Event?</h2>
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={() => setIsBookingOpen(true)}
            className="px-8 py-4 bg-primary text-white text-lg font-semibold rounded-full hover:bg-primary-dark transition-colors duration-200"
          >
            Book Now
          </motion.button>
        </div>
      </section>

      <BookingForm isOpen={isBookingOpen} onClose={() => setIsBookingOpen(false)} />

      {/* Image Popup Gallery with Auto Slider */}
      <AnimatePresence>
        {selectedImageIndex !== null && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
            className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-90 p-4"
            onClick={closeImagePopup}
          >
            <motion.div 
              initial={{ scale: 0.8 }}
              animate={{ scale: 1 }}
              exit={{ scale: 0.8 }}
              transition={{ duration: 0.3 }}
              className="relative max-w-3xl w-full"
              onClick={(e) => e.stopPropagation()}
            >
              {/* Close button */}
              <button 
                onClick={closeImagePopup}
                className="absolute -top-12 right-0 text-white hover:text-gray-300"
                aria-label="Close"
              >
                <X className="w-8 h-8" />
              </button>
              
              {/* Auto play toggle */}
              <button 
                onClick={toggleAutoPlay}
                className={`absolute -top-12 left-0 text-white flex items-center ${autoPlay ? 'text-primary' : 'text-white'} hover:text-primary-light`}
              >
                {autoPlay ? (
                  <>
                    <span className="mr-2">●</span> Auto Play ON
                  </>
                ) : (
                  <>
                    <span className="mr-2">○</span> Auto Play OFF
                  </>
                )}
              </button>

              {/* Image counter */}
              <div className="absolute top-4 left-4 bg-black bg-opacity-50 text-white px-3 py-1 rounded-full text-sm z-10">
                {selectedImageIndex + 1} / {anniversaryGallery.length}
              </div>

              <div className="w-full aspect-square max-w-xl mx-auto bg-white rounded-lg overflow-hidden relative">
                <AnimatePresence mode="wait">
                  <motion.img
                    key={selectedImageIndex}
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    transition={{ duration: 0.3 }}
                    src={anniversaryGallery[selectedImageIndex].image}
                    alt={anniversaryGallery[selectedImageIndex].title}
                    className="w-full h-full object-cover"
                  />
                </AnimatePresence>
                
                {/* Title overlay */}
                <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 text-white p-4">
                  <h3 className="text-lg font-semibold">{anniversaryGallery[selectedImageIndex].title}</h3>
                </div>

                {/* Navigation buttons */}
                <button 
                  onClick={prevImage}
                  className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 hover:bg-opacity-70 rounded-full p-2 text-white transition-all"
                  aria-label="Previous image"
                >
                  <ChevronLeft className="w-6 h-6" />
                </button>
                
                <button 
                  onClick={nextImage}
                  className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 hover:bg-opacity-70 rounded-full p-2 text-white transition-all"
                  aria-label="Next image"
                >
                  <ChevronRight className="w-6 h-6" />
                </button>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};

export default Services;