@extends('theme::layouts.app', ['alias' => 'Downloads'])
@section('theme::title', __('seo.downloads'))
@section('theme::content')
    <div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <!-- Page Header -->
                    <div class="download-header mb-5">
                        <h1 class="display-4 text-center mb-4">{{ __('downloads.title') }}</h1>
                        <div class="header-divider"></div>
                    </div>

                    <!-- Download Links Section -->
                    <div class="download-grid mb-5">
                        @forelse($downloads as $download)
                            <a href="{{ $download->link }}" class="download-card">
                                <div class="download-icon">
                                    <i class="fas fa-download"></i>
                                </div>
                                <h4 class="download-title">{{ $download->name }}</h4>
                            </a>
                        @empty
                            <div class="no-downloads text-center py-4">
                                <i class="fas fa-exclamation-circle fa-2x mb-3"></i>
                                <p class="lead">{{ __('downloads.no-downloads') }}</p>
                            </div>
                        @endforelse
                    </div>

                    <!-- File Information -->
                    @if (count($downloads))
                        <div class="file-info-card mb-5">
                            <div class="info-item">
                                <i class="fas fa-hdd"></i>
                                <span class="info-label">Total Size:</span>
                                <span class="info-value">{{ $downloads[0]->file_size }}</span>
                            </div>
                            <div class="info-item">
                                <i class="fas fa-code-branch"></i>
                                <span class="info-label">Version:</span>
                                <span class="info-value">V1.322</span>
                            </div>
                            <div class="info-item">
                                <i class="fas fa-calendar-alt"></i>
                                <span class="info-label">Last Updated:</span>
                                <span class="info-value">{{ $downloads[0]->updated_at->format('Y-m-d') }}</span>
                            </div>
                        </div>
                    @endif

                    <!-- Driver Downloads Section -->
                    <div class="driver-section mb-5">
                        <div class="section-header mb-4">
                            <h2 class="section-title">Graphics Drivers</h2>
                            <p class="section-subtitle">Ensure your hardware is up to date for optimal performance</p>
                        </div>

                        <div class="driver-grid">
                            <div class="driver-card nvidia">
                                <div class="driver-logo">
                                    <img src="{{ asset('themes/heckt0r-theme/images/nvidia.webp') }}" alt="NVIDIA">
                                </div>
                                <button class="driver-button" onclick="blankurl('https://www.nvidia.com.tr/drivers')">
                                    Download GeForce Driver
                                </button>
                            </div>

                            <div class="driver-card amd">
                                <div class="driver-logo">
                                    <img src="{{ asset('themes/heckt0r-theme/images/amd.webp') }}" alt="AMD">
                                </div>
                                <button class="driver-button" onclick="blankurl('https://www.amd.com/en/support')">
                                    Download Radeon Driver
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- System Requirements -->
                    <div class="system-requirements mb-5">
                        <div class="section-header mb-4">
                            <h2 class="section-title">System Requirements</h2>
                            <p class="section-subtitle">Recommended specifications for optimal performance</p>
                        </div>

                        <div class="requirements-table">
                            <div class="table-header">
                                <div class="header-item">Category</div>
                                <div class="header-item">Minimum</div>
                                <div class="header-item">Recommended</div>
                            </div>

                            <div class="table-row">
                                <div class="row-item">Processor</div>
                                <div class="row-item">Pentium 3 800MHz+</div>
                                <div class="row-item">Pentium 4 2.4GHz+</div>
                            </div>

                            <div class="table-row">
                                <div class="row-item">Memory</div>
                                <div class="row-item">256MB</div>
                                <div class="row-item">512MB</div>
                            </div>
                            <div class="table-row">
                                <div class="row-item">Display card</div>
                                <div class="row-item">3D speed over GeForce2 or ATI 9000</div>
                                <div class="row-item">3D speed over GeForce FX 5600 or ATI9500</div>
                            </div>

                            <div class="table-row">
                                <div class="row-item">Sound</div>
                                <div class="row-item">DirectX 9.0c compatible card</div>
                                <div class="row-item">DirectX 9.0c compatible card</div>
                            </div>

                            <div class="table-row">
                                <div class="row-item">Hard Disk Space</div>
                                <div class="row-item">4GB+</div>
                                <div class="row-item">4GB+</div>
                            </div>

                            <div class="table-row">
                                <div class="row-item">OS</div>
                                <div class="row-item">Windows 7 SP1+</div>
                                <div class="row-item">Windows 7 SP1+</div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('theme::css')
    <style>
        /* General Styles */
        .download-header {
            padding: 2rem 0;
            background: linear-gradient(145deg, #0a0b12 0%, #1a1c24 100%);
            border-radius: 12px;
            margin-bottom: 2rem;
        }

        .header-divider {
            width: 60px;
            height: 4px;
            background: #DAA520;
            margin: 1rem auto;
        }

        /* Download Grid */
        .download-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
        }

        .download-card {
            background: rgba(16, 17, 26, 0.9);
            border: 1px solid #2d2f3a;
            border-radius: 8px;
            padding: 1.5rem;
            text-align: center;
            transition: all 0.3s ease;
        }

        .download-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(218, 165, 32, 0.2);
        }

        .download-icon {
            font-size: 2rem;
            color: #DAA520;
            margin-bottom: 1rem;
        }

        .download-title {
            color: #e0e0e0;
            font-size: 1.1rem;
        }

        /* File Information */
        .file-info-card {
            background: rgba(16, 17, 26, 0.9);
            border: 1px solid #2d2f3a;
            border-radius: 8px;
            padding: 1.5rem;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }

        .info-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .info-item i {
            color: #DAA520;
            font-size: 1.2rem;
        }

        .info-label {
            color: #DAA520;
            font-weight: 600;
        }

        .info-value {
            color: #e0e0e0;
        }

        /* Driver Section */
        .driver-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }

        .driver-card {
            background: rgba(16, 17, 26, 0.9);
            border: 1px solid #2d2f3a;
            border-radius: 8px;
            padding: 2rem;
            text-align: center;
        }

        .driver-logo img {
            margin-bottom: 1.5rem;
            width: 137px;
            height: 101px;
        }

        .driver-button {
            background: linear-gradient(145deg, #DAA520 0%, #b8860b 100%);
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 6px;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .driver-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(218, 165, 32, 0.3);
        }

        /* System Requirements */
        .requirements-table {
            background: rgba(16, 17, 26, 0.9);
            border: 1px solid #2d2f3a;
            border-radius: 8px;
            overflow: hidden;
        }

        .table-header {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            background: rgba(218, 165, 32, 0.1);
            padding: 1rem;
            font-weight: 600;
            color: #DAA520;
        }

        .table-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            padding: 1rem;
            border-bottom: 1px solid rgba(65, 105, 225, 0.1);
        }

        .table-row:last-child {
            border-bottom: none;
        }

        .row-item {
            color: #e0e0e0;
            padding: 0.5rem;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes cardHover {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-5px);
            }

            100% {
                transform: translateY(0);
            }
        }

        @keyframes glowPulse {
            0% {
                box-shadow: 0 0 10px rgba(218, 165, 32, 0.3);
            }

            50% {
                box-shadow: 0 0 20px rgba(218, 165, 32, 0.6);
            }

            100% {
                box-shadow: 0 0 10px rgba(218, 165, 32, 0.3);
            }
        }

        /* Enhanced Download Cards */
        .download-card {
            animation: fadeInUp 0.6s ease-out;
            position: relative;
            overflow: hidden;
        }

        .download-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg,
                    transparent 20%,
                    rgba(65, 105, 225, 0.1) 45%,
                    rgba(218, 165, 32, 0.1) 55%,
                    transparent 80%);
            animation: ambientRotate 6s infinite linear;
            z-index: 0;
            /* Added pointer-events to allow clicks through */
            pointer-events: none;
        }

        .download-card:hover {
            animation: cardHover 1.5s infinite ease-in-out;
        }

        /* Enhanced File Info Section */
        .file-info-card {
            animation: fadeInUp 0.8s ease-out;
        }

        .info-item {
            transition: all 0.3s ease;
        }

        .info-item:hover {
            transform: translateX(10px);
            background: rgba(65, 105, 225, 0.05);
            border-radius: 6px;
        }

        /* Driver Cards with Hover Effects */
        .driver-card {
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .driver-card::after {
            content: '';
            position: absolute;
            bottom: -100%;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(transparent, rgba(218, 165, 32, 0.1));
            transition: bottom 0.4s ease;
            /* Added pointer-events to allow clicks through */
            pointer-events: none;
        }

        .driver-card:hover::after {
            bottom: 0;
        }

        .driver-card:hover {
            transform: scale(1.05);
            animation: glowPulse 2s infinite;
        }

        /* System Requirements Table Enhancements */
        .table-row {
            transition: all 0.3s ease;
        }

        .table-row:hover {
            background: rgba(65, 105, 225, 0.05);
            transform: translateX(5px);
        }

        /* Section Header Animation */
        .section-header {
            animation: fadeInUp 0.5s ease-out;
        }

        .section-title {
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 60px;
            height: 3px;
            background: #DAA520;
            animation: underlineGrow 0.8s ease-out;
        }

        @keyframes underlineGrow {
            from {
                width: 0;
            }

            to {
                width: 60px;
            }
        }

        /* Button Enhancements */
        .driver-button {
            position: relative;
            overflow: hidden;
        }

        .driver-button::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg,
                    transparent 20%,
                    rgba(255, 255, 255, 0.3) 50%,
                    transparent 80%);
            animation: buttonShine 3s infinite;
            opacity: 0.4;
            pointer-events: none;
        }

        @keyframes buttonShine {
            0% {
                transform: translateX(-100%) rotate(45deg);
            }

            100% {
                transform: translateX(200%) rotate(45deg);
            }
        }

        /* Loading Animation */
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .loading-spinner {
            width: 30px;
            height: 30px;
            border: 3px solid #DAA520;
            border-top-color: transparent;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .download-grid {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            }

            .driver-grid {
                grid-template-columns: 1fr;
            }

            .table-header,
            .table-row {
                grid-template-columns: 1fr;
            }
        }

        /* ============================================================= */
        /*               Additional CSS Edits for Enhanced Design        */
        /* ============================================================= */

        /* Enhanced Typography */
        body {
            font-family: 'Roboto', 'Open Sans', sans-serif;
        }

        /* Define a refined color palette using CSS variables */
        :root {
            --primary-bg: #0a0b12;
            --secondary-bg: #1a1c24;
            --accent-color: #DAA520;
            --hover-accent: #b8860b;
            --card-bg: rgba(16, 17, 26, 0.9);
            --border-color: #2d2f3a;
            --text-color: #e0e0e0;
        }

        /* Apply the refined color palette to key elements */
        .download-header {
            background: linear-gradient(145deg, var(--primary-bg) 0%, var(--secondary-bg) 100%);
        }

        /* Enhance typography for headings and titles */
        h1,
        h2,
        h3,
        h4,
        .download-title,
        .section-title {
            font-weight: 700;
        }

        /* Improve spacing and layout for container elements */
        .container {
            padding: 1rem;
        }

        /* Add subtle hover & focus effects for interactive elements */
        button,
        .driver-button,
        .download-card {
            transition: all 0.3s ease-in-out;
        }

        /* Elevated card design: add a soft box shadow to create depth */
        .download-card,
        .file-info-card,
        .driver-card,
        .requirements-table {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* Responsive typography adjustments for smaller screens */
        @media (max-width: 768px) {
            h1 {
                font-size: 1.8rem;
            }

            h2 {
                font-size: 1.5rem;
            }

            .download-title {
                font-size: 1rem;
            }
        }

        /* Ensure consistent icon styling */
        .fas {
            font-size: 1.2rem;
            color: var(--accent-color);
        }

        /* Add a subtle focus outline to interactive elements */
        button:focus,
        .driver-button:focus,
        .download-card:focus {
            outline: 2px solid var(--accent-color);
            outline-offset: 2px;
        }
    </style>
@endpush