"use client";

import { useState } from "react";

const techStack = [
  {
    name: "Docker",
    category: "Container",
    color: "text-blue-400",
    description:
      "Stellen Sie sich Docker wie eine standardisierte Versandbox vor: Ihre Anwendung und alles, was sie zum Laufen braucht, wird in eine einheitliche Box verpackt. Diese Box funktioniert auf jedem Rechner identisch - egal ob auf Ihrem Laptop, dem Firmenserver oder in der Cloud. Schluss mit 'Bei mir lauft es doch!'. Docker macht Software-Installationen zuverlassig und reproduzierbar.",
  },
  {
    name: "Kubernetes",
    category: "Orchestrierung",
    color: "text-blue-400",
    description:
      "Kubernetes ist der Dirigent Ihres Container-Orchesters. Wenn Sie viele Docker-Anwendungen gleichzeitig betreiben, sorgt Kubernetes dafur, dass immer genug davon laufen, startet automatisch neue, wenn eine ausfallt, und verteilt die Last gleichmaessig. Das Ergebnis: Ihre Anwendung bleibt immer erreichbar - auch wenn einzelne Server ausfallen oder die Nutzerzahl plotzlich steigt.",
  },
  {
    name: "Proxmox VE",
    category: "Virtualisierung",
    color: "text-orange-400",
    description:
      "Proxmox verwandelt einen einzigen leistungsstarken Server in viele virtuelle Computer. Statt funf separate Maschinen zu kaufen, nutzen Sie eine - und teilen sie in funf logische Bereiche auf. Das spart Strom, Platz und Geld. Jeder virtuelle Computer lauft vollstandig isoliert, als ware er ein echter eigener Server. Ideal fur Homelab-Setups oder kleine Unternehmen.",
  },
  {
    name: "Hetzner Cloud",
    category: "Cloud",
    color: "text-orange-400",
    description:
      "Hetzner ist ein deutsches Rechenzentrum, das Server auf Abruf vermietet - zu einem Bruchteil der Kosten von Amazon oder Google. Sie zahlen nur, was Sie nutzen, und Ihre Daten liegen in Deutschland (DSGVO-konform). Wir nutzen Hetzner, um Ihnen professionelle Cloud-Infrastruktur zu fairen Preisen anzubieten: zuverlassig, schnell und datenschutzfreundlich.",
  },
  {
    name: "Terraform",
    category: "Infrastruktur als Code",
    color: "text-purple-400",
    description:
      "Terraform ist wie ein Bauplan fur Ihre IT-Infrastruktur. Statt Server manuell anzuklicken und einzurichten, wird alles als Code aufgeschrieben. Dieser Code lasst sich in Sekunden ausfuhren - und baut Ihre gesamte Infrastruktur automatisch auf. Anderungen sind nachvollziehbar, wiederholbar und sicher ruckgangig zu machen.",
  },
  {
    name: "Ansible",
    category: "Automatisierung",
    color: "text-purple-400",
    description:
      "Ansible ist Ihr digitaler Hausmeister: Es erledigt wiederkehrende Aufgaben auf Servern automatisch. Updates einspielen, Konfigurationen angleichen, Software installieren - auf einem oder hundert Servern gleichzeitig, ohne manuelle Eingriffe. Das spart Zeit, verhindert Fehler und sorgt dafur, dass alle Systeme immer in einem definierten, sicheren Zustand sind.",
  },
  {
    name: "Linux",
    category: "Betriebssystem",
    color: "text-green-400",
    description:
      "Linux ist das meistgenutzte Serverbetriebssystem der Welt - kostenlos, stabil und sicher. Anders als Windows lauft Linux auf Servern oft jahrelang ohne Neustart. Es ist die Grundlage fur fast alles im Internet: Webseiten, Apps, Cloud-Dienste. Wir setzen auf Linux, weil es uns maximale Kontrolle, Stabilitat und Sicherheit fur Ihre Infrastruktur bietet.",
  },
  {
    name: "Nginx",
    category: "Webserver",
    color: "text-green-400",
    description:
      "Nginx (ausgesprochen 'Engine-X') ist der Turksteher Ihrer Webserver-Infrastruktur. Wenn jemand Ihre Webseite aufruft, nimmt Nginx die Anfrage entgegen und leitet sie an den richtigen Dienst weiter - blitzschnell und fur Tausende gleichzeitige Besucher ausgelegt. Er kann auch SSL-Verschlusselung (das 'https://') bereitstellen und als Sicherheitsschicht dienen.",
  },
  {
    name: "Traefik",
    category: "Reverse Proxy",
    color: "text-cyan-400",
    description:
      "Traefik ist ein intelligenter Verkehrsregler fur Ihre Anwendungen. Wenn Sie viele Dienste auf einem Server betreiben - z.B. Nextcloud, Paperless, eine Webseite - erkennt Traefik automatisch, welcher Dienst unter welcher Adresse erreichbar sein soll, und stellt SSL-Zertifikate gleich kostenlos dazu. Kein manuelles Konfigurieren mehr: Traefik lernt selbst, was wo lauft.",
  },
  {
    name: "Grafana",
    category: "Monitoring",
    color: "text-yellow-400",
    description:
      "Grafana verwandelt trockene Serverdaten in ubersichtliche, bunte Dashboards. Sie sehen auf einen Blick: Wie viel CPU nutzt mein Server? Wie viel Speicher ist frei? Gibt es Fehler? Wir richten Grafana so ein, dass Sie jederzeit den Gesundheitszustand Ihrer Infrastruktur uberblicken - wie ein Cockpit fur Ihre IT.",
  },
  {
    name: "Prometheus",
    category: "Monitoring",
    color: "text-yellow-400",
    description:
      "Prometheus ist der fleissige Datensammler hinter Grafana. Er fragt alle paar Sekunden Ihre Server ab und speichert diese Messwerte fur Grafana. Prometheus kann auch Alarm schlagen, wenn etwas nicht stimmt - zum Beispiel wenn ein Server zu voll wird oder ein Dienst nicht mehr antwortet. So erfahren wir Probleme, bevor Sie sie uberhaupt bemerken.",
  },
  {
    name: "GitLab CI",
    category: "CI/CD",
    color: "text-orange-400",
    description:
      "GitLab CI automatisiert den Weg vom geschriebenen Code bis zum laufenden Programm. Jedes Mal, wenn Code geandert wird, startet GitLab automatisch Tests, pruft die Qualitat und spielt die Anderung auf den Server aus - alles ohne manuellen Aufwand. Das Ergebnis: Neue Funktionen und Sicherheitsupdates kommen schneller und zuverlassiger bei Ihnen an.",
  },
];

