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

const Community = () => {
    // Animation variants
    const fadeUp = {
        hidden: { opacity: 0, y: 30 },
        visible: { 
            opacity: 1, 
            y: 0,
            transition: { duration: 0.7, ease: "easeOut" }
        }
    };
    
    const staggerContainer = {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: {
                staggerChildren: 0.15
            }
        }
    };
    
    const cardVariant = {
        hidden: { opacity: 0, y: 20 },
        visible: { 
            opacity: 1, 
            y: 0,
            transition: { duration: 0.5, ease: "easeOut" }
        }
    };

    return (
        <div className="w-full bg-[#080E12] overflow-x-hidden">
            <Navbar />
            
            {/* Hero Section */}
            <motion.section 
                className="h-screen flex flex-col justify-center items-center max-w-6xl mx-auto px-6 pt-20"
                initial="hidden"
                animate="visible"
                variants={fadeUp}
            >
                <motion.h1 
                    className="text-5xl md:text-7xl text-white mb-6 text-center"
                    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"
                    }}
                >
                    Community
                </motion.h1>
                
                <motion.h2 
                    className="text-3xl text-center text-white mb-8"
                    variants={{
                        hidden: { opacity: 0, y: 20 },
                        visible: { 
                            opacity: 1, 
                            y: 0, 
                            transition: { delay: 0.2, duration: 0.8 }
                        }
                    }}
                >
                    Connect, Collaborate, and Innovate
                </motion.h2>
                
                <motion.p 
                    className="text-gray-400 text-xl max-w-3xl text-center mb-12"
                    variants={{
                        hidden: { opacity: 0, y: 20 },
                        visible: { 
                            opacity: 1, 
                            y: 0, 
                            transition: { delay: 0.4, duration: 0.8 }
                        }
                    }}
                >
                    At Everyday Series, our community is the heartbeat of our innovation. We're building a vibrant network of solopreneurs, developers, AI enthusiasts, and business leaders committed to transforming expertise into powerful AI agents and solutions.
                </motion.p>
                
                <motion.div
                    className="flex flex-wrap gap-4 justify-center"
                    variants={{
                        hidden: { opacity: 0, y: 20 },
                        visible: { 
                            opacity: 1, 
                            y: 0, 
                            transition: { delay: 0.6, duration: 0.8 }
                        }
                    }}
                >
                    <a href="#offerings" className="px-8 py-4 rounded-lg text-white bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg hover:shadow-xl transition-all duration-300">
                        Explore Our Offerings
                    </a>
                    <a href="#join" className="px-8 py-4 rounded-lg text-white border border-purple-500 hover:bg-purple-500/10 transition-all duration-300">
                        Join The 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>
            
            {/* What We Offer Section */}
            <section id="offerings" className="min-h-screen flex items-center py-20 max-w-6xl mx-auto px-6">
                <motion.div
                    initial="hidden"
                    whileInView="visible"
                    viewport={{ once: true, amount: 0.2 }}
                    variants={staggerContainer}
                    className="w-full"
                >
                    <motion.h2 
                        className="text-4xl text-white mb-12"
                        variants={fadeUp}
                    >
                        What We Offer
                    </motion.h2>
                    
                    <div className="grid md:grid-cols-3 gap-8">
                        {/* Events & Online Meetups */}
                        <motion.div 
                            className="bg-[#0F1922] p-8 rounded-xl border border-purple-900/40 hover:border-purple-500/50 transition-all duration-300"
                            variants={cardVariant}
                            whileHover={{ y: -5, transition: { duration: 0.2 } }}
                        >
                            <div className="bg-gradient-to-br from-pink-500 to-purple-600 w-12 h-12 rounded-lg flex items-center justify-center mb-6">
                                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                                    <line x1="16" y1="2" x2="16" y2="6"></line>
                                    <line x1="8" y1="2" x2="8" y2="6"></line>
                                    <line x1="3" y1="10" x2="21" y2="10"></line>
                                </svg>
                            </div>
                            <h3 className="text-2xl text-white mb-4">Events & Online Meetups</h3>
                            <ul className="space-y-4 text-gray-400">
                                <li className="flex items-start">
                                    <span className="text-purple-400 mr-2">•</span>
                                    <span><strong className="text-white">Live Events:</strong> Attend interactive events and online meetups where industry experts and fellow innovators share insights, success stories, and the latest trends in AI.</span>
                                </li>
                                <li className="flex items-start">
                                    <span className="text-purple-400 mr-2">•</span>
                                    <span><strong className="text-white">Webinars:</strong> Participate in immersive webinars that dive deep into AI technologies, product demos, and hands-on sessions tailored for solopreneurs and enterprises alike.</span>
                                </li>
                            </ul>
                        </motion.div>
                        
                        {/* Cohort-Based Learning */}
                        <motion.div 
                            className="bg-[#0F1922] p-8 rounded-xl border border-purple-900/40 hover:border-purple-500/50 transition-all duration-300"
                            variants={cardVariant}
                            whileHover={{ y: -5, transition: { duration: 0.2 } }}
                        >
                            <div className="bg-gradient-to-br from-pink-500 to-purple-600 w-12 h-12 rounded-lg flex items-center justify-center mb-6">
                                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                    <path d="M12 20h9"></path>
                                    <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
                                </svg>
                            </div>
                            <h3 className="text-2xl text-white mb-4">Cohort-Based Learning</h3>
                            <ul className="space-y-4 text-gray-400">
                                <li className="flex items-start">
                                    <span className="text-purple-400 mr-2">•</span>
                                    <span><strong className="text-white">Structured Programs:</strong> Enroll in our cohort-based learning initiatives, including our remote Generative AI Readiness Program, designed for corporates, universities, and individual innovators.</span>
                                </li>
                                <li className="flex items-start">
                                    <span className="text-purple-400 mr-2">•</span>
                                    <span><strong className="text-white">Collaborative Learning:</strong> Work alongside peers in a guided environment where practical projects and real-world challenges help refine your AI skills.</span>
                                </li>
                            </ul>
                        </motion.div>
                        
                        {/* Instant Connectivity */}
                        <motion.div 
                            className="bg-[#0F1922] p-8 rounded-xl border border-purple-900/40 hover:border-purple-500/50 transition-all duration-300"
                            variants={cardVariant}
                            whileHover={{ y: -5, transition: { duration: 0.2 } }}
                        >
                            <div className="bg-gradient-to-br from-pink-500 to-purple-600 w-12 h-12 rounded-lg flex items-center justify-center mb-6">
                                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                    <path d="M17 8h3a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-3"></path>
                                    <path d="M13 8H7a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6"></path>
                                    <path d="M17 12H7"></path>
                                    <path d="M7 12v2"></path>
                                    <path d="M17 12v2"></path>
                                </svg>
                            </div>
                            <h3 className="text-2xl text-white mb-4">Instant Connectivity</h3>
                            <ul className="space-y-4 text-gray-400">
                                <li className="flex items-start">
                                    <span className="text-purple-400 mr-2">•</span>
                                    <span><strong className="text-white">Whatsapp Group:</strong> Join our dedicated Whatsapp group for real-time updates, lively discussions, and instant support from fellow community members.</span>
                                </li>
                                <li className="flex items-start">
                                    <span className="text-purple-400 mr-2">•</span>
                                    <span><strong className="text-white">Open Source Modules:</strong> Contribute to and leverage our extensive library of open source modules—collaborate, share, and build solutions that benefit everyone in the community.</span>
                                </li>
                            </ul>
                        </motion.div>
                        
                        {/* Collaborative Partnerships - Full width */}
                        <motion.div 
                            className="bg-[#0F1922] p-8 rounded-xl border border-purple-900/40 hover:border-purple-500/50 transition-all duration-300 md:col-span-3"
                            variants={cardVariant}
                            whileHover={{ y: -5, transition: { duration: 0.2 } }}
                        >
                            <div className="bg-gradient-to-br from-pink-500 to-purple-600 w-12 h-12 rounded-lg flex items-center justify-center mb-6">
                                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="9" cy="7" r="4"></circle>
                                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                </svg>
                            </div>
                            <h3 className="text-2xl text-white mb-4">Collaborative Partnerships</h3>
                            <div className="grid md:grid-cols-2 gap-6">
                                <div>
                                    <h4 className="text-lg text-white mb-3">Solopreneur Network</h4>
                                    <p className="text-gray-400">Connect with a diverse group of solopreneurs offering innovative products and services, creating opportunities for cross-collaboration.</p>
                                </div>
                                <div>
                                    <h4 className="text-lg text-white mb-3">SMBs & Enterprise</h4>
                                    <p className="text-gray-400">We partner with small and medium businesses as well as enterprise organizations to co-create and deploy cutting-edge AI solutions that drive growth and efficiency.</p>
                                </div>
                            </div>
                        </motion.div>
                    </div>
                </motion.div>
            </section>
            
            {/* Why Join Us Section */}
            <section className="min-h-screen flex items-center py-20 max-w-6xl mx-auto px-6">
                <motion.div
                    initial="hidden"
                    whileInView="visible"
                    viewport={{ once: true, amount: 0.2 }}
                    variants={staggerContainer}
                    className="w-full"
                >
                    <motion.div variants={fadeUp} className="mb-16">
                        <motion.h2 className="text-4xl text-white mb-6">Why Join Us?</motion.h2>
                        <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.div>
                    
                    <div className="grid md:grid-cols-3 gap-8">
                        <motion.div 
                            className="relative overflow-hidden rounded-xl group"
                            variants={cardVariant}
                            whileHover={{ y: -5, transition: { duration: 0.2 } }}
                        >
                            <div className="bg-gradient-to-br from-pink-600/20 to-purple-800/20 p-8 rounded-xl border border-purple-500/30 h-full transition-all duration-300 group-hover:bg-gradient-to-br group-hover:from-pink-600/30 group-hover:to-purple-800/30">
                                <div className="mb-6">
                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 text-purple-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                        <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                                        <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                                    </svg>
                                </div>
                                <h3 className="text-2xl text-white mb-4">Learn & Grow</h3>
                                <p className="text-gray-400">Gain exclusive access to resources, expert-led sessions, and collaborative projects that enhance your skills and expand your network.</p>
                            </div>
                        </motion.div>
                        
                        <motion.div 
                            className="relative overflow-hidden rounded-xl group"
                            variants={cardVariant}
                            whileHover={{ y: -5, transition: { duration: 0.2 } }}
                        >
                            <div className="bg-gradient-to-br from-pink-600/20 to-purple-800/20 p-8 rounded-xl border border-purple-500/30 h-full transition-all duration-300 group-hover:bg-gradient-to-br group-hover:from-pink-600/30 group-hover:to-purple-800/30">
                                <div className="mb-6">
                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 text-purple-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                                    </svg>
                                </div>
                                <h3 className="text-2xl text-white mb-4">Innovate Together</h3>
                                <p className="text-gray-400">Be a part of a community where your ideas matter, and collective intelligence sparks breakthrough innovations.</p>
                            </div>
                        </motion.div>
                        
                        <motion.div 
                            className="relative overflow-hidden rounded-xl group"
                            variants={cardVariant}
                            whileHover={{ y: -5, transition: { duration: 0.2 } }}
                        >
                            <div className="bg-gradient-to-br from-pink-600/20 to-purple-800/20 p-8 rounded-xl border border-purple-500/30 h-full transition-all duration-300 group-hover:bg-gradient-to-br group-hover:from-pink-600/30 group-hover:to-purple-800/30">
                                <div className="mb-6">
                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 text-purple-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <line x1="2" y1="12" x2="22" y2="12"></line>
                                        <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
                                    </svg>
                                </div>
                                <h3 className="text-2xl text-white mb-4">Real-World Impact</h3>
                                <p className="text-gray-400">Engage with partners and industry leaders to develop AI solutions that solve real business challenges and drive market success.</p>
                            </div>
                        </motion.div>
                    </div>
                </motion.div>
            </section>
            
            {/* Call to Action Section */}
            <motion.section 
                id="join"
                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={fadeUp}
            >
                <motion.div 
                    className="max-w-3xl mx-auto text-center"
                    variants={fadeUp}
                >
                    <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"
                        }}
                    >
                        Get Involved
                    </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 }
                            }
                        }}
                    >
                        Ready to shape the future of AI? Join our community and unlock a world of opportunities. Connect, collaborate, and innovate with like-minded individuals who are as passionate about technology and growth as you are.
                    </motion.p>
                    <motion.div 
                        className="flex flex-wrap gap-4 justify-center"
                        variants={{
                            hidden: { opacity: 0, y: 20 },
                            visible: { 
                                opacity: 1, 
                                y: 0, 
                                transition: { delay: 0.5, duration: 0.8 }
                            }
                        }}
                    >
                        <motion.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 inline-block"
                            whileHover={{ scale: 1.05 }}
                            whileTap={{ scale: 0.95 }}
                        >
                            Join Our Community
                        </motion.a>
                        <motion.a 
                            href="#" 
                            className="px-8 py-4 rounded-lg text-white font-medium border border-purple-500 hover:bg-purple-500/10 transition-all duration-300 inline-block"
                            whileHover={{ scale: 1.05 }}
                            whileTap={{ scale: 0.95 }}
                        >
                            Learn More About Our Initiatives
                        </motion.a>
                    </motion.div>
                </motion.div>
            </motion.section>
            
            <Footer />
        </div>
    );
};

export default Community;