@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">
                @php
                    $__appSlug   = request()->segment(2);
                    $__appMeta   = config('apple_apps.' . $__appSlug, []);
                    $__asUrl     = $__appMeta['appstore_url'] ?? null;
                    $__asPrice   = $__appMeta['price_formatted'] ?? null;
                    $__asIconUrl = $__appMeta['icon_url'] ?? null;
                @endphp

                <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 20px;">
                    @if($__asIconUrl)
                        <img src="{{ $__asIconUrl }}" alt="@yield('app-name') Icon"
                             style="width:50px;height:50px;border-radius:12px;box-shadow:0 10px 20px rgba(0,0,0,0.1);flex-shrink:0;">
                    @else
                        <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>
                    @endif
                    <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>
                        @if($__asPrice)
                            <div style="margin-top:4px;">
                                <span style="display:inline-block;background:{{ $__asPrice === 'Gratis' ? '#f0fdf4' : '#f0f9ff' }};color:{{ $__asPrice === 'Gratis' ? '#166534' : '#0c4a6e' }};border:1px solid {{ $__asPrice === 'Gratis' ? '#bbf7d0' : '#bae6fd' }};padding:3px 10px;border-radius:999px;font-size:0.7rem;font-weight:800;">{{ $__asPrice }}</span>
                            </div>
                        @endif
                    </div>
                </div>

                <h1>@yield('app-name')</h1>
                <p>@yield('app-desc')</p>

                <div style="display:flex;flex-wrap:wrap;gap:12px;align-items:center;">
                    @if($__asUrl)
                    <a href="{{ $__asUrl }}" target="_blank" rel="noopener"
                       style="display:inline-flex;align-items:center;gap:10px;background:#0f172a;color:white;padding:16px 32px;border-radius:50px;font-weight:800;text-decoration:none;transition:0.3s;box-shadow:0 10px 25px rgba(0,0,0,0.1);">
                        <i class="fab fa-apple" style="font-size:1.2rem;"></i>
                        Im App Store
                        <span style="background:rgba(255,255,255,0.15);padding:2px 8px;border-radius:999px;font-size:0.7rem;">{{ $__asPrice ?? 'Öffnen' }}</span>
                    </a>
                    @endif
                    <a href="/support" style="display:inline-flex;align-items:center;gap:8px;background:#f1f5f9;color:#334155;padding:16px 28px;border-radius:50px;font-weight:800;text-decoration:none;transition:0.3s;">
                        Support <i class="fas fa-arrow-right"></i>
                    </a>
                    <a href="/datenschutz" style="display:inline-flex;align-items:center;gap:8px;background:#ffffff;color:#334155;padding:16px 28px;border-radius:50px;font-weight:800;text-decoration:none;transition:0.3s;border:1px solid #e2e8f0;">
                        Datenschutz <i class="fas fa-shield-halved"></i>
                    </a>
                </div>

                <div style="margin-top: 20px; padding: 16px; border: 1px solid #dbeafe; border-radius: 16px; background: #eff6ff; color: #334155; font-size: 0.9rem; line-height: 1.6;">
                    Für App-Support-Anfragen werden die vom Nutzer bereitgestellten Daten zur Bearbeitung der Anfrage verarbeitet.
                </div>

                <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