import { motion } from "framer-motion";
import { Server, Box, ShieldCheck, Activity, Cpu, FileText } from "lucide-react";
import { SiDocker, SiLinux, SiGrafana, SiNginx, SiUbuntu, SiAnsible, SiPrometheus } from "react-icons/si";

const skills = [
  {
    icon: Server,
    title: "Linux & Infrastruktur",
    desc: "Ubuntu, Debian, AIX, Solaris, Proxmox, Systemd, TLS, Reverse Proxy, Shell-Scripting",
    color: "bg-blue-50 text-blue-600 border-blue-100",
  },
  {
    icon: Box,
    title: "Docker & Container",
    desc: "Docker Compose, Netzwerke, Volumes, Persistenz, Ansible, Deployment auf Hetzner & Contabo",
    color: "bg-sky-50 text-sky-600 border-sky-100",
  },
  {
    icon: ShieldCheck,
    title: "On-Premise & DSGVO",
    desc: "iRedMail, Mailcow, Nextcloud, SOGo, Authentik / OIDC, ITIL, BSI-Grundschutz, Compliance",
    color: "bg-green-50 text-green-600 border-green-100",
  },
  {
    icon: Activity,
    title: "Monitoring & Betrieb",
    desc: "Grafana, Prometheus, Loki, Alloy, Nagios, JMX-Monitoring, Metriken & Dashboards",
    color: "bg-orange-50 text-orange-600 border-orange-100",
  },
  {
    icon: Cpu,
    title: "KI & Automation",
    desc: "n8n, Claude Code, ChatGPT, RAG-Systeme, Pinecone, OpenAI, Ollama, API-Automation",
    color: "bg-violet-50 text-violet-600 border-violet-100",
  },
  {
    icon: FileText,
    title: "Dokumentation & Service",
    desc: "Betriebshandbücher, ITIL-Prozesse, BSI-Grundschutz, Confluence, Jira, draw.io",
    color: "bg-rose-50 text-rose-600 border-rose-100",
  },
];

const techIcons = [
  { Icon: SiLinux, label: "Linux", color: "#000" },
  { Icon: SiUbuntu, label: "Ubuntu", color: "#E95420" },
  { Icon: SiDocker, label: "Docker", color: "#2496ED" },
  { Icon: SiGrafana, label: "Grafana", color: "#F46800" },
  { Icon: SiNginx, label: "Nginx", color: "#009639" },
  { Icon: SiAnsible, label: "Ansible", color: "#EE0000" },
  { Icon: SiPrometheus, label: "Prometheus", color: "#E6522C" },
];

export function Competencies() {
  return (
    <div className="py-24">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: "-80px" }}
        transition={{ duration: 0.6 }}
      >
        <div className="text-center max-w-2xl mx-auto mb-16">
          <p className="section-number mb-3" data-testid="text-section-label-competencies">Kernkompetenzen</p>
          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4" data-testid="text-section-title-competencies">
            30 Jahre Erfahrung — breit und tief
          </h2>
          <p className="text-muted-foreground text-lg">
            Von klassischem Serverbetrieb bis zur KI-gestützten Automatisierung — praxisbewährt in Behörden, Konzernen und eigenen Projekten.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
          {skills.map((skill, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 16 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.4, delay: index * 0.08 }}
              className="p-6 rounded-2xl bg-white border border-border card-hover"
              data-testid={`card-competency-${index}`}
            >
              <div className={`w-11 h-11 rounded-xl border flex items-center justify-center mb-4 ${skill.color}`}>
                <skill.icon className="w-5 h-5" />
              </div>
              <h3 className="text-base font-semibold text-foreground mb-2">{skill.title}</h3>
              <p className="text-sm text-muted-foreground leading-relaxed">{skill.desc}</p>
            </motion.div>
          ))}
        </div>

        <div className="mt-16 flex flex-wrap justify-center items-center gap-8">
          {techIcons.map(({ Icon, label, color }) => (
            <div key={label} className="flex flex-col items-center gap-1.5 group" title={label}>
              <Icon
                className="w-8 h-8 opacity-30 group-hover:opacity-100 transition-all duration-200"
                style={{ color }}
              />
              <span className="text-xs text-muted-foreground/60 group-hover:text-muted-foreground transition-colors">{label}</span>
            </div>
          ))}
        </div>
      </motion.div>
    </div>
  );
}
