@extends('app')

@section('title', "Télécharger l'application - (RE)Sources Relationnelles")

@section('content')
    <section class="container mx-auto px-4 py-12">
        <div class="max-w-3xl mx-auto">
            <!-- En-tête -->
            <div class="text-center mb-10">
                <h1 class="text-4xl font-bold text-gray-900 mb-3">📱 Télécharger l'application</h1>
                <p class="text-gray-600 max-w-xl mx-auto">
                    Emportez (RE)Sources Relationnelles partout avec vous. Choisissez votre plateforme
                    et installez l'application mobile.
                </p>
            </div>

            <div class="grid gap-6 md:grid-cols-2">

                {{-- Carte Android --}}
                <div class="bg-white rounded-2xl border border-gray-200 p-8 flex flex-col items-center text-center shadow-sm">
                    <div class="w-16 h-16 rounded-2xl bg-green-50 flex items-center justify-center mb-4">
                        <span class="text-4xl">🤖</span>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-900 mb-1">Android</h2>
                    <p class="text-sm text-gray-500 mb-6">Version {{ $android['version'] }}</p>

                    @if ($android['disponible'])
                        <a href="{{ $android['url'] }}"
                            @if (str_starts_with($android['url'], url('/'))) download @else target="_blank" rel="noopener" @endif
                            class="w-full px-6 py-3 gradient-niagara text-white font-bold rounded-lg hover:shadow-lg transition-smooth duration-200">
                            ⬇️ Télécharger (.apk)
                        </a>
                        <p class="text-xs text-gray-400 mt-3">
                            Sur Android, autorisez l'installation depuis « sources inconnues » si nécessaire.
                        </p>
                    @else
                        <button type="button" disabled
                            class="w-full px-6 py-3 bg-gray-200 text-gray-500 font-bold rounded-lg cursor-not-allowed">
                            Bientôt disponible
                        </button>
                    @endif
                </div>

                {{-- Carte iOS --}}
                <div class="bg-white rounded-2xl border border-gray-200 p-8 flex flex-col items-center text-center shadow-sm">
                    <div class="w-16 h-16 rounded-2xl bg-gray-100 flex items-center justify-center mb-4">
                        <span class="text-4xl"></span>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-900 mb-1">Apple (iOS)</h2>
                    <p class="text-sm text-gray-500 mb-6">Version {{ $ios['version'] }}</p>

                    @if ($ios['disponible'])
                        <a href="{{ $ios['url'] }}"
                            @if (str_starts_with($ios['url'], url('/'))) download @else target="_blank" rel="noopener" @endif
                            class="w-full px-6 py-3 bg-gray-900 text-white font-bold rounded-lg hover:bg-black transition-smooth duration-200">
                            ⬇️ Télécharger
                        </a>
                        <p class="text-xs text-gray-400 mt-3">
                            L'installation d'un fichier .ipa nécessite TestFlight ou un profil adapté.
                        </p>
                    @else
                        <button type="button" disabled
                            class="w-full px-6 py-3 bg-gray-200 text-gray-500 font-bold rounded-lg cursor-not-allowed">
                            Bientôt disponible
                        </button>
                    @endif
                </div>

            </div>

            <div class="mt-10 text-center">
                <a href="{{ route('home') }}" class="text-sm font-semibold text-niagara hover:underline">
                    ← Retour à l'accueil
                </a>
            </div>
        </div>
    </section>
@endsection