@extends('apple.apple_layout')

@section('title', 'Convertly+ | iPhone & iPad Einheitenrechner von KOTSCH.TECH')
@section('meta_description', 'Convertly+ ist eine iPhone- und iPad-App von KOTSCH.TECH, entwickelt von Arthur Kotsch. Moderner Einheitenrechner für schnelle und klare Umrechnungen.')
@section('og_title', 'Convertly+ von KOTSCH.TECH')
@section('og_description', 'iPhone- und iPad-Einheitenrechner von Arthur Kotsch für schnelle und klare Umrechnungen.')
@section('twitter_title', 'Convertly+ von KOTSCH.TECH')
@section('twitter_description', 'Moderner Einheitenrechner für iPhone und iPad von Arthur Kotsch.')
@section('app-name', 'Convertly+')
@section('app-desc', 'Convertly+ ist eine iPhone- und iPad-App von KOTSCH.TECH, entwickelt und betrieben von Arthur Kotsch. Die App ist ein moderner Einheitenrechner für schnelle und klare Umrechnungen.')
@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('structured_data')
    <script type="application/ld+json">
        {!! json_encode([
            '@context' => 'https://schema.org',
            '@type' => 'SoftwareApplication',
            '@id' => 'https://www.kotsch.tech/apple/convertly#software',
            'name' => 'Convertly+',
            'alternateName' => ['Convertly Plus', 'Convertly'],
            'applicationCategory' => 'UtilitiesApplication',
            'operatingSystem' => 'iOS, iPadOS',
            'url' => 'https://www.kotsch.tech/apple/convertly',
            'downloadUrl' => 'https://apps.apple.com/de/app/convertly/id6760304794',
            'image' => config('apple_apps.convertly.icon_url'),
            'description' => 'Convertly+ ist eine iPhone- und iPad-App von KOTSCH.TECH. Entwickler und Inhaber ist Arthur Kotsch. Die App dient als moderner Einheitenrechner für schnelle und klare Umrechnungen.',
            'creator' => ['@id' => 'https://www.kotsch.tech/#arthur-kotsch'],
            'author' => ['@id' => 'https://www.kotsch.tech/#arthur-kotsch'],
            'publisher' => ['@id' => 'https://www.kotsch.tech/#organization'],
            'brand' => ['@id' => 'https://www.kotsch.tech/#brand'],
            'offers' => [
                '@type' => 'Offer',
                'price' => '1.49',
                'priceCurrency' => 'EUR',
                'url' => 'https://apps.apple.com/de/app/convertly/id6760304794',
            ],
            'sameAs' => ['https://apps.apple.com/de/app/convertly/id6760304794'],
        ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) !!}
    </script>
@endsection

@section('app-specs')
    <li><span>Entwickler</span><strong>Arthur Kotsch</strong></li>
    <li><span>Marke</span><strong>KOTSCH.TECH</strong></li>
    <li><span>Plattform</span><strong>iPhone & iPad</strong></li>
    <li><span>Zweck</span><strong>Moderner Einheitenrechner</strong></li>
@endsection

@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