@extends('layouts.app')

@section('page_title', 'Die Kaffeeliste - Anmeldung')

@php
    $preview = $loginPreview ?? [
        'single' => [
            'email' => 'mia@berlin.example',
            'message' => 'Direkt weiter.',
            'matches' => [['name' => 'Werk Berlin', 'domain' => 'berlin.kaffeeliste.de', 'login_mode' => 'oidc-first']],
        ],
        'multiple' => [
            'email' => 'leitung@kaffeeliste.example',
            'message' => 'Auswahl vor dem Einstieg.',
            'matches' => [
                ['name' => 'Werk Berlin', 'domain' => 'berlin.kaffeeliste.de', 'login_mode' => 'oidc-first'],
                ['name' => 'Werk Köln', 'domain' => 'koeln.kaffeeliste.de', 'login_mode' => 'oidc-first'],
            ],
        ],
    ];
@endphp

@section('content')
    <section class="hero hero--split">
        <div class="hero__content">
            <div>
                <p class="hero__kicker">Anmeldung</p>
                <h2 class="hero__title">Einfach einsteigen.</h2>
                <p class="hero__lead">
                    E-Mail eingeben, kurz prüfen, weitermachen.
                </p>
            </div>
            <div class="hero__meta">
                <span class="badge">Direkt</span>
                <span class="badge">Klar</span>
                <span class="badge badge--solid">Wenig Schritte</span>
            </div>
        </div>

        <aside class="hero__aside">
            <article class="card metric metric--compact">
                <p class="metric__label">Ein Treffer</p>
                <div class="metric__value">Direkt</div>
                <p class="muted">Ohne Umweg zum Ziel.</p>
            </article>
            <article class="card metric metric--compact">
                <p class="metric__label">Mehrere Treffer</p>
                <div class="metric__value">{{ count($preview['multiple']['matches']) }}</div>
                <p class="muted">Dann Auswahl anzeigen.</p>
            </article>
        </aside>
    </section>

    <section class="split" style="margin-top: 18px;">
        <article class="form-panel">
            <p class="card__eyebrow">Zugang</p>
            <h3>Anmelden</h3>
            <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">Weiter</button>
                    <a class="button button--ghost" href="/forgot-password">Passwort vergessen?</a>
                </div>
            </form>
        </article>

        <article class="panel">
            <p class="card__eyebrow">Ablauf</p>
            <h3>So geht es weiter</h3>
            <div class="timeline timeline--tight" style="margin-top: 18px;">
                <div class="timeline__item">
                    <p class="timeline__title">1. E-Mail</p>
                    <p class="timeline__meta">Die Anmeldung startet mit der Adresse.</p>
                </div>
                <div class="timeline__item">
                    <p class="timeline__title">2. Prüfen</p>
                    <p class="timeline__meta">Der passende Zugang wird zugeordnet.</p>
                </div>
                <div class="timeline__item">
                    <p class="timeline__title">3. Weiter</p>
                    <p class="timeline__meta">Dann folgt der eigentliche Login.</p>
                </div>
            </div>
        </article>
    </section>

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

        <article class="card">
            <p class="card__eyebrow">Mehrere Treffer</p>
            <h3>{{ $preview['multiple']['email'] }}</h3>
            <p class="muted">{{ $preview['multiple']['message'] }}</p>
            <div class="tenant-grid" style="margin-top: 16px;">
                @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 status--warning">Auswahl</span>
                    </div>
                @endforeach
            </div>
        </article>

        <article class="card">
            <p class="card__eyebrow">Kein Treffer</p>
            <h3>Sauberer Rückweg</h3>
            <p class="muted">Wenn keine Zuordnung passt, geht es klar weiter statt im Leeren zu enden.</p>
            <div class="callout" style="margin-top: 16px;">
                <strong>Kontakt oder Einladung</strong>
                Die Anmeldung zeigt dann den nächsten klaren Schritt.
            </div>
        </article>
    </section>
@endsection
