"use client";

import React, { useState } from 'react';
import Navbar from '@/components/Navbar/navbar';
import Footer from "@/components/footer";
import { motion } from 'framer-motion';
import { FaArrowRight } from 'react-icons/fa';

const heading = "Agents - Discover and Utilize AI Agents for Various Tasks"
const description = "Browse through a wide range of AI agents categorized by their expertise. Find the perfect agent to automate your tasks and improve efficiency."

const agents = [
  {
    name: "Agent 1",
    email: "agent1@example.com",
    intro: "Agent 1 specializes in customer support to help improve your workflow.",
    image: "https://plus.unsplash.com/premium_photo-1661434914660-c68d9fd54753?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8Y3VzdG9tZXIlMjBzdXBwb3J0fGVufDB8fDB8fHww",
    category: "Customer Support",
    appsLink: "https://example.com/agent1/apps"
  },
  {
    name: "Agent 2",
    email: "agent2@example.com",
    intro: "Agent 2 specializes in customer support to help improve your workflow.",
    image: "https://plus.unsplash.com/premium_photo-1661764559869-f6052a14b4c9?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8Y3VzdG9tZXIlMjBzdXBwb3J0fGVufDB8fDB8fHww",
    category: "Customer Support",
    appsLink: "https://example.com/agent2/apps"
  },
  {
    name: "Agent 3",
    email: "agent3@example.com",
    intro: "Agent 3 specializes in sales to help improve your workflow.",
    image: "https://images.unsplash.com/photo-1560250056-07ba64664864?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c2FsZXN8ZW58MHx8MHx8fDA%3D",
    category: "Sales",
    appsLink: "https://example.com/agent3/apps"
  },
  {
    name: "Agent 4",
    email: "agent4@example.com",
    intro: "Agent 4 specializes in sales to help improve your workflow.",
    image: "https://images.unsplash.com/photo-1542744174-a35e40ade835?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fHNhbGVzfGVufDB8fDB8fHww",
    category: "Sales",
    appsLink: "https://example.com/agent4/apps"
  },
  {
    name: "Agent 5",
    email: "agent5@example.com",
    intro: "Agent 5 specializes in marketing to help improve your workflow.",
    image: "https://plus.unsplash.com/premium_photo-1696942353136-c3735fadc15a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bWFya2V0dGluZ3xlbnwwfHwwfHx8MA%3D%3D",
    category: "Marketing",
    appsLink: "https://example.com/agent5/apps"
  },
  {
    name: "Agent 6",
    email: "agent6@example.com",
    intro: "Agent 6 specializes in marketing to help improve your workflow.",
    image: "https://via.placeholder.com/150?text=Agent+6",
    category: "Marketing",
    appsLink: "https://example.com/agent6/apps"
  },
  {
    name: "Agent 7",
    email: "agent7@example.com",
    intro: "Agent 7 specializes in HR to help improve your workflow.",
    image: "https://via.placeholder.com/150?text=Agent+7",
    category: "HR",
    appsLink: "https://example.com/agent7/apps"
  },
  {
    name: "Agent 8",
    email: "agent8@example.com",
    intro: "Agent 8 specializes in HR to help improve your workflow.",
    image: "https://via.placeholder.com/150?text=Agent+8",
    category: "HR",
    appsLink: "https://example.com/agent8/apps"
  },
  {
    name: "Agent 9",
    email: "agent9@example.com",
    intro: "Agent 9 specializes in project management to help improve your workflow.",
    image: "https://via.placeholder.com/150?text=Agent+9",
    category: "Project Management",
    appsLink: "https://example.com/agent9/apps"
  },
  {
    name: "Agent 10",
    email: "agent10@example.com",
    intro: "Agent 10 specializes in project management to help improve your workflow.",
    image: "https://via.placeholder.com/150?text=Agent+10",
    category: "Project Management",
    appsLink: "https://example.com/agent10/apps"
  }
];

const categories = ['All', 'Customer Support', 'Sales', 'Marketing', 'HR', 'Project Management'];

export default function Agents() {
  const [selectedCategory, setSelectedCategory] = useState('All');

  const filteredAgents = selectedCategory === 'All' ? agents : agents.filter(agent => agent.category === selectedCategory);

  return (
    <div className="min-h-screen bg-[#080E12] dark text-white overflow-x-hidden">
      <Navbar />
      
      {/* Hero Section */}
      <div className='h-screen py-10 px-10 flex flex-col items-start justify-center'>
        <h1 className="text-8xl mb-10">{heading}</h1>
        <h2 className='text-4xl'>{description}</h2>
      </div>
      <div className="max-w-7xl mx-auto flex">
      
      {/* Category Filters */}
      <aside className="w-1/4 py-8 px-4 md:px-8 border-r">
        <div className="sticky top-20">
          <h3 className="text-2xl mb-4">Categories</h3>
          <div className="flex flex-col space-y-4 mt-20">
            {categories.map((category, index) => (
              <button
                key={index}
                onClick={() => setSelectedCategory(category)}
                className={`px-4 py-2 rounded-lg transition-all text-left ${selectedCategory === category ? 'text-white' : 'text-gray-400'}`}
              >
                {category}
              </button>
            ))}
          </div>
        </div>
      </aside>

      {/* Agents List */}
      <section className="w-3/4 py-16 px-4 md:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
          className="max-w-7xl mx-auto"
        >
          {/* <h2 className="text-3xl md:text-4xl mb-12 text-center bg-clip-text text-transparent bg-gradient-to-r from-white to-violet-300">
            Available Agents
          </h2> */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {filteredAgents.map((agent, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                viewport={{ once: true }}
                className="bg-[#121212] border border-gray-800 rounded-xl p-6"
              >
                <img src={agent.image} alt={agent.name} className="w-full h-40 object-cover rounded-lg mb-4" />
                <h3 className="text-md text-white font-medium mb-2">{agent.name}</h3>
                <p className="text-gray-400 mb-2 text-sm">{agent.email}</p>
                <p className="text-gray-400 mb-4 text-sm">{agent.intro}</p>
                <div className="text-gray-400">
                  <a href={agent.appsLink} className="font-medium text-xs px-6 py-3 rounded-lg flex transition-all items-center gap-2">
                    Explore Apps
                    <FaArrowRight className="transition-transform duration-300 hover:ml-4" />
                  </a>
                </div>
              </motion.div>
            ))}
          </div>
        </motion.div>
      </section>

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