import React from "react";

function WohnungUndFahrgemeinschaftenPage() {
  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 --- */}
        <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">
            Zenith Marketplace
          </h1>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto mb-6">
            Schulinterne Börse für Wohnungen & Fahrgemeinschaften (SAP Fiori)
          </p>
          <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 Entwicklung (Alpha)</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">Abschlussprojekt (SAP)</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">Full Stack (RAP & Fiori)</span>
            </div>
          </div>
        </header>

        {/* --- PROJEKTÜBERSICHT --- */}
        <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übersicht</h2>
          <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
            <p className="text-lg leading-relaxed text-slate-700">
              Dieses Abschlussprojekt digitalisiert das "Schwarze Brett" unserer Schule.
              Die Anwendung <strong>Zenith Marketplace</strong> ermöglicht Schülern und Lehrern,
              Wohnungsangebote zu inserieren und Fahrgemeinschaften zu organisieren.
            </p>
            <p className="text-lg leading-relaxed text-slate-700">
              Dabei liegt der technische Fokus auf einem robusten <strong>RAP-Backend</strong> sowie einer differenzierten Frontend-Architektur: Die Wohnungsb&ouml;rse wird mittels <strong>SAP Fiori Elements</strong> umgesetzt, w&auml;hrend f&uuml;r die komplexere Logik der Fahrgemeinschaften eine <strong>SAP UI5 Freestyle-Anwendung</strong> zum Einsatz kommt.
            </p>
          </div>
        </section>

        {/* --- PFLICHTENHEFT & UI --- */}
        <section className="mb-16">
          <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">2. Pflichtenheft</h2>

          <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 mb-8 text-center shadow-sm">
            <div className="w-full h-[600px] bg-white rounded-lg border border-slate-100 overflow-hidden mb-3">
              <object
                data="/assets/projects/wohnungenUndFahrgemeinschaften/pflichtenheft.pdf"
                type="application/pdf"
                className="w-full h-full"
              >
                <div className="flex flex-col items-center justify-center h-full p-4 text-center bg-slate-50">
                  <p className="mb-2 text-slate-600 font-medium">Vorschau nicht verfügbar</p>
                  <p className="mb-4 text-sm text-slate-500">Ihr Browser kann dieses PDF nicht direkt anzeigen.</p>
                  <a
                    href="/assets/projects/wohnungenUndFahrgemeinschaften/pflichtenheft.pdf"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors shadow-sm"
                  >
                    Pflichtenheft Herunterladen
                  </a>
                </div>
              </object>
            </div>
            <p className="text-sm text-slate-500 italic">
              Auszug aus dem Pflichtenheft.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-6">
            {/* Card: Fahrgemeinschaften */}
            <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow">
              <div className="flex items-center space-x-3 mb-4 border-b border-slate-100 pb-2">
                <span className="text-2xl">🚗</span>
                <h3 className="text-xl font-bold text-slate-800">Fahrgemeinschaften</h3>
              </div>
              <p className="text-slate-600 mb-4">
                Intelligente Vermittlung von Fahrern und Mitfahrern. Das System unterscheidet technisch komplex zwischen:
              </p>
              <ul className="space-y-2 text-sm text-slate-600 pl-4 list-disc">
                <li>
                  <strong>Einmalige Fahrten:</strong> Für feste Termine mit spezifischem Datum & Uhrzeit.
                </li>
                <li>
                  <strong>Pendler-Modus:</strong> Über eine Bitmaske (z.B. Mo/Mi/Fr) lassen sich wiederkehrende Fahrten einfach verwalten.
                </li>
                <li>
                  <strong>Status-Update:</strong> Die Verfügbarkeit von freien Plätzen wird in Echtzeit angezeigt.
                </li>
              </ul>
            </div>

            {/* Card: Wohnungsmarkt */}
            <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow">
              <div className="flex items-center space-x-3 mb-4 border-b border-slate-100 pb-2">
                <span className="text-2xl">🏠</span>
                <h3 className="text-xl font-bold text-slate-800">Wohnungsmarkt</h3>
              </div>
              <p className="text-slate-600 mb-4">
                Marktplatz für WG-Zimmer und Apartments. Fokus auf einfache Bedienbarkeit und klare Datenstruktur.
              </p>
              <ul className="space-y-2 text-sm text-slate-600 pl-4 list-disc">
                <li>
                  <strong>Smarte Filter:</strong> Suche nach Preis, Zimmeranzahl, Größe und Standort.
                </li>
                <li>
                  <strong>Verwaltung:</strong> Einfaches Erstellen und Bearbeiten der eigenen Inserate.
                </li>
                <li>
                  <strong>Kontakt:</strong> Interessenten werden automatisch mit den hinterlegten Kontaktdaten verknüpft.
                </li>
              </ul>
            </div>
          </div>
        </section>

        {/* --- ARCHITEKTUR --- */}
        <section className="mb-16">
          <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">3. Technische Architektur & Daten</h2>

          <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 mb-8 text-center shadow-sm">
            <div className="w-full h-[600px] bg-white rounded-lg border border-slate-100 overflow-hidden mb-3">
              <object
                data="/assets/projects/wohnungenUndFahrgemeinschaften/datenbankentwurf.pdf"
                type="application/pdf"
                className="w-full h-full"
              >
                <div className="flex flex-col items-center justify-center h-full p-4 text-center bg-slate-50">
                  <p className="mb-2 text-slate-600 font-medium">Vorschau nicht verfügbar</p>
                  <p className="mb-4 text-sm text-slate-500">Ihr Browser kann dieses PDF nicht direkt anzeigen.</p>
                  <a
                    href="/assets/projects/wohnungenUndFahrgemeinschaften/datenbankentwurf.pdf"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors shadow-sm"
                  >
                    PDF Herunterladen
                  </a>
                </div>
              </object>
            </div>
            <p className="text-sm text-slate-500 italic">
              Datenbankmodel
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-6">
            <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
              <h3 className="text-lg font-bold text-slate-800 mb-2">ABAP RAP Backend</h3>
              <p className="text-slate-600 leading-relaxed">
                Das Backend basiert auf dem <strong>RESTful ABAP Programming Model</strong>.
                Ein integriertes <strong>AuditLog</strong> protokolliert alle Änderungen (Erstellen, Bearbeiten, Löschen)
                an Inseraten revisionssicher für Administratoren.
              </p>
            </div>
            <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
              <h3 className="text-lg font-bold text-slate-800 mb-2">Hybrid-Architektur (Images)</h3>
              <p className="text-slate-600 leading-relaxed">
                Um die SAP HANA Datenbank performant zu halten, habe ich eine entkoppelte Lösung gewählt:
                Bilder werden über einen <strong>Python-Microservice</strong> in einer externen <strong>SQLite-Datenbank</strong>
                gespeichert und im Hauptsystem nur über UUIDs referenziert.
              </p>
            </div>
          </div>
        </section>

        {/* --- TECH STACK --- */}
        <section className="mb-16">
          <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">4. Tech Stack</h2>
          <div className="bg-slate-50 p-6 rounded-xl border border-slate-200">
            <div className="flex flex-wrap gap-3">
              {['SAP RAP', 'ABAP CDS', 'SAP Fiori Elements', 'SAP UI5 Freestyle', 'OData V4', 'Python', 'SQLite', 'Audit Logging'].map((tech) => (
                <span key={tech} className="bg-white px-4 py-2 rounded shadow-sm text-center font-semibold text-slate-700 border border-slate-100">
                  {tech}
                </span>
              ))}
            </div>
          </div>
        </section>

        {/* --- ROADMAP --- */}
        <section className="mb-16">
          <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">5. Roadmap & Ausblick</h2>
          <div className="bg-indigo-50 rounded-xl p-6 border border-indigo-100">
            <p className="text-indigo-900 leading-relaxed">
              Aktuell befinde ich mich mitten in der <strong>Implementierungsphase</strong> der Kernfunktionen.
              Sollte es der Zeitplan zulassen, ist als nächster Schritt die Integration von <strong>OpenStreetMap</strong> geplant,
              um Start- und Zielorte der Fahrten direkt auf einer Karte visualisieren zu können.
            </p>
          </div>
        </section>

        {/* --- KI NUTZUNG --- */}
        <section className="mb-16">
          <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">6. KI-Nutzung im Projekt</h2>
          <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
            <p className="text-lg leading-relaxed text-slate-700">
              Bei der Konzeption von Zenith Marketplace hat mich KI beim Ausformulieren und optischen Gestalten des Pflichtenhefts stark entlastet.
            </p>
            <p className="text-lg leading-relaxed text-slate-700">
              Was den eigentlichen SAP- und ABAP-Code angeht, bin ich jedoch noch vorsichtig, da aktuelle KI-Modelle in diesem sehr speziellen SAP-Umfeld oft Schwächen zeigen. Deshalb nutze ich KI hier bewusst nicht zum direkten "Vibe Coding", sondern vielmehr als inspirierenden Sparringspartner für Architektur-Ideen, Optimierungsvorschläge und punktuelle Code-Reviews.
            </p>
          </div>
        </section>

      </div>
    </div>
  );
}

export default WohnungUndFahrgemeinschaftenPage;