import React, { useState, useEffect, useCallback } from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, ChevronLeft, ChevronRight } from 'lucide-react';
import { useKeenSlider } from 'keen-slider/react';
import { motion, useScroll, useTransform } from 'framer-motion';
import ParticlesBackground from '../components/ParticlesBackground';
import Gallery from '../components/Gallery';
import TrustElements from '../components/TrustElements';
import StatisticsCounter from '../components/StatisticsCounter';
import BookingForm from '../components/BookingForm';
import VideoSection from '../components/VideoSection';
import InstagramFeed from '../components/InstagramFeed';
import PortfolioSlider from '../components/PortfolioSlider';
import TypeWriter from '../components/TypeWriter';
import UpcomingEventCard, { UpcomingEventProps as CardData } from '../components/UpcomingEventCard';
import { supabase } from '../lib/supabase';
import 'keen-slider/keen-slider.min.css';
import { toast } from 'react-hot-toast';
import { Helmet } from "react-helmet";

const sliderImages = [
  {
    url: 'https://ik.imagekit.io/PROIMG92/2.%20Content-cover/Content%20Pics/Wedding%20Services/jayesh-jalodara-bWQ6-0c_ZcM-unsplash.jpg?updatedAt=1743541372625',
    title: 'Elegant Weddings',
    subtitle: 'Creating Magical Moments',
  },
  {
    url: 'https://ik.imagekit.io/PROIMG92/2.%20Content-cover/Content%20B/WhatsApp%20Image%202025-04-01%20at%2013.45.56.jpeg?updatedAt=1743544568911',
    title: 'Premium Decor',
    subtitle: 'Memorable Events',
  },
  {
    url: 'https://ik.imagekit.io/PROIMG92/2.%20Content-cover/Content%20B/Screenshot%202025-04-02%20083804.png?updatedAt=1743563681035',
    title: 'Corporate Events',
    subtitle: 'Professional Excellence',
  },
  
  {
    url: 'https://ik.imagekit.io/PROIMG92/2.%20Content-cover/Content%20B/Screenshot%202025-04-02%20084232.png?updatedAt=1743563677502',
    title: 'Social Gatherings',
    subtitle: 'Get Together, Make Memories',
  },
 
];

const services = [
  {
    title: 'Wedding Services',
    description: 'Complete wedding planning and execution',
    items: ['Wedding', 'Reception','Engagement', 'Haldi', 'Mehendi', 'Sangeet / Mayra'],
    image: 'https://ik.imagekit.io/PROIMG92/2.%20Content-cover/Content%20B/WhatsApp%20Image%202025-04-01%20at%2013.40.28.jpeg?updatedAt=1743544574186',
    icon: <img src="https://ik.imagekit.io/PROIMG92/Icons/rings.webp?updatedAt=1743680467716" alt="Wedding Rings" className="w-10 h-10" />,
  },
  {
    title: 'Corporate Events',
    description: 'Professional corporate event management',
    items: ['Conference', 'Seminar', 'Inauguration', "Product Launch",  'Annual Function', 'Speech Function', 'Award Ceremony'],
    image: 'https://ik.imagekit.io/PROIMG92/2.%20Content-cover/Content%20B/Screenshot%202025-04-02%20083701.png?updatedAt=1743563669866',
    icon: <img src="https://ik.imagekit.io/PROIMG92/Icons/4477853.png?updatedAt=1743679560775" alt="Corporate Event" className="w-10 h-10" />,
  },
  {
    title: 'Social Gatherings',
    description: 'Making every occasion special',
    items: ['Anniversary', 'Birthday', 'Janeu', 'Grih Pravesh', 'Freshers Party', 'Farewell Party', 'Family Reunion'],
    image: 'https://ik.imagekit.io/PROIMG92/2.%20Content-cover/Content%20B/WhatsApp%20Image%202025-03-19%20at%2014.09.13.jpeg?updatedAt=1743543342725',
    icon: <img src="https://ik.imagekit.io/PROIMG92/Icons/11103228.png?updatedAt=1743680615564" alt="Social Gathering" className="w-10 h-10" />,
  },
];

