const services = [
  {
    icon: (
      <svg viewBox="0 0 24 24" className="w-8 h-8" fill="currentColor">
        <path d="M19 3H5C3.9 3 3 3.9 3 5v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14l-5-5 1.41-1.41L12 14.17l7.59-7.59L21 8l-9 9z" />
      </svg>
    ),
    title: "Hardware & Software",
    description:
      "Beratung, Beschaffung und Konfiguration von Hardware sowie Software-Lösungen. Von der Auswahl bis zur Inbetriebnahme alles aus einer Hand.",
    features: ["Hardware-Beratung", "Software-Lizenzierung", "System-Konfiguration", "IT-Support"],
    accent: "orange",
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" className="w-8 h-8" fill="currentColor">
        <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z" />
      </svg>
    ),
    title: "Netzwerk & Sicherheit",
    description:
      "Sichere Netzwerkinfrastruktur und IT-Sicherheitslösungen. Firewall-Konfiguration, VPN-Setups und Hardening für Ihre Server und Dienste.",
    features: ["Firewall & VPN", "SSL/TLS Management", "Server Hardening", "Monitoring"],
    accent: "blue",
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" className="w-8 h-8" fill="currentColor">
        <path d="M4 1h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm0 8h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zm0 8h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1z" />
      </svg>
    ),
    title: "Cloud Infrastruktur",
    description:
      "Kosteneffiziente und skalierbare Cloud-Server-Setups. Netzwerkkonfiguration, automatisiertes Deployment und Infrastruktur als Code für Ihre Workloads.",
    features: ["Server-Provisionierung", "Netzwerk & Firewall", "Load Balancer", "Terraform/Ansible"],
    accent: "orange",
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" className="w-8 h-8" fill="currentColor">
        <path d="M13.5 2c-5.629 0-10.212 4.436-10.475 10h-3.025l4 5.917 4-5.917h-2.516c.26-4.068 3.647-7.333 7.516-7.333 4.136 0 7.5 3.364 7.5 7.5s-3.364 7.5-7.5 7.5c-2.136 0-4.065-.888-5.464-2.318l-1.44 2.133c1.799 1.722 4.257 2.785 6.904 2.785 5.514 0 10-4.486 10-10s-4.486-10-10-10z" />
      </svg>
    ),
    title: "Docker Installationen",
    description:
      "Professionelle Einrichtung und Verwaltung von Docker-Umgebungen. Von der ersten Containerisierung bis hin zu komplexen Multi-Container-Setups mit Docker Compose.",
    features: ["Docker Engine Setup", "Docker Compose", "Registry Management", "Container-Optimierung"],
    accent: "blue",
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" className="w-8 h-8" fill="currentColor">
        <path d="M20 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm-9 14H5v-2h6v2zm0-4H5v-2h6v2zm0-4H5V7h6v2zm8 8h-6v-2h6v2zm0-4h-6v-2h6v2zm0-4h-6V7h6v2z" />
      </svg>
    ),
    title: "Proxmox Virtualisierung",
    description:
      "Enterprise-Virtualisierung mit Proxmox VE. Aufbau von Hypervisor-Clustern, VM- und LXC-Management sowie Hochverfügbarkeits-Konfigurationen.",
    features: ["Proxmox VE Setup", "VM & LXC Management", "HA-Cluster", "Backup-Strategien"],
    accent: "orange",
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" className="w-8 h-8" fill="currentColor">
        <path d="M10.204 14.35l.007.01-.999 2.413a5.171 5.171 0 0 1-2.075-2.597l2.578-.437.49.61zm.022-4.6l.499.611-.997 2.413-2.578-.437a5.171 5.171 0 0 1 2.076-2.587zm.73 1.879l1.249-.417-.003-2.619-1.249-.416a3.6 3.6 0 0 0-.713.833l.716 1.396-.716 1.39a3.6 3.6 0 0 0 .716.833zm4.103 4.348l-2.578.437-.998-2.413.007-.01.49-.61 2.578.437a5.171 5.171 0 0 1-1.499 2.159zm.02-7.028l-2.578.437-1.001 2.413.007.01.49.61 2.578-.437a5.171 5.171 0 0 0-1.496-3.033zm-1.502 5.516l.999-2.413-.499-.611-1.001.334.001 2.286.5.404zm2.998-2.413l-2.578-.437.499.611-.001 2.619 1.25.417a3.6 3.6 0 0 0 .83-3.21zM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z" />
      </svg>
    ),
    title: "Kubernetes Orchestrierung",
    description:
      "Skalierbare Container-Orchestrierung mit Kubernetes. Aufbau und Verwaltung von K8s-Clustern für hochverfügbare, produktionsreife Anwendungen.",
    features: ["Cluster-Setup", "Helm Charts", "Auto-Scaling", "Monitoring & Logging"],
    accent: "blue",
  },
];

const colorMap = {
  orange: {
    border: "border-orange-500/20 hover:border-orange-500/50",
    icon: "text-orange-400",
    iconBg: "bg-orange-500/10",
    dot: "bg-orange-400",
    shadow: "hover:shadow-orange-500/10",
  },
  blue: {
    border: "border-blue-500/20 hover:border-blue-500/50",
    icon: "text-blue-400",
    iconBg: "bg-blue-500/10",
    dot: "bg-blue-400",
    shadow: "hover:shadow-blue-500/10",
  },
};

export default function Services() {
  return (
    <section id="services" className="py-24 px-4 sm:px-6 lg:px-8 relative">
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(37,99,235,0.05)_0%,transparent_60%)]" />

      <div className="max-w-7xl mx-auto relative">
        {/* Section header */}
        <div className="text-center mb-16">
          <span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
            Leistungen
          </span>
          <h2 className="text-4xl sm:text-5xl font-black text-white mt-3 mb-4">
            Unsere Services
          </h2>
          <p className="text-slate-400 text-lg max-w-2xl mx-auto">
            Professionelle IT-Lösungen für moderne Infrastruktur &mdash; von
            der Containerisierung bis zur vollständigen Cloud-Migration.
          </p>
        </div>

        {/* Services grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {services.map((service) => {
            const c = colorMap[service.accent as keyof typeof colorMap];
            return (
              <div
                key={service.title}
                className={`group p-6 rounded-2xl bg-gray-900 border ${c.border} transition-all duration-300 hover:-translate-y-1 hover:shadow-xl ${c.shadow}`}
              >
                <div className={`w-14 h-14 rounded-xl ${c.iconBg} ${c.icon} flex items-center justify-center mb-5`}>
                  {service.icon}
                </div>
                <h3 className="text-xl font-bold text-white mb-3">{service.title}</h3>
                <p className="text-slate-400 text-sm leading-relaxed mb-5">{service.description}</p>
                <ul className="space-y-2">
                  {service.features.map((feature) => (
                    <li key={feature} className="flex items-center gap-2 text-sm text-slate-300">
                      <span className={`w-1.5 h-1.5 rounded-full ${c.dot} flex-shrink-0`} />
                      {feature}
                    </li>
                  ))}
                </ul>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}