@extends('clients.layouts.app')

@section('title', 'Downloads')

@section('content')
    <div class="space-y-8 animate-in fade-in duration-700">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 pb-2">
            <div>
                <h1 class="text-4xl font-black text-slate-900 dark:text-white tracking-tight italic">Downloads</h1>
                <p class="text-sm text-slate-400 font-medium mt-1 uppercase tracking-widest">Access software, scripts, and
                    documentation</p>
            </div>
        </div>

        @php
            $downloads = [
                ['name' => 'cPanel Mobile App Guide', 'version' => '1.0', 'size' => '2.4 MB', 'ext' => 'PDF', 'date' => '2024-01-10'],
                ['name' => 'FTP Client Configuration Script', 'version' => '2.3', 'size' => '15 KB', 'ext' => 'SH', 'date' => '2023-11-25'],
                ['name' => 'Security Best Practices e-Book', 'version' => '2024', 'size' => '5.1 MB', 'ext' => 'PDF', 'date' => '2024-01-05'],
            ];
        @endphp

        <div class="space-y-4">
            @foreach($downloads as $file)
                <div
                    class="bg-white dark:bg-[#1e293b] p-8 rounded-lg border border-slate-100 dark:border-white/5 shadow-sm group hover:border-primary/20 transition-all flex items-center justify-between">
                    <div class="flex items-center space-x-6">
                        <div
                            class="w-14 h-14 bg-slate-50 dark:bg-white/5 rounded-2xl flex items-center justify-center text-slate-400 group-hover:text-primary transition-colors">
                            <i class="fas fa-file-download text-xl"></i>
                        </div>
                        <div>
                            <h4 class="text-xl font-black text-slate-900 dark:text-white tracking-tight italic">
                                {{ $file['name'] }}</h4>
                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">
                                Version {{ $file['version'] }} <span class="mx-2 opacity-30">|</span>
                                Format: {{ $file['ext'] }} <span class="mx-2 opacity-30">|</span>
                                Size: {{ $file['size'] }}
                            </p>
                        </div>
                    </div>
                    <button
                        class="bg-[#1e293b] dark:bg-white/5 text-white dark:text-slate-300 px-8 py-3.5 rounded-lg font-bold text-xs uppercase tracking-widest hover:bg-slate-800 dark:hover:bg-white/10 transition-all">Download</button>
                </div>
            @endforeach
        </div>
    </div>
@endsection