@extends('layouts.app')

@section('content')

    <!-- =============================================
         1. HERO SECTION (Android Focus)
         ============================================= -->
    <header style="padding: 160px 5% 100px; text-align: center; background: radial-gradient(circle at 50% 0%, #ecfdf5 0%, #ffffff 70%);">
        <div class="container reveal active">
            <span style="background: #d1fae5; color: #059669; padding: 8px 20px; border-radius: 50px; font-weight: 800; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; display: inline-block; margin-bottom: 30px;">
                Mobile Development
            </span>
            <h1 style="font-size: clamp(3.5rem, 9vw, 6rem); font-weight: 900; line-height: 1; letter-spacing: -3px; margin-bottom: 30px; color: var(--text-dark);">
                Smart. Effizient.<br>
                <span style="color: #059669;">Werbefrei.</span>
            </h1>
            <p style="font-size: 1.4rem; color: var(--text-gray); max-width: 800px; margin: 0 auto 50px; line-height: 1.6;">
                Apps, die dein Smartphone nicht zumüllen. Fokus auf Privatsphäre, Akkulaufzeit und nützliche Funktionen. Native Android-Entwicklung.
            </p>
        </div>
    </header>

    <!-- =============================================
         2. FLAGSHIP APP: LUMINA PRO
         ============================================= -->
    <section style="padding: 120px 5%;">
        <div class="container reveal">
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center;">
                
                <!-- PHONE VISUAL (Links) -->
                <div style="display: flex; justify-content: center;">
                    <div style="width: 320px; height: 650px; background: #1e293b; border-radius: 45px; border: 10px solid #334155; position: relative; box-shadow: 0 40px 80px -10px rgba(0,0,0,0.2); overflow: hidden;">
                        <!-- Screen -->
                        <div style="width: 100%; height: 100%; background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; position: relative;">
                            
                            <!-- App UI Simulation -->
                            <div style="width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, #fbbf24 0%, #d97706 100%); box-shadow: 0 0 60px #fbbf24; margin-bottom: 40px; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-power-off" style="font-size: 3rem; color: white;"></i>
                            </div>
                            
                            <h3 style="font-weight: 900; letter-spacing: 2px; margin-bottom: 10px;">LUMINA</h3>
                            <span style="color: #94a3b8; text-transform: uppercase; letter-spacing: 4px; font-size: 0.8rem;">Pro Flashlight</span>

                            <!-- UI Buttons -->
                            <div style="display: flex; gap: 20px; margin-top: 60px;">
                                <div style="width: 50px; height: 50px; background: rgba(255,255,255,0.1); border-radius: 15px; display: flex; align-items: center; justify-content: center;"><i class="fas fa-bolt"></i></div>
                                <div style="width: 50px; height: 50px; background: rgba(255,255,255,0.1); border-radius: 15px; display: flex; align-items: center; justify-content: center;"><i class="fas fa-exclamation-triangle"></i></div>
                                <div style="width: 50px; height: 50px; background: rgba(255,255,255,0.1); border-radius: 15px; display: flex; align-items: center; justify-content: center;"><i class="fas fa-adjust"></i></div>
                            </div>
                        </div>
                        <!-- Notch -->
                        <div style="position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 30px; background: #334155; border-radius: 0 0 20px 20px;"></div>
                    </div>
                </div>

                <!-- TEXT (Rechts) -->
                <div>
                    <div style="display: flex; gap: 10px; margin-bottom: 20px;">
                        <span style="background: #f59e0b; color: white; padding: 6px 12px; border-radius: 6px; font-weight: 700; font-size: 0.8rem;">TOP RATED</span>
                        <span style="background: #0f172a; color: white; padding: 6px 12px; border-radius: 6px; font-weight: 700; font-size: 0.8rem;">UTILITY</span>
                    </div>
                    <h2 style="font-size: 3rem; font-weight: 900; margin-bottom: 20px; line-height: 1.1;">Lumina Pro.</h2>
                    <p style="font-size: 1.2rem; color: var(--text-gray); margin-bottom: 30px; line-height: 1.6;">
                        Mehr als nur eine Taschenlampe. Lumina Pro bietet Stroboskop-Effekte für Notfälle, Morse-Code-Signalisierung und einen augenschonenden Display-Modus. Startet in unter 0.5 Sekunden.
                    </p>
                    
                    <ul style="list-style: none; margin-bottom: 40px; display: grid; gap: 15px;">
                        <li style="display: flex; align-items: center; gap: 15px; font-weight: 600; color: var(--text-dark);">
                            <i class="fas fa-check-circle" style="color: #f59e0b;"></i> Keine Tracker / Spyware
                        </li>
                        <li style="display: flex; align-items: center; gap: 15px; font-weight: 600; color: var(--text-dark);">
                            <i class="fas fa-check-circle" style="color: #f59e0b;"></i> SOS-Modus (International)
                        </li>
                        <li style="display: flex; align-items: center; gap: 15px; font-weight: 600; color: var(--text-dark);">
                            <i class="fas fa-check-circle" style="color: #f59e0b;"></i> Batterie-Sparmodus
                        </li>
                    </ul>

                    <div style="display: flex; align-items: center; gap: 20px;">
                        <span style="font-size: 2rem; font-weight: 900;">0,99 €</span>
                        <a href="#" class="btn-nav" style="background: #0f172a;">Im PlayStore kaufen</a>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- =============================================
         3. APP COLLECTION (Grid)
         ============================================= -->
    <section class="bg-gray" style="padding: 120px 5%;">
        <div class="container reveal">
            <div style="text-align: center; margin-bottom: 80px;">
                <span class="label" style="color: #64748b;">App Store</span>
                <h2 style="font-size: 3rem; font-weight: 900;">Tools für deinen Alltag.</h2>
                <p style="font-size: 1.2rem; color: var(--text-gray);">Gesundheit, Produktivität und Technik.</p>
            </div>

            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px;">

                <!-- APP 1: AquaPro -->
                <div class="app-card">
                    <div class="app-icon" style="background: #e0f2fe; color: #0ea5e9;"><i class="fas fa-tint"></i></div>
                    <div class="app-content">
                        <div class="app-header">
                            <h4>AquaPro Tracker</h4>
                            <span class="price-badge">Free</span>
                        </div>
                        <p>Intelligenter Wassertracker. Berechnet deinen Bedarf anhand von Wetter & Aktivität.</p>
                        <a href="#" class="app-link">Download <i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>

                <!-- APP 2: MedTimer -->
                <div class="app-card">
                    <div class="app-icon" style="background: #fee2e2; color: #dc2626;"><i class="fas fa-pills"></i></div>
                    <div class="app-content">
                        <div class="app-header">
                            <h4>MedTimer</h4>
                            <span class="price-badge">Free</span>
                        </div>
                        <p>Vergiss nie wieder deine Medikamente. Mit Vorrats-Check und Erinnerung.</p>
                        <a href="#" class="app-link">Download <i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>

                <!-- APP 3: CorePlanner -->
                <div class="app-card">
                    <div class="app-icon" style="background: #f3e8ff; color: #7c3aed;"><i class="fas fa-calendar-alt"></i></div>
                    <div class="app-content">
                        <div class="app-header">
                            <h4>CorePlanner</h4>
                            <span class="price-badge">1,99 €</span>
                        </div>
                        <p>Tagesplaner für Time-Blocking. Synchronisiert deinen Kalender lokal.</p>
                        <a href="#" class="app-link">Kaufen <i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>

                <!-- APP 4: Electro Buddy -->
                <div class="app-card">
                    <div class="app-icon" style="background: #fffbeb; color: #f59e0b;"><i class="fas fa-bolt"></i></div>
                    <div class="app-content">
                        <div class="app-header">
                            <h4>Electro Buddy</h4>
                            <span class="price-badge">2,99 €</span>
                        </div>
                        <p>Formelsammlung und Rechner für Elektriker. VDE konform.</p>
                        <a href="#" class="app-link">Kaufen <i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>

                <!-- APP 5: Network Tools -->
                <div class="app-card">
                    <div class="app-icon" style="background: #ecfdf5; color: #10b981;"><i class="fas fa-wifi"></i></div>
                    <div class="app-content">
                        <div class="app-header">
                            <h4>NetAdmin Tools</h4>
                            <span class="price-badge">Free</span>
                        </div>
                        <p>Ping, Traceroute und Portscan direkt vom Handy. Für Sysadmins.</p>
                        <a href="#" class="app-link">Download <i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>

                <!-- APP 6: Quick QR -->
                <div class="app-card">
                    <div class="app-icon" style="background: #f1f5f9; color: #475569;"><i class="fas fa-qrcode"></i></div>
                    <div class="app-content">
                        <div class="app-header">
                            <h4>Quick QR</h4>
                            <span class="price-badge">Free</span>
                        </div>
                        <p>QR Code Scanner ohne Werbung. Erstellt auch Codes für WLAN & Kontakte.</p>
                        <a href="#" class="app-link">Download <i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- Custom CSS für die App Cards -->
    <style>
        .app-card {
            background: white; border-radius: 24px; padding: 30px; 
            border: 1px solid #e2e8f0; display: flex; align-items: flex-start; gap: 20px;
            transition: 0.3s;
        }
        .app-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-color: #059669; }
        
        .app-icon { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
        
        .app-content { flex-grow: 1; }
        .app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
        .app-header h4 { font-size: 1.1rem; font-weight: 800; margin: 0; }
        
        .price-badge { font-size: 0.75rem; font-weight: 700; background: #f1f5f9; padding: 4px 8px; border-radius: 6px; color: var(--text-dark); }
        
        .app-card p { font-size: 0.9rem; color: var(--text-gray); margin-bottom: 15px; line-height: 1.5; }
        
        .app-link { text-decoration: none; color: #059669; font-weight: 700; font-size: 0.9rem; }
        .app-link:hover { color: #047857; }
    </style>

    <!-- =============================================
         4. CUSTOM APP REQUEST
         ============================================= -->
    <section style="padding: 120px 5%; text-align: center;">
        <div class="container reveal">
            <div style="background: #0f172a; border-radius: 40px; padding: 80px 40px; color: white; position: relative; overflow: hidden;">
                <h2 style="font-size: 3rem; margin-bottom: 20px; color: white;">Eigene Firmen-App?</h2>
                <p style="font-size: 1.3rem; opacity: 0.8; max-width: 600px; margin: 0 auto 40px;">
                    Ich entwickle individuelle Android-Lösungen für dein Unternehmen. 
                    Lagerverwaltung, Zeiterfassung oder Kunden-Apps.
                </p>
                <a href="/kontakt" class="btn-nav" style="background: #059669; color: white;">App anfragen</a>
                
                <!-- Deko -->
                <i class="fab fa-android" style="position: absolute; right: -30px; bottom: -30px; font-size: 20rem; opacity: 0.05; transform: rotate(-15deg);"></i>
            </div>
        </div>
    </section>

@endsection