"use client";
"use client";

import React from 'react';
import { motion } from 'framer-motion';
import { Code, Search, Upload, Lightbulb, Globe, CheckCircle, CreditCard, ArrowRight } from 'lucide-react';
import Navbar from '@/components/Navbar/navbar';
import Footer from '@/components/footer';

const AIMarketplace = () => {

    const buyerBenefits = [
        {
            title: "Seamless Integration",
            desc: "Easily download, deploy, or subscribe to the code that fits your needs, and start enhancing your operations immediately.",
            icon: <Code className="w-6 h-6 text-white" />
        },
        {
            title: "Tailored for SMBs",
            desc: "Explore solutions that simplify everyday tasks—from smart customer support to automated financial insights—ensuring that every tool is both practical and powerful.",
            icon: <Lightbulb className="w-6 h-6 text-white" />
        },
        {
            title: "Secure & Reliable",
            desc: "All our offerings are thoroughly vetted, ensuring you receive only the best and most secure AI solutions on the market.",
            icon: <CheckCircle className="w-6 h-6 text-white" />
        }
    ];

    const sellerBenefits = [
        {
            title: "Effortless Listing",
            desc: "Our streamlined process makes it simple to upload your code, set your subscription plans, and start selling without any hassle.",
            icon: <Upload className="w-6 h-6 text-white" />
        },
        {
            title: "Global Exposure",
            desc: "Connect with SMBs and enterprises worldwide who are eager to integrate innovative AI solutions into their operations.",
            icon: <Globe className="w-6 h-6 text-white" />
        },
        {
            title: "Flexible Monetization",
            desc: "Choose from various pricing models—one-time downloads, subscriptions, or even usage-based fees—to best suit your business and maximize revenue.",
            icon: <CreditCard className="w-6 h-6 text-white" />
        }
    ];

    return (
        <div className="w-full p-6 bg-[#080E12] min-h-screen space-y-36">
            <Navbar />

            {/* Hero Section */}
            <motion.section
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                className="max-w-6xl mx-auto h-screen flex flex-col justify-between relative"
            >
                {/* Animated Gradient Background */}
                <motion.div
                    initial={{ opacity: 0, scale: 0.9, rotate: 0 }}
                    animate={{ opacity: 0.15, scale: 1.9, rotate: 8 }}
                    transition={{ duration: 2, repeat: Infinity, repeatType: "mirror", ease: "easeInOut" }}
                    className="absolute top-[-100px] right-[-50px] w-96 h-80 bg-gradient-to-br from-[#6EE7B7] to-[#3B82F6] rounded-full opacity-30 blur-[120px] skew-y-6"
                />

                <div className="max-w-6xl h-fit mt-auto pb-80 relative z-10">
                    <motion.h1
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        className="text-7xl text-white mb-6"
                    >
                        AI
                        <span className="bg-gradient-to-r from-[#6EE7B7] to-[#3B82F6] text-transparent bg-clip-text">
                            {" "}Marketplace{" "}
                        </span>
                    </motion.h1>

                    <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2">
                        <div className="w-32 h-px bg-gradient-to-r from-transparent via-blue-500/30 to-transparent" />
                    </div>

                    <motion.div className="text-4xl text-[#6EE7B7] font-medium mb-6">
                        Your One-Stop Hub for Ready-to-Go AI Solutions
                    </motion.div>

                    <motion.p
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        className="text-gray-400 text-2xl mb-8"
                    >
                        Discover a curated collection of innovative AI-powered apps and agents designed to streamline your business operations. Whether you’re looking to download, deploy, or subscribe to smart solutions, our marketplace is built to empower your growth—all at the click of a button.
                    </motion.p>
                </div>
            </motion.section>

            {/* For Buyers Section */}
            <motion.section
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                className="max-w-6xl mx-auto py-20"
            >
                <h2 className="text-5xl text-white mb-8"><span className="bg-gradient-to-r from-[#6EE7B7] to-[#3B82F6] text-transparent bg-clip-text">For Buyers:</span> Instant Innovation</h2>
                <p className="text-gray-400 mb-8">
                    Unlock a world of possibilities with our ready-to-go apps and agents. Each solution is designed with simplicity and effectiveness in mind, so you can focus on what matters most—growing your business.
                </p>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                    {buyerBenefits.map((benefit, index) => (
                        <div
                            key={index}
                            className="group relative bg-[#121212] border border-gray-800 rounded-xl p-6 transition-all duration-500 overflow-hidden"
                        >
                            {/* Icon + Title */}
                            <div className="flex items-center gap-4 mb-2 relative z-10">
                                <div className="p-3 bg-gray-900 rounded-lg">{benefit.icon}</div>
                                <h3 className="text-xl text-white font-medium">{benefit.title}</h3>
                            </div>

                            {/* Description */}
                            <p className="text-gray-400 relative z-10">{benefit.desc}</p>

                            {/* Soft Glow Effect */}
                            <div
                                className="absolute inset-0 rounded-xl bg-gradient-to-br from-purple-500 to-indigo-500 opacity-0 blur-3xl scale-125 transition-opacity duration-500
        group-hover:opacity-20"
                            />
                        </div>
                    ))}
                </div>

                <div className="mt-8">
                    <motion.button
                        whileHover={{ scale: 1.05 }}
                        whileTap={{ scale: 0.98 }}
                        className="relative px-8 py-4 rounded-lg text-white font-medium inline-flex items-center gap-2
    bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg transition-all duration-500"
                    >
                        Browse Solutions <ArrowRight className="inline-block ml-2" />
                    </motion.button>

                </div>
            </motion.section>

            {/* For Sellers Section */}
            <motion.section
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                className="max-w-6xl mx-auto py-20"
            >
                <h2 className="text-5xl text-white mb-8"><span className="bg-gradient-to-r from-[#6EE7B7] to-[#3B82F6] text-transparent bg-clip-text">For Sellers:</span> Showcase & Monetize Your Innovations</h2>
                <p className="text-gray-400 mb-8">
                    Turn your creativity into recurring revenue by listing your AI apps and agents on our marketplace. Reach a global audience and let your solutions speak for themselves.
                </p>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                    {sellerBenefits.map((benefit, index) => (
                        <div
                            key={index}
                            className="group relative bg-[#121212] border border-gray-800 rounded-xl p-6 transition-all duration-500 overflow-hidden"
                        >
                            {/* Icon + Title */}
                            <div className="flex items-center gap-4 mb-2 relative z-10">
                                <div className="p-3 bg-gray-900 rounded-lg">{benefit.icon}</div>
                                <h3 className="text-xl text-white font-medium">{benefit.title}</h3>
                            </div>

                            {/* Description */}
                            <p className="text-gray-400 relative z-10">{benefit.desc}</p>

                            {/* Soft Glow Effect */}
                            <div
                                className="absolute inset-0 rounded-xl bg-gradient-to-br from-purple-500 to-indigo-500 opacity-0 blur-3xl scale-125 transition-opacity duration-500
        group-hover:opacity-20"
                            />
                        </div>
                    ))}
                </div>

                <div className="mt-8">
                    <motion.button
                        whileHover={{ scale: 1.05 }}
                        whileTap={{ scale: 0.98 }}
                        className="relative px-8 py-4 rounded-lg text-white font-medium inline-flex items-center gap-2
    bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg transition-all duration-500"
                    >
                        List Your Product <ArrowRight className="inline-block ml-2" />
                    </motion.button>

                </div>
            </motion.section>

            {/* How It Works Section */}
            <motion.section
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                className="max-w-6xl mx-auto py-20"
            >
                <h2 className="text-5xl text-white mb-8 text-center">How It Works</h2>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
                    {/* Buyers */}
                    <div className="relative group border border-gray-800 rounded-xl p-6 bg-gray-900/20 transition-all duration-500 overflow-hidden">
                        <h3 className="text-3xl text-white mb-4">For Buyers:</h3>
                        <ul className="text-gray-400 space-y-4">
                            <li className="flex items-center gap-3">
                                <span className="text-2xl text-blue-500"><Search /></span>
                                <span>Discover: Browse our extensive library of AI solutions.</span>
                            </li>
                            <li className="flex items-center gap-3">
                                <span className="text-2xl text-blue-500"><Code /></span>
                                <span>Deploy: Download or subscribe to the code with a few simple clicks.</span>
                            </li>
                            <li className="flex items-center gap-3">
                                <span className="text-2xl text-blue-500"><Lightbulb /></span>
                                <span>Transform: Integrate the solution into your business and experience the benefits immediately.</span>
                            </li>
                        </ul>

                        {/* Soft Glow Effect */}
                        <div
                            className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 opacity-0 blur-3xl scale-125 transition-opacity duration-500 group-hover:opacity-20"
                        />
                    </div>

                    {/* Sellers */}
                    <div className="relative group border border-gray-800 rounded-xl p-6 bg-gray-900/20 transition-all duration-500 overflow-hidden">
                        <h3 className="text-3xl text-white mb-4">For Sellers:</h3>
                        <ul className="text-gray-400 space-y-4">
                            <li className="flex items-center gap-3">
                                <span className="text-2xl text-green-500"><Upload /></span>
                                <span>List: Upload your ready-to-go app or agent, and choose your pricing model.</span>
                            </li>
                            <li className="flex items-center gap-3">
                                <span className="text-2xl text-green-500"><Globe /></span>
                                <span>Promote: Leverage our global platform to showcase your innovation.</span>
                            </li>
                            <li className="flex items-center gap-3">
                                <span className="text-2xl text-green-500"><CreditCard /></span>
                                <span>Profit: Monetize your expertise and watch your revenue grow with every subscription or download.</span>
                            </li>
                        </ul>

                        {/* Soft Glow Effect */}
                        <div
                            className="absolute inset-0 rounded-xl bg-gradient-to-br from-green-500 to-emerald-500 opacity-0 blur-3xl scale-125 transition-opacity duration-500 group-hover:opacity-20"
                        />
                    </div>
                </div>
            </motion.section>

            {/* Why Choose Our Marketplace Section */}
            <motion.section
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                className="max-w-6xl mx-auto py-20"
            >
                <h2 className="text-5xl text-white mb-8">Why Choose Our Marketplace?</h2>
                <ul className="text-gray-400 space-y-4">
                    {[
                        { icon: <CheckCircle />, title: "Curated Quality", desc: "Every solution is handpicked and continuously updated to ensure peak performance and security.", color: "from-green-500 to-emerald-500" },
                        { icon: <Lightbulb />, title: "Ease of Use", desc: "Designed for both buyers and sellers, our intuitive interface makes finding and listing products a breeze.", color: "from-yellow-500 to-orange-500" },
                        { icon: <Code />, title: "Comprehensive Support", desc: "Access detailed documentation, tutorials, and dedicated support to help you get the most out of our platform.", color: "from-blue-500 to-cyan-500" },
                        { icon: <Globe />, title: "Community-Driven", desc: "Join a thriving ecosystem of innovators and forward-thinking businesses ready to redefine their industries with AI.", color: "from-purple-500 to-indigo-500" }
                    ].map((item, index) => (
                        <li key={index} className="relative group flex items-start gap-4 border border-gray-800 p-4 rounded-lg bg-gray-900/20 transition-all duration-500 overflow-hidden">
                            {/* Icon */}
                            <span className="text-2xl text-white">{item.icon}</span>

                            {/* Text Content */}
                            <div>
                                <h3 className="text-xl text-white font-medium">{item.title}</h3>
                                <p>{item.desc}</p>
                            </div>

                            {/* Soft Glow Effect */}
                            <div
                                className={`absolute inset-0 rounded-lg bg-gradient-to-br ${item.color} opacity-0 blur-3xl scale-125 transition-opacity duration-500 group-hover:opacity-20`}
                            />
                        </li>
                    ))}
                </ul>
            </motion.section>

            {/* Final CTA Section */}
            <motion.section
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                className="max-w-6xl mx-auto py-20 text-center"
            >
                <h2 className="text-4xl text-white mb-8">Embrace the future of AI-powered business solutions.</h2>
                <p className="text-gray-400 text-xl mb-8">Whether you’re here to discover cutting-edge apps or to share your innovations with the world, our marketplace is your launchpad for success.</p>

                <div className="flex justify-center gap-6">
                    <motion.button
                        whileHover={{ scale: 1.05 }}
                        whileTap={{ scale: 0.98 }}
                        className="relative px-8 py-4 rounded-lg text-white font-medium inline-flex items-center gap-2
    bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg transition-all duration-500"
                    >
                        Browse Solutions <ArrowRight className="inline-block ml-2" />
                    </motion.button>

                    <motion.button
                        whileHover={{ scale: 1.05 }}
                        whileTap={{ scale: 0.98 }}
                        className="relative px-8 py-4 rounded-lg text-white font-medium inline-flex items-center gap-2
    bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg transition-all duration-500"
                    >
                        List Your Product <ArrowRight className="inline-block ml-2" />
                    </motion.button>

                </div>
            </motion.section>

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

export default AIMarketplace;