@extends('apple.apple_layout')

@section('app-name', 'DE-Companion')
@section('app-desc', 'Study Hub. Dein Digital Engineering Studium komplett organisiert. Stundenplan, Mensa, Noten und Räume direkt im Griff.')
@section('app-category', 'iOS App')
@section('app-icon', 'fas fa-microchip')
@section('theme-color', '#0f4c75')
@section('bg-color', '#f4f4f5')

@section('app-ui')
    <div style="height: 100%; width: 100%; display: flex; flex-direction: column; background: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, sans-serif; position: relative;">
        
        <!-- Header -->
        <div style="padding: 50px 20px 10px; display: flex; justify-content: space-between; align-items: center;">
            <div style="width: 32px; height: 32px;"></div> <!-- Spacer -->
            <h2 style="font-size: 1.2rem; font-weight: 800; margin: 0; color: #000;">Study Hub</h2>
            <div style="width: 32px; height: 32px; background: #e4e4e7; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: #000;"><i class="fas fa-redo-alt"></i></div>
        </div>

        <!-- Scrollable Content -->
        <div style="padding: 10px 20px; flex: 1; overflow: hidden;">
            
            <!-- Main Live Card -->
            <div class="gradient-card" style="background: linear-gradient(135deg, #0f4c75, #d97706); border-radius: 24px; padding: 25px; color: white; margin-bottom: 15px; box-shadow: 0 10px 30px rgba(15, 76, 117, 0.3); position: relative; overflow: hidden;">
                <span style="font-size: 0.75rem; font-weight: 600; opacity: 0.9;">Digital Engineering DE24-1</span>
                <h1 style="font-size: 2.2rem; font-weight: 900; margin: 5px 0 15px; letter-spacing: -1px;">DE-DVDI</h1>
                <p style="font-size: 0.9rem; margin-bottom: 5px; opacity: 0.9;">Freitag, 13. März • 13:50 - 15:20</p>
                <p style="font-size: 0.9rem; margin-bottom: 20px; opacity: 0.9;">SR302 • Beck</p>
                
                <div style="display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700;">
                    <i class="fas fa-bolt" style="color: #fde047;"></i> Gerade live am Campus: VU-NATG
                </div>
            </div>

            <!-- Grid -->
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
                <div style="background: #e5e5e0; padding: 20px; border-radius: 20px;">
                    <i class="fas fa-calendar-check" style="font-size: 1.2rem; color: #000; margin-bottom: 10px;"></i>
                    <div style="font-size: 1.8rem; font-weight: 800; color: #000; margin-bottom: 5px;">1</div>
                    <span style="font-size: 0.75rem; color: #52525b;">Veranstaltungen heute</span>
                </div>
                <div style="background: #e5e5e0; padding: 20px; border-radius: 20px;">
                    <i class="fas fa-users" style="font-size: 1.2rem; color: #000; margin-bottom: 10px;"></i>
                    <div style="font-size: 1.8rem; font-weight: 800; color: #000; margin-bottom: 5px;">8</div>
                    <span style="font-size: 0.75rem; color: #52525b;">Dozenten in 7 Tagen</span>
                </div>
                <div style="background: #e5e5e0; padding: 20px; border-radius: 20px;">
                    <i class="fas fa-map-marker-alt" style="font-size: 1.2rem; color: #000; margin-bottom: 10px;"></i>
                    <div style="font-size: 1.8rem; font-weight: 800; color: #000; margin-bottom: 5px;">5</div>
                    <span style="font-size: 0.75rem; color: #52525b;">Räume in 7 Tagen</span>
                </div>
                <div style="background: #e5e5e0; padding: 20px; border-radius: 20px;">
                    <i class="fas fa-sparkles" style="font-size: 1.2rem; color: #000; margin-bottom: 10px;"></i>
                    <div style="font-size: 1.8rem; font-weight: 800; color: #000; margin-bottom: 5px;">4</div>
                    <span style="font-size: 0.75rem; color: #52525b;">Spezialtermine</span>
                </div>
            </div>

            <!-- Bottom Status -->
            <div style="background: #e5e5e0; padding: 20px; border-radius: 20px; display: flex; justify-content: space-between; align-items: center;">
                <h3 style="font-size: 1.1rem; font-weight: 800; margin: 0;">Jetzt am Campus</h3>
                <div style="background: #dcfce7; color: #166534; padding: 6px 12px; border-radius: 10px; font-size: 0.7rem; font-weight: 700;">Campus live</div>
            </div>
        </div>

        <!-- Tab Bar -->
        <div style="margin-top: auto; background: rgba(244,244,245,0.9); backdrop-filter: blur(20px); border-top: 1px solid #e4e4e7; display: flex; justify-content: space-around; padding: 15px 20px 25px;">
            <div style="text-align: center; color: #0f4c75;"><i class="fas fa-home" style="font-size: 1.2rem; display: block; margin-bottom: 5px;"></i><span style="font-size: 0.65rem; font-weight: 700;">Home</span></div>
            <div style="text-align: center; color: #71717a;"><i class="fas fa-calendar" style="font-size: 1.2rem; display: block; margin-bottom: 5px;"></i><span style="font-size: 0.65rem; font-weight: 600;">Plan</span></div>
            <div style="text-align: center; color: #71717a;"><i class="fas fa-utensils" style="font-size: 1.2rem; display: block; margin-bottom: 5px;"></i><span style="font-size: 0.65rem; font-weight: 600;">Mensa</span></div>
            <div style="text-align: center; color: #71717a;"><i class="fas fa-graduation-cap" style="font-size: 1.2rem; display: block; margin-bottom: 5px;"></i><span style="font-size: 0.65rem; font-weight: 600;">Studium</span></div>
            <div style="text-align: center; color: #71717a;"><i class="fas fa-ellipsis-h" style="font-size: 1.2rem; display: block; margin-bottom: 5px;"></i><span style="font-size: 0.65rem; font-weight: 600;">Mehr</span></div>
        </div>
    </div>

    <style>
        /* Sanfte Animation für den Farbverlauf der Karte */
        .gradient-card { background-size: 200% 200% !important; animation: gradShift 5s ease infinite alternate; }
        @keyframes gradShift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
    </style>
@endsection

@section('app-specs')
    <li><span style="color: #64748b;">Zielgruppe</span><strong style="color: #0f172a;">Studenten (BA)</strong></li>
    <li><span style="color: #64748b;">Technologie</span><strong style="color: #0f172a;">SwiftUI / API Sync</strong></li>
    <li><span style="color: #64748b;">Status</span><strong style="color: #10b981;">Live am Campus</strong></li>
@endsection