"use client";

import React from 'react';
import { motion } from 'framer-motion';
import { MessageCircle, CheckCircle, Lightbulb, Code, Users, ArrowRight, Settings, Brain, RefreshCw, UserCheck, ChevronRight } from 'lucide-react';
import Navbar from '@/components/Navbar/navbar';
import Footer from '@/components/footer';

const ConversationalAIAgents = () => {

  const keyFeatures = [
    {
      title: "Human-Style Chat Interface",
      desc: "Experience seamless, interactive conversations that mimic real human dialogue.",
      icon: <MessageCircle className="w-6 h-6 text-white" />
    },
    {
      title: "Semi-Autonomous Agents",
      desc: "Automate everyday processes while deferring to human judgment for complex decisions.",
      icon: <Settings className="w-6 h-6 text-white" />
    },
    {
      title: "Adaptive Learning & Optimization",
      desc: "The agent gathers insights from each engagement, fine-tuning workflows and boosting overall efficiency.",
      icon: <RefreshCw className="w-6 h-6 text-white" />
    },
    {
      title: "Effortless Integration",
      desc: "Convert existing Tools or Series workflows to conversational agents with just a few clicks—no coding required.",
      icon: <Code className="w-6 h-6 text-white" />
    },
    {
      title: "Enhanced User Engagement",
      desc: "Deliver a personalized, interactive experience that increases user satisfaction and drives better outcomes.",
      icon: <Users className="w-6 h-6 text-white" />
    }
  ];

  const benefits = [
    {
      title: "Streamlined Operations",
      desc: "Automate routine processes without sacrificing the quality of human judgment where it matters most.",
      icon: <CheckCircle className="w-6 h-6 text-white" />
    },
    {
      title: "Continuous Improvement",
      desc: "With adaptive learning, your agents become smarter and more efficient, optimizing workflows over time.",
      icon: <Brain className="w-6 h-6 text-white" />
    },
    {
      title: "Improved Accessibility",
      desc: "A conversational interface makes complex workflows accessible to everyone, reducing training time and boosting productivity.",
      icon: <Lightbulb className="w-6 h-6 text-white" />
    },
    {
      title: "Versatile Applications",
      desc: "Ideal for customer support, sales, HR, project management, and more—scale your intelligent automation across your organization.",
      icon: <UserCheck className="w-6 h-6 text-white" />
    }
  ];

  const useCases = [
    {
      title: "Customer Support",
      desc: "Convert FAQs and troubleshooting guides into interactive chat agents that assist customers 24/7.",
      icon: <MessageCircle className="w-6 h-6 text-white" />,
      image: "https://images.unsplash.com/photo-1525182008055-f88b95ff7980?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8Y2FsbCUyMHN1cHBvcnR8ZW58MHx8MHx8fDA%3D"
    },
    {
      title: "Sales & Marketing",
      desc: "Engage prospects through conversational agents that guide them through product features and answer inquiries in real time.",
      icon: <Lightbulb className="w-6 h-6 text-white" />,
      image: "https://images.unsplash.com/photo-1560250056-07ba64664864?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c2FsZXN8ZW58MHx8MHx8fDA%3D"
    },
    {
      title: "HR & Administration",
      desc: "Streamline internal processes by turning routine HR queries and administrative tasks into dynamic, chat-driven workflows.",
      icon: <Users className="w-6 h-6 text-white" />,
      image: "https://images.unsplash.com/photo-1629904853716-f0bc54eea481?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fG9mZmljZSUyMHdvcmt8ZW58MHx8MHx8fDA%3D"
    },
    {
      title: "Project Management",
      desc: "Enhance team collaboration by using agents to manage tasks, gather feedback, and update project statuses interactively.",
      icon: <Settings className="w-6 h-6 text-white" />,
      image: "https://plus.unsplash.com/premium_photo-1661277697952-0cacde72c755?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2plY3QlMjBtYW5hZ2VtZW50fGVufDB8fDB8fHww"
    }
  ];


  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-[#F472B6] to-[#6366F1] 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 Agents
          </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-[#ffc1e1] font-medium mb-6">
            <span className="bg-gradient-to-r from-[#EC4899] to-[#A855F7] text-transparent bg-clip-text">Conversational AI Agents:</span> Transform Your Workflows into Smart, Human-Centric Assistants
          </motion.div>

          <motion.p
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="text-gray-400 text-2xl mb-8"
          >
            Elevate your business operations by converting any workflow—whether it’s a tool or a Series—into an intelligent, conversational AI agent. Our platform empowers you to create semi-autonomous agents that communicate in a human-like manner while keeping human decision-making in the loop.
          </motion.p>
        </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">How It Works</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {[
            {
              icon: <Code className="w-6 h-6 text-white" />,
              title: "Convert with a Click",
              desc: "Easily transform your existing workflows into a chat-based AI agent using our intuitive interface.",
              color: "from-blue-500 to-cyan-500"
            },
            {
              icon: <MessageCircle className="w-6 h-6 text-white" />,
              title: "Human-Like Interaction",
              desc: "The agent engages users through a conversational interface, guiding them through tasks and processes in a natural, friendly manner.",
              color: "from-pink-500 to-red-500"
            },
            {
              icon: <Settings className="w-6 h-6 text-white" />,
              title: "Semi-Autonomous Operation",
              desc: "Routine tasks are automated, while critical decision points trigger human intervention—ensuring that key decisions always benefit from human insight.",
              color: "from-green-500 to-emerald-500"
            },
            {
              icon: <RefreshCw className="w-6 h-6 text-white" />,
              title: "Adaptive Learning",
              desc: "The system learns from every interaction, refining its processes and becoming more efficient over time through continuous feedback.",
              color: "from-purple-500 to-indigo-500"
            }
          ].map((item, index) => (
            <div
              key={index}
              className="relative group 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">
                <div className="p-3 bg-gray-900 rounded-lg">{item.icon}</div>
                <h3 className="text-xl text-white font-medium">{item.title}</h3>
              </div>

              {/* Description */}
              <p className="text-gray-400">{item.desc}</p>

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

      {/* Use Cases 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">Use Cases</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {useCases.map((useCase, index) => (
            <div
              key={index}
              className="relative group bg-[#121212] border border-gray-800 rounded-xl p-6 transition-all duration-500 overflow-hidden"
            >
              {/* Image */}
              <div className="mb-4 rounded-lg h-64 overflow-hidden"><img src={useCase.image} alt={useCase.title} className="w-full h-full object-cover rounded-lg" /></div>
              <div className="flex items-center gap-4 mb-2">
                <div className="p-3 bg-gray-900 rounded-lg">{useCase.icon}</div>
                <h3 className="text-xl text-white font-medium">{useCase.title}</h3>
              </div>
              <p className="text-gray-400">{useCase.desc}</p>

              {/* Soft Glow Effect with Different Colors */}
              <div
                className={`absolute inset-0 rounded-xl opacity-0 blur-3xl scale-125 transition-opacity duration-500 group-hover:opacity-20 ${index % 4 === 0
                  ? "bg-gradient-to-br from-purple-500 to-indigo-500"
                  : index % 4 === 1
                    ? "bg-gradient-to-br from-pink-500 to-red-500"
                    : index % 4 === 2
                      ? "bg-gradient-to-br from-green-500 to-teal-500"
                      : "bg-gradient-to-br from-yellow-500 to-orange-500"
                  }`}
              />
            </div>
          ))}
        </div>
      </motion.section>

      {/* Benefits 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">Benefits</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {benefits.map((benefit, index) => (
            <div
              key={index}
              className="relative group bg-[#121212] border border-gray-800 rounded-xl p-6 transition-all duration-500 overflow-hidden"
            >
              <div className="flex items-center gap-4 mb-2">
                <div className="p-3 bg-gray-900 rounded-lg">{benefit.icon}</div>
                <h3 className="text-xl text-white font-medium">{benefit.title}</h3>
              </div>
              <p className="text-gray-400">{benefit.desc}</p>

              {/* 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>
          ))}
        </div>
      </motion.section>

      {/* Key Features 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">Key Features</h2>
        <div className="flex flex-col gap-4">
          {keyFeatures.map((feature, index) => (
            <div
              key={index}
              className="relative group bg-[#121212] border border-gray-800 rounded-xl p-6 transition-all duration-500 overflow-hidden flex items-start gap-8"
            >
              <div className="p-4 bg-gray-900 rounded-lg flex items-center justify-center">
                {feature.icon}
              </div>
              <div>
                <h3 className="text-xl text-white font-medium mb-2">{feature.title}</h3>
                <p className="text-gray-400">{feature.desc}</p>
              </div>
              {/* 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>
          ))}
        </div>
      </motion.section>

      {/* Get Started 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">Get Started</h2>
        <p className="text-gray-400 text-xl mb-8">Transform your workflows into intelligent, human-centric AI agents today. Experience the perfect blend of automation and human engagement that evolves with your business needs.</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-purple-500 via-purple-700 to-indigo-500 shadow-lg transition-all duration-500"
          >
            Convert Your Workflow <ChevronRight className="w-4 h-4" /></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-purple-500 via-purple-700 to-indigo-500 shadow-lg transition-all duration-500"
          >
            Learn More <ChevronRight className="w-4 h-4" /></motion.button>
        </div>
      </motion.section>

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

export default ConversationalAIAgents;