@extends('layouts.app')

@section('content')

    @php
        // Dein vollständiges Array für alle 20 Vorlagen.
        // Die Slugs führen zu den Dateien in resources/views/demos/
        $templates = [
            ['name' => 'Der Handwerker', 'cat' => 'Bau & Montage', 'slug' => 'handwerk'],
            ['name' => 'Lumina Bistro', 'cat' => 'Gastronomie', 'slug' => 'bistro'],
            ['name' => 'Creative Studio', 'cat' => 'Design Agency', 'slug' => 'agency'],
            ['name' => 'FitLife Gym', 'cat' => 'Sport & Fitness', 'slug' => 'fitness'],
            ['name' => 'Kanzlei Modern', 'cat' => 'Recht & Beratung', 'slug' => 'lawyer'],
            ['name' => 'Clean Dental', 'cat' => 'Medizin', 'slug' => 'doctor'],
            ['name' => 'Auto-Service', 'cat' => 'Werkstatt', 'slug' => 'auto'],
            ['name' => 'Photo-Focus', 'cat' => 'Fotografie', 'slug' => 'photo'],
            ['name' => 'Green Garden', 'cat' => 'Gartenbau', 'slug' => 'garden'],
            ['name' => 'Smart Home UI', 'cat' => 'Technik', 'slug' => 'smarthome'],
            ['name' => 'Yoga Flow', 'cat' => 'Wellness', 'slug' => 'yoga'],
            ['name' => 'ImmoScout Design', 'cat' => 'Immobilien', 'slug' => 'immo'],
            ['name' => 'Personal Brand', 'cat' => 'Coaching', 'slug' => 'coach'],
            ['name' => 'KotschFlow SaaS', 'cat' => 'Software', 'slug' => 'saas'],
            ['name' => 'Nature Travel', 'cat' => 'Reisen', 'slug' => 'travel'],
            ['name' => 'Music Hub', 'cat' => 'Entertainment', 'slug' => 'music'],
            ['name' => 'Nightlife Club', 'cat' => 'Events', 'slug' => 'event'],
            ['name' => 'Industrial Tech', 'cat' => 'Industrie', 'slug' => 'industry'],
            ['name' => 'Cafe Aroma', 'cat' => 'Gastronomie', 'slug' => 'cafe'],
            ['name' => 'Pixel Portfolio', 'cat' => 'Grafikdesign', 'slug' => 'pixel'],
        ];
    @endphp

    <style>
        /* --- GRID SYSTEM --- */
        .template-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 60px;
            padding-top: 50px;
        }

        /* --- LAPTOP MOCKUP LOGIK --- */
        .laptop-container {
            perspective: 1000px;
            text-decoration: none;
            color: inherit;
            display: block;
        }

        .laptop-screen-frame {
            position: relative;
            width: 100%;
            height: 240px;
            background: #1e293b; /* Dunkles Gehäuse */
            border-radius: 15px 15px 0 0;
            padding: 10px;
            border: 1px solid #334155;
            box-shadow: 0 20px 50px -10px rgba(0,0,0,0.1);
            transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .laptop-viewport {
            width: 100%;
            height: 100%;
            background: white;
            overflow: hidden;
            border-radius: 5px;
            position: relative;
        }

        /* Der Trick für scharfe Iframe-Vorschau */
        .laptop-viewport iframe {
            width: 400%;
            height: 400%;
            transform: scale(0.25);
            transform-origin: 0 0;
            border: none;
            pointer-events: none;
        }

        .laptop-base {
            width: 110%;
            height: 12px;
            background: #334155;
            margin-left: -5%;
            border-radius: 0 0 20px 20px;
            position: relative;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        .laptop-base::after {
            content: '';
            position: absolute;
            top: 0; left: 50%; transform: translateX(-50%);
            width: 60px; height: 5px;
            background: rgba(0,0,0,0.2);
            border-radius: 0 0 10px 10px;
        }

        .laptop-container:hover .laptop-screen-frame {
            transform: translateY(-10px) rotateX(2deg);
            border-color: var(--primary);
        }

        /* --- INFO TEXTE UNTER DEN LAPTOPS --- */
        .template-info {
            padding: 25px 0;
            text-align: center;
        }

        .template-info h4 {
            font-size: 1.3rem;
            font-weight: 800;
            margin: 5px 0;
            color: var(--text-dark);
        }

        .btn-view-full {
            display: inline-block;
            margin-top: 10px;
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            border: 1px solid var(--primary);
            padding: 5px 15px;
            border-radius: 50px;
            transition: 0.3s;
        }

        .btn-view-full:hover {
            background: var(--primary);
            color: white;
        }

        .iframe-overlay {
            position: absolute;
            inset: 0;
            z-index: 5;
            background: rgba(0,0,0,0);
        }
    </style>

    <!-- HEADER -->
    <header style="padding: 160px 8% 100px; text-align: center; background: radial-gradient(circle at 50% 0%, #eff6ff 0%, #ffffff 70%);">
        <div class="container reveal active">
            <span class="label">Web Design Hub</span>
            <h1>Premium Vorlagen. <span style="color: var(--primary);">Live Erleben.</span></h1>
            <p class="lead" style="margin: 0 auto 40px;">
                Entdecke meine Auswahl an exklusiven Web-Designs. Jede Vorlage wurde von kotsch.tech auf maximale Performance, saubere Struktur und einzigartiges CSS optimiert.
            </p>
        </div>
    </header>

    <!-- SHOWROOM GRID -->
    <section style="padding: 50px 8% 100px;">
        <div class="container">
            <div class="template-grid">
                @foreach($templates as $tpl)
                    <div class="reveal">
                        <a href="/demo/{{ $tpl['slug'] }}" class="laptop-container">
                            <div class="laptop-screen-frame">
                                <div class="laptop-viewport">
                                    <div class="iframe-overlay"></div>
                                    <!-- Hier wird die echte Demo-Seite geladen -->
                                    <iframe src="/demo/{{ $tpl['slug'] }}" loading="lazy"></iframe>
                                </div>
                            </div>
                            <div class="laptop-base"></div>
                        </a>
                        <div class="template-info">
                            <span class="label" style="font-size: 0.65rem; margin-bottom: 5px;">{{ $tpl['cat'] }}</span>
                            <h4>{{ $tpl['name'] }}</h4>
                            <a href="/demo/{{ $tpl['slug'] }}" class="btn-view-full">Vollbild Vorschau</a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- =============================================
         DER FIX FÜR DEN BUTTON (Brecheisen-Methode)
         ============================================= -->
    <section style="background: #f8fafc; padding: 140px 5%; text-align: center; border-top: 1px solid #e2e8f0;">
        <div class="container reveal">
            <h2 style="font-size: 3.5rem; font-weight: 800; color: #0f172a; margin-bottom: 20px; letter-spacing: -2px;">
                Deine Seite braucht ein Update?
            </h2>
            <p style="max-width: 750px; margin: 0 auto 60px; font-size: 1.3rem; color: #64748b; line-height: 1.6;">
                Ich analysiere dein aktuelles CSS und mache deine Webseite fit für 2026. <br>
                Mehr Speed, bessere Struktur, einzigartiges Design.
            </p>
            
            <!-- DIESER BUTTON FUNKTIONIERT JETZT GARANTIERT -->
            <a href="/kontakt?subject=CSS-Optimierung" 
               style="background-color: #0f172a !important; 
                      color: #ffffff !important; 
                      padding: 22px 60px !important; 
                      border-radius: 50px !important; 
                      display: inline-block !important; 
                      font-weight: 800 !important; 
                      text-decoration: none !important; 
                      font-size: 1.2rem !important;
                      text-transform: uppercase !important;
                      letter-spacing: 1px !important;
                      box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important;
                      border: none !important;
                      cursor: pointer !important;
                      transition: all 0.3s ease !important;"
               onmouseover="this.style.backgroundColor='#2563eb'"
               onmouseout="this.style.backgroundColor='#0f172a'">
                JETZT ANALYSE STARTEN <i class="fas fa-arrow-right" style="margin-left: 15px; color: #2563eb;"></i>
            </a>
        </div>
    </section>

@endsection