@extends('layouts.app')

@section('page_title', 'Kaffeeliste SaaS - Zentrale Plattform')

@php
    $overview = $tenantOverview ?? [
        'metrics' => [
            ['label' => 'Aktive Tenants', 'value' => '4', 'detail' => 'Mandanten ueber die Plattform verteilt.'],
            ['label' => 'Mitglieder gesamt', 'value' => '100', 'detail' => 'Aktive Nutzerkonten im Verbund.'],
            ['label' => 'SSO-Abdeckung', 'value' => '4', 'detail' => 'Tenant-Logins mit zentraler Identitaetsstrategie.'],
            ['label' => 'Betriebsstatus', 'value' => 'Stabil', 'detail' => 'Queues und Exporte fuer den Webspace-Betrieb vorbereitet.'],
        ],
        'tenants' => [],
    ];
    $preview = $centralLoginPreview ?? [
        'single' => ['email' => 'mia@berlin.example', 'matches' => [['name' => 'Werk Berlin', 'domain' => 'berlin.kaffeeliste.de']]],
        'multiple' => ['email' => 'leitung@kaffeeliste.example', 'matches' => [['name' => 'Werk Berlin', 'domain' => 'berlin.kaffeeliste.de'], ['name' => 'Werk Koeln', 'domain' => 'koeln.kaffeeliste.de']]],
        'unknown' => ['email' => 'extern@example.org', 'matches' => []],
    ];
@endphp

