@extends('web.layouts.web-master')

@section('title', 'Willkommen - ' . config('app.name'))

@section('content')
    <div class="min-h-screen bg-background">
        <livewire:web.components.ui.header />

        <main class="variante-glass-flow">
            <section class="section-padding">
                <div class="container-padding">
                    <div class="text-center mb-16">
                        <h1 class="text-section-title">Willkommen bei {{ config('app.name') }}</h1>
                        <p class="text-large text-muted-foreground mt-4 max-w-2xl mx-auto">
                            Dies ist die Willkommensseite mit dem {{ ucfirst(config('app.theme')) }} Theme.
                        </p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12 max-w-6xl mx-auto">
                        <div class="bg-card/95 backdrop-blur-sm rounded-xl p-6 shadow-lg border border-border/50 spacing-content">
                            <h3 class="text-xl font-medium mb-3 text-primary">Über das Theme</h3>
                            <p class="text-muted-foreground leading-relaxed">
                                Diese Seite demonstriert die verschiedenen Stile des {{ ucfirst(config('app.theme')) }}-Themes.
                            </p>
                            <p class="text-muted-foreground leading-relaxed mt-2">
                                Jede Landingpage hat ihr eigenes Theme mit individuellen Farben und Schriften.
                            </p>
                        </div>

                        <div class="bg-card/95 backdrop-blur-sm rounded-xl p-6 shadow-lg border border-border/50 spacing-content">
                            <h3 class="text-xl font-medium mb-3 text-primary">Domainspezifisches Styling</h3>
                            <p class="text-muted-foreground leading-relaxed">
                                Die Styles werden basierend auf der Domain automatisch geladen:
                            </p>
                            <ul class="list-disc pl-5 mt-3 space-y-1 text-muted-foreground">
                                <li>b2in.test - Hauptstil</li>
                                <li>b2a.test - B2A Export</li>
                                <li>stileigentum.test - Premium Immobilien</li>
                                <li>style2own.test - Kreative Wohnkonzepte</li>
                            </ul>
                        </div>
                    </div>

                    <div class="text-center mt-12">
                        <a href="{{ url('/') }}" class="btn-primary-accent">
                            Zurück zur Startseite
                        </a>
                    </div>
                </div>
            </section>
        </main>

        <livewire:web.components.ui.footer />
    </div>
@endsection

@push('styles')
<style>
    [x-cloak] {
        display: none !important;
    }
</style>
@endpush

@push('scripts')
{{-- Alpine.js wird zentral im Layout geladen --}}
@endpush