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

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

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

        <main>
            <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 Home-Seite mit dem {{ ucfirst(config('app.theme')) }} Theme.
                        </p>
                    </div>

                    <div class="max-w-4xl mx-auto">
                        <div class="bg-card/95 backdrop-blur-sm rounded-xl p-8 shadow-lg border border-border/50 spacing-content">
                            <h2 class="text-2xl font-medium mb-6 text-primary">Features</h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div class="space-y-4">
                                    <div class="flex items-center space-x-3">
                                        <div class="w-2 h-2 bg-secondary rounded-full"></div>
                                        <span class="text-muted-foreground">Responsive Design</span>
                                    </div>
                                    <div class="flex items-center space-x-3">
                                        <div class="w-2 h-2 bg-secondary rounded-full"></div>
                                        <span class="text-muted-foreground">Mehrere Themes</span>
                                    </div>
                                </div>
                                <div class="space-y-4">
                                    <div class="flex items-center space-x-3">
                                        <div class="w-2 h-2 bg-secondary rounded-full"></div>
                                        <span class="text-muted-foreground">Dark Mode Unterstützung</span>
                                    </div>
                                    <div class="flex items-center space-x-3">
                                        <div class="w-2 h-2 bg-secondary rounded-full"></div>
                                        <span class="text-muted-foreground">Adaptive Farbschemata</span>
                                    </div>
                                </div>
                            </div>

                            <div class="text-center mt-8">
                                <a href="{{ url('/welcome') }}" class="btn-primary-accent">
                                    Zur Willkommensseite
                                </a>
                            </div>
                        </div>
                    </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