"use client";

import { motion, useInView } from "framer-motion";
import {
    Code2,
    Layers,
    Server,
    Sparkles,
    TrendingUp,
    Wrench,
} from "lucide-react";
import { useRef } from "react";

const skills = {
    frontend: {
        category: "Frontend",
        icon: Code2,
        color: "from-blue-500 to-cyan-500",
        items: [
            "React",
            "Next.js",
            "TypeScript",
            "Tailwind CSS",
            "Bootstrap",
            "HTML/CSS",
        ],
    },
    backend: {
        category: "Backend",
        icon: Server,
        color: "from-purple-500 to-pink-500",
        items: ["Node.js", "Express", "PostgreSQL", "MongoDB", "REST API"],
    },
    tools: {
        category: "Outils",
        icon: Wrench,
        color: "from-orange-500 to-red-500",
        items: [
            "Github",
            "Docker",
            "VS Code",
            "Linux",
            "Cloudflare",
            "Proxmox",
        ],
    },
};

export default function Skills() {
    const ref = useRef(null);
    const isInView = useInView(ref, { once: false, amount: 0.2 });

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

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

    return (
        <section
            id="skills"
            className="py-20 bg-white relative overflow-hidden"
        >
            {/* Decorative blobs */}
            <div className="absolute top-0 left-0 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl"></div>
            <div className="absolute bottom-0 right-0 w-96 h-96 bg-purple-500/5 rounded-full blur-3xl"></div>

            <div
                ref={ref}
                className="container mx-auto px-4 max-w-7xl relative z-10"
            >
                {/* Header */}
                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={
                        isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
                    }
                    transition={{ duration: 0.6 }}
                    className="text-center mb-16"
                >
                    <div className="inline-flex items-center gap-2 bg-linear-to-r from-blue-500/10 to-purple-500/10 rounded-full px-4 py-2 mb-4">
                        <Sparkles className="w-4 h-4 text-blue-600" />
                        <span className="text-sm font-semibold text-slate-700">
                            Expertise
                        </span>
                    </div>
                    <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
                        Compétences & Technologies
                    </h2>
                    <p className="text-xl text-slate-600 max-w-2xl mx-auto">
                        Un ensemble de technologies modernes maîtrisées pour
                        créer des applications web performantes et innovantes
                    </p>
                </motion.div>

                {/* Bento Grid */}
                <motion.div
                    variants={containerVariants}
                    initial="hidden"
                    animate={isInView ? "visible" : "hidden"}
                    className="grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-6"
                >
                    {/* Frontend - Large card */}
                    <motion.div
                        variants={itemVariants}
                        className="md:col-span-7 group"
                    >
                        <div className="relative h-full bg-linear-to-br from-blue-500 to-cyan-500 rounded-3xl p-8 overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
                            {/* Decorative circles */}
                            <div className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full blur-2xl"></div>
                            <div className="absolute -bottom-10 -left-10 w-40 h-40 bg-white/10 rounded-full blur-2xl"></div>

                            <div className="relative z-10">
                                <div className="flex items-center gap-3 mb-6">
                                    <div className="p-3 bg-white/20 backdrop-blur-sm rounded-xl group-hover:scale-110 transition-transform duration-300">
                                        <skills.frontend.icon className="w-8 h-8 text-white" />
                                    </div>
                                    <h3 className="text-3xl font-bold text-white">
                                        {skills.frontend.category}
                                    </h3>
                                </div>
                                <div className="grid grid-cols-2 gap-3">
                                    {skills.frontend.items.map((item) => (
                                        <div
                                            key={item}
                                            className="bg-white/20 backdrop-blur-sm rounded-xl px-4 py-3 text-white font-semibold hover:bg-white/30 transition-colors cursor-default"
                                        >
                                            {item}
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </motion.div>

                    {/* Backend - Medium card */}
                    <motion.div
                        variants={itemVariants}
                        className="md:col-span-5 group"
                    >
                        <div className="relative h-full bg-linear-to-br from-purple-500 to-pink-500 rounded-3xl p-8 overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
                            <div className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full blur-2xl"></div>

                            <div className="relative z-10">
                                <div className="flex items-center gap-3 mb-6">
                                    <div className="p-3 bg-white/20 backdrop-blur-sm rounded-xl group-hover:scale-110 transition-transform duration-300">
                                        <skills.backend.icon className="w-8 h-8 text-white" />
                                    </div>
                                    <h3 className="text-3xl font-bold text-white">
                                        {skills.backend.category}
                                    </h3>
                                </div>
                                <div className="grid grid-cols-2 gap-3">
                                    {skills.backend.items.map((item) => (
                                        <div
                                            key={item}
                                            className="bg-white/20 backdrop-blur-sm rounded-xl px-4 py-3 text-center text-white font-semibold hover:bg-white/30 transition-colors cursor-default"
                                        >
                                            {item}
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </motion.div>

                    {/* Tools - Medium card */}
                    <motion.div
                        variants={itemVariants}
                        className="md:col-span-5 group"
                    >
                        <div className="relative h-full bg-linear-to-br from-orange-500 to-red-500 rounded-3xl p-8 overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
                            <div className="absolute -top-10 -left-10 w-40 h-40 bg-white/10 rounded-full blur-2xl"></div>

                            <div className="relative z-10">
                                <div className="flex items-center gap-3 mb-6">
                                    <div className="p-3 bg-white/20 backdrop-blur-sm rounded-xl group-hover:scale-110 transition-transform duration-300">
                                        <skills.tools.icon className="w-8 h-8 text-white" />
                                    </div>
                                    <h3 className="text-3xl font-bold text-white">
                                        {skills.tools.category}
                                    </h3>
                                </div>
                                <div className="grid grid-cols-2 gap-3">
                                    {skills.tools.items.map((item) => (
                                        <div
                                            key={item}
                                            className="bg-white/20 backdrop-blur-sm rounded-xl px-4 py-3 text-center text-white font-semibold hover:bg-white/30 transition-colors cursor-default"
                                        >
                                            {item}
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </motion.div>

                    {/* Additional info card */}
                    <motion.div
                        variants={itemVariants}
                        className="md:col-span-7 group"
                    >
                        <div className="relative h-full bg-slate-900 rounded-3xl p-8 overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
                            <div className="absolute top-0 right-0 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl"></div>
                            <div className="absolute bottom-0 left-0 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl"></div>

                            <div className="relative z-10">
                                <div className="flex items-start justify-between mb-4">
                                    <div className="flex items-center gap-3">
                                        <Layers className="w-8 h-8 text-blue-400" />
                                        <h3 className="text-2xl font-bold text-white">
                                            Stack Full-Stack
                                        </h3>
                                    </div>
                                    <TrendingUp className="w-6 h-6 text-green-400" />
                                </div>

                                <p className="text-slate-300 text-lg leading-relaxed mb-6">
                                    Une expertise complète du développement web
                                    moderne, du design à la mise en production.
                                </p>

                                <div className="grid grid-cols-2 gap-3 mb-6">
                                    <div className="bg-slate-800/50 backdrop-blur-sm rounded-xl p-4 border border-slate-700">
                                        <div className="text-3xl font-bold text-blue-400 mb-1">
                                            3+
                                        </div>
                                        <div className="text-sm text-slate-400">
                                            Années d&apos;expérience
                                        </div>
                                    </div>
                                    <div className="bg-slate-800/50 backdrop-blur-sm rounded-xl p-4 border border-slate-700">
                                        <div className="text-3xl font-bold text-purple-400 mb-1">
                                            15+
                                        </div>
                                        <div className="text-sm text-slate-400">
                                            Projets réalisés
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </motion.div>
                </motion.div>
            </div>
        </section>
    );
}