const stats = [
  { value: "99.9%", label: "Uptime-Garantie" },
  { value: "24/7", label: "Support & Monitoring" },
  { value: "100+", label: "Deployments" },
  { value: "5+", label: "Jahre Erfahrung" },
];

export default function Technologies() {
  const [active, setActive] = useState<string | null>(null);
  const activeTech = techStack.find((t) => t.name === active);

  return (
    <section id="technologies" className="py-24 px-4 sm:px-6 lg:px-8 relative">
      <div className="absolute inset-0 bg-[#111925]" />
      <div className="absolute inset-0 bg-grid opacity-40" />
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(249,115,22,0.06)_0%,transparent_70%)]" />

      <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">
            Tech-Stack
          </span>
          <h2 className="text-4xl sm:text-5xl font-black text-white mt-3 mb-4">
            Unsere Technologien
          </h2>
          <p className="text-slate-400 text-lg max-w-2xl mx-auto">
            Klicken Sie auf eine Technologie und erhalten Sie eine
            verstandliche Erklarung - ganz ohne Fachwissen.
          </p>
        </div>

        {/* Tech grid */}
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-20">
          {techStack.map((tech) => (
            <button
              key={tech.name}
              onClick={() => setActive(tech.name)}
              className="group flex flex-col items-center gap-2 p-4 rounded-xl border bg-gray-900 border-gray-800 hover:border-orange-500/50 hover:-translate-y-1 transition-all duration-300 w-full"
            >
              <span className="text-xs text-orange-500/70 font-mono">{tech.category}</span>
              <span className="font-semibold text-sm text-center text-white group-hover:text-orange-400 transition-colors">
                {tech.name}
              </span>
              <span className="text-[10px] text-slate-600 font-medium mt-0.5">Details</span>
            </button>
          ))}
        </div>

        {/* Stats */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
          {stats.map((stat) => (
            <div
              key={stat.label}
              className="text-center p-6 rounded-2xl bg-gray-900 border border-gray-800"
            >
              <div className="text-4xl font-black text-orange-400 mb-2">{stat.value}</div>
              <div className="text-slate-400 text-sm">{stat.label}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Modal overlay */}
      {activeTech && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center p-4"
          onClick={() => setActive(null)}
        >
          {/* Backdrop */}
          <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" />

          {/* Modal */}
          <div
            className="relative z-10 w-full max-w-lg bg-[#1a2535] border border-orange-500/30 rounded-2xl shadow-2xl shadow-black/60 p-8"
            onClick={(e) => e.stopPropagation()}
          >
            {/* Close button */}
            <button
              onClick={() => setActive(null)}
              className="absolute top-4 right-4 w-8 h-8 rounded-lg bg-gray-800 hover:bg-gray-700 text-slate-400 hover:text-white transition-all flex items-center justify-center text-sm font-bold"
              aria-label="Schliessen"
            >
              x
            </button>

            {/* Header */}
            <div className="mb-5 pr-8">
              <span className="text-orange-400 font-mono text-xs tracking-widest uppercase">
                {activeTech.category}
              </span>
              <h3 className="text-2xl font-black text-white mt-1">{activeTech.name}</h3>
              <div className="w-10 h-0.5 bg-orange-500 rounded mt-3" />
            </div>

            {/* Description */}
            <p className="text-slate-300 text-base leading-relaxed">
              {activeTech.description}
            </p>

            {/* Footer hint */}
            <p className="text-slate-600 text-xs mt-6 text-center">
              Klick ausserhalb oder x zum Schliessen
            </p>
          </div>
        </div>
      )}
    </section>
  );
}
