"use client";

import { motion } from "framer-motion";
import { Zap, Search, Target } from "lucide-react";
import { cn } from "@/lib/utils";

const features = [
    {
        title: "AI Analysis",
        description:
            "We scrape your website and use GPT-4 to extract features, pain points, and keywords automatically.",
        icon: Zap,
        className: "md:col-span-2",
    },
    {
        title: "Smart Dorking",
        description:
            "Our system generates targeted Google dork queries to find high-intent posts across Reddit, HN, and more.",
        icon: Search,
        className: "md:col-span-1",
    },
    {
        title: "Scored Leads",
        description:
            "Each opportunity is scored by relevance and comes with suggested engagement approaches.",
        icon: Target,
        className: "md:col-span-3",
    },
];

const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
        opacity: 1,
        transition: {
            staggerChildren: 0.2,
        },
    },
};

const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
        opacity: 1,
        y: 0,
        transition: {
            duration: 0.5,
            ease: "easeOut",
        },
    },
};

export function FeaturesSection() {
    return (
        <section className="border-t border-border/40 bg-muted/20 backdrop-blur-sm relative z-10">
            <div className="container mx-auto max-w-7xl px-4 py-24">
                <motion.div
                    className="grid md:grid-cols-3 gap-6"
                    variants={containerVariants}
                    initial="hidden"
                    whileInView="visible"
                    viewport={{ once: true, margin: "-100px" }}
                >
                    {features.map((feature, i) => (
                        <motion.div
                            key={i}
                            variants={itemVariants}
                            className={cn(
                                "bg-card text-card-foreground p-8 rounded-2xl border h-full flex flex-col items-start text-left transition-all hover:border-primary/50 hover:shadow-lg",
                                feature.className
                            )}
                        >
                            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 mb-6">
                                <feature.icon className="h-6 w-6 text-primary" />
                            </div>
                            <h3 className="text-xl font-bold mb-3">{feature.title}</h3>
                            <p className="text-muted-foreground leading-relaxed">
                                {feature.description}
                            </p>
                        </motion.div>
                    ))}
                </motion.div>
            </div>
        </section>
    );
}