"use client";

import React from 'react';
import { motion } from 'framer-motion';
import { Brain, Users, Rocket, Globe, MapPin, ChevronRight, Book, Star, Target, Bot, ArrowRight, HeartPulse, LineChart, GraduationCap, Plane, Megaphone, Lightbulb, Code, UsersRound } from 'lucide-react';
import Navbar from '@/components/Navbar/navbar';
import Footer from '@/components/footer';

const AIProgramCard = () => {
  const learn = [
    {
      icon: <Brain />,
      title: "Dive Deep into AI Fundamentals",
      desc: "Learn cutting-edge AI concepts and how to implement them using our no-code platform.",
      gradient: "from-pink-500/50 to-purple-500/50"
    },
    {
      icon: <Rocket />,
      title: "Build Real-World AI Agents",
      desc: "Gain practical, project-based experience by creating and deploying your own AI solutions.",
      gradient: "from-blue-500/50 to-cyan-500/50"
    },
    {
      icon: <Target />,
      title: "Monetize Your Expertise",
      desc: "Master strategies to transform your AI agents into recurring revenue streams.",
      gradient: "from-purple-500/50 to-indigo-500/50"
    }
  ];

  return (
    <div className="w-full p-6 bg-[#080E12] min-h-screen space-y-36">
      <Navbar />
      {/* Hero */}
      <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"
      >
        {/* Circular Animated Gradient */}
        <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-[#EC4899] to-[#A855F7] 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"
          >
            Generative AI
            <span className="bg-gradient-to-r from-[#EC4899] to-[#A855F7] text-transparent bg-clip-text">
              {" "}Readiness{" "}
            </span>
            Program
          </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-purple-500/30 to-transparent" />
          </div>

          <motion.div className="text-4xl text-[#A855F7] font-medium mb-6">
            Master the Art of Building AI Agents
          </motion.div>

          <motion.p
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="text-gray-400 text-2xl mb-8"
          >
            Are you ready to redefine your business potential with AI? Our Generative AI Readiness Program is a highly selective, intensive cohort designed to transform driven solopreneurs into AI innovators. Through a rigorous learning journey, you'll acquire the hands-on skills needed to build, launch, and monetize your very own AI agents—regardless of your domain.
          </motion.p>
        </div>
      </motion.section>

      {/* What Is the Program */}
      <motion.section
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className=' max-w-6xl mx-auto'
      >
        <h2 className="text-5xl text-white mb-8">What Is the Generative AI Readiness Program?</h2>
        <p className="text-gray-400 mb-8">
          This elite program is tailored for visionary solopreneurs eager to leverage AI to transform their services. Over the course of the program, you'll:
        </p>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
          {learn.map((feature, index) => (
            <div key={index} className="group relative overflow-hidden rounded-2xl">
              {/* Card Content */}
              <div className="relative p-8 rounded-2xl border border-purple-500/10 bg-[#121212] transition-all duration-500">
                {/* Icon */}
                <div
                  className={`
            w-12 h-12 rounded-xl flex items-center justify-center
            bg-gradient-to-br ${feature.gradient} text-white
          `}
                >
                  {feature.icon}
                </div>

                {/* Title & Description */}
                <h3 className="text-2xl text-white mt-4 mb-4">{feature.title}</h3>
                <p className="text-gray-400 leading-relaxed mb-6">{feature.desc}</p>
              </div>

              {/* Soft Glow Effect */}
              <div
                className={`
          absolute inset-0 rounded-2xl transition-opacity duration-500
          bg-gradient-to-br ${feature.gradient}
          opacity-0 blur-3xl scale-125
          group-hover:opacity-50
        `}
              />
            </div>
          ))}
        </div>

        <p className="text-gray-400 mt-8">
          Our curriculum is designed to be domain agnostic, meaning it applies whether you're in tech, healthcare, finance, education, creative industries, or beyond.
        </p>
      </motion.section>

      {/* Exclusivity & Global Impact */}
      <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">Exclusivity & Global Impact</h2>
        <div className="border border-gray-800 rounded-xl p-8 bg-gray-900/20">
          <p className="text-gray-400 mb-8">
            This isn't just any learning program—it's an elite community. Our rigorous selection process accepts less than 0.5% of applicants, ensuring that only the most passionate and capable solopreneurs join our ranks.
          </p>
          <div className="grid md:grid-cols-3 gap-6">
            {[
              { value: "0.5%", label: "Acceptance Rate" },
              { value: "10+", label: "Countries" },
              { value: "Elite", label: "Community" }
            ].map((stat, index) => (
              <div key={index} className="text-center">
                <div className="text-5xl text-[#a284ff] mb-2">{stat.value}</div>
                <div className="text-gray-400">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </motion.section>

      {/* Innovative Creations */}
      <motion.section
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className=' max-w-6xl mx-auto'
      >
        <h2 className="text-5xl text-white mb-8">Innovative Creations from Our Elite Cohort</h2>
        <div className="grid md:grid-cols-2 gap-6">
          {[
            {
              name: "MedAssist",
              location: "India",
              gradient: "from-pink-500 to-rose-500",
              icon: <HeartPulse className="w-6 h-6 text-white" />,
              description:
                "A cutting-edge health companion that delivers real-time symptom assessments, streamlined appointment scheduling, and personalized wellness insights. MedAssist is revolutionizing patient care by making healthcare more accessible and engaging."
            },
            {
              name: "FinVision",
              location: "South Africa",
              gradient: "from-blue-500 to-cyan-500",
              icon: <LineChart className="w-6 h-6 text-white" />,
              description:
                "An intelligent financial advisor that harnesses AI to generate smart investment strategies, monitor market dynamics, and offer tailored portfolio insights. FinVision empowers users to make confident, informed decisions in the fast-paced world of finance."
            },
            {
              name: "EduGuide",
              location: "Australia",
              gradient: "from-green-500 to-emerald-500",
              icon: <GraduationCap className="w-6 h-6 text-white" />,
              description:
                "A dynamic tutoring assistant that personalizes learning by curating essential study materials, tracking progress, and providing on-demand academic support. EduGuide is setting a new standard for remote education, making learning both intuitive and impactful."
            },
            {
              name: "TravelBuddy",
              location: "Norway",
              gradient: "from-orange-500 to-amber-500",
              icon: <Plane className="w-6 h-6 text-white" />,
              description:
                "A personalized travel concierge that crafts bespoke itineraries, uncovers local gems, and integrates seamless booking services. TravelBuddy transforms travel planning into an inspiring journey of discovery and ease."
            },
            {
              name: "MarketPro",
              location: "Global",
              gradient: "from-purple-500 to-indigo-500",
              icon: <Megaphone className="w-6 h-6 text-white" />,
              description:
                "A versatile AI powerhouse that automates customer engagement, delivers actionable market insights, and orchestrates precision-targeted marketing campaigns. MarketPro is the ultimate solution for businesses aiming to lead in a competitive marketplace."
            }
          ].map((project, index) => (
            <motion.div
              key={project.name}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1 }}
              className="group relative border border-gray-800 rounded-xl p-6 bg-gray-900/20 transition-all duration-500 overflow-hidden"
            >
              {/* Card Content */}
              <div className="relative z-10">
                <div className="flex items-start justify-between mb-4">
                  <h3 className="text-xl font-medium text-white flex items-center gap-2">
                    {project.icon} {project.name}
                  </h3>
                  <div className="flex items-center gap-2 text-white">
                    <MapPin className="w-4 h-4" />
                    {project.location}
                  </div>
                </div>
                <p className="text-gray-400">{project.description}</p>
              </div>

              {/* Soft Glow Effect */}
              <div
                className={`
          absolute inset-0 rounded-2xl transition-opacity duration-500
          bg-gradient-to-br ${project.gradient}
          opacity-0 blur-3xl scale-125
          group-hover:opacity-20
        `}
              />
            </motion.div>
          ))}
        </div>
        <p className="text-gray-400 mt-8">
          <p className="text-gray-400 mt-8">
            These creations not only exemplify the transformative power of AI but also ignite the spark for future innovations. Join us and be a part of the revolution.
          </p>
        </p>
      </motion.section>

      {/* What You Can Expect */}
      <motion.section
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className=' max-w-6xl mx-auto'
      >
        <h2 className="text-5xl text-white mb-8">What You Can Expect</h2>
        <div className="grid grid-cols-1 gap-6">
          {[
            {
              title: "Intensive, Hands-On Training",
              desc: "Experience a structured, immersive curriculum that challenges you to push your boundaries.",
              icon: <Lightbulb className="w-6 h-6 text-white" />,
              gradient: "from-yellow-500 to-orange-500"
            },
            {
              title: "Expert Mentorship",
              desc: "Learn directly from industry leaders and seasoned entrepreneurs who guide you every step of the way.",
              icon: <Users className="w-6 h-6 text-white" />,
              gradient: "from-blue-500 to-cyan-500"
            },
            {
              title: "Global Networking Opportunities",
              desc: "Connect with a small, elite group of peers from around the world, sharing insights and building lasting relationships.",
              icon: <Globe className="w-6 h-6 text-white" />,
              gradient: "from-green-500 to-emerald-500"
            },
            {
              title: "Real-World Projects",
              desc: "Apply your learning immediately by building AI agents that solve real business challenges.",
              icon: <Code className="w-6 h-6 text-white" />,
              gradient: "from-purple-500 to-indigo-500"
            },
            {
              title: "Community & Support",
              desc: "Join an exclusive network of solopreneurs who are as driven and innovative as you are.",
              icon: <UsersRound className="w-6 h-6 text-white" />,
              gradient: "from-pink-500 to-rose-500"
            }
          ].map((item, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1 }}
              className="group relative border border-gray-800 rounded-xl p-6 bg-gray-900/20 transition-all duration-500 overflow-hidden"
            >
              {/* Card Content */}
              <div className="relative z-10 flex items-start gap-4">
                <div className="p-2 bg-gray-800/50 rounded-lg">{item.icon}</div>
                <div>
                  <h3 className="text-lg font-medium text-white mb-2">{item.title}</h3>
                  <p className="text-gray-400">{item.desc}</p>
                </div>
              </div>

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

      {/* Who Should Apply */}
      <motion.section
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="relative max-w-6xl mx-auto border border-gray-800 rounded-xl p-8 bg-gray-900/20 overflow-hidden"
      >
        <h2 className="text-5xl text-white mb-8">Who Should Apply?</h2>
        <p className="text-2xl text-white">
          If you're a solopreneur with a passion for innovation and a drive to harness AI for your business, this program is for you. We welcome applicants from all industries—your background is not a barrier, but your ambition is the key to success.
        </p>

        {/* Infinite Soft Glow Effect */}
        <motion.div
          className="absolute inset-0 rounded-2xl blur-3xl scale-125 opacity-30"
          animate={{
            background: [
              "linear-gradient(to bottom right, #ec4899, #f97316)",
              "linear-gradient(to bottom right, #3b82f6, #9333ea)",
              "linear-gradient(to bottom right, #22c55e, #14b8a6)",
              "linear-gradient(to bottom right, #facc15, #e11d48)"
            ],
            opacity: [0.15, 0.25, 0.15],
          }}
          transition={{
            duration: 6,
            repeat: Infinity,
            repeatType: "mirror"
          }}
        />
      </motion.section>

      {/* CTA */}
      <motion.section
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="text-center max-w-5xl mx-auto px-6"
      >
        <h2 className="text-3xl md:text-4xl font-semibold text-white mb-6 leading-snug">
          Ready to <span className="text-purple-400">Transform</span> Your Future?
        </h2>

        <p className="text-lg text-gray-400 mb-8">
          The future belongs to those who innovate. If you're ready to join an elite group of entrepreneurs and take your expertise to the next level with AI, apply now for our next cohort.
          <span className="text-purple-300"> Less than 0.5% </span> are selected to redefine the AI landscape—will you be one of them?
        </p>

        <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"
        >
          Apply Now <ChevronRight className="w-4 h-4" />

          {/* Soft Glow Effect on Hover */}
          <motion.div
            className="absolute inset-0 rounded-lg blur-2xl opacity-30 transition-opacity duration-500"
            animate={{
              background: [
                "linear-gradient(to right, #ec4899, #a855f7)",
                "linear-gradient(to right, #3b82f6, #9333ea)",
                "linear-gradient(to right, #22c55e, #14b8a6)",
                "linear-gradient(to right, #facc15, #e11d48)"
              ],
              opacity: [0, 0.3, 0]
            }}
            transition={{
              duration: 4,
              repeat: Infinity,
              repeatType:   "mirror"
            }}
          />
        </motion.button>
      </motion.section>
      <Footer />
    </div>
  );
};

export default AIProgramCard;