"use client";

import React, { useRef } from 'react';
import { motion, useScroll, useTransform, useInView } from "framer-motion";
import Navbar from '@/components/Navbar/navbar';
import Footer from '@/components/footer';

const Meetups = () => {
    const containerRef = useRef(null);

    // Animation variants
    const fadeIn = {
        hidden: { opacity: 0, y: 30 },
        visible: {
            opacity: 1,
            y: 0,
            transition: { duration: 0.8, ease: "easeOut" }
        }
    };

    const staggerContainer = {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: {
                staggerChildren: 0.2
            }
        }
    };

    const imageCard = {
        hidden: { opacity: 0, scale: 0.9 },
        visible: {
            opacity: 1,
            scale: 1,
            transition: { duration: 0.5, ease: "easeOut" }
        }
    };

    return (
        <div className="w-full bg-[#080E12] overflow-x-hidden" ref={containerRef}>
            <Navbar />

            {/* Hero Section */}
            <motion.section
                className="h-screen flex flex-col justify-center max-w-6xl mx-auto px-6 pt-20"
                initial="hidden"
                animate="visible"
                variants={fadeIn}
            >
                <motion.h1
                    className="text-5xl md:text-7xl text-white mb-6"
                    animate={{
                        backgroundPosition: ["0% 0%", "100% 100%"],
                    }}
                    transition={{
                        duration: 8,
                        repeat: Infinity,
                        repeatType: "reverse"
                    }}
                    style={{
                        backgroundImage: "linear-gradient(90deg, #fff, #a855f7, #ec4899, #fff)",
                        backgroundSize: "200%",
                        WebkitBackgroundClip: "text",
                        WebkitTextFillColor: "transparent"
                    }}
                >
                    Meetups & Community
                </motion.h1>

                <motion.p
                    className="text-gray-400 text-xl max-w-3xl mb-12"
                    variants={{
                        hidden: { opacity: 0, y: 20 },
                        visible: {
                            opacity: 1,
                            y: 0,
                            transition: { delay: 0.3, duration: 0.8 }
                        }
                    }}
                >
                    Connect, Learn, and Innovate with AI Enthusiasts. Join our vibrant community of over 25,000 AI developers, enthusiasts, and doers at Everyday Series Meetups.
                </motion.p>

                <motion.div
                    className="flex flex-wrap gap-4"
                    variants={{
                        hidden: { opacity: 0, y: 20 },
                        visible: {
                            opacity: 1,
                            y: 0,
                            transition: { delay: 0.5, duration: 0.8 }
                        }
                    }}
                >
                    <a href="#" className="px-8 py-4 rounded-lg text-white font-medium bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg hover:shadow-xl transition-all duration-300">
                        Join a Meetup
                    </a>
                    <a href="#explore" className="px-8 py-4 rounded-lg text-white font-medium border border-purple-500 hover:bg-purple-500/10 transition-all duration-300">
                        Explore Community
                    </a>
                </motion.div>

                <motion.div
                    className="absolute bottom-10 left-1/2 transform -translate-x-1/2"
                    animate={{
                        y: [0, 10, 0],
                    }}
                    transition={{
                        duration: 2,
                        repeat: Infinity,
                        repeatType: "loop"
                    }}
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-purple-500"
                    >
                        <path d="M12 5v14M19 12l-7 7-7-7" />
                    </svg>
                </motion.div>
            </motion.section>

            {/* Features Section */}
            <section id="explore" className="h-screen flex items-center max-w-6xl mx-auto px-6">
                <motion.div
                    initial="hidden"
                    whileInView="visible"
                    viewport={{ once: true, amount: 0.3 }}
                    variants={staggerContainer}
                    className="w-full"
                >
                    <motion.h2
                        className="text-4xl text-white mb-12"
                        variants={fadeIn}
                    >
                        What We Offer
                    </motion.h2>

                    <div className="grid md:grid-cols-2 gap-6">
                        {[
                            {
                                title: "Engaging Discussions",
                                description: "Participate in talks, workshops, and panel discussions covering cutting-edge AI developments.",
                                image: "https://images.unsplash.com/photo-1517048676732-d65bc937f952?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8b2ZmaWNlJTIwZGlzY3Vzc2lvbnN8ZW58MHx8MHx8fDA%3D"
                            },
                            {
                                title: "Networking Opportunities",
                                description: "Connect with like-minded professionals and expand your network within a dynamic, supportive community.",
                                image: "https://plus.unsplash.com/premium_photo-1661783208371-64db9e60653d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8b2ZmaWNlJTIwZGlzY3Vzc2lvbnN8ZW58MHx8MHx8fDA%3D"
                            },
                            {
                                title: "Hands-On Learning",
                                description: "Gain practical insights through live demos, coding sessions, and interactive Q&A segments.",
                                image: "https://images.unsplash.com/photo-1551434678-e076c223a692?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8b2ZmaWNlJTIwZGlzY3Vzc2lvbnN8ZW58MHx8MHx8fDA%3D"
                            },
                            {
                                title: "Diverse Topics",
                                description: "Explore a broad spectrum of topics, from generative AI to low-code development.",
                                image: "https://plus.unsplash.com/premium_photo-1733306490808-9c2ec551cbf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fG9mZmljZSUyMGRpc2N1c3Npb25zfGVufDB8fDB8fHww"
                            }
                        ].map((item, index) => (
                            <motion.div
                                key={index}
                                className="relative overflow-hidden h-64 rounded-xl group"
                                variants={imageCard}
                            >
                                <motion.div
                                    className="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 z-10 group-hover:opacity-100 opacity-80 transition-opacity duration-300"
                                />
                                <motion.img
                                    src={item.image}
                                    alt={item.title}
                                    className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                                />
                                <motion.div className="absolute bottom-0 left-0 right-0 p-6 z-20 transform transition-transform duration-300">
                                    <h3 className="text-2xl font-medium text-white mb-2">{item.title}</h3>
                                    <p className="text-gray-300 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">{item.description}</p>
                                </motion.div>
                            </motion.div>
                        ))}
                    </div>
                </motion.div>
            </section>

            {/* Communities Section */}

            <motion.div
                className="grid md:grid-cols-1 gap-16 max-w-6xl mx-auto"
                variants={fadeIn}
            >
                <div className="space-y-6">
                    <motion.h3
                        className="text-3xl text-white"
                        variants={{
                            hidden: { opacity: 0, x: -20 },
                            visible: {
                                opacity: 1,
                                x: 0,
                                transition: { duration: 0.6 }
                            }
                        }}
                    >
                        EverydayJS Community
                    </motion.h3>
                    <motion.div
                        className="h-1 w-24 bg-gradient-to-r from-pink-500 to-purple-500"
                        animate={{
                            width: ["0%", "10%"],
                        }}
                        transition={{
                            duration: 1,
                            ease: "easeInOut",
                        }}
                    />
                    <motion.p
                        className="text-gray-400 text-lg"
                        variants={{
                            hidden: { opacity: 0, x: -20 },
                            visible: {
                                opacity: 1,
                                x: 0,
                                transition: { delay: 0.2, duration: 0.6 }
                            }
                        }}
                    >
                        For those passionate about NodeJS, our dedicated EverydayJS Community offers a specialized space to dive deep into NodeJS development. Here, developers share tips, collaborate on projects, and discuss the latest trends in the NodeJS ecosystem.
                    </motion.p>
                    <motion.a
                        href="#"
                        className="inline-block px-6 py-3 rounded-lg text-white font-medium bg-gradient-to-r from-pink-500/40 via-purple-500/40 to-indigo-500/20 shadow-lg hover:shadow-xl transition-all duration-300"
                        variants={{
                            hidden: { opacity: 0, x: -20 },
                            visible: {
                                opacity: 1,
                                x: 0,
                                transition: { delay: 0.4, duration: 0.6 }
                            }
                        }}
                    >
                        Join Now
                    </motion.a>
                </div>

                <div className="space-y-6">
                    <motion.h3
                        className="text-3xl text-white"
                        variants={{
                            hidden: { opacity: 0, x: 20 },
                            visible: {
                                opacity: 1,
                                x: 0,
                                transition: { duration: 0.6 }
                            }
                        }}
                    >
                        Upcoming Events
                    </motion.h3>
                    <motion.div
                        className="h-1 w-24 bg-gradient-to-r from-pink-500 to-purple-500"
                        animate={{
                            width: ["0%", "10%"],
                        }}
                        transition={{
                            duration: 1,
                            ease: "easeInOut",
                        }}
                    />
                    <motion.p
                        className="text-gray-400 text-lg"
                        variants={{
                            hidden: { opacity: 0, x: 20 },
                            visible: {
                                opacity: 1,
                                x: 0,
                                transition: { delay: 0.2, duration: 0.6 }
                            }
                        }}
                    >
                        Check out our upcoming meetups on Meetup.com and join us in exploring the future of AI and technology. Whether you're a seasoned professional or just starting out, there's a place for you in our community.
                    </motion.p>
                    <motion.a
                        href="#"
                        className="inline-block px-6 py-3 rounded-lg text-white font-medium bg-gradient-to-r from-pink-500/40 via-purple-500/40 to-indigo-500/20 shadow-lg hover:shadow-xl transition-all duration-300"
                        variants={{
                            hidden: { opacity: 0, x: 20 },
                            visible: {
                                opacity: 1,
                                x: 0,
                                transition: { delay: 0.4, duration: 0.6 }
                            }
                        }}
                    >
                        Join a Meetup
                    </motion.a>
                </div>
            </motion.div>

            {/* Call to Action Section */}
            <motion.section
                className="min-h-screen flex items-center justify-center flex-col max-w-6xl mx-auto px-6 py-20"
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true, amount: 0.3 }}
                variants={fadeIn}
            >
                <motion.div
                    className="max-w-3xl mx-auto text-center"
                    variants={fadeIn}
                >
                    <motion.h2
                        className="text-4xl md:text-5xl text-white mb-8"
                        animate={{
                            backgroundPosition: ["0% 0%", "100% 100%"],
                        }}
                        transition={{
                            duration: 8,
                            repeat: Infinity,
                            repeatType: "reverse"
                        }}
                        style={{
                            backgroundImage: "linear-gradient(90deg, #fff, #a855f7, #ec4899, #fff)",
                            backgroundSize: "200%",
                            WebkitBackgroundClip: "text",
                            WebkitTextFillColor: "transparent"
                        }}
                    >
                        Ready to Join Our AI Community?
                    </motion.h2>
                    <motion.p
                        className="text-gray-400 text-xl mb-12"
                        variants={{
                            hidden: { opacity: 0, y: 20 },
                            visible: {
                                opacity: 1,
                                y: 0,
                                transition: { delay: 0.3, duration: 0.8 }
                            }
                        }}
                    >
                        Be part of a thriving ecosystem of innovators, creators, and AI enthusiasts who are shaping the future of technology together.
                    </motion.p>
                    <motion.a
                        href="#"
                        className="px-8 py-4 rounded-lg text-white font-medium bg-gradient-to-r from-pink-500/40 via-purple-500/40 to-indigo-500/20 shadow-lg hover:shadow-xl transition-all duration-300 inline-block"
                        variants={{
                            hidden: { opacity: 0, y: 20 },
                            visible: {
                                opacity: 1,
                                y: 0,
                                transition: { delay: 0.5, duration: 0.8 }
                            }
                        }}
                        whileHover={{ scale: 1.05 }}
                        whileTap={{ scale: 0.95 }}
                    >
                        Get Started Now
                    </motion.a>
                </motion.div>
            </motion.section>

            <Footer />
        </div>
    );
};

export default Meetups;