const teamMembers = [
  
  {
    name: 'Nandita Singh',
    position: 'Creative Head',
    image: 'https://ik.imagekit.io/PROIMG92/Team/tm-2-1.jpg?updatedAt=1743896911621',
    bio: `Education: M.B.A in Event Management from NAEMD Mumbai
    
Experience: 6 Years of work experience with top event companies of Mumbai
- DNA Network
- Wizcraft
- 70 EMG
- Bookmyshow
- KYC events
- SFA

3 Years of Experience in Events As A Team Member:
- Sula Vineyard Fest (Nasik) - Category Handler
- Bryan Adams concert (Hyderabad) - Category Handler
- MAMI (Mumbai Academy of Moving Image) - Category Handler
- Khelo India (Indian Commonwealth Game) - Category Handler
- Akash Ambani and Shloka Ambani Wedding - Category Handler
- Wiz Khalifa concert (Mumbai) - Category Handler
- IIFA
- India Idol`,
        expertise: [
          'Wedding & Productions',
          'Theme & Concept Designing',
          'Artist Management',          
          'Large-scale Event Management'
    ]
  },

  {
    name: 'Mohit Ranjan',
    position: 'Senior Project Head',
    image: 'https://ik.imagekit.io/PROIMG92/Team/mohit%20portrait.jpg?updatedAt=1743896911690',
    bio: `Experience:
    - 3 Years of expertise in event management
    - Specialized in Weddings and Engagements
    - Expert in Musical & Fashion Events coordination

    Key Projects:
    - Large-scale Wedding Events
    - Fashion Shows
    - Musical Concerts
    - Corporate Events`,
        expertise: [
          'Venue Management',
          'Event Management',
          'Vendors Management',
      'Budget Planning'
    ]
  },
  
  {
    name: 'Rahul Yadav',
    position: 'PR & Modelling Manager',
    image: 'https://ik.imagekit.io/PROIMG92/2.%20Content-cover/Content%20B/Team/tm-2-3.jpg?updatedAt=1743565635524',
    bio: `Education: Bachelor of Science in Information Technology (BSC IT)

Experience:
- 3 Years of experience at Amoeba Productions
- Handled numerous PR campaigns and modelling events
- Managed social media presence and digital marketing initiatives`,
    expertise: [
      'Social Media & Digital Marketing',
      'Artist Management',
      'Model Coordination',
      'Public Relations',
      'Event Planning'
    ]
  },

  {
    name: 'Abhishek Kumar',
    position: 'Web UI/UX',
    image: 'https://ik.imagekit.io/PROIMG92/Team/tm-2-2.jpg?updatedAt=1743896911617',
    bio: `Education: Electronics & Automation Engineering from M.S. Ramaiah Institute of Technology, Bangalore.

Experience: 
- Programmer Analyst at Cognizant
- Business Development Manager at Aspirus Medical Services Pvt. Ltd.`,

    expertise: [
      'Web Designing',
      'Client Relations', 
      'Event Productions',
      'Budget Planning'
    ]
  },

  {
    name: 'Abhinash Kumar',
    position: 'Manager',
    image: 'https://ik.imagekit.io/PROIMG92/T%20-%20Avi.jpg?updatedAt=1743674209833',
    bio: `Experience:
- 3 Years with Amoeba Productions
- Specialized in Operations Management
- Expert in Vendor Relations and Event Documentation`,
    expertise: [
      'Checklist Management',
      'Event Reporting',
      'Vendor Coordinatotion'
    ]
  },

  {
    name: 'Aman Prakash',
    position: 'Artist Manager',
    image: 'https://ik.imagekit.io/PROIMG92/Team/tm-2-5.jpg?updatedAt=1743896911541',
    bio: `Education: Computer Science from DSIT, Bangalore

Experience:
- Lead Choreographer at Flipkart Fashion Show, Bangalore
- Choreographer at Myntra Fashion Show, Bangalore

Key Projects:
- Fashion Shows
- Dance Events
- Corporate Events Performances`,
    expertise: [
      'Dance Choreography',
      'Fashion Choreography',
      'Event Production',
      'Performance Direction'
    ]
  }

];