@section('content')
    <section class="hero hero--split">
        <div class="hero__content">
            <div>
                <p class="hero__kicker">Zentrale Plattform fuer Mitglieder und Verantwortliche</p>
                <h2 class="hero__title">Kaffeeliste verbindet zentrale Anmeldung, Tenant-Steuerung und den operativen Alltag in einer klaren SaaS-Oberflaeche.</h2>
                <p class="hero__lead">
                    Endanwender finden ihren Kontostand, Striche, Einzahlungen und Hinweise ohne Tenant-Chaos. Gleichzeitig
                    behalten Verantwortliche alle Mandanten, Domains, SSO-Pfade und Mehrfachzuordnungen in einer gemeinsamen
                    Admin-Konsole im Blick.
                </p>
            </div>
            <div class="hero__actions">
                <a class="button" href="/login">Zentrale Anmeldung starten</a>
                <a class="button button--ghost" href="/tenants">Tenant Console ansehen</a>
            </div>
            <div class="hero__meta">
                <span class="badge badge--solid">Ein Login fuer alle Mitgliedschaften</span>
                <span class="badge">Automatische Tenant-Weiterleitung</span>
                <span class="badge">Mehrfachzuordnung mit Auswahlfluss</span>
            </div>
        </div>

        <aside class="hero__aside">
            <article class="card metric metric--compact">
                <p class="metric__label">{{ $overview['metrics'][0]['label'] }}</p>
                <div class="metric__value">{{ $overview['metrics'][0]['value'] }}</div>
                <p class="muted">{{ $overview['metrics'][0]['detail'] }}</p>
            </article>
            <article class="card metric metric--compact">
                <p class="metric__label">{{ $overview['metrics'][1]['label'] }}</p>
                <div class="metric__value">{{ $overview['metrics'][1]['value'] }}</div>
                <p class="muted">{{ $overview['metrics'][1]['detail'] }}</p>
            </article>
            <div class="callout">
                <strong>Zentraler Login statt Inseln</strong>
                Mitglieder geben zuerst nur ihre E-Mail-Adresse an. Danach entscheidet die Plattform, ob direkt in einen Tenant
                weitergeleitet wird oder ob zuerst eine Tenant-Auswahl erscheinen muss.
            </div>
        </aside>
    </section>

    <section class="grid grid--3">
        <article class="card">
            <p class="card__eyebrow">Fuer Mitglieder</p>
            <h3>Schneller Einstieg ohne Tenant-Raten</h3>
            <p class="muted">
                Eine zentrale Anmeldung nimmt die Mail-Adresse entgegen und fuehrt danach automatisch in den passenden Bereich,
                statt Nutzer auf Subdomains oder technische Tenant-Keys zu verweisen.
            </p>
        </article>
        <article class="card">
            <p class="card__eyebrow">Fuer Verantwortliche</p>
            <h3>Alle Tenants in einer Admin-Console</h3>
            <p class="muted">
                Domains, SSO-Abdeckung, Rollout-Status und Mehrfachzuordnungen lassen sich tenantuebergreifend steuern und
                priorisieren.
            </p>
        </article>
        <article class="card">
            <p class="card__eyebrow">Fuer den Betrieb</p>
            <h3>Webspace-tauglich und tenantbewusst</h3>
            <p class="muted">
                Die Produktflaechen bleiben leichtgewichtig, dokumentiert und anschlussfaehig fuer Cron, Importe, Exporte und
                spaetere Identity-Ausbaustufen.
            </p>
        </article>
    </section>

    <section class="split" style="margin-top: 18px;">
        <article class="panel">
            <p class="card__eyebrow">Login-Fluss</p>
            <h3>So funktioniert die zentrale Anmeldung fuer Mitglieder.</h3>
            <div class="feature-list" style="margin-top: 18px;">
                <div class="feature-list__item">
                    <div class="feature-list__badge">1</div>
                    <div>
                        <p class="feature-list__title">E-Mail zuerst</p>
                        <p class="feature-list__copy">Die Plattform prueft zentral, in welchen Tenants die Mail-Adresse hinterlegt ist.</p>
                    </div>
                </div>
                <div class="feature-list__item">
                    <div class="feature-list__badge">2</div>
                    <div>
                        <p class="feature-list__title">Automatische Entscheidung</p>
                        <p class="feature-list__copy">Bei genau einer Mitgliedschaft erfolgt die Weiterleitung direkt in den korrekten Tenant.</p>
                    </div>
                </div>
                <div class="feature-list__item">
                    <div class="feature-list__badge">3</div>
                    <div>
                        <p class="feature-list__title">Auswahl bei Mehrfachzuordnung</p>
                        <p class="feature-list__copy">Bei mehreren Tenants erscheint zuerst eine Auswahl, damit Mitglieder bewusst den richtigen Kontext waehlen.</p>
                    </div>
                </div>
            </div>
        </article>

        <article class="panel">
            <p class="card__eyebrow">Mehrfachzuordnung</p>
            <h3>Beispiel fuer eine zentrale Tenant-Auswahl.</h3>
            <p class="muted">
                Fuer <strong>{{ $preview['multiple']['email'] }}</strong> werden mehrere Mitgliedschaften erkannt. Statt Fehlleitungen
                oder separater Logins zeigt die Plattform alle erreichbaren Tenants in einer klaren Auswahl.
            </p>
            <div class="tenant-grid" style="margin-top: 18px;">
                @foreach ($preview['multiple']['matches'] as $tenant)
                    <div class="tenant-row">
                        <div class="tenant-row__meta">
                            <p class="tenant-row__title">{{ $tenant['name'] }}</p>
                            <p class="tenant-row__copy">{{ $tenant['domain'] }}</p>
                        </div>
                        <span class="status">Auswaehlbar</span>
                    </div>
                @endforeach
            </div>
            <div class="note" style="margin-top: 18px;">
                Genau diese Logik wird spaeter im produktiven Login verwendet: kein technischer Tenant-Schritt fuer Mitglieder,
                aber trotzdem ein sauberer Kontext fuer jede Organisation.
            </div>
        </article>
    </section>

    <section class="grid grid--2" style="margin-top: 18px;">
        <article class="panel">
            <p class="card__eyebrow">Endanwender-Nutzen</p>
            <h3>Was Mitglieder auf der Plattform erwarten duerfen.</h3>
            <ul class="list-reset" style="margin-top: 18px;">
                <li><span class="status">Kontostand</span> Ein klares Dashboard mit Verbrauch, Zahlungen und letzten Buchungen.</li>
                <li><span class="status">Hinweise</span> Tenantbezogene Inhalte, FAQ und operative Informationen an einem Ort.</li>
                <li><span class="status">Mitgliedschaften</span> Ein zentraler Einstieg auch fuer Personen mit mehreren Teams oder Standorten.</li>
                <li><span class="status">Self-Service</span> Direkte Wege zu Ledger, Zahlungen und spaeterem Passwort-/SSO-Fallback.</li>
            </ul>
        </article>

        <article class="panel">
            <p class="card__eyebrow">Admin-Perspektive</p>
            <h3>Was die zentrale Tenant Console sichtbar macht.</h3>
            <div class="timeline timeline--tight" style="margin-top: 18px;">
                <div class="timeline__item">
                    <p class="timeline__title">Tenant-Portfolio</p>
                    <p class="timeline__meta">Mitgliederzahlen, Betriebsstatus und Login-Modell aller Mandanten in einer Sicht.</p>
                </div>
                <div class="timeline__item">
                    <p class="timeline__title">Identity-Steuerung</p>
                    <p class="timeline__meta">SSO-Abdeckung, Fallback-Logins und tenantbezogene Einstiegspfade konsistent halten.</p>
                </div>
                <div class="timeline__item">
                    <p class="timeline__title">Rollout & Betrieb</p>
                    <p class="timeline__meta">Onboarding, Migrationen und operative To-dos nicht pro Tenant verstreut, sondern zentral priorisiert.</p>
                </div>
            </div>
        </article>
    </section>
@endsection
