@extends('apple.apple_layout')

@section('app-name', 'Convertly')
@section('app-desc', 'Schnelle Umrechnungen mit einem klaren, systemweiten Design. Präzise, schnell und ohne Werbung.')
@section('app-category', 'iOS App')
@section('app-icon', 'fas fa-exchange-alt')
@section('theme-color', '#2563eb')
@section('bg-color', '#f2f4f8') <!-- Das helle iOS-Blaugrau -->

@section('app-ui')
    <div style="height: 100%; width: 100%; display: flex; flex-direction: column; background: #f2f4f8; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; position: relative;">
        
        <!-- Header -->
        <div style="padding: 50px 20px 20px;">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <h1 style="font-size: 2.2rem; font-weight: 900; letter-spacing: -1px; color: #000; margin: 0;">Convertly</h1>
                <i class="far fa-question-circle" style="color: #64748b; font-size: 1.2rem;"></i>
            </div>
            <p style="color: #64748b; font-size: 0.85rem; margin-top: 5px; line-height: 1.4;">Schnelle Umrechnungen mit einem klaren,<br>systemweiten Design.</p>
        </div>

        <!-- Categories Scroll -->
        <div style="display: flex; gap: 10px; padding: 0 20px; margin-bottom: 25px; overflow: hidden;">
            <div style="background: #2563eb; color: white; padding: 15px; border-radius: 16px; width: 80px; flex-shrink: 0; text-align: center; box-shadow: 0 10px 20px rgba(37,99,235,0.3);">
                <i class="fas fa-ruler-horizontal" style="font-size: 1.2rem; margin-bottom: 8px;"></i>
                <div style="font-size: 0.75rem; font-weight: 600;">Länge</div>
            </div>
            <div style="background: white; color: #000; padding: 15px; border-radius: 16px; width: 80px; flex-shrink: 0; text-align: center; border: 1px solid #e2e8f0;">
                <i class="fas fa-vector-square" style="font-size: 1.2rem; margin-bottom: 8px;"></i>
                <div style="font-size: 0.75rem; font-weight: 600;">Fläche</div>
            </div>
            <div style="background: white; color: #000; padding: 15px; border-radius: 16px; width: 80px; flex-shrink: 0; text-align: center; border: 1px solid #e2e8f0;">
                <i class="fas fa-cube" style="font-size: 1.2rem; margin-bottom: 8px;"></i>
                <div style="font-size: 0.75rem; font-weight: 600;">Volumen</div>
            </div>
            <div style="background: white; color: #000; padding: 15px; border-radius: 16px; width: 80px; flex-shrink: 0; text-align: center; border: 1px solid #e2e8f0;">
                <i class="fas fa-weight-hanging" style="font-size: 1.2rem; margin-bottom: 8px;"></i>
                <div style="font-size: 0.75rem; font-weight: 600;">Masse</div>
            </div>
        </div>

        <!-- Conversion Area -->
        <div style="padding: 0 20px; position: relative;">
            <!-- VON Box -->
            <div style="background: white; border-radius: 24px; padding: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.03);">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                    <span style="font-size: 0.7rem; font-weight: 700; color: #94a3b8; letter-spacing: 1px;">VON</span>
                    <div style="background: #eff6ff; color: #2563eb; padding: 6px 12px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; display: flex; gap: 8px; align-items: center;">
                        Meter (m) <i class="fas fa-chevron-down" style="font-size: 0.6rem;"></i>
                    </div>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: flex-end;">
                    <span class="animated-val-1" style="font-size: 3rem; font-weight: 800; color: #cbd5e1; letter-spacing: -2px;">0</span>
                    <span style="font-size: 1.2rem; font-weight: 600; color: #64748b; margin-bottom: 8px;">m</span>
                </div>
            </div>

            <!-- Swap Button -->
            <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10;">
                <div class="swap-rotate" style="width: 46px; height: 46px; background: #3b82f6; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; border: 4px solid #f2f4f8; box-shadow: 0 4px 10px rgba(37,99,235,0.3);">
                    <i class="fas fa-exchange-alt" style="transform: rotate(90deg);"></i>
                </div>
            </div>

            <!-- NACH Box -->
            <div style="background: white; border-radius: 24px; padding: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); margin-top: 10px;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                    <span style="font-size: 0.7rem; font-weight: 700; color: #94a3b8; letter-spacing: 1px;">NACH</span>
                    <div style="background: #eff6ff; color: #2563eb; padding: 6px 12px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; display: flex; gap: 8px; align-items: center;">
                        Kilometer (km) <i class="fas fa-chevron-down" style="font-size: 0.6rem;"></i>
                    </div>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: flex-end;">
                    <span class="animated-val-2" style="font-size: 3rem; font-weight: 800; color: #cbd5e1; letter-spacing: -2px;">0</span>
                    <span style="font-size: 1.2rem; font-weight: 600; color: #64748b; margin-bottom: 8px;">km</span>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div style="display: flex; gap: 15px; padding: 20px;">
            <div style="flex: 1; background: #eff6ff; color: #2563eb; text-align: center; padding: 15px; border-radius: 16px; font-weight: 600; font-size: 0.9rem;"><i class="fas fa-copy" style="margin-right: 5px;"></i> Kopieren</div>
            <div style="flex: 1; background: #fffbeb; color: #d97706; text-align: center; padding: 15px; border-radius: 16px; font-weight: 600; font-size: 0.9rem;"><i class="far fa-star" style="margin-right: 5px;"></i> Favorit</div>
        </div>

        <!-- Tab Bar -->
        <div style="margin-top: auto; background: rgba(255,255,255,0.9); backdrop-filter: blur(20px); border-top: 1px solid #e2e8f0; display: flex; justify-content: space-around; padding: 15px 20px 25px;">
            <div style="text-align: center; color: #2563eb;"><i class="fas fa-exchange-alt" style="font-size: 1.2rem; display: block; margin-bottom: 5px;"></i><span style="font-size: 0.65rem; font-weight: 600;">Convert</span></div>
            <div style="text-align: center; color: #94a3b8;"><i class="fas fa-star" style="font-size: 1.2rem; display: block; margin-bottom: 5px;"></i><span style="font-size: 0.65rem; font-weight: 600;">Favoriten</span></div>
            <div style="text-align: center; color: #94a3b8;"><i class="fas fa-clock" style="font-size: 1.2rem; display: block; margin-bottom: 5px;"></i><span style="font-size: 0.65rem; font-weight: 600;">Verlauf</span></div>
            <div style="text-align: center; color: #94a3b8;"><i class="fas fa-cog" style="font-size: 1.2rem; display: block; margin-bottom: 5px;"></i><span style="font-size: 0.65rem; font-weight: 600;">Einstellungen</span></div>
        </div>
    </div>

    <style>
        .swap-rotate { animation: spinSwap 4s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55); }
        @keyframes spinSwap { 0%, 20% { transform: rotate(0deg); } 40%, 100% { transform: rotate(180deg); } }

        .animated-val-1::after { content: '0'; animation: typeValue1 4s infinite; color: #0f172a; position: absolute; left: 20px; background: white; }
        .animated-val-2::after { content: '0'; animation: typeValue2 4s infinite; color: #0f172a; position: absolute; left: 20px; background: white; }
        
        @keyframes typeValue1 { 0%, 10% { content: '0'; } 15% { content: '1'; } 20% { content: '10'; } 25%, 100% { content: '100'; } }
        @keyframes typeValue2 { 0%, 35% { content: '0'; } 40%, 100% { content: '0.1'; color: #2563eb; } }
    </style>
@endsection