portifolio-evandrodevbr/app/components/Skills.tsx

"use client";

import React from "react";
import { motion } from "framer-motion";
import {
  Code, Database, Cloud, Cpu, Smartphone,
  Zap, GitBranch, TestTube, Terminal, Layers
} from "lucide-react";
import { usePortfolioData } from "@/lib/usePortfolioData";

const ICON_MAP: Record<string, React.ElementType> = {
  Code, Database, Cloud, Cpu, Smartphone, Zap, GitBranch, TestTube, Terminal, Layers
};

const getCategoryStyles = (color: string) => {
  const base = color.replace("text-", "");
  return {
    icon: color,
    bg: `bg-${base}/10`,
    border: `border-slate-800/50`,
  };
};

export default function Skills() {
  const { data, loading, error } = usePortfolioData();

  if (loading) return <LoadingState />;
  if (error || !data) return <ErrorState />;

  return (
    <section id="skills" className="relative py-32 px-6">
      {/* Background Decoration */}
      <div className="absolute top-0 left-0 w-full h-full pointer-events-none">
        <div className="absolute top-[40%] left-[50%] -translate-x-1/2 w-[800px] h-[800px] bg-blue-900/5 rounded-full blur-[100px]" />
      </div>

      <div className="max-w-7xl mx-auto relative z-10">

        {/* Header Seção */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          className="flex flex-col md:flex-row justify-between items-end mb-20 gap-8"
        >
          <div className="text-left">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-950/30 border border-blue-500/20 text-blue-400 font-mono text-xs tracking-wider mb-4">
              <Layers className="w-3 h-3" />
              <span>MODULE_REGISTRY.lib</span>
            </div>
            <h3 className="text-4xl md:text-6xl font-black text-white tracking-tighter">
              Arsenal <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-indigo-500">Tecnológico</span>
            </h3>
          </div>
          <p className="text-slate-400 max-w-md text-sm md:text-base font-light leading-relaxed border-l-2 border-slate-800 pl-6">
            Sistemas resilientes construídos com precisão matemática e rigor arquitetural.
          </p>
        </motion.div>

        {/* Grid de Habilidades */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {data.skills.technical.map((category, index) => {
            const Icon = ICON_MAP[category.icon] || Code;
            const styles = getCategoryStyles(category.color);

            return (
              <motion.div
                key={category.category}
                initial={{ opacity: 0, y: 50 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, amount: 0.2 }}
                transition={{
                  duration: 0.5,
                  delay: index * 0.05,
                  ease: "easeOut"
                }}
                className="h-full"
              >
                <div
                  className="group relative h-full p-8 flex flex-col bg-zinc-900/40 border border-white/5 rounded-2xl backdrop-blur-sm hover:border-blue-500/20 hover:bg-zinc-900/60 transition-all duration-300 overflow-hidden"
                >
                  {/* Scanning Line Effect */}
                  <div className="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-blue-500/50 to-transparent -translate-x-full group-hover:animate-scan" />

                  <div className="flex items-start justify-between mb-8">
                    <div className={`p-4 rounded-xl bg-slate-800/50 border border-white/5 group-hover:bg-blue-500/10 group-hover:border-blue-500/20 transition-all duration-300`}>
                      <Icon className={`w-8 h-8 text-slate-400 group-hover:text-blue-400 transition-colors`} />
                    </div>
                    <span className="text-[10px] font-mono text-slate-600 uppercase tracking-widest font-bold group-hover:text-blue-500/50 transition-colors">
                      ID_0{index}X
                    </span>
                  </div>

                  <h3 className="text-xl font-bold text-white mb-6 group-hover:text-blue-200 transition-colors">
                    {category.category}
                  </h3>

                  <div className="flex flex-wrap gap-2 mt-auto">
                    {category.skills.map((skill, sIdx) => (
                      <span
                        key={sIdx}
                        className="px-2.5 py-1 text-[10px] font-mono bg-black/40 text-slate-400 rounded border border-white/5 group-hover:border-blue-500/20 group-hover:text-blue-300 transition-all duration-300 cursor-default"
                      >
                        {skill}
                      </span>
                    ))}
                  </div>
                </div>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// --- Componentes de Suporte (Manter no mesmo arquivo para contexto ou mover para /components) ---
function LoadingState() {
  return (
    <div className="py-32 flex flex-col items-center justify-center space-y-4 bg-[#030712]">
      <div className="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin" />
      <span className="text-slate-500 font-mono text-sm animate-pulse uppercase tracking-tighter">Initializing Systems...</span>
    </div>
  );
}

function ErrorState() {
  return (
    <div className="py-32 text-center text-red-400 font-mono bg-[#030712]">
      [FATAL_ERROR]: Failed to synchronize portfolio data.
    </div>
  );
}