@extends('apple.apple_layout')

@section('app-name', 'PlanPilot')
@section('app-desc', 'Aus Text wird direkt ein Termin. Füge Mail-Inhalte, PDFs oder Scan-Text ein. PlanPilot erstellt daraus saubere Vorschläge.')
@section('app-category', 'iOS App')
@section('app-icon', 'fas fa-calendar-plus')
@section('theme-color', '#000000')
@section('bg-color', '#f8fafc')

@section('app-ui')
    <div style="height: 100%; width: 100%; display: flex; flex-direction: column; background: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, sans-serif; position: relative;">
        
        <!-- Header -->
        <div style="padding: 60px 20px 20px;">
            <h1 style="font-size: 2rem; font-weight: 900; letter-spacing: -1px; color: #000; margin-bottom: 5px;">PlanPilot</h1>
            <h2 style="font-size: 1.8rem; font-weight: 800; line-height: 1.1; color: #000; margin-bottom: 10px;">Aus Text wird direkt<br>ein Termin</h2>
            <p style="color: #64748b; font-size: 0.85rem; line-height: 1.5;">Füge Mail-Inhalte, PDFs oder Scan-Text ein. PlanPilot erstellt daraus saubere Vorschläge.</p>
        </div>

        <div style="padding: 0 20px; flex: 1;">
            <h3 style="font-size: 1.1rem; font-weight: 800; color: #000; margin-bottom: 15px;">Eingabe</h3>
            
            <!-- Scan/Text Area -->
            <div style="background: #e0e7ff; border-radius: 20px; padding: 25px; height: 180px; position: relative; overflow: hidden; box-shadow: inset 0 2px 10px rgba(0,0,0,0.02);">
                <p style="color: #64748b; font-size: 0.95rem; line-height: 1.6; margin: 0; position: relative; z-index: 2;">
                    Beispiel: „Bitte komm morgen um 12 Uhr ins Büro nach Oberlungwitz.“ Oder füge eine komplette Einladung mit Datum, Ort und Teilnehmern ein.
                </p>
                
                <!-- Laser Scanner Animation -->
                <div class="laser-scanner"></div>
            </div>

            <!-- Buttons -->
            <div style="margin-top: 25px; display: flex; flex-direction: column; gap: 15px;">
                <div style="background: white; padding: 16px; border-radius: 16px; text-align: center; font-weight: 700; color: #000; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.02);"><i class="fas fa-file-import" style="font-size: 1.2rem;"></i> Einfügen</div>
                <div style="background: white; padding: 16px; border-radius: 16px; text-align: center; font-weight: 700; color: #000; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.02);"><i class="fas fa-paperclip" style="font-size: 1.2rem;"></i> Datei importieren</div>
            </div>
        </div>

        <!-- Tab Bar mit Floating Button -->
        <div style="position: relative; margin-top: auto; padding: 15px 20px 25px;">
            <div style="background: white; border-radius: 50px; display: flex; justify-content: space-between; padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);">
                
                <div style="flex: 1; text-align: center; color: #2563eb; background: #eff6ff; padding: 10px 0; border-radius: 40px;">
                    <i class="fas fa-magic" style="font-size: 1.2rem; display: block; margin-bottom: 3px;"></i>
                    <span style="font-size: 0.65rem; font-weight: 700;">Analysieren</span>
                </div>
                
                <div style="flex: 1; text-align: center; color: #64748b; padding: 10px 0;">
                    <i class="fas fa-calendar-alt" style="font-size: 1.2rem; display: block; margin-bottom: 3px;"></i>
                    <span style="font-size: 0.65rem; font-weight: 600;">Vorschläge</span>
                </div>
                
                <div style="flex: 1; text-align: center; color: #64748b; padding: 10px 0;">
                    <i class="fas fa-sliders-h" style="font-size: 1.2rem; display: block; margin-bottom: 3px;"></i>
                    <span style="font-size: 0.65rem; font-weight: 600;">Einstellungen</span>
                </div>
            </div>
            
            <!-- Floating Scanner Label (aus Screenshot) -->
            <div style="position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 0.8rem; font-weight: 700; color: #000; display: flex; align-items: center; gap: 8px;">
                <i class="fas fa-expand"></i> Dokument scannen
            </div>
        </div>
    </div>

    <style>
        .laser-scanner {
            position: absolute; left: 0; width: 100%; height: 2px;
            background: #2563eb; box-shadow: 0 0 15px 5px rgba(37, 99, 235, 0.2);
            animation: scanText 3s infinite ease-in-out; z-index: 1;
        }
        @keyframes scanText { 0% { top: 10%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 90%; opacity: 0; } }
    </style>
@endsection

@section('app-specs')
    <li><span style="color: #64748b;">Technologie</span><strong style="color: #0f172a;">Machine Learning (OCR)</strong></li>
    <li><span style="color: #64748b;">Datenschutz</span><strong style="color: #0f172a;">100% On-Device Analyse</strong></li>
    <li><span style="color: #64748b;">Features</span><strong style="color: #0f172a;">Apple Calendar Sync</strong></li>
@endsection