"use client";
import { useState } from 'react';
import { 
  ShoppingCart, 
  HeartPulse, 
  Wallet, 
  GraduationCap,
  Home,
  Briefcase,
  ArrowRight,
  Bot
} from 'lucide-react';

const agents = [
  {
    title: "ShopSmart Assistant",
    category: "Retail & E-commerce",
    description: "Engages customers, answers FAQs, provides personalized product recommendations, and streamlines the purchase process.",
    icon: <ShoppingCart className="w-6 h-6" />,
    gradient: "from-pink-500/20 to-purple-500/20"
  },
  {
    title: "HealthMate Advisor",
    category: "Healthcare",
    description: "Offers immediate healthcare information, assists in appointment scheduling, and guides patients through available services.",
    icon: <HeartPulse className="w-6 h-6" />,
    gradient: "from-blue-500/20 to-cyan-500/20"
  },
  {
    title: "FinGuide Bot",
    category: "Finance & Banking",
    description: "Provides personalized financial advice, handles customer queries, assists with account management, and schedules consultations.",
    icon: <Wallet className="w-6 h-6" />,
    gradient: "from-green-500/20 to-emerald-500/20"
  },
  {
    title: "LearnHub Tutor",
    category: "Education",
    description: "Facilitates course enrollment, answers academic queries, recommends learning resources, and tracks student progress.",
    icon: <GraduationCap className="w-6 h-6" />,
    gradient: "from-orange-500/20 to-yellow-500/20"
  },
  {
    title: "HomeFinder Agent",
    category: "Real Estate",
    description: "Showcases property listings, schedules viewings, offers virtual tours, and provides real-time support for potential buyers.",
    icon: <Home className="w-6 h-6" />,
    gradient: "from-purple-500/20 to-indigo-500/20"
  },
  {
    title: "ProConnect Advisor",
    category: "Professional Services",
    description: "Streamlines client interactions, manages consultation scheduling, and delivers tailored content to boost engagement.",
    icon: <Briefcase className="w-6 h-6" />,
    gradient: "from-teal-500/20 to-blue-500/20"
  }
];

export default function SampleAgents() {
  const [activeAgent, setActiveAgent] = useState<number | null>(null);

  return (
    <div className="w-full py-32">
      <div className="container mx-auto px-4">
        <div className="text-center mb-24">
          <h2 className="text-4xl md:text-6xl text-white mb-8">See Our AI Agents in Action</h2>
          <p className="text-xl text-gray-400 max-w-3xl mx-auto">
            Our platform makes it easy to create AI agents that engage customers, streamline operations, and drive revenue. 
            Check out some sample agents built with our tools:
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
          {agents.map((agent, index) => (
            <div
              key={index}
              className="group relative"
              onMouseEnter={() => setActiveAgent(index)}
              onMouseLeave={() => setActiveAgent(null)}
            >
              {/* Card Background */}
              <div className={`
                absolute inset-0 rounded-2xl
                bg-gradient-to-br ${agent.gradient}
                opacity-0 group-hover:opacity-100
                transition-all duration-500
              `} />

              {/* Card Content */}
              <div className="relative p-8 rounded-2xl border border-purple-500/10">
                {/* Category Tag */}
                <div className="flex items-center gap-2 mb-6">
                  <Bot className="w-4 h-4 text-purple-400" />
                  <span className="text-sm text-purple-400">{agent.category}</span>
                </div>

                {/* Icon */}
                <div className={`
                  w-12 h-12 rounded-xl
                  flex items-center justify-center
                  bg-gradient-to-br ${agent.gradient}
                  mb-6 transition-transform duration-500 text-white
                  ${activeAgent === index ? 'scale-110 rotate-3' : ''}
                `}>
                  {agent.icon}
                </div>

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

                {/* Try Agent Button */}
                <button className={`
                  flex items-center gap-2 text-sm
                  text-purple-400 hover:text-purple-300
                  transition-all duration-300
                  ${activeAgent === index ? 'translate-x-2' : ''}
                `}>
                  Try this agent
                  <ArrowRight className="w-4 h-4" />
                </button>
              </div>

              {/* Decorative Elements */}
              <div className={`
                absolute -bottom-4 -right-4 w-32 h-32
                bg-gradient-to-br ${agent.gradient}
                rounded-full blur-3xl
                transition-opacity duration-500
                opacity-0 group-hover:opacity-20
              `} />
            </div>
          ))}
        </div>

        {/* CTA Button */}
        <div className="text-center mt-16">
          <button className="
            group relative overflow-hidden
            px-8 py-4 rounded-full
            text-white text-lg
            transition-all duration-300
            hover:shadow-lg hover:shadow-purple-500/20
          ">
            <div className="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 opacity-80 group-hover:opacity-100 transition-opacity" />
            <span className="relative flex items-center gap-2">
              Explore More Sample Agents
              <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
            </span>
          </button>
        </div>
      </div>
    </div>
  );
}