@extends('layouts.app')

@section('layout_mode', 'marketing')
@section('page_title', 'Die Kaffeeliste')
@section('body_class', 'landing-preview')

@php
    $heroEyebrow = $heroEyebrow ?? 'Für Teams, Büros und Standorte';
    $heroTitle = $heroTitle ?? 'Die Kaffeeliste für einen klaren Kaffee-Alltag.';
    $heroCopy = $heroCopy ?? 'Mitglieder, Buchungen, Rollen und Hinweise laufen in einer klaren Oberfläche zusammen. Für Teams, die weniger Listen-Chaos und weniger Rückfragen wollen.';
    $preview = $landingPreview ?? [
        ['label' => 'Mitglieder', 'value' => '48 aktiv'],
        ['label' => 'Buchungen', 'value' => 'Heute 12'],
        ['label' => 'Support', 'value' => '2 offen'],
    ];
    $features = $landingFeatures ?? [
        [
            'title' => 'Dashboard',
            'copy' => 'Wichtige Zahlen, Hinweise und offene Themen direkt auf der Startseite.',
        ],
        [
            'title' => 'Mitglieder und Rollen',
            'copy' => 'Zugänge, Zuständigkeiten und Bereiche sauber an einem Ort verwalten.',
        ],
        [
            'title' => 'Buchungen',
            'copy' => 'Einzahlungen, Verbrauch und Korrekturen nachvollziehbar dokumentieren.',
        ],
        [
            'title' => 'Support und Exporte',
            'copy' => 'Rückfragen, Listen und Auswertungen ohne Wechsel zwischen mehreren Tools.',
        ],
    ];
    $steps = $landingSteps ?? [
        [
            'number' => '01',
            'title' => 'Anmelden und Bereich öffnen',
            'copy' => 'Ohne Installation direkt im Browser starten.',
        ],
        [
            'number' => '02',
            'title' => 'Mitglieder und Zuständigkeiten ordnen',
            'copy' => 'Rollen, Standorte und Zugänge klar strukturieren.',
        ],
        [
            'number' => '03',
            'title' => 'Im Alltag damit arbeiten',
            'copy' => 'Buchungen pflegen, Fragen klären und den Überblick behalten.',
        ],
    ];
    $useCases = $landingUseCases ?? [
        [
            'title' => 'Für Mitglieder',
            'copy' => 'Schnell sehen, was wichtig ist, ohne sich durch Verwaltungsthemen zu arbeiten.',
        ],
        [
            'title' => 'Für Verantwortliche',
            'copy' => 'Buchungen prüfen, Bereiche steuern und Abläufe sauber organisieren.',
        ],
        [
            'title' => 'Für mehrere Standorte',
            'copy' => 'Getrennte Bereiche bleiben übersichtlich, folgen aber derselben Logik.',
        ],
    ];
    $proof = $landingProof ?? [
        [
            'title' => 'Schnell verständlich',
            'copy' => 'Die wichtigsten Bereiche sind sofort erkennbar und klar benannt.',
        ],
        [
            'title' => 'Im Browser und mobil',
            'copy' => 'Die Oberfläche funktioniert ohne Installation auf Desktop und Handy.',
        ],
        [
            'title' => 'Für den Alltag gebaut',
            'copy' => 'Kaffeeliste, Support, Buchungen und Verwaltung greifen sinnvoll ineinander.',
        ],
    ];
@endphp

