@extends('layouts.app')

@section('title', __('landing.basketball.title'))

@section('content')
<div class="min-h-screen bg-gradient-to-br from-orange-500 via-red-600 to-orange-700 relative overflow-hidden">
    <!-- Background Image -->
    <div class="absolute inset-0 overflow-hidden">
        <img src="{{ asset('images/3D Basketball/3D_Basketball_01_1280x720.png') }}" 
             alt="{{ __('landing.basketball.title') }}"
             class="w-full h-full object-cover opacity-20 blur-sm">
        <div class="absolute inset-0 bg-gradient-to-b from-black/40 via-black/30 to-black/50"></div>
    </div>

    <!-- Content -->
    <div class="relative z-10 min-h-screen flex flex-col items-center justify-center px-4 py-12">
        <div class="max-w-4xl w-full text-center">
            <!-- Game Logo/Banner -->
            <div class="mb-8 sm:mb-12">
                <img src="{{ asset('images/3D Basketball/3DBasketball_1024x500.png') }}"
                     alt="{{ __('landing.basketball.title') }}"
                     class="w-full max-w-3xl mx-auto rounded-2xl shadow-2xl border-4 border-white/30">
            </div>

            <!-- Game Title -->
            <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-white mb-6 drop-shadow-2xl">
                <span class="bg-gradient-to-r from-yellow-300 to-orange-300 bg-clip-text text-transparent">
                    {{ __('landing.basketball.hero_title') }}
                </span>
            </h1>

            <!-- Subtitle -->
            <p class="text-xl sm:text-2xl text-white/90 mb-8 font-semibold drop-shadow-lg">
                {{ __('landing.basketball.hero_subtitle') }}
            </p>

            <!-- Subscribe Button -->
            <div class="mb-8">
                <a href="{{ route('landing.he-subscription') }}" 
                   class="inline-block bg-gradient-to-r from-orange-500 via-red-600 to-orange-600 text-white px-12 py-4 sm:px-16 sm:py-5 rounded-xl text-xl sm:text-2xl font-bold hover:shadow-2xl transform hover:scale-105 transition-all duration-200 border-2 border-orange-400/50 shadow-xl">
                    <i class="fas fa-basketball-ball mr-3"></i>
                    {{ __('landing.subscribe_now') }}
                </a>
            </div>

            <!-- Footer Disclaimer -->
            <p class="text-sm sm:text-base text-white/80 max-w-2xl mx-auto">
                {{ __('landing.disclaimer.text') }}
            </p>
        </div>
    </div>
</div>
@endsection