"use client";
import { cn } from "../components/cn";

const techStack = [
  {
    title: "Monitoring & Testing",
    items: [
      { name: "GitHub Actions", description: "CI/CD & automation" },
      { name: "Vitest", description: "Unit & integration testing" },
      { name: "Sentry", description: "Error monitoring" },
      { name: "Umami.is", description: "Privacy-friendly analytics" },
    ],
  },
  {
    title: "Software Stack",
    items: [
      { name: "Next.js / React", description: "Frontend & SSR framework" },
      { name: "Tailwind CSS", description: "Utility-first styling" },
      { name: "TypeScript", description: "Typed JavaScript" },
      {
        name: "Custom Library & Webserver API",
        description: "Backend & shared logic",
      },
    ],
  },
  {
    title: "Virtualisation",
    items: [
      { name: "Proxmox", description: "Hypervisor & VM management" },
      { name: "Docker", description: "Containerization" },
      { name: "LXC", description: "Lightweight containers" },
    ],
  },
  {
    title: "OS",
    items: [
      { name: "Ubuntu", description: "Linux distribution" },
      {
        name: "Windows Server 2025",
        description: "Active Directory & domain controller",
      },
      { name: "Debian", description: "Linux distribution" },
    ],
  },
  {
    title: "Servers",
    items: [
      { name: "KVMS from datalix.de", description: "Cloud server provider" },
      { name: "Home server", description: "Self-hosted option" },
    ],
  },
];

export function TechStack() {
  return (
    <section className="w-full max-w-4xl mx-auto px-4 space-y-8 mt-8">
      <div className="text-center space-y-2">
        <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
          Tech Stack
        </h2>
        <p className="text-gray-400 max-w-2xl mx-auto">
          My current infrastructure and software stack, from server to
          monitoring.
        </p>
      </div>

      <div className="space-y-4">
        {techStack.map((layer) => (
          <div
            key={layer.title}
            className="p-6 md:p-8 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-blue-500/5 backdrop-blur-sm border border-cyan-500/20 space-y-5"
          >
            <h3 className="text-2xl font-semibold text-white">{layer.title}</h3>
            <ul className="flex flex-wrap gap-2">
              {layer.items.map((item) => (
                <li
                  key={item.name}
                  className="px-3 py-1 rounded-full text-xs font-semibold bg-cyan-500/20 text-cyan-200 border border-cyan-500/30"
                >
                  <span className="font-medium">{item.name}</span>
                  <span className="ml-2 text-[10px] text-cyan-100/70 font-normal border-l border-cyan-500/30 pl-2">
                    {item.description}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}
