@extends('layouts.app')

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

@php
    $preview = $loginPreview ?? [
        'single' => [
            'email' => 'mia@berlin.example',
            'message' => 'Direkte Weiterleitung in den zugeordneten Tenant.',
            'matches' => [['name' => 'Werk Berlin', 'domain' => 'berlin.kaffeeliste.de', 'login_mode' => 'oidc-first']],
        ],
        'multiple' => [
            'email' => 'leitung@kaffeeliste.example',
            'message' => 'Tenant-Auswahl vor Passwort oder SSO.',
            'matches' => [
                ['name' => 'Werk Berlin', 'domain' => 'berlin.kaffeeliste.de', 'login_mode' => 'oidc-first'],
                ['name' => 'Werk Koeln', 'domain' => 'koeln.kaffeeliste.de', 'login_mode' => 'oidc-first'],
                ['name' => 'Shared Services', 'domain' => 'shared.kaffeeliste.de', 'login_mode' => 'central-routing'],
            ],
        ],
        'unknown' => [
            'email' => 'extern@example.org',
            'message' => 'Rueckfuehrung auf Tenant-Admin oder Einladungspfad.',
            'matches' => [],
        ],
    ];
@endphp

@section('content')
    <section class="hero hero--split">
        <div class="hero__content">
            <div>
                <p class="hero__kicker">Mitglieder-Login</p>
                <h2 class="hero__title">Eine zentrale Anmeldung, die Mitglieder automatisch in den richtigen Tenant bringt.</h2>
                <p class="hero__lead">
                    Statt verschiedene Tenant-URLs zu kennen, starten Mitglieder zentral mit ihrer E-Mail-Adresse. Die Plattform
                    erkennt Einzel- oder Mehrfachzuordnungen und fuehrt danach passend weiter: direkt in den Tenant, in eine
                    Tenant-Auswahl oder in einen klaren Kontaktpfad.
                </p>
            </div>
            <div class="hero__actions">
                <a class="button" href="#mitglied-login">Mitglieder-Login starten</a>
                <a class="button button--ghost" href="/tenants">Admin Console ansehen</a>
            </div>
            <div class="hero__meta">
                <span class="badge">E-Mail first</span>
                <span class="badge">Tenant-Erkennung</span>
                <span class="badge badge--solid">Mehrfachzuordnung unterstuetzt</span>
            </div>
        </div>

        <aside class="hero__aside">
            <article class="card metric metric--compact">
                <p class="metric__label">Ein Tenant erkannt</p>
                <div class="metric__value">1 Klick</div>
                <p class="muted">Bei genau einer Mitgliedschaft wird direkt in den passenden Tenant weitergeleitet.</p>
            </article>
            <article class="card metric metric--compact">
                <p class="metric__label">Mehrfachzuordnung</p>
                <div class="metric__value">{{ count($preview['multiple']['matches']) }} Tenants</div>
                <p class="muted">Die Auswahl erscheint nur dann, wenn fuer dieselbe Mail-Adresse mehrere Kontexte hinterlegt sind.</p>
            </article>
            <div class="callout">
                <strong>SSO und Passwort aus einem Einstieg</strong>
                Die zentrale Anmeldung entscheidet zuerst ueber den Tenant-Kontext. Danach folgen Passwort-Login, OIDC oder ein
                klarer Fallback fuer kleinere Tenants.
            </div>
        </aside>
    </section>

    <section id="mitglied-login" class="split">
        <article class="form-panel">
            <p class="card__eyebrow">Zentraler Einstieg</p>
            <h3>Mit E-Mail und Passwort anmelden</h3>
            <p class="muted">
                Die E-Mail-Adresse steuert zuerst die Tenant-Erkennung. Der Passwort- oder SSO-Schritt kommt danach im richtigen Kontext.
            </p>
            <form class="form-grid" method="post" action="/login" style="margin-top: 18px;">
                <div class="field">
                    <label for="email">E-Mail-Adresse</label>
                    <input id="email" name="email" type="email" autocomplete="username" placeholder="mitglied@unternehmen.de">
                </div>
                <div class="field">
                    <label for="password">Passwort</label>
                    <input id="password" name="password" type="password" autocomplete="current-password" placeholder="••••••••">
                </div>
                <div class="toolbar">
                    <button type="submit">Zentral anmelden</button>
                    <a class="button button--ghost" href="/forgot-password">Passwort vergessen?</a>
                </div>
            </form>
            <div class="note" style="margin-top: 18px;">
                Zielbild: Eine zentrale Anmeldung fuer Mitglieder, ohne dass zuerst Tenant-Keys oder Subdomains bekannt sein muessen.
            </div>
        </article>

        <article class="panel">
            <p class="card__eyebrow">Was danach passiert</p>
            <h3>Automatische Weiterleitung oder Tenant-Auswahl.</h3>
            <div class="timeline timeline--tight" style="margin-top: 18px;">
                <div class="timeline__item">
                    <p class="timeline__title">Genau ein Treffer</p>
                    <p class="timeline__meta">Die Plattform leitet direkt in den Tenant weiter und zeigt dort Passwort- oder SSO-Login an.</p>
                </div>
                <div class="timeline__item">
                    <p class="timeline__title">Mehrere Treffer</p>
                    <p class="timeline__meta">Vor dem eigentlichen Login erscheint eine Tenant-Auswahl mit Namen, Domain und Login-Modell.</p>
                </div>
                <div class="timeline__item">
                    <p class="timeline__title">Kein Treffer</p>
                    <p class="timeline__meta">Statt Sackgasse gibt es einen klaren Rueckweg zu Tenant-Admin, Einladung oder Support.</p>
                </div>
            </div>
        </article>
    </section>

    <section class="grid grid--3" style="margin-top: 18px;">
        <article class="card">
            <p class="card__eyebrow">Preview: Einzelzuordnung</p>
            <h3>{{ $preview['single']['email'] }}</h3>
            <p class="muted">{{ $preview['single']['message'] }}</p>
            <div class="tenant-grid" style="margin-top: 18px;">
                @foreach ($preview['single']['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">Auto-Weiterleitung</span>
                    </div>
                @endforeach
            </div>
        </article>

        <article class="card">
            <p class="card__eyebrow">Preview: Mehrfachzuordnung</p>
            <h3>{{ $preview['multiple']['email'] }}</h3>
            <p class="muted">{{ $preview['multiple']['message'] }}</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'] }} - {{ $tenant['login_mode'] }}</p>
                        </div>
                        <span class="status status--warning">Auswahl</span>
                    </div>
                @endforeach
            </div>
        </article>

        <article class="card">
            <p class="card__eyebrow">Preview: Unbekannte Mail</p>
            <h3>{{ $preview['unknown']['email'] }}</h3>
            <p class="muted">{{ $preview['unknown']['message'] }}</p>
            <div class="callout" style="margin-top: 18px;">
                <strong>Keine Sackgasse fuer Mitglieder</strong>
                Die Anwendung kann stattdessen Tenant-Kontakt, Einladung oder den zentralen Supportpfad anzeigen.
            </div>
        </article>
    </section>
@endsection
