import React from "react";

function ServerPage() {
  return (
    <div className="bg-slate-50 min-h-screen py-8 font-sans text-slate-800">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <header className="text-center border-b border-slate-200 pb-8 mb-12">
          <h1 className="text-3xl md:text-5xl font-extrabold text-slate-900 mb-6 tracking-tight">Home Server & Infrastruktur</h1>
          <div className="mt-6 flex flex-wrap justify-center gap-4">
            <div className="bg-white px-4 py-2 rounded-full border border-slate-200 shadow-sm flex items-center space-x-2">
              <span className="bg-slate-200 text-slate-700 text-xs font-bold px-2 py-0.5 rounded uppercase tracking-wide">Status</span>
              <span className="text-sm font-medium text-slate-600">In Betrieb / Wartung</span>
            </div>
            <div className="bg-white px-4 py-2 rounded-full border border-slate-200 shadow-sm flex items-center space-x-2">
              <span className="bg-slate-200 text-slate-700 text-xs font-bold px-2 py-0.5 rounded uppercase tracking-wide">Typ</span>
              <span className="text-sm font-medium text-slate-600">Homelab / DevOps</span>
            </div>
            <div className="bg-white px-4 py-2 rounded-full border border-slate-200 shadow-sm flex items-center space-x-2">
              <span className="bg-slate-200 text-slate-700 text-xs font-bold px-2 py-0.5 rounded uppercase tracking-wide">Rolle</span>
              <span className="text-sm font-medium text-slate-600">Administrator & Entwickler</span>
            </div>
          </div>
        </header>

        <section className="mb-16">
          <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">1. Projektüberblick & Architektur</h2>
          <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-6">
            <div className="bg-white p-4 rounded-xl border border-slate-100 shadow-sm mb-6">
              <img
                src="/assets/projects/server/images/server.png"
                alt="Server Struktur Diagramm"
                className="w-full h-auto rounded-lg"
              />
            </div>
            <p className="text-lg leading-relaxed text-slate-700">
              Dieser Server bildet das Herzst&uuml;ck meiner Entwicklungsumgebung. Er hostet nicht nur diese Website,
              sondern dient als vielseitige Plattform f&uuml;r Data Science Experimente, Automatisierung und Lernen.
              Alle Dienste laufen isoliert in <b>Docker-Containern</b>, orchestriert durch <b>Docker Compose</b> und
              verwaltet vom Reverse Proxy <b>Traefik</b>.
            </p>
          </div>
        </section>

        <section className="mb-16">
          <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">2. Kernkomponenten & Dienste</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
              <h3 className="text-xl font-bold text-slate-800 mb-3 pb-2 border-b border-slate-100">Traefik (Reverse Proxy)</h3>
              <p className="text-slate-600 text-sm">
                Zentraler Einstiegspunkt. Routet Anfragen basierend auf Subdomains an die richtigen Container
                und verwaltet automatisch <b>SSL-Zertifikate</b> (Let's Encrypt).
              </p>
            </div>
            <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
              <h3 className="text-xl font-bold text-slate-800 mb-3 pb-2 border-b border-slate-100">JupyterHub</h3>
              <p className="text-slate-600 text-sm">
                Multi-User Umgebung für <b>Data Science</b>. Startet für jeden Nutzer isolierte Container
                mit vorinstallierten Libraries wie Pandas, TensorFlow und NumPy.
              </p>
            </div>
            <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
              <h3 className="text-xl font-bold text-slate-800 mb-3 pb-2 border-b border-slate-100">CI/CD Pipeline</h3>
              <p className="text-slate-600 text-sm">
                Eine Flask-Anwendung lauscht auf <b>GitHub Webhooks</b>. Bei neuen Pushes wird die Website
                automatisch neu gebaut und deployed.
              </p>
            </div>
            <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
              <h3 className="text-xl font-bold text-slate-800 mb-3 pb-2 border-b border-slate-100">Sicherheit</h3>
              <p className="text-slate-600 text-sm">
                Zugriffsschutz durch <b>WireGuard VPN</b> und SSH (Key-Auth). Interne Dienste sind
                nicht öffentlich erreichbar.
              </p>
            </div>
            <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
              <h3 className="text-xl font-bold text-slate-800 mb-3 pb-2 border-b border-slate-100">Nginx</h3>
              <p className="text-slate-600 text-sm">
                High-Performance Webserver für die Auslieferung der statischen React-Build-Dateien
                dieser Portfolio-Seite.
              </p>
            </div>
          </div>
        </section>

        <section className="mb-16">
          <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">3. Tech Stack</h2>
          <div className="bg-slate-50 p-6 rounded-xl border border-slate-200">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Docker</div>
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Docker Compose</div>
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Traefik</div>
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Nginx</div>
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Linux (Ubuntu)</div>
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Python (Flask)</div>
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Bash Scripting</div>
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">WireGuard</div>
            </div>
          </div>
        </section>

        <section className="mb-16">
          <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">4. Learnings & KI-Einsatz</h2>
          <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
            <div className="flex flex-col md:flex-row gap-6">
              <div className="flex-1">
                <h3 className="text-lg font-bold text-slate-800 mb-2">Wichtigste Erkenntnisse</h3>
                <ul className="list-disc pl-5 space-y-2 text-slate-700">
                  <li>Verständnis von Container-Orchestrierung in Produktionsumgebungen.</li>
                  <li>Wichtigkeit von automatisierten Deployments (CI/CD) für effizientes Arbeiten.</li>
                  <li>Netzwerk-Routing und SSL-Management mit Reverse Proxies.</li>
                </ul>
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-bold text-slate-800 mb-2">KI als "Co-Admin"</h3>
                <div className="bg-indigo-50 p-4 rounded-lg border border-indigo-100 text-indigo-900 text-sm">
                  <p>
                    LLMs waren eine große Hilfe beim Debugging komplexer <b>Docker-Compose</b> Konfigurationen
                    und beim Schreiben von robusten Shell-Skripten. Sie dienten als interaktive Dokumentation
                    für Linux-Server-Administration.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

      </div>
    </div>
  );
}

export default ServerPage;