@section('page_styles')
    <style>
        body.landing-preview {
            background:
                radial-gradient(circle at top center, rgba(88, 122, 255, 0.22), transparent 28%),
                radial-gradient(circle at 20% 20%, rgba(42, 72, 170, 0.18), transparent 24%),
                linear-gradient(180deg, #05070d 0%, #0a0f1a 52%, #0d1320 100%);
            color: #f4f7ff;
        }

        body.landing-preview h1,
        body.landing-preview h2,
        body.landing-preview h3 {
            font-family: "Inter Tight", "Aptos", "Segoe UI", sans-serif;
            letter-spacing: -0.04em;
        }

        .landing-wrap {
            display: grid;
            gap: 28px;
            padding: 8px 0 12px;
        }

        .landing-hero {
            display: grid;
            grid-template-columns: minmax(0, 1.12fr) minmax(290px, 0.88fr);
            gap: 36px;
            align-items: start;
            padding-top: 8px;
        }

        .landing-copy {
            display: grid;
            gap: 12px;
        }

        .kicker {
            margin: 0;
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.16em;
            color: #8aa0d0;
            font-weight: 700;
        }

        .landing-copy h1 {
            margin: 0;
            font-size: clamp(3.2rem, 7vw, 6.4rem);
            line-height: 0.9;
        }

        .landing-copy__lead {
            margin: 0;
            max-width: 34rem;
            font-size: 1.08rem;
            line-height: 1.65;
            color: rgba(219, 228, 248, 0.74);
        }

        .landing-copy__note {
            margin: 0;
            max-width: 32rem;
            color: rgba(193, 205, 232, 0.78);
            font-size: 0.96rem;
        }

        .actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 10px;
        }

        .landing-preview,
        .landing-section,
        .landing-callout {
            border: 1px solid rgba(163, 183, 255, 0.12);
            border-radius: 20px;
            background: rgba(14, 20, 34, 0.86);
            box-shadow: 0 16px 40px rgba(2, 5, 12, 0.34);
        }

        .landing-preview {
            padding: 20px;
            display: grid;
            gap: 12px;
        }

        .landing-preview__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid rgba(163, 183, 255, 0.12);
        }

        .landing-preview__title {
            margin: 0;
            font-size: 1.1rem;
            color: #f4f7ff;
        }

        .landing-preview__line {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: center;
            padding: 12px 14px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.04);
            color: rgba(216, 225, 246, 0.74);
            font-weight: 600;
        }

        .landing-preview__line strong {
            color: #f4f7ff;
        }

        .landing-section {
            padding: 24px 26px;
        }

        .landing-section__head {
            display: grid;
            gap: 8px;
            margin-bottom: 18px;
        }

        .landing-section__eyebrow {
            margin: 0;
            color: #8aa0d0;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .landing-section__title {
            margin: 0;
            font-size: 1.9rem;
            color: #f4f7ff;
        }

        .landing-section__lead {
            margin: 0;
            max-width: 48rem;
            color: rgba(217, 226, 246, 0.8);
        }

        .landing-feature-grid,
        .landing-step-grid,
        .landing-use-grid,
        .landing-proof-grid {
            display: grid;
            gap: 12px;
        }

        .landing-feature-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .landing-step-grid,
        .landing-use-grid,
        .landing-proof-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .landing-card {
            padding: 18px;
            border-radius: 18px;
            border: 1px solid rgba(163, 183, 255, 0.12);
            background: rgba(255, 255, 255, 0.035);
        }

        .landing-card__number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 2.15rem;
            height: 2.15rem;
            margin-bottom: 14px;
            border-radius: 999px;
            background: rgba(88, 122, 255, 0.16);
            color: #dfe8ff;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.06em;
        }

        .landing-card h3 {
            margin: 0 0 8px;
            font-size: 1.12rem;
            color: #f4f7ff;
        }

        .landing-card p {
            margin: 0;
            color: rgba(219, 228, 246, 0.74);
        }

        .landing-callout {
            padding: 24px 26px;
        }

        .landing-cta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 16px;
            padding-top: 20px;
            margin-top: 22px;
            border-top: 1px solid rgba(163, 183, 255, 0.12);
        }

        .landing-cta__copy {
            display: grid;
            gap: 6px;
        }

        .landing-cta__copy strong {
            font-size: 1.05rem;
            color: #f4f7ff;
        }

        .landing-cta__copy span {
            color: rgba(217, 226, 246, 0.72);
        }

        @media (max-width: 960px) {
            .landing-wrap {
                gap: 20px;
            }

            .landing-hero,
            .landing-feature-grid,
            .landing-step-grid,
            .landing-use-grid,
            .landing-proof-grid {
                grid-template-columns: 1fr;
            }

            .landing-hero {
                gap: 24px;
                padding-top: 0;
            }

            .landing-section,
            .landing-callout {
                padding: 20px;
            }
        }
    </style>
@endsection

