"use client";

import React, { useRef } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(useGSAP, ScrollTrigger);

const features = [
    {
        title: "Multi-track Leveling",
        description:
            "Create distinct leveling paths for different roles or activities. Perfect for complex community structures.",
    },
    {
        title: "Coming Soon",
        description:
            "More features will be added in the future."
    },
];

const Features = () => {
    const container = useRef(null);

    useGSAP(
        () => {
            const cards = gsap.utils.toArray(".feature-card");

            cards.forEach((card: any, index) => {
                gsap.from(card, {
                    scrollTrigger: {
                        trigger: card,
                        start: "top 85%",
                        toggleActions: "play none none reverse",
                    },
                    y: 50,
                    opacity: 0,
                    duration: 0.8,
                    delay: index * 0.2,
                    ease: "power3.out",
                });
            });
        },
        { scope: container }
    );

    return (
        <section ref={container} className="py-32 relative z-10">
            <div className="container mx-auto px-4">
                <h2 className="text-4xl font-bold text-center mb-16 bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400">
                    Why Void Sentinel?
                </h2>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                    {features.map((feature, index) => (
                        <div
                            key={index}
                            className="feature-card p-8 rounded-2xl bg-white/5 border border-white/10 hover:border-primary/50 transition-colors backdrop-blur-sm"
                        >
                            <h3 className="text-xl font-semibold mb-3 text-white">
                                {feature.title}
                            </h3>
                            <p className="text-gray-400 leading-relaxed">
                                {feature.description}
                            </p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default Features;