"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 = "Marketplace - Discover and Try AI Micro SaaS Tools"
const description = "Explore a variety of AI-powered tools designed to enhance your business operations. Try them out and purchase the ones that fit your needs."

const tools = Array.from({ length: 50 }, (_, i) => ({
  name: `Tool ${i + 1}`,
  description: `Tool ${i + 1} is designed to help you with various tasks and improve your workflow.`,
  image: `https://via.placeholder.com/150?text=Tool+${i + 1}`,
  category: i % 5 === 0 ? 'Productivity' : i % 5 === 1 ? 'Marketing' : i % 5 === 2 ? 'Sales' : i % 5 === 3 ? 'HR' : 'Project Management',
  link: `https://example.com/tool${i + 1}`
}));

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

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

  const filteredTools = selectedCategory === 'All' ? tools : tools.filter(tool => tool.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 sticky top-0">
        <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>

      {/* Tools 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"
        >
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {filteredTools.map((tool, 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={tool.image} alt={tool.name} className="w-full h-40 object-cover rounded-lg mb-4" />
                <h3 className="text-md text-white font-medium mb-2">{tool.name}</h3>
                <p className="text-gray-400 mb-4 text-sm">{tool.description}</p>
                <div className="text-gray-400">
                  <a href={tool.link} className="font-medium text-xs px-6 py-3 rounded-lg transition-all shadow-lg flex items-center gap-2 hover:scale-105">
                    Try Now
                    <FaArrowRight className="transition-transform duration-300" />
                  </a>
                </div>
              </motion.div>
            ))}
          </div>
        </motion.div>
      </section>

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