@php
    // Prüfen, ob die Seite im Simulator (Iframe) geladen wird
    $isMonitor = request()->query('view') === 'monitor';
@endphp

@if(!$isMonitor)
    @extends('layouts.app')
    @section('content')
@endif

    <style>
        /* GEMEINSAME ANIMATIONEN FÜR ALLE APPS */
        @keyframes spin { 100% { transform: rotate(360deg); } }
        @keyframes scan { 0% { top: 0; opacity: 0;} 10% {opacity:1;} 90% {opacity:1;} 100% { top: 100%; opacity: 0;} }
        @keyframes popup { 0%, 80%, 100% { transform: translateY(20px); opacity: 0; } 10%, 70% { transform: translateY(0); opacity: 1; } }
        @keyframes dropDown { 0%, 100% { transform: translateY(-20px) scale(0.9); opacity: 0; } 10%, 90% { transform: translateY(0) scale(1); opacity: 1; } }
        @keyframes typingBlink { 50% { opacity: 0; } }

        /* NUR FÜR DEN MONITOR (IFRAME) */
        @if($isMonitor)
            nav, footer { display: none !important; }
            html, body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; background: transparent !important; }
            
            .pure-app-ui { 
                width: 100vw; height: 100vh; 
                background: @yield('bg-color', '#f8fafc'); 
                font-family: 'Plus Jakarta Sans', sans-serif;
                position: relative; overflow: hidden;
            }
        @else
        /* FÜR DIE ECHTE UNTERSEITE (Vollbild) */
            .apple-detail-page { 
                padding: 160px 5% 100px; display: grid; grid-template-columns: 1fr 1.2fr; 
                gap: 80px; max-width: 1200px; margin: 0 auto; align-items: center; 
            }
            
            /* Der Titanium Rahmen, der nur auf der Unterseite generiert wird */
            .titanium-phone {
                width: 320px; height: 660px; background: #d4d4d8; border-radius: 55px; padding: 5px;
                box-shadow: inset 0 0 10px rgba(0,0,0,0.2), 0 40px 80px -20px rgba(0,0,0,0.3); 
                position: relative; margin: 0 auto;
            }
            /* Hardware Tasten */
            .btn-mute { position: absolute; left: -3px; top: 120px; width: 4px; height: 30px; background: #a1a1aa; border-radius: 4px 0 0 4px; }
            .btn-vol { position: absolute; left: -4px; width: 5px; height: 60px; background: #a1a1aa; border-radius: 4px 0 0 4px; }
            .btn-power { position: absolute; right: -4px; top: 190px; width: 5px; height: 90px; background: #a1a1aa; border-radius: 0 4px 4px 0; }

            .titanium-bezels { width: 100%; height: 100%; background: #000; border-radius: 51px; padding: 12px; }
            .pure-app-ui { 
                width: 100%; height: 100%; background: @yield('bg-color', '#f8fafc'); 
                border-radius: 39px; overflow: hidden; position: relative; 
                font-family: 'Plus Jakarta Sans', sans-serif;
            }
            .island { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 100px; height: 30px; background: #000; border-radius: 20px; z-index: 50; }

            /* Text Styling */
            .app-text-content h1 { font-size: 3.5rem; font-weight: 900; letter-spacing: -2px; margin-bottom: 20px; color: #0f172a; }
            .app-text-content p { font-size: 1.2rem; color: #64748b; margin-bottom: 40px; line-height: 1.6; }
            
            .feature-box { background: white; border: 1px solid #e2e8f0; padding: 30px; border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); margin-top: 40px; }
            .feature-box ul { list-style: none; padding: 0; }
            .feature-box li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f1f5f9; color: #334155; font-size: 0.95rem; }
            .feature-box li:last-child { border-bottom: none; }
            
            @media (max-width: 900px) { .apple-detail-page { grid-template-columns: 1fr; text-align: center; } }
        @endif
    </style>

    <!-- INHALT: IFRAME ODER VOLLBILD -->
    @if($isMonitor)
        <!-- NUR DIE APP OBERFLÄCHE (Füllt das Iframe komplett aus) -->
        <div class="pure-app-ui">
            @yield('app-ui')
        </div>
    @else
        <!-- DIE KOMPLETTE PRODUKTSEITE -->
        <div class="apple-detail-page">
            <div class="reveal">
                <div class="titanium-phone">
                    <div class="btn-mute"></div>
                    <div class="btn-vol" style="top: 170px;"></div>
                    <div class="btn-vol" style="top: 245px;"></div>
                    <div class="btn-power"></div>
                    
                    <div class="titanium-bezels">
                        <div class="pure-app-ui">
                            <div class="island"></div>
                            @yield('app-ui')
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="app-text-content reveal">
                <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 20px;">
                    <div style="width: 50px; height: 50px; background: @yield('theme-color', '#007aff'); color: white; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 10px 20px rgba(0,0,0,0.1);">
                        <i class="@yield('app-icon')"></i>
                    </div>
                    <span style="font-weight: 800; color: @yield('theme-color', '#007aff'); text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem;">@yield('app-category')</span>
                </div>
                
                <h1>@yield('app-name')</h1>
                <p>@yield('app-desc')</p>
                
                <a href="/support" style="display: inline-block; background: #0f172a; color: white; padding: 18px 45px; border-radius: 50px; font-weight: 800; text-decoration: none; transition: 0.3s; box-shadow: 0 10px 25px rgba(0,0,0,0.1);">Im App Store laden <i class="fas fa-arrow-right" style="margin-left: 10px;"></i></a>

                <div class="feature-box">
                    <h4 style="margin-bottom: 15px; color: #94a3b8; text-transform: uppercase; font-size: 0.75rem; font-weight: 800; letter-spacing: 1px;">App Details</h4>
                    <ul>
                        @yield('app-specs')
                    </ul>
                </div>
            </div>
        </div>
    @endif

@if(!$isMonitor)
    @endsection
@endif