"use client";

import { Layers, Users, Zap, Code, GitBranch, Terminal } from "lucide-react";
import { useState } from "react";

const featureData = [
    {
        title: "MODULAR ARCHITECTURE",
        description: "Build and combine AI agents effortlessly with our flexible, component-based system.",
        icon: Layers,
    },
    {
        title: "Multi-Agent Orchestration",
        description: "Coordinate multiple AI agents for complex tasks and workflows with ease.",
        icon: Users,
    },
    {
        title: "High-Performance Runtime",
        description: "Optimized for real-time applications with sub-millisecond latency.",
        icon: Zap,
    },
    {
        title: "Extensible API",
        description: "Seamlessly integrate with existing codebases and extend functionality.",
        icon: Code,
    },
    {
        title: "Version Control",
        description: "Built-in versioning for AI models and agent configurations.",
        icon: GitBranch,
    },
    {
        title: "CLI Tools",
        description: "Powerful command-line tools for rapid development and deployment.",
        icon: Terminal,
    },
];

export function Features() {
    const [activeCard, setActiveCard] = useState<number | null>(null);

    return (
        <section id="features" className="relative pt-20 pb-28 overflow-hidden">
            <svg className="absolute inset-0 w-full h-[950px]" preserveAspectRatio="none">
                <image href="/images/features-box.svg" width="100%" height="100%" preserveAspectRatio="none" />
            </svg>
            <div className="container relative z-10 mx-auto px-6">
                <div className="mb-12 space-y-5">
                    <h2 className="text-sm text-center font-fk-grotesk-mono" data-aos="fade-up">
                        [ FEATURES ]
                    </h2>
                    <h3
                        className="uppercase text-5xl text-center max-w-lg mx-auto font-extralight"
                        data-aos="fade-up"
                        data-aos-delay="100"
                    >
                        Project Structure <span className="font-pp-mondwest">and Components</span>
                    </h3>
                    <p
                        className="text-center max-w-lg mx-auto font-semi-light text-lg"
                        data-aos="fade-up"
                        data-aos-delay="200"
                    >
                        Artiv8 is built upon a modular architecture, allowing developers to effortlessly integrate and
                        manage multiple AI agents. This design ensures scalability and flexibility, enabling the
                        creation of complex, intelligent applications.
                    </p>
                </div>
                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-2">
                    {featureData.map((feature, index) => (
                        <div
                            key={index}
                            className="relative"
                            data-aos="fade-up"
                            data-aos-delay={index * 100}
                            onMouseEnter={() => setActiveCard(index)}
                            onMouseLeave={() => setActiveCard(null)}
                        >
                            <div
                                className={`p-6 rounded-md bg-[#101014] h-full relative overflow-hidden group transition-all duration-300 ease-in-out ${
                                    activeCard === index ? "ring-2 ring-[#5e51ec] shadow-lg shadow-[#5e51ec]/20" : ""
                                }`}
                            >
                                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent -translate-x-full group-hover:translate-x-full transition-all duration-700 ease-in-out opacity-20"></div>
                                <div className="w-20 h-20 rounded-md bg-[#28272c] flex items-center justify-center mb-4 transform group-hover:scale-110 transition-transform duration-300">
                                    {feature.icon && <feature.icon className="w-10 h-10 text-white" />}
                                </div>
                                <h3 className="text-xs uppercase font-fk-grotesk-mono font-medium mb-2">
                                    {feature.title}
                                </h3>
                                <p className="text-[#838383] font-semi-light text-base">{feature.description}</p>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}