@extends('layouts.app')

@section('content')
    <!-- =============================================
         1. HERO (Apple Store Aesthetics)
         ============================================= -->
    <header style="padding: 160px 8% 100px; text-align: center; background: #ffffff; border-bottom: 1px solid #f5f5f7;">
        <div class="container reveal active">
            <span style="color: #007aff; font-weight: 800; font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; display: inline-block;">
                Automated iOS Repository
            </span>
            <h1 style="font-size: clamp(3.5rem, 9vw, 5.5rem); font-weight: 800; letter-spacing: -3px; color: #1d1d1f; line-height: 1.1; margin-bottom: 20px;">
                Apps für <span style="color: #007aff;">Unterwegs.</span>
            </h1>
            <p class="lead" style="max-width: 650px; margin: 0 auto; color: #86868b; font-size: 1.25rem;">
                Entdecke meine mobilen Lösungen. Live aus dem System geladen, perfekt optimiert für das iPhone Ökosystem.
            </p>
        </div>
    </header>

    <!-- =============================================
         2. DYNAMIC IPHONE GRID
         ============================================= -->
    <section style="padding: 100px 8% 140px; background: #f5f5f7;">
        <div class="container">
            
            <div class="iphone-grid">
                @if(count($products) > 0)
                    @foreach($products as $product)
                    <div class="reveal">
                        <div class="iphone-presentation">
                            
                            <!-- IPHONE 16 PRO MOCKUP (Titanium Look) -->
                            <div class="iphone-hardware">
                                <!-- Hardware Buttons (Lautstärke & Power) -->
                                <div class="btn-mute"></div>
                                <div class="btn-vol-up"></div>
                                <div class="btn-vol-down"></div>
                                <div class="btn-power"></div>

                                <div class="iphone-bezels">
                                    <div class="iphone-screen">
                                        <div class="dynamic-island"></div>
                                        
                                        <!-- OVERLAY: Verhindert Scrollen im Iframe beim Drüberwischen -->
                                        <div class="iframe-touch-shield"></div>
                                        
                                        <!-- LIVE APP VORSCHAU -->
                                        <iframe src="/apple/{{ $product['slug'] }}?view=monitor" loading="lazy"></iframe>
                                    </div>
                                </div>
                            </div>

                            <!-- APP INFO & METADATEN -->
                            <div class="iphone-meta">
                                <span class="app-tag">{{ $product['tag'] }}</span>
                                <h3>{{ $product['name'] }}</h3>
                                <div class="app-actions">
                                    <a href="/apple/{{ $product['slug'] }}" class="btn-apple-primary">App öffnen</a>
                                    <a href="/support" class="btn-apple-secondary"><i class="fas fa-question-circle"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                @else
                    <div style="text-align: center; grid-column: 1 / -1; padding: 100px 0;">
                        <i class="fab fa-apple" style="font-size: 4rem; color: #d2d2d7; margin-bottom: 20px;"></i>
                        <h3 style="color: #1d1d1f; font-size: 1.5rem;">Keine Apps gefunden.</h3>
                        <p style="color: #86868b;">Erstelle eine neue Blade-Datei im Ordner resources/views/apple/.</p>
                    </div>
                @endif
            </div>

        </div>
    </section>

    <!-- =============================================
         STYLING (Ultra-Realistic Mockup)
         ============================================= -->
    <style>
        .iphone-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 
            gap: 80px 40px; 
            justify-items: center; 
        }
        
        .iphone-presentation {
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .iphone-presentation:hover {
            transform: translateY(-15px);
        }

        /* --- IPHONE HARDWARE (TITANIUM STYLE) --- */
        .iphone-hardware {
            width: 300px; 
            height: 620px; 
            background: #d4d4d8; /* Titanium Silber */
            border-radius: 55px;
            padding: 4px;
            position: relative;
            box-shadow: 
                inset 0 0 10px rgba(0,0,0,0.2), 
                0 30px 60px -15px rgba(0,0,0,0.2);
            transition: 0.5s ease;
        }

        /* Hardware Buttons an den Seiten */
        .btn-mute { position: absolute; left: -3px; top: 120px; width: 4px; height: 30px; background: #a1a1aa; border-radius: 4px 0 0 4px; }
        .btn-vol-up { position: absolute; left: -4px; top: 170px; width: 5px; height: 60px; background: #a1a1aa; border-radius: 4px 0 0 4px; }
        .btn-vol-down { position: absolute; left: -4px; top: 245px; 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; }

        /* Schwarzer Rahmen (Bezels) */
        .iphone-bezels {
            width: 100%; 
            height: 100%; 
            background: #000; 
            border-radius: 51px;
            padding: 10px; /* Dicke des schwarzen Randes */
        }

        /* Der eigentliche Bildschirm */
        .iphone-screen {
            width: 100%; 
            height: 100%; 
            background: #ffffff; 
            border-radius: 42px;
            position: relative; 
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Dynamic Island */
        .dynamic-island {
            position: absolute; 
            top: 10px; 
            left: 50%; 
            transform: translateX(-50%);
            width: 100px; 
            height: 30px; 
            background: #000; 
            border-radius: 20px; 
            z-index: 20;
        }

/* In der apple/index.blade.php (Die Titanium Handys) */
.iphone-screen iframe { 
    width: 100%; 
    height: 100%; 
    border: none; 
    background: transparent;
    pointer-events: none; /* Kein Scrollen im Grid! */
}
        
        .iframe-touch-shield {
            position: absolute; 
            inset: 0; 
            z-index: 10;
        }

        .iphone-presentation:hover .iphone-hardware {
            box-shadow: 
                inset 0 0 10px rgba(0,0,0,0.2), 
                0 40px 80px -10px rgba(0,0,0,0.3);
        }

        /* --- APP INFO UNTER DEM HANDY --- */
        .iphone-meta { 
            text-align: center; 
            margin-top: 35px; 
            width: 100%;
        }
        .app-tag { 
            font-size: 0.7rem; 
            font-weight: 800; 
            color: #86868b; 
            text-transform: uppercase; 
            letter-spacing: 1px; 
        }
        .iphone-meta h3 { 
            font-size: 1.6rem; 
            margin: 5px 0 20px; 
            color: #1d1d1f; 
            font-weight: 800;
            letter-spacing: -0.5px;
        }

        .app-actions {
            display: flex; 
            gap: 10px; 
            justify-content: center; 
        }

        .btn-apple-primary { 
            padding: 12px 30px; 
            background: #007aff; 
            color: #fff !important; 
            text-decoration: none; 
            border-radius: 50px; 
            font-size: 0.9rem; 
            font-weight: 700; 
            transition: 0.3s;
            box-shadow: 0 4px 10px rgba(0, 122, 255, 0.2);
        }
        .btn-apple-primary:hover { background: #0062cc; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 122, 255, 0.3); }

        .btn-apple-secondary {
            width: 42px; height: 42px;
            display: flex; align-items: center; justify-content: center;
            background: #e5e5ea;
            color: #1d1d1f;
            border-radius: 50%;
            text-decoration: none;
            transition: 0.3s;
        }
        .btn-apple-secondary:hover { background: #d1d1d6; }

        @media (max-width: 400px) {
            .iphone-hardware { width: 260px; height: 540px; }
        }
    </style>
@endsection