@extends('layouts.app')

@section('content')
    <!-- =============================================
         HERO: WINDOWS LIVE LAB
         ============================================= -->
    <header style="padding: 160px 8% 80px; text-align: center; background: radial-gradient(circle at 50% 0%, #eff6ff 0%, #ffffff 70%);">
        <div class="container reveal active">
            <span class="label">Live Software Repository</span>
            <h1 style="font-size: 4.5rem; font-weight: 900; letter-spacing: -3px;">Windows<span>Lab.</span></h1>
            <p class="lead" style="margin: 0 auto;">Jedes Modul ist eine native Eigenentwicklung. Erlebe alle Tools hier in der Live-Vorschau.</p>
        </div>
    </header>

    <!-- =============================================
         DYNAMIC LIVE GRID
         ============================================= -->
    <section style="padding: 60px 8% 120px; background: #f8fafc;">
        <div class="container">
            
            <div class="live-lab-grid">
                @if(count($products) > 0)
                    @foreach($products as $product)
                    <div class="reveal">
                        <a href="/windows/{{ $product['slug'] }}" class="lab-portal-card">
                            <!-- DER MINI-MONITOR (LIVE VORSCHAU) -->
                            <div class="mini-monitor">
                                <div class="monitor-screen">
                                    <div class="iframe-overlay"></div> <!-- Verhindert Klicken im Iframe innerhalb der Kachel -->
                                    <iframe src="/windows/{{ $product['slug'] }}?view=monitor" loading="lazy"></iframe>
                                </div>
                                <div class="monitor-bottom"></div>
                            </div>

                            <div class="lab-info">
                                <div class="status-indicator">
                                    <span class="dot"></span> NATIVE_MODULE
                                </div>
                                <h3>{{ $product['name'] }}</h3>
                                <p>Optimierte C-Architektur // Ready for Deployment.</p>
                                <div class="card-action">
                                    DETAILS ANSEHEN <i class="fas fa-arrow-right"></i>
                                </div>
                            </div>
                        </a>
                    </div>
                    @endforeach
                @else
                    <div style="text-align: center; grid-column: span 3; padding: 100px; opacity: 0.5;">
                        <i class="fas fa-box-open" style="font-size: 4rem; margin-bottom: 20px;"></i>
                        <p>Keine Software-Module gefunden.</p>
                    </div>
                @endif
            </div>

        </div>
    </section>

    <style>
        .live-lab-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); 
            gap: 50px; 
        }
        
        .lab-portal-card { 
            background: white; border-radius: 32px; border: 1px solid #e2e8f0; overflow: hidden; 
            text-decoration: none; color: inherit; display: block; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 10px 30px rgba(0,0,0,0.02);
        }

        /* --- MINI MONITOR STYLING --- */
        .mini-monitor {
            background: #0f172a; padding: 15px; position: relative;
        }

        .monitor-screen {
            height: 240px; background: #000; border-radius: 8px; overflow: hidden; position: relative;
            border: 1px solid #1e293b;
        }

        .monitor-screen iframe {
            width: 100%; height: 100%; border: none; 
            pointer-events: none; /* User kann nicht im Iframe scrollen */
        }

        /* Der Trick: Eine unsichtbare Schicht über dem Iframe, damit man die Karte anklicken kann */
        .iframe-overlay {
            position: absolute; inset: 0; z-index: 5;
        }

        .monitor-bottom {
            height: 6px; width: 60px; background: #1e293b; margin: 10px auto 0; border-radius: 0 0 10px 10px;
        }

        /* --- INFO BEREICH --- */
        .lab-info { padding: 35px; }
        .status-indicator { font-size: 0.7rem; font-weight: 800; color: #10b981; display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }
        .status-indicator .dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; box-shadow: 0 0 10px #10b981; }
        
        .lab-info h3 { font-size: 1.6rem; font-weight: 900; margin-bottom: 10px; color: #0f172a; }
        .lab-info p { color: #64748b; font-size: 0.9rem; margin-bottom: 30px; }

        .card-action { font-weight: 800; font-size: 0.8rem; color: #2563eb; letter-spacing: 1px; display: flex; justify-content: space-between; align-items: center; }

        /* Hover Effekte */
        .lab-portal-card:hover { transform: translateY(-15px); border-color: #2563eb; box-shadow: 0 40px 80px -20px rgba(37, 99, 235, 0.2); }
        .lab-portal-card:hover .monitor-screen { border-color: #2563eb; }

        @media (max-width: 768px) { .live-lab-grid { grid-template-columns: 1fr; } }
    </style>
@endsection