// Define the state type including likeCount and images
type EventState = CardData;

const Home = () => {
  const [selectedMember, setSelectedMember] = useState<number | null>(null);
  const [isBookingOpen, setIsBookingOpen] = useState(false);
  const { scrollY } = useScroll();
  const y = useTransform(scrollY, [0, 500], [0, 150]);
  const [upcomingEvents, setUpcomingEvents] = useState<EventState[]>([]);
  const [sectionVisible, setSectionVisible] = useState(true);
  const [loading, setLoading] = useState(true);

  const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>({
    loop: true,
    slides: sliderImages.length,
    initial: 0,
    slideChanged(slider) {
      // setCurrentSlide(slider.track.details.rel);
    },
  });

  // Auto-typing phrases
  const typingPhrases = [
    "We bring your events to life.",
    "Expert planning saves you time and stress.",
    "Customized solutions for your unique vision.",
    "End-to-end coordination for seamless events.",
    "Creative excellence is our promise."
  ];

  // Use useCallback for fetch function
  const loadUpcomingEvents = useCallback(async () => {
    try {
      setLoading(true);
      
      // Check section visibility
      const { data: sectionData, error: sectionError } = await supabase
        .from('upcoming_events_section')
        .select('is_visible')
        .eq('id', 1)
        .maybeSingle();
      
      if (sectionError && sectionError.code !== 'PGRST116') {
        console.error('Error loading section visibility:', sectionError);
        // Decide how to handle this - maybe proceed assuming visible?
      }
      
      const isSectionVisible = !sectionData || sectionData.is_visible;
      setSectionVisible(isSectionVisible);

      if (!isSectionVisible) {
        setUpcomingEvents([]); // Clear events if section is hidden
        setLoading(false);
        return;
      }
      
      // Load visible events, including like_count
      const { data: eventData, error: eventError } = await supabase
        .from('upcoming_events')
        .select('*') // Select all columns, including like_count
        .eq('is_visible', true)
        .order('display_order', { ascending: true });
      
      if (eventError) {
        console.error('Error loading upcoming events:', eventError);
        throw eventError; // Throw to be caught by outer catch
      }
      
      if (eventData && eventData.length > 0) {
        // Fetch images (consider optimizing this N+1 later)
        const eventsWithDetails = await Promise.all(eventData.map(async (event) => {
          const { data: imageData, error: imageError } = await supabase
            .from('upcoming_event_images')
            .select('image_url')
            .eq('event_id', event.id)
            .order('display_order', { ascending: true });
          
          return {
            ...event,
            images: imageError ? [] : imageData?.map(img => img.image_url) || [],
            date_type: event.date_type,
            date: event.date,
            location: event.location,
            price: event.price,
            showCountdown: event.show_countdown,
            isClickable: event.is_clickable,
            eventPageUrl: event.event_page_url,
            likeCount: event.like_count || 0
          };
        }));
        
        setUpcomingEvents(eventsWithDetails as EventState[]);
      } else {
        setUpcomingEvents([]);
      }
    } catch (error) {
      console.error('Error in loadUpcomingEvents:', error);
      toast.error('Failed to load upcoming events.'); // Show toast on error
    } finally {
      setLoading(false);
    }
  }, []); // Empty dependency array if it doesn't depend on props/state outside

  useEffect(() => {
    loadUpcomingEvents();
  }, [loadUpcomingEvents]); // Depend on the memoized function

  // Add the handleLike function
  const handleLike = useCallback(async (eventId: string) => {
    // 1. Optimistic UI update
    setUpcomingEvents(currentEvents => 
      currentEvents.map(event => 
        event.id === eventId 
          ? { ...event, likeCount: (event.likeCount || 0) + 1 } 
          : event
      )
    );

    // Add a slight delay before calling the function to let the UI update visually
    await new Promise(resolve => setTimeout(resolve, 100)); 

    try {
      // 2. Call the Edge Function
      const { error } = await supabase.functions.invoke('increment-event-like', {
        body: { eventId },
      });

      if (error) {
        throw error; // Trigger the catch block
      }
      // Success: Maybe show a subtle success feedback if desired
      // toast.success('Liked!'); // Optional: uncomment for success message

    } catch (error) {
      console.error('Failed to increment like count:', error);
      toast.error('Failed to like event.');

      // 3. Revert optimistic update on failure
      setUpcomingEvents(currentEvents => 
        currentEvents.map(event => 
          event.id === eventId 
            ? { ...event, likeCount: Math.max(0, (event.likeCount || 1) - 1) } // Revert increment
            : event
        )
      );
    }
  }, []); // Empty dependency array as it only uses supabase client

  return (
    <div>
      <Helmet>
        <title>AMOEBA PRODUCTIONS & STUDIO | Best Event Management Company in Patna</title>
        <meta name="description" content="AMOEBA PRODUCTIONS & STUDIO is the Best Event Management Company in Patna, offering top-notch Event Management Services, Event Planning, Corporate Events, Party Planning, and Advertising solutions. We are also known for our Digital Marketing, Creative Agency, Social Media Management, Marketing, and Brand Promotion services in Patna, Bihar, Delhi, and Ranchi." />
        <meta name="keywords" content="Best Event Management Company in Patna, Event Management Companies in Patna, Best Advertising Company in Patna, Best Digital Marketing Company in Patna, Best Creative Company in Patna, Best Social Media Company in Patna, Best Marketing Company in Patna, Top 10 Event Management Companies in Bihar, Event Organisers in Patna, Corporate Events in Patna, Brand Promotion Agencies in Patna, Wedding Planner in Patna, Dandiya Night Patna, Raas Garba Patna, Event Planners, Social Gatherings, Corporate Events, Wedding Services, Patna, Bihar, Delhi, Ranchi" />
        <link rel="canonical" href="https://www.amoebaproductions.com/" />
        <meta property="og:title" content="AMOEBA PRODUCTIONS & STUDIO | Best Event Management, Marketing & Advertising Company in Patna" />
        <meta property="og:description" content="AMOEBA PRODUCTIONS & STUDIO is the Best Event Management Company in Patna, offering Event Planning, Corporate Events, Party Planning, Advertising, Digital Marketing, Social Media, and Brand Promotion services. We provide customized solutions to meet your event and marketing needs in Patna, Bihar, Delhi, and Ranchi." />
        <meta property="og:image" content="https://www.amoebaproductions.com/images/logo.png" />
        <meta property="og:url" content="https://www.amoebaproductions.com/" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="AMOEBA PRODUCTIONS & STUDIO | Best Event Management, Marketing & Advertising Company in Patna" />
        <meta name="twitter:description" content="AMOEBA PRODUCTIONS & STUDIO is the Best Event Management Company in Patna, offering Event Planning, Corporate Events, Party Planning, Advertising, Digital Marketing, Social Media, and Brand Promotion services." />
        <meta name="twitter:image" content="https://www.amoebaproductions.com/images/logo.png" />
      </Helmet>
      {/* Hero Section */}
      <section className="relative h-[90vh] flex items-center justify-center overflow-hidden">
        {/* Video Section */}
        <VideoSection />
        
        <div ref={sliderRef} className="keen-slider h-full">
          {sliderImages.map((slide, idx) => (
            <div
              key={idx}
              className="keen-slider__slide relative flex items-center justify-center"
            >
              <motion.div
                style={{ y }}
                className="absolute inset-0 bg-cover bg-center"
              >
                <div
                  className="absolute inset-0 bg-cover bg-center"
                  style={{ backgroundImage: `url(${slide.url})` }}
                >
                  <div className="absolute inset-0 bg-black bg-opacity-50" />
                  <ParticlesBackground />
                </div>
              </motion.div>
              <div className="relative z-10 text-center text-white px-4 mt-40">
                <motion.h1
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6 }}
                  className="text-5xl md:text-7xl font-playfair font-bold mb-6"
                >
                  {slide.title}
                </motion.h1>
                <motion.p
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: 0.2 }}
                  className="text-xl md:text-2xl mb-8"
                >
                  {slide.subtitle}
                </motion.p>
                <motion.button
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.95 }}
                  onClick={() => setIsBookingOpen(true)}
                  className="px-8 py-3 bg-primary text-white rounded-full hover:bg-primary-dark transition-colors duration-200"
                >
                  Book Now
                </motion.button>
              </div>
            </div>
          ))}
        </div>
        
        <button
          onClick={() => instanceRef.current?.prev()}
          className="absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-white/30 text-white hover:bg-white/50 transition-colors"
        >
          <ChevronLeft className="w-6 h-6" />
        </button>
        <button
          onClick={() => instanceRef.current?.next()}
          className="absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-white/30 text-white hover:bg-white/50 transition-colors"
        >
          <ChevronRight className="w-6 h-6" />
        </button>
      </section>

      {/* Upcoming Events */}
      {sectionVisible && (
      <section className="py-16">
        <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-12">Upcoming Events</h2>
            
            {loading ? (
              <div className="flex justify-center items-center h-40">
                <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary"></div>
                <p className="ml-3 text-gray-500">Loading events...</p>
                </div>
            ) : upcomingEvents.length === 0 ? (
              <div className="text-center text-gray-500 py-12">
                <p>No upcoming events at the moment.</p>
                <p>Check back soon for exciting events!</p>
                  </div>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {upcomingEvents.map((event) => (
                  <UpcomingEventCard
                    key={event.id}
                    id={event.id}
                    title={event.title}
                    description={event.description}
                    date={event.date}
                    date_type={event.date_type}
                    location={event.location}
                    price={event.price}
                    images={event.images}
                    showCountdown={event.showCountdown}
                    isClickable={event.isClickable}
                    eventPageUrl={event.eventPageUrl}
                    likeCount={event.likeCount}
                    onLike={handleLike}
                  />
                ))}
                      </div>
                    )}
        </div>
      </section>
      )}

      {/* Services */}
      <section className="py-16 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-12">Our Services</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {services.map((service, idx) => (
              <motion.div
                key={idx}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: idx * 0.2 }}
                className="bg-white rounded-lg shadow-lg overflow-hidden transform hover:-translate-y-1 transition-all duration-300"
              >
                <div className="aspect-w-16 aspect-h-9">
                  <img src={service.image} alt={service.title} className="object-cover w-full h-48" />
                </div>
                <div className="p-6">
                  <div className="mb-4">{service.icon}</div>
                  <h3 className="text-2xl font-bold mb-2">{service.title}</h3>
                  <p className="text-gray-600 mb-4">{service.description}</p>
                  <ul className="space-y-2">
                    {service.items.map((item, itemIdx) => (
                      <li key={itemIdx} className="flex items-center">
                        <ArrowRight className="w-4 h-4 text-primary mr-2" />
                        <span>{item}</span>
                      </li>
                    ))}
                  </ul>
                  {/* Contextual links to Gallery and Contact */}
                  <div className="mt-4 flex flex-wrap gap-2">
                    <Link to="/gallery" className="text-primary underline hover:text-primary-dark text-sm">See our Gallery</Link>
                    <Link to="/contact" className="text-primary underline hover:text-primary-dark text-sm">Contact Us</Link>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Auto Typing Section */}
      <section className="py-20 bg-gradient-to-r from-orange-500 to-blue-600 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-xl mx-auto text-center">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.7 }}
              className="space-y-8 w-full flex flex-col items-center"
            >
              <h2 className="text-4xl font-playfair font-bold text-center w-full">Why Hire an Event Planner?</h2>
              
              <div className="w-full text-center flex justify-center items-center">
              <TypeWriter 
                phrases={typingPhrases} 
                  className="font-medium text-center w-full"
                  fontSize="text-base md:text-xl"
                  textColor="text-white"
                />
              </div>
              
              <div className="grid grid-cols-2 gap-4 mt-6 w-full max-w-md mx-auto">
                <motion.span 
                  className="bg-white/20 backdrop-blur-sm px-5 py-2 rounded-full text-base font-medium text-center"
                  whileHover={{ scale: 1.05, backgroundColor: "rgba(255,255,255,0.3)" }}
                >
                  Time Saving
                </motion.span>
                <motion.span 
                  className="bg-white/20 backdrop-blur-sm px-5 py-2 rounded-full text-base font-medium text-center"
                  whileHover={{ scale: 1.05, backgroundColor: "rgba(255,255,255,0.3)" }}
                >
                  Expert Network
                </motion.span>
                <motion.span 
                  className="bg-white/20 backdrop-blur-sm px-5 py-2 rounded-full text-base font-medium text-center"
                  whileHover={{ scale: 1.05, backgroundColor: "rgba(255,255,255,0.3)" }}
                >
                  Budget Control
                </motion.span>
                <motion.span 
                  className="bg-white/20 backdrop-blur-sm px-5 py-2 rounded-full text-base font-medium text-center"
                  whileHover={{ scale: 1.05, backgroundColor: "rgba(255,255,255,0.3)" }}
                >
                  Stress Relief
                </motion.span>
              </div>
              
              <div className="pt-6 flex justify-center w-full">
                <motion.button 
                  onClick={() => setIsBookingOpen(true)}
                  className="px-8 py-3 bg-white text-primary font-medium rounded-full hover:bg-gray-100 transition-colors duration-200"
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.95 }}
                >
                  Book a Consultation
                </motion.button>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Portfolio Section */}
      <PortfolioSlider 
        featuredOnly={true} 
        maxAlbums={6}
        title="Featured Works"
        subtitle="Explore our featured events and celebrations"
      />

      {/* Team Section */}
      <section className="py-16">
        <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-12">Meet Our Team</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {teamMembers.map((member, idx) => (
              <motion.div
                key={idx}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: idx * 0.2 }}
                className="bg-white rounded-lg shadow-lg overflow-hidden transform hover:-translate-y-1 transition-all duration-300"
              >
                <div className="aspect-w-1 aspect-h-1">
                  <img src={member.image} alt={member.name} className="object-cover w-full h-64" />
                </div>
                <div className="p-6 text-center">
                  <h3 className="text-xl font-bold mb-1">{member.name}</h3>
                  <p className="text-gray-600 mb-4">{member.position}</p>
                  <button
                    onClick={() => setSelectedMember(idx)}
                    className="inline-flex items-center px-4 py-2 bg-primary text-white rounded-full hover:bg-primary-dark transition-colors duration-200"
                  >
                    Bio Info
                  </button>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Gallery Section */}
      <Gallery />

      {/* Trust Elements Section */}
      <TrustElements />

      {/* Statistics Counter Section */}
      <StatisticsCounter />

      {/* Instagram Feed Section */}
      <InstagramFeed />

      {/* Bio Modal */}
      {selectedMember !== null && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.9 }}
            className="bg-white rounded-lg p-8 max-w-lg w-full mx-4"
          >
            <div className="flex items-start justify-between mb-4">
              <div>
                <h3 className="text-2xl font-bold">{teamMembers[selectedMember].name}</h3>
                <p className="text-gray-600">{teamMembers[selectedMember].position}</p>
              </div>
              <button
                onClick={() => setSelectedMember(null)}
                className="text-gray-400 hover:text-gray-500"
              >
                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
            <p className="text-gray-600 mb-6">{teamMembers[selectedMember].bio}</p>
            <div className="mb-6">
              <h4 className="font-semibold mb-2">Areas of Expertise:</h4>
              <ul className="space-y-2">
                {teamMembers[selectedMember].expertise.map((skill, idx) => (
                  <li key={idx} className="flex items-center">
                    <ArrowRight className="w-4 h-4 text-primary mr-2" />
                    <span>{skill}</span>
                  </li>
                ))}
              </ul>
            </div>
            <button
              onClick={() => setSelectedMember(null)}
              className="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors duration-200"
            >
              Close
            </button>
          </motion.div>
        </div>
      )}

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

export default Home;