@extends('layouts.app')

@section('title', "Télécharger l'application")

@section('content')
<div class="max-w-3xl mx-auto space-y-10">

    <!-- En-tête -->
    <div class="text-center">
        <h1 class="text-3xl font-bold text-[#161616] mb-3">📱 Télécharger l'application CESIZen</h1>
        <p class="text-slate-600 max-w-xl mx-auto">
            Emportez CESIZen partout avec vous. Choisissez votre plateforme et installez
            l'application mobile pour suivre votre bien-être au quotidien.
        </p>
    </div>

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

        {{-- Carte Android --}}
        <div class="bg-white border border-slate-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-slate-900 mb-1">Android</h2>
            <p class="text-sm text-slate-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 bg-[#000091] text-white font-bold rounded-sm hover:bg-blue-800 shadow-md transition-all uppercase tracking-widest">
                    ⬇️ Télécharger (.apk)
                </a>
                <p class="text-xs text-slate-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-slate-200 text-slate-500 font-bold rounded-sm cursor-not-allowed">
                    Bientôt disponible
                </button>
            @endif
        </div>

        {{-- Carte iOS --}}
        <div class="bg-white border border-slate-200 p-8 flex flex-col items-center text-center shadow-sm">
            <div class="w-16 h-16 rounded-2xl bg-slate-100 flex items-center justify-center mb-4">
                <span class="text-4xl">🍏</span>
            </div>
            <h2 class="text-2xl font-bold text-slate-900 mb-1">Apple (iOS)</h2>
            <p class="text-sm text-slate-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-slate-900 text-white font-bold rounded-sm hover:bg-black shadow-md transition-all uppercase tracking-widest">
                    ⬇️ Télécharger
                </a>
                <p class="text-xs text-slate-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-slate-200 text-slate-500 font-bold rounded-sm cursor-not-allowed">
                    Bientôt disponible
                </button>
            @endif
        </div>

    </div>

    <div class="text-center">
        <a href="{{ route('home') }}" class="text-sm font-bold text-[--fr-blue] hover:underline">
            ← Retour à l'accueil
        </a>
    </div>
</div>
@endsection