"use client";

const ENABLE_TECH_STACK = false;

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 provider" },
      { name: "Home server", description: "Self-hosted option" },
      { name: "AWS", description: "Cloud computing" }
    ],
  },
];

export function TechStack() {
  if (!ENABLE_TECH_STACK) {
    // Disabled
    return (
      <section className="w-full max-w-4xl mx-auto px-4 space-y-10 mt-16 mb-24">
        <div className="text-center space-y-3">
          <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500 sm:text-4xl">
            Tech Stack
          </h2>
          <p className="mx-auto max-w-2xl text-sm text-gray-400 md:text-base">
            This section is currently disabled. It may be re-enabled in the future, but for now, it's hidden.
          </p>
        </div>
      </section>
    )
  }
  return (
    <section className="w-full max-w-4xl mx-auto px-4 space-y-10 mt-16 mb-24">
      <div className="text-center space-y-3">
        <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500 sm:text-4xl">
          Tech Stack
        </h2>
        <p className="mx-auto max-w-2xl text-sm text-gray-400 md:text-base">
          A overview of the tools and technologies I use to build and host my applications.
        </p>
      </div>

      <div className="max-w-2xl mx-auto space-y-4">
        {techStack.map((layer) => (
          <div
            key={layer.title}
            className="p-5 rounded-2xl bg-gradient-to-br from-cyan-500/[0.07] to-blue-500/[0.03] backdrop-blur-md border border-cyan-500/10 hover:border-cyan-500/30 transition-all duration-500"
          >
            <h3 className="text-lg font-bold text-white mb-3 flex items-center gap-2">
              <span className="w-1.5 h-1.5 rounded-full bg-cyan-500" />
              {layer.title}
            </h3>
            <ul className="space-y-3">
              {layer.items.map((item) => (
                <li
                  key={item.name}
                  className="flex flex-col group cursor-default"
                >
                  <span className="text-sm font-semibold text-cyan-100 group-hover:text-cyan-400 transition-colors">
                    {item.name}
                  </span>
                  <span className="text-[11px] text-gray-500 font-normal leading-relaxed">
                    {item.description}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}
