import React, { useEffect } from "react";
import mermaid from "mermaid";

const Wireframe = ({ title, children }) => (
    <div className="w-full md:w-1/2 lg:w-1/3 px-2 mb-4">
        <div className="h-full bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden flex flex-col">
            <div className="bg-slate-50 px-4 py-2 border-b border-slate-200">
                <h5 className="text-center font-semibold text-slate-700 m-0 text-sm md:text-base">{title}</h5>
            </div>
            <div className="p-2 flex-grow flex justify-center items-center overflow-hidden bg-slate-100">
                <div className="bg-white w-full h-full border border-slate-200 rounded-lg shadow-inner p-3 flex flex-col overflow-hidden relative" style={{ aspectRatio: '9 / 19.5' }}>
                    {children}
                </div>
            </div>
        </div>
    </div>
);

function KrimiDinner() {
    useEffect(() => {
        const initMermaid = async () => {
            try {
                mermaid.initialize({ startOnLoad: false, theme: 'neutral' });
                const mermaidEls = document.querySelectorAll('.mermaid');
                if (mermaidEls.length > 0) {
                    await mermaid.run();
                }
            } catch (err) {
                console.error("Mermaid initialization or run error:", err);
            }
        };

        // Slight delay to ensure DOM is ready
        const timer = setTimeout(() => {
            initMermaid();
        }, 100);

        return () => clearTimeout(timer);
    }, []);

    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">Projekt-Blaupause: KI-Krimi-Dinner "Projekt Chimera"</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">Pausiert</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">Autor</span>
                            <span className="text-sm font-medium text-slate-600">D. Schuhbaum & S. Altschäffl</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">Datum</span>
                            <span className="text-sm font-medium text-slate-600">03.10.2025</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ü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">
                            "Projekt Chimera" ist ein hybrides Krimi-Dinner-Erlebnis, das
                            physische soziale Interaktion mit einer digitalen App-Komponente
                            verbindet. Das Alleinstellungsmerkmal ist der Einsatz einer
                            zweistufigen KI-Architektur, die nicht nur einzigartige narrative
                            Szenarien generiert, sondern diese auch proaktiv auf logische
                            Konsistenz validiert und korrigiert.
                        </p>
                        <p className="text-lg leading-relaxed text-slate-700">
                            Die Architektur basiert auf einer klaren Trennung:{" "}
                            <strong className="font-bold text-indigo-700">Supabase</strong> dient als dedizierter Service für die
                            Benutzerauthentifizierung, während alle Spieldaten (Szenarien,
                            Spieler, Spielstände) in einer{" "}
                            <strong className="font-bold text-indigo-700">separaten, dedizierten PostgreSQL-Datenbank</strong>{" "}
                            gehostet werden. Ein zentrales <strong className="font-bold text-indigo-700">FastAPI-Backend</strong>{" "}
                            fungiert als sichere Schnittstelle zwischen den Clients und
                            beiden Diensten.
                        </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. Narratives Design & Validierung</h2>
                    <p className="text-lg text-slate-700 mb-6">
                        Die Generierung jedes Spiels folgt einem strengen, zweistufigen
                        Prozess, um die narrative Qualität und logische Integrität zu
                        gewährleisten.
                    </p>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                        <div className="h-full">
                            <div className="h-full bg-white rounded-xl border border-slate-200 shadow-sm p-6 hover:shadow-md transition-shadow">
                                <h3 className="text-xl font-bold text-slate-800 mb-4 pb-2 border-b border-slate-100">Schritt 1: Kreative Generierung (Der "Autor")</h3>
                                <ul className="list-disc pl-5 space-y-2 text-slate-700">
                                    <li>Hintergrundgeschichte</li>
                                    <li>Charaktere</li>
                                    <li>Geheimnisse & Ziele</li>
                                    <li>Der Mord & lückenloser Zeitstrahl</li>
                                    <li>Beziehungsgeflecht</li>
                                    <li>Hinweise</li>
                                </ul>
                            </div>
                        </div>
                        <div className="h-full">
                            <div className="h-full bg-white rounded-xl border border-slate-200 shadow-sm p-6 hover:shadow-md transition-shadow">
                                <h3 className="text-xl font-bold text-slate-800 mb-4 pb-2 border-b border-slate-100">Schritt 2: Logische Validierung & Korrektur (Der "Logik-Lektor")</h3>
                                <ul className="list-disc pl-5 space-y-2 text-slate-700">
                                    <li>Widersprüche in Zeitlinien</li>
                                    <li>Motiv-Konsistenz</li>
                                    <li>Hinweis-Validität</li>
                                    <li>Charakter-Konsistenz</li>
                                    <li>Regelkonformität</li>
                                </ul>
                            </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">3. Technische Architektur</h2>
                    <p className="text-lg text-slate-700 mb-6">
                        Die Architektur ist auf maximale Kontrolle und Skalierbarkeit ausgelegt. Die React Native-Clients kommunizieren ausschließlich mit dem FastAPI-Backend. Echtzeit-Updates werden über eine WebSocket-Verbindung gepusht.
                    </p>
                    <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm overflow-x-auto">
                        <div className="mermaid flex justify-center">
                            {`graph TD
    subgraph "Spieler-Geräte"
        P1["React Native Apps"]
    end

    subgraph "Authentifizierung"
        Auth["Supabase Auth"]
    end

    subgraph "Sicheres Backend"
        FastAPI["FastAPI Server <br> REST & WebSockets"]
    end

    subgraph "Spieldaten-Bank"
        PG_DB["PostgreSQL DB"]
    end

    subgraph "Externe Dienste"
        OAI["OpenAI API"]
    end

    %% Verbindungen
    P1 -- "1. Login" --> Auth
    P1 -- "2. API Calls (mit Token)" --> FastAPI

    FastAPI -- "3. KI Call" --> OAI
    FastAPI -- "4. DB-Zugriff" --> PG_DB

    FastAPI -- "5. WebSocket Updates" --> P1`}
                        </div>
                    </div>

                    <div className="mt-8 bg-slate-50 p-6 rounded-xl border border-slate-200">
                        <h3 className="text-lg font-bold text-slate-800 mb-4">Datenfluss-Beschreibung:</h3>
                        <ol className="list-decimal pl-5 space-y-3 text-slate-700">
                            <li><strong>Authentifizierung:</strong> Benutzer authentifiziert sich bei Supabase Auth und erhält ein JWT.</li>
                            <li><strong>API-Anfragen:</strong> Die App sendet Anfragen mit dem JWT an den FastAPI-Server.</li>
                            <li><strong>KI-Generierung:</strong> FastAPI ruft die OpenAI-API für die Spielerstellung auf.</li>
                            <li><strong>Datenbank-Interaktion:</strong> FastAPI ist die einzige Komponente, die mit der PostgreSQL-DB kommuniziert.</li>
                            <li><strong>Echtzeit-Updates:</strong> Clients bauen eine WebSocket-Verbindung zum FastAPI-Server auf.</li>
                        </ol>
                    </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. User Interface (UI) Konzept</h2>
                    <p className="text-lg text-slate-700 mb-8">Die UI-Konzepte werden als klare, moderne Wireframes visualisiert, um den gesamten App-Flow darzustellen.</p>

                    <div className="flex flex-wrap -mx-2">
                        <Wireframe title="1. Login">
                            <div className="text-center pt-4 pb-3">
                                <h4 className="font-bold text-lg text-slate-800">PROJEKT CHIMERA</h4>
                            </div>
                            <div className="px-3 flex-grow flex flex-col justify-center">
                                <input type="text" placeholder="E-Mail-Adresse" className="mb-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2 border" />
                                <input type="password" placeholder="Passwort" className="mb-3 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2 border" />
                                <button className="w-full bg-blue-600 text-white font-semibold py-2 rounded hover:bg-blue-700 transition">Anmelden</button>
                                <p className="text-center text-xs text-gray-500 mt-2">Noch kein Konto? <a href="#" className="text-blue-600 hover:underline">Jetzt registrieren</a></p>
                            </div>
                        </Wireframe>

                        <Wireframe title="2. Registrierung">
                            <div className="text-center pt-4 pb-3">
                                <h4 className="font-bold text-lg text-slate-800">Konto erstellen</h4>
                            </div>
                            <div className="px-3 flex-grow flex flex-col justify-center">
                                <input type="text" placeholder="E-Mail-Adresse" className="mb-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2 border" />
                                <input type="password" placeholder="Passwort" className="mb-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2 border" />
                                <input type="password" placeholder="Passwort bestätigen" className="mb-3 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2 border" />
                                <button className="w-full bg-blue-600 text-white font-semibold py-2 rounded hover:bg-blue-700 transition">Registrieren</button>
                                <p className="text-center text-xs text-gray-500 mt-2">Bereits ein Konto? <a href="#" className="text-blue-600 hover:underline">Zum Login</a></p>
                            </div>
                        </Wireframe>

                        <Wireframe title="3. Home Dashboard">
                            <div className="p-2 flex justify-between items-center border-b border-gray-200">
                                <h4 className="font-bold text-sm mb-0">Deine Spiele</h4>
                                <button className="text-blue-600 text-xs hover:underline">Logout</button>
                            </div>
                            <div className="p-2 flex-grow overflow-y-auto">
                                <div className="mb-2 bg-white border rounded p-2 shadow-sm">
                                    <p className="font-bold mb-1 text-sm">Tech-Konferenz 2035</p>
                                    <p className="text-xs text-gray-500 mb-2">Status: <span className="font-semibold text-green-600">Aktiv (Runde 2/3)</span></p>
                                    <button className="w-full bg-blue-600 text-white text-xs py-1 rounded hover:bg-blue-700">Weiterspielen</button>
                                </div>
                                <div className="bg-white border rounded p-2 shadow-sm">
                                    <p className="font-bold mb-1 text-sm">Villa Vendetta</p>
                                    <p className="text-xs text-gray-500 mb-2">Status: <span className="font-semibold text-gray-500">Lobby (0 Spieler)</span></p>
                                    <button className="w-full bg-blue-600 text-white text-xs py-1 rounded hover:bg-blue-700">Zur Lobby</button>
                                </div>
                            </div>
                            <div className="p-2 border-t border-gray-200">
                                <div className="flex gap-2">
                                    <button className="flex-1 bg-green-600 text-white text-xs py-1 rounded hover:bg-green-700">Neues Spiel</button>
                                    <button className="flex-1 bg-gray-600 text-white text-xs py-1 rounded hover:bg-gray-700">Beitreten</button>
                                </div>
                            </div>
                        </Wireframe>

                        <Wireframe title="4. Spiel erstellen (Host)">
                            <div className="text-center pt-3 pb-2 border-b border-gray-200">
                                <h4 className="font-bold text-sm">Neues Spiel erstellen</h4>
                            </div>
                            <div className="px-3 py-3 flex-grow">
                                <label className="block font-semibold text-xs mb-1">Szenario-Beschreibung</label>
                                <textarea placeholder="z.B. Ein Mord auf einer Tech-Konferenz im Jahr 2035..." rows={3} className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-xs p-2 border mb-3"></textarea>

                                <label className="block font-semibold text-xs mb-1">Rundenanzahl</label>
                                <div className="flex items-center">
                                    <input type="range" min="2" max="5" defaultValue="3" className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" />
                                    <span className="font-bold text-lg ms-3">3</span>
                                </div>
                                <p className="text-gray-500 text-xs mt-3">Die Spieleranzahl ist flexibel (mind. 3 Spieler) und wird in der Lobby bestimmt.</p>
                            </div>
                            <div className="px-3 pb-3">
                                <button className="w-full bg-blue-600 text-white font-semibold py-2 rounded hover:bg-blue-700 text-xs">Szenario generieren & Lobby öffnen</button>
                            </div>
                        </Wireframe>

                        <Wireframe title="5. Spiel beitreten (Spieler)">
                            <div className="text-center pt-4 pb-3">
                                <h4 className="font-bold text-lg text-slate-800">Spiel beitreten</h4>
                            </div>
                            <div className="px-3 flex-grow flex flex-col justify-center">
                                <label className="font-semibold text-xs text-center mb-2">Gib den Spiel-Code ein</label>
                                <input type="text" placeholder="ABC-123" className="mb-3 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-xl text-center p-2 border tracking-widest uppercase" />
                                <button className="w-full bg-blue-600 text-white font-semibold py-2 rounded hover:bg-blue-700 text-sm">Lobby beitreten</button>
                            </div>
                        </Wireframe>

                        <Wireframe title="6. Host-Lobby">
                            <div className="text-center pt-3 pb-2 border-b border-gray-200">
                                <p className="text-xs text-gray-500 mb-0">Spiel-Lobby</p>
                                <h4 className="font-bold text-sm">Tech-Konferenz 2035</h4>
                            </div>
                            <div className="px-3 py-3 text-center flex-grow">
                                <p className="text-xs text-gray-500">Teile diesen Code mit deinen Mitspielern:</p>
                                <div className="my-2 p-3 border-2 border-dashed border-blue-200 rounded bg-blue-50 text-blue-700">
                                    <span className="font-bold text-xl tracking-widest">GHY-781</span>
                                </div>
                                <h5 className="font-semibold text-left text-xs mt-3 mb-2">Beigetretene Spieler (3)</h5>
                                <ul className="text-left text-xs space-y-1">
                                    <li className="flex justify-between items-center bg-gray-50 p-2 rounded">Maria <button className="text-red-500 hover:text-red-700 font-bold p-1">X</button></li>
                                    <li className="flex justify-between items-center bg-gray-50 p-2 rounded">Jonas <button className="text-red-500 hover:text-red-700 font-bold p-1">X</button></li>
                                    <li className="flex justify-between items-center bg-gray-50 p-2 rounded">Sandra <button className="text-red-500 hover:text-red-700 font-bold p-1">X</button></li>
                                </ul>
                            </div>
                            <div className="px-3 pb-3 space-y-2">
                                <button className="w-full border border-red-500 text-red-500 hover:bg-red-50 py-1 rounded text-xs">Szenario verwerfen & Neu generieren</button>
                                <button className="w-full bg-green-600 text-white font-semibold py-2 rounded hover:bg-green-700 text-xs">Spiel starten (3 Spieler)</button>
                            </div>
                        </Wireframe>

                        <Wireframe title="7. Spieler-Ansicht (Rolle)">
                            <div className="p-2 text-center border-b border-gray-200">
                                <p className="text-xs text-gray-500 mb-0">Deine Rolle</p>
                                <h4 className="font-bold text-sm">Dr. Aris Thorne</h4>
                            </div>
                            <div className="flex border-b border-gray-200">
                                <button className="flex-1 py-2 text-xs border-b-2 border-blue-600 font-semibold text-blue-600">Rolle</button>
                                <button className="flex-1 py-2 text-xs text-gray-500 hover:text-gray-700">Hinweise</button>
                                <button className="flex-1 py-2 text-xs text-gray-500 hover:text-gray-700">Charaktere</button>
                                <button className="flex-1 py-2 text-xs text-gray-500 hover:text-gray-700">Zeitstrahl</button>
                            </div>
                            <div className="p-3 flex-grow overflow-y-auto text-xs">
                                <h5 className="font-bold mb-1">Deine Ziele:</h5>
                                <ul className="list-disc pl-4 mb-3 space-y-1">
                                    <li>Finde heraus, wer deine Forschung sabotiert hat.</li>
                                    <li>Verhindere, dass dein Geheimnis ans Licht kommt.</li>
                                </ul>
                                <h5 className="font-bold mb-1">Deine Geheimnisse:</h5>
                                <p className="text-gray-600">Du hast vor einem Monat bei einem nicht genehmigten Experiment die Stromversorgung der Station überlastet, was zu einem kritischen Ausfall führte. Nur das Opfer wusste davon.</p>
                            </div>
                        </Wireframe>

                        <Wireframe title="8. Spieler-Ansicht (Hinweise)">
                            <div className="p-2 text-center border-b border-gray-200">
                                <p className="text-xs text-gray-500 mb-0">Deine Rolle</p>
                                <h4 className="font-bold text-sm">Dr. Aris Thorne</h4>
                            </div>
                            <div className="flex border-b border-gray-200">
                                <button className="flex-1 py-2 text-xs text-gray-500 hover:text-gray-700">Rolle</button>
                                <button className="flex-1 py-2 text-xs border-b-2 border-blue-600 font-semibold text-blue-600 relative">
                                    Hinweise
                                    <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
                                </button>
                                <button className="flex-1 py-2 text-xs text-gray-500 hover:text-gray-700">Charaktere</button>
                                <button className="flex-1 py-2 text-xs text-gray-500 hover:text-gray-700">Zeitstrahl</button>
                            </div>
                            <div className="p-3 flex-grow overflow-y-auto text-xs space-y-3">
                                <div>
                                    <h5 className="font-bold mb-1">Runde 2 (18:00 - 19:00 Uhr)</h5>
                                    <div className="bg-yellow-50 border border-yellow-200 p-2 rounded">
                                        <p className="font-semibold text-yellow-800 mb-0">HINWEIS #3</p>
                                        <p className="text-yellow-800 mt-1">Ein zerrissener Brief wurde gefunden. Die Worte "Schulden" und "letzte Warnung" sind lesbar.</p>
                                    </div>
                                </div>
                                <div className="opacity-75">
                                    <h5 className="font-bold mb-1">Runde 1 (16:00 - 18:00 Uhr)</h5>
                                    <div className="bg-gray-100 border border-gray-200 p-2 rounded">
                                        <p className="font-semibold text-gray-700 mb-0">HINWEIS #1</p>
                                        <p className="text-gray-600 mt-1">Das Opfer wurde mit einem schweren Gegenstand erschlagen.</p>
                                    </div>
                                </div>
                            </div>
                        </Wireframe>

                        <Wireframe title="9. Spieler-Ansicht (Charaktere)">
                            <div className="p-2 text-center border-b border-gray-200">
                                <p className="text-xs text-gray-500 mb-0">Deine Rolle</p>
                                <h4 className="font-bold text-sm">Dr. Aris Thorne</h4>
                            </div>
                            <div className="flex border-b border-gray-200">
                                <button className="flex-1 py-2 text-xs text-gray-500 hover:text-gray-700">Rolle</button>
                                <button className="flex-1 py-2 text-xs text-gray-500 hover:text-gray-700">Hinweise</button>
                                <button className="flex-1 py-2 text-xs border-b-2 border-blue-600 font-semibold text-blue-600">Charaktere</button>
                                <button className="flex-1 py-2 text-xs text-gray-500 hover:text-gray-700">Zeitstrahl</button>
                            </div>
                            <div className="p-3 flex-grow overflow-y-auto text-xs">
                                <div className="space-y-1">
                                    <div className="p-2 hover:bg-gray-50 rounded cursor-pointer border border-transparent hover:border-gray-200">
                                        <p className="font-bold mb-0">Evelyn Reed</p>
                                        <p className="text-gray-500 mb-0">Investorin</p>
                                    </div>
                                    <div className="p-2 hover:bg-gray-50 rounded cursor-pointer border border-transparent hover:border-gray-200">
                                        <p className="font-bold mb-0">Ivan Petrov</p>
                                        <p className="text-gray-500 mb-0">Sicherheitschef</p>
                                    </div>
                                </div>
                            </div>
                        </Wireframe>

                        <Wireframe title="10. Spieler-Ansicht (Zeitstrahl)">
                            <div className="p-2 text-center border-b border-gray-200">
                                <p className="text-xs text-gray-500 mb-0">Deine Rolle</p>
                                <h4 className="font-bold text-sm">Dr. Aris Thorne</h4>
                            </div>
                            <div className="flex border-b border-gray-200">
                                <button className="flex-1 py-2 text-xs text-gray-500 hover:text-gray-700">Rolle</button>
                                <button className="flex-1 py-2 text-xs text-gray-500 hover:text-gray-700">Hinweise</button>
                                <button className="flex-1 py-2 text-xs text-gray-500 hover:text-gray-700">Charaktere</button>
                                <button className="flex-1 py-2 text-xs border-b-2 border-blue-600 font-semibold text-blue-600">Zeitstrahl</button>
                            </div>
                            <div className="p-3 flex-grow overflow-y-auto text-xs">
                                <ul className="space-y-3">
                                    <li className="relative pl-3 border-l-2 border-gray-200">
                                        <p className="font-bold mb-0">16:00 Uhr</p>
                                        <p className="text-gray-500">Beginn der Konferenz-Keynote.</p>
                                    </li>
                                    <li className="relative pl-3 border-l-2 border-gray-200">
                                        <p className="font-bold mb-0">17:15 Uhr</p>
                                        <p className="text-gray-500">Opfer verlässt den Saal für ein Telefonat.</p>
                                    </li>
                                    <li className="relative pl-3 border-l-2 border-red-200">
                                        <p className="font-bold mb-0 text-red-600">17:30 Uhr - Mordzeitpunkt</p>
                                        <p className="text-gray-500">Stromausfall im Westflügel.</p>
                                    </li>
                                    <li className="relative pl-3 border-l-2 border-gray-200">
                                        <p className="font-bold mb-0">17:45 Uhr</p>
                                        <p className="text-gray-500">Leiche wird im Serverraum gefunden.</p>
                                    </li>
                                </ul>
                            </div>
                        </Wireframe>

                        <Wireframe title="11. Abstimmung">
                            <div className="text-center pt-3 pb-2 border-b border-gray-200">
                                <p className="text-xs text-gray-500 mb-0">Runde 3/3</p>
                                <h4 className="font-bold text-sm">Wer ist der Mörder?</h4>
                            </div>
                            <div className="px-3 py-3 flex-grow overflow-y-auto">
                                <p className="text-xs text-center text-gray-500 mb-3">Wähle den Spieler aus, den du für den Täter hältst.</p>
                                <div className="space-y-2">
                                    <button className="w-full text-left p-2 border rounded hover:bg-gray-50 flex flex-col opacity-50 cursor-not-allowed">
                                        <span className="font-bold text-xs">Dr. Aris Thorne (Du)</span>
                                        <span className="text-[10px] text-gray-500">KI-Ethiker</span>
                                    </button>
                                    <button className="w-full text-left p-2 border rounded hover:bg-blue-50 hover:border-blue-300 flex flex-col">
                                        <span className="font-bold text-xs">Evelyn Reed</span>
                                        <span className="text-[10px] text-gray-500">Investorin</span>
                                    </button>
                                    <button className="w-full text-left p-2 border rounded hover:bg-blue-50 hover:border-blue-300 flex flex-col">
                                        <span className="font-bold text-xs">Ivan Petrov</span>
                                        <span className="text-[10px] text-gray-500">Sicherheitschef</span>
                                    </button>
                                </div>
                            </div>
                            <div className="px-3 pb-3">
                                <button className="w-full bg-blue-600 text-white font-semibold py-2 rounded hover:bg-blue-700 text-xs disabled:opacity-50" disabled>Stimme abgeben</button>
                            </div>
                        </Wireframe>

                        <Wireframe title="12. Auflösung">
                            <div className="text-center pt-3 pb-2 border-b border-red-200 bg-red-50">
                                <h4 className="font-bold text-sm text-red-800">Der Mörder war...</h4>
                                <p className="text-lg font-bold text-red-900">Ivan Petrov!</p>
                            </div>
                            <div className="p-3 flex-grow overflow-y-auto text-xs">
                                <p className="mb-2">Sein Motiv war Rache, da das Opfer ihn erpresst hat. Die Mordwaffe war ein schwerer Schraubenschlüssel aus dem Werkzeugraum.</p>
                                <h5 className="font-semibold pt-2 text-xs border-t border-gray-100 mt-2 mb-1">Abstimmungsergebnis</h5>
                                <ul className="space-y-1">
                                    <li>Du hast für <strong>Evelyn Reed</strong> gestimmt.</li>
                                    <li className="text-green-600 font-semibold">Maria hat für Ivan Petrov gestimmt. (Korrekt!)</li>
                                    <li className="text-green-600 font-semibold">Jonas hat für Ivan Petrov gestimmt. (Korrekt!)</li>
                                </ul>
                            </div>
                            <div className="p-3 border-t border-gray-200">
                                <button className="w-full bg-blue-600 text-white font-semibold py-2 rounded hover:bg-blue-700 text-xs">Alle Geschichten lesen</button>
                            </div>
                        </Wireframe>

                        <Wireframe title="13. Host Notfall-Dashboard">
                            <div className="text-center pt-3 pb-2 border-b border-gray-200">
                                <h4 className="font-bold text-sm text-red-600">Host Notfall-Dashboard</h4>
                                <p className="text-[10px] text-gray-500">Spoiler-freie Steuerung (im Spiel)</p>
                            </div>
                            <div className="px-3 py-3 flex-grow space-y-3">
                                <div>
                                    <h5 className="font-semibold text-xs mb-1">Spiel-Steuerung</h5>
                                    <div className="grid grid-cols-2 gap-2">
                                        <button className="bg-yellow-500 text-white text-xs py-1 rounded hover:bg-yellow-600">Spiel Pausieren</button>
                                        <button className="bg-cyan-500 text-white text-xs py-1 rounded hover:bg-cyan-600">Nächste Runde erzwingen</button>
                                    </div>
                                </div>
                                <div>
                                    <h5 className="font-semibold text-xs mb-1">Experten-Optionen</h5>
                                    <button className="w-full bg-gray-800 text-white text-xs py-1 rounded hover:bg-gray-900">Hinweise neu generieren</button>
                                    <p className="text-gray-400 text-[10px] mt-0.5">Achtung: Generiert nur die Hinweise für die AKTUELLE Runde neu.</p>
                                </div>
                                <div>
                                    <h5 className="font-semibold text-xs mb-1 text-red-600">Gefahrenzone</h5>
                                    <button className="w-full bg-red-600 text-white text-xs py-1 rounded hover:bg-red-700">Spiel komplett neu starten</button>
                                    <p className="text-gray-400 text-[10px] mt-0.5">Beendet das Spiel für alle und startet die Lobby neu.</p>
                                </div>
                            </div>
                        </Wireframe>
                    </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">5. API-Endpunkte & Datenbank-Interaktion</h2>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div>
                            <h3 className="text-xl font-bold text-slate-800 mb-4">FastAPI-Backend</h3>
                            <ul className="bg-white rounded-lg border border-slate-200 divide-y divide-slate-100 overflow-hidden shadow-sm">
                                <li className="px-4 py-3 text-sm font-mono text-indigo-600 bg-slate-50">POST /game/create</li>
                                <li className="px-4 py-3 text-sm font-mono text-indigo-600">POST /game/{'{game_code}'}/join</li>
                                <li className="px-4 py-3 text-sm font-mono text-indigo-600 bg-slate-50">GET /game/{'{game_code}'}/state</li>
                                <li className="px-4 py-3 text-sm font-mono text-indigo-600">POST /game/{'{game_code}'}/vote</li>
                                <li className="px-4 py-3 text-sm font-mono text-indigo-600 bg-slate-50">GET /game/{'{game_code}'}/character</li>
                                <li className="px-4 py-3 text-sm font-mono text-indigo-600">/ws/{'{game_code}'}</li>
                            </ul>
                        </div>
                        <div>
                            <h3 className="text-xl font-bold text-slate-800 mb-4">Client-Interaktionen</h3>
                            <ul className="space-y-3 text-slate-700">
                                <li className="flex items-start">
                                    <span className="flex-shrink-0 h-1.5 w-1.5 rounded-full bg-indigo-500 mt-2 mr-2"></span>
                                    <span><strong className="text-slate-900">Supabase Auth (`supabase-js`):</strong> Nur für Login, Registrierung und Auth-Zustand.</span>
                                </li>
                                <li className="flex items-start">
                                    <span className="flex-shrink-0 h-1.5 w-1.5 rounded-full bg-indigo-500 mt-2 mr-2"></span>
                                    <span><strong className="text-slate-900">API-Client (z.B. Axios):</strong> Für alle HTTP-Anfragen an das FastAPI-Backend.</span>
                                </li>
                                <li className="flex items-start">
                                    <span className="flex-shrink-0 h-1.5 w-1.5 rounded-full bg-indigo-500 mt-2 mr-2"></span>
                                    <span><strong className="text-slate-900">WebSocket-Client:</strong> Für Echtzeit-Verbindung zum Backend.</span>
                                </li>
                            </ul>
                        </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">6. Datenmodelle</h2>
                    <p className="text-lg text-slate-700 mb-6">Die dedizierte PostgreSQL-Datenbank enthält die gesamte Spiellogik.</p>

                    <h3 className="text-xl font-bold text-slate-800 mb-4">Tabelle: `games`</h3>
                    <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden mb-8">
                        <div className="overflow-x-auto">
                            <table className="min-w-full divide-y divide-slate-200">
                                <thead className="bg-slate-50">
                                    <tr>
                                        <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Spalte</th>
                                        <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Datentyp</th>
                                        <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Beschreibung</th>
                                    </tr>
                                </thead>
                                <tbody className="bg-white divide-y divide-slate-200">
                                    <tr><td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-slate-600">id</td><td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">uuid</td><td className="px-6 py-4 text-sm text-slate-700">Eindeutige ID für ein Spiel.</td></tr>
                                    <tr><td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-slate-600">host_id</td><td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">uuid</td><td className="px-6 py-4 text-sm text-slate-700">Referenz auf die User-ID des Hosts.</td></tr>
                                    <tr><td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-slate-600">game_code</td><td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">varchar</td><td className="px-6 py-4 text-sm text-slate-700">Kurzer Code zum Beitreten.</td></tr>
                                    <tr><td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-slate-600">status</td><td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">varchar</td><td className="px-6 py-4 text-sm text-slate-700">setup, lobby, active, finished.</td></tr>
                                    <tr><td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-slate-600">game_data</td><td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">jsonb</td><td className="px-6 py-4 text-sm text-slate-700">Das komplette KI-generierte Szenario.</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <h3 className="text-xl font-bold text-slate-800 mb-4">Tabelle: `players`</h3>
                    <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
                        <div className="overflow-x-auto">
                            <table className="min-w-full divide-y divide-slate-200">
                                <thead className="bg-slate-50">
                                    <tr>
                                        <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Spalte</th>
                                        <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Datentyp</th>
                                        <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Beschreibung</th>
                                    </tr>
                                </thead>
                                <tbody className="bg-white divide-y divide-slate-200">
                                    <tr><td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-slate-600">id</td><td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">uuid</td><td className="px-6 py-4 text-sm text-slate-700">Eindeutiger Eintrag für einen Spieler.</td></tr>
                                    <tr><td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-slate-600">game_id</td><td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">uuid</td><td className="px-6 py-4 text-sm text-slate-700">Verweist auf das zugehörige Spiel.</td></tr>
                                    <tr><td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-slate-600">player_id</td><td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">uuid</td><td className="px-6 py-4 text-sm text-slate-700">Referenz auf die User-ID aus Supabase.</td></tr>
                                    <tr><td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-slate-600">player_name</td><td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">varchar</td><td className="px-6 py-4 text-sm text-slate-700">Der im Spiel angezeigte Name.</td></tr>
                                    <tr><td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-slate-600">character_id</td><td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">varchar</td><td className="px-6 py-4 text-sm text-slate-700">Verknüpft den Spieler mit seiner Rolle.</td></tr>
                                </tbody>
                            </table>
                        </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">7. Prompt-Engineering-Strategie</h2>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div className="bg-white rounded-xl border border-slate-200 shadow-sm p-6 flex flex-col h-full">
                            <h3 className="text-xl font-bold text-slate-800 mb-4">Prompt 1: Der kreative Autor</h3>
                            <p className="text-sm font-semibold text-slate-500 mb-2 uppercase tracking-wide">System-Prompt:</p>
                            <div className="bg-slate-50 p-3 rounded-md border border-slate-200 mb-4 font-mono text-sm text-slate-700 overflow-x-auto">
                                Du bist ein preisgekrönter Autor von Kriminalromanen...
                            </div>
                            <p className="text-sm font-semibold text-slate-500 mb-2 uppercase tracking-wide">User-Prompt:</p>
                            <div className="bg-slate-50 p-3 rounded-md border border-slate-200 font-mono text-sm text-slate-700 overflow-x-auto">
                                Erstelle ein Krimi-Dinner-Szenario für 5 Spieler...
                            </div>
                        </div>
                        <div className="bg-white rounded-xl border border-slate-200 shadow-sm p-6 flex flex-col h-full">
                            <h3 className="text-xl font-bold text-slate-800 mb-4">Prompt 2: Der Logik-Lektor</h3>
                            <p className="text-sm font-semibold text-slate-500 mb-2 uppercase tracking-wide">System-Prompt:</p>
                            <div className="bg-slate-50 p-3 rounded-md border border-slate-200 mb-4 font-mono text-sm text-slate-700 overflow-x-auto">
                                Du bist ein extrem detailorientierter und logisch denkender Lektor...
                            </div>
                            <p className="text-sm font-semibold text-slate-500 mb-2 uppercase tracking-wide">User-Prompt:</p>
                            <div className="bg-slate-50 p-3 rounded-md border border-slate-200 font-mono text-sm text-slate-700 overflow-x-auto">
                                Hier ist ein JSON-Objekt. Bitte agiere als Logik-Lektor...
                            </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">8. User Journey & Spielablauf</h2>
                    <ol className="relative border-l border-slate-200 ml-3 space-y-8">
                        <li className="mb-10 ml-6">
                            <span className="absolute flex items-center justify-center w-8 h-8 bg-indigo-100 rounded-full -left-4 ring-4 ring-white">
                                <span className="text-indigo-600 font-bold text-sm">0</span>
                            </span>
                            <h3 className="flex items-center mb-1 text-lg font-semibold text-slate-900">Phase 0: Generierung & Vorbereitung</h3>
                            <p className="mb-4 text-base font-normal text-slate-500">Host generiert Spiel und erhält Einladungscode.</p>
                        </li>
                        <li className="mb-10 ml-6">
                            <span className="absolute flex items-center justify-center w-8 h-8 bg-indigo-100 rounded-full -left-4 ring-4 ring-white">
                                <span className="text-indigo-600 font-bold text-sm">1</span>
                            </span>
                            <h3 className="flex items-center mb-1 text-lg font-semibold text-slate-900">Phase 1: Lobby</h3>
                            <p className="mb-4 text-base font-normal text-slate-500">Spieler treten bei, Host startet das Spiel.</p>
                        </li>
                        <li className="mb-10 ml-6">
                            <span className="absolute flex items-center justify-center w-8 h-8 bg-indigo-100 rounded-full -left-4 ring-4 ring-white">
                                <span className="text-indigo-600 font-bold text-sm">2</span>
                            </span>
                            <h3 className="flex items-center mb-1 text-lg font-semibold text-slate-900">Phase 2: Rollenverteilung</h3>
                            <p className="mb-4 text-base font-normal text-slate-500">Backend weist Rollen zu und sendet geheime Infos.</p>
                        </li>
                        <li className="mb-10 ml-6">
                            <span className="absolute flex items-center justify-center w-8 h-8 bg-indigo-100 rounded-full -left-4 ring-4 ring-white">
                                <span className="text-indigo-600 font-bold text-sm">3</span>
                            </span>
                            <h3 className="flex items-center mb-1 text-lg font-semibold text-slate-900">Phase 3: Spielrunden</h3>
                            <p className="mb-4 text-base font-normal text-slate-500">System gibt pro Runde neue Hinweise frei.</p>
                        </li>
                        <li className="ml-6">
                            <span className="absolute flex items-center justify-center w-8 h-8 bg-indigo-100 rounded-full -left-4 ring-4 ring-white">
                                <span className="text-indigo-600 font-bold text-sm">4</span>
                            </span>
                            <h3 className="flex items-center mb-1 text-lg font-semibold text-slate-900">Phase 4: Abstimmung & Auflösung</h3>
                            <p className="mb-4 text-base font-normal text-slate-500">Abstimmung wird freigeschaltet, Mörder wird enthüllt.</p>
                        </li>
                    </ol>
                </section>

                <section className="mb-16">
                    <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">9. Geschäftsmodell & Monetarisierung</h2>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div className="bg-slate-50 p-6 rounded-xl border border-slate-200">
                            <h3 className="text-xl font-bold text-slate-800 mb-3">Abonnement-Modell</h3>
                            <p className="text-slate-700">Nutzer zahlen einen monatlichen oder jährlichen Beitrag für ein festes Kontingent an Spielen.</p>
                        </div>
                        <div className="bg-slate-50 p-6 rounded-xl border border-slate-200">
                            <h3 className="text-xl font-bold text-slate-800 mb-3">Einmalkauf (Pay-per-Game)</h3>
                            <p className="text-slate-700">Alternativ können Nutzer einzelne Spiele per Einmalkauf freischalten.</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">10. Skalierbarkeit, Kosten & Fehlerbehandlung</h2>
                    <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
                        <ul className="space-y-4">
                            <li className="flex items-start">
                                <span className="flex-shrink-0 h-6 w-6 flex items-center justify-center rounded-full bg-green-100 text-green-600 font-bold text-xs mr-3">✓</span>
                                <span><strong className="text-slate-900">Kostenkontrolle (OpenAI):</strong> Rate-Limiting auf dem Endpunkt zur Spielerstellung.</span>
                            </li>
                            <li className="flex items-start">
                                <span className="flex-shrink-0 h-6 w-6 flex items-center justify-center rounded-full bg-green-100 text-green-600 font-bold text-xs mr-3">✓</span>
                                <span><strong className="text-slate-900">Fehlerbehandlung bei Generierung:</strong> Backend unternimmt automatische Wiederholungsversuche.</span>
                            </li>
                            <li className="flex items-start">
                                <span className="flex-shrink-0 h-6 w-6 flex items-center justify-center rounded-full bg-green-100 text-green-600 font-bold text-xs mr-3">✓</span>
                                <span><strong className="text-slate-900">Nahtloses Wiederverbinden:</strong> Spieler können jederzeit wieder in ein laufendes Spiel einsteigen.</span>
                            </li>
                            <li className="flex items-start">
                                <span className="flex-shrink-0 h-6 w-6 flex items-center justify-center rounded-full bg-green-100 text-green-600 font-bold text-xs mr-3">✓</span>
                                <span><strong className="text-slate-900">Notfall-Dashboard (Host):</strong> Spoiler-freies Admin-Panel für den Host zur Spielsteuerung.</span>
                            </li>
                        </ul>
                    </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">11. Rechtliches & Datenschutz</h2>
                    <div className="bg-slate-50 p-6 rounded-xl border border-slate-200">
                        <ul className="list-disc pl-5 space-y-2 text-slate-700">
                            <li><strong>DSGVO-konforme Datenschutzerklärung</strong></li>
                            <li><strong>Impressum</strong></li>
                            <li><strong>Möglichkeit zur Löschung des Accounts</strong></li>
                        </ul>
                    </div>
                </section>

            </div>
        </div>
    );
}

export default KrimiDinner;