@section('content')
    <div class="landing-wrap">
        <section class="landing-hero">
            <div class="landing-copy">
                <p class="kicker">{{ $heroEyebrow }}</p>
                <h1>{{ $heroTitle }}</h1>
                <p class="landing-copy__lead">{{ $heroCopy }}</p>
                <p class="landing-copy__note">Für Mitglieder, Verantwortliche und Standorte. Mobil nutzbar, klar geführt und ohne unnötige Umwege.</p>

                <div class="actions">
                    <a class="button" href="/login/">Anmelden</a>
                    <a class="button button--ghost" href="#funktionen">Funktionen ansehen</a>
                </div>
            </div>

            <aside class="landing-preview" aria-label="Vorschau">
                <div class="landing-preview__header">
                    <h2 class="landing-preview__title">Übersicht</h2>
                    <span>Heute</span>
                </div>
                @foreach ($preview as $item)
                    <div class="landing-preview__line">
                        <span>{{ $item['label'] ?? '' }}</span>
                        <strong>{{ $item['value'] ?? '' }}</strong>
                    </div>
                @endforeach
            </aside>
        </section>

        <section class="landing-section" id="funktionen" aria-label="Funktionen">
            <div class="landing-section__head">
                <p class="landing-section__eyebrow">Produkt</p>
                <h2 class="landing-section__title">Was die Kaffeeliste im Alltag abdeckt</h2>
                <p class="landing-section__lead">Vom Überblick bis zur Auswertung bleibt alles in einer Oberfläche, die sofort verständlich wirkt.</p>
            </div>

            <div class="landing-feature-grid">
                @foreach ($features as $feature)
                    <article class="landing-card">
                        <h3>{{ $feature['title'] ?? '' }}</h3>
                        <p>{{ $feature['copy'] ?? '' }}</p>
                    </article>
                @endforeach
            </div>
        </section>

        <section class="landing-section" id="ablauf" aria-label="Ablauf">
            <div class="landing-section__head">
                <p class="landing-section__eyebrow">Ablauf</p>
                <h2 class="landing-section__title">So funktioniert es</h2>
                <p class="landing-section__lead">Vom ersten Login bis zum täglichen Einsatz bleibt der Weg kurz und nachvollziehbar.</p>
            </div>

            <div class="landing-step-grid">
                @foreach ($steps as $step)
                    <article class="landing-card">
                        <span class="landing-card__number">{{ $step['number'] ?? '' }}</span>
                        <h3>{{ $step['title'] ?? '' }}</h3>
                        <p>{{ $step['copy'] ?? '' }}</p>
                    </article>
                @endforeach
            </div>
        </section>

        <section class="landing-section" id="zielgruppen" aria-label="Zielgruppen">
            <div class="landing-section__head">
                <p class="landing-section__eyebrow">Für wen</p>
                <h2 class="landing-section__title">Für Mitglieder, Verantwortliche und Standorte</h2>
                <p class="landing-section__lead">Jede Rolle bekommt genau die Informationen und Wege, die sie im Alltag braucht.</p>
            </div>

            <div class="landing-use-grid">
                @foreach ($useCases as $useCase)
                    <article class="landing-card">
                        <h3>{{ $useCase['title'] ?? '' }}</h3>
                        <p>{{ $useCase['copy'] ?? '' }}</p>
                    </article>
                @endforeach
            </div>
        </section>

        <section class="landing-section" id="vertrauen" aria-label="Vertrauen">
            <div class="landing-section__head">
                <p class="landing-section__eyebrow">Warum es passt</p>
                <h2 class="landing-section__title">Klar genug für den Alltag, ruhig genug für gutes Produktdesign</h2>
                <p class="landing-section__lead">Reduziert gestaltet, aber mit genug Tiefe für Teams, die mehr als nur eine einfache Liste brauchen.</p>
            </div>

            <div class="landing-proof-grid">
                @foreach ($proof as $item)
                    <article class="landing-card">
                        <h3>{{ $item['title'] ?? '' }}</h3>
                        <p>{{ $item['copy'] ?? '' }}</p>
                    </article>
                @endforeach
            </div>
        </section>

        <section class="landing-callout">
            <p class="landing-section__eyebrow">Zum Start</p>
            <h2>Ein gemeinsamer Einstieg für Teams, die Kaffee einfach organisieren wollen.</h2>
            <p>Klar im Aufbau, direkt in der Nutzung und bereit für den täglichen Einsatz im Team.</p>

            <div class="landing-cta">
                <div class="landing-cta__copy">
                    <strong>Direkt loslegen</strong>
                    <span>Ohne Umwege zur Anmeldung.</span>
                </div>
                <div class="actions">
                    <a class="button" href="/login/">Anmelden</a>
                    <a class="button button--ghost" href="#funktionen">Funktionen ansehen</a>
                </div>
            </div>
        </section>
    </div>
@endsection
