@extends('layouts.app')

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

@section('content')
<div class="min-h-screen bg-gradient-to-br from-red-600 via-blue-700 to-red-800 relative overflow-hidden">
    <!-- Background Image -->
    <div class="absolute inset-0 overflow-hidden">
        <img src="{{ asset('images/Spider-Man_Rescue_Mission/Game_Standard_Ingame_1_720x1280_PNG.png') }}" 
             alt="{{ __('landing.spiderman.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/Spider-Man_Rescue_Mission/Game_Standard_Banner_Large_1024x500_PNG.png') }}"
                     alt="{{ __('landing.spiderman.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-red-300 to-blue-300 bg-clip-text text-transparent">
                    {{ __('landing.spiderman.hero_title') }}
                </span>
            </h1>

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

            <!-- Subscribe Button -->
            <div class="mb-8">
                <a href="{{ route('landing.spider-man-rescue-mission-he-subscription') }}" 
                   class="inline-block bg-gradient-to-r from-red-600 via-blue-600 to-red-700 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-red-400/50 shadow-xl">
                    <i class="fas fa-spider 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>

            <!-- Marvel Copyright -->
            <p class="text-xs sm:text-sm text-white/60 mt-4" dir="ltr">
                © 2026 MARVEL
            </p>
        </div>
    </div>
</div>
@endsection