@extends('layouts.app')

@section('title', 'Sunset Bar - The Best View in El Castillo')

@section('meta')
    <meta name="description" content="Visit the Sunset Bar at Paradise Villas CR. The perfect spot for cocktails with an incredible view of the Arenal Volcano and Lake." />
    <meta name="keywords" content="sunset bar la fortuna, bar el castillo, cocktails arenal volcano, best views la fortuna" />
@endsection

@section('content')
    <!-- HERO SECTION SUNSET BAR -->
    <header class="relative h-[80vh] flex items-center justify-center text-white overflow-hidden">
        <div class="absolute inset-0 z-0">
            {{-- Usamos la imagen 8 que muestra un trago con el volcán de fondo --}}
            <img src="{{ asset('images/sunsetbar8.jpg') }}" class="w-full h-full object-cover" alt="Sunset Bar Experience">
            <div class="absolute inset-0 bg-gradient-to-b from-black/20 to-black/60"></div>
        </div>
        <div class="relative z-10 text-center px-4">
            <h1 class="text-6xl md:text-9xl font-black uppercase italic tracking-tighter drop-shadow-2xl">
                Sunset <span class="text-amber-500">Bar</span>
            </h1>
            <p class="text-xl md:text-3xl mt-4 font-light tracking-[0.3em] uppercase">Magic Hour at the Volcano</p>
        </div>
    </header>

    <!-- HIGHLIGHT SECTION -->
    <section class="py-24 bg-white">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row items-center gap-16">
                <div class="md:w-1/2 order-2 md:order-1">
                    <div class="relative">
                        <img src="{{ asset('images/sunsetbar8.jpg') }}" class="rounded-2xl shadow-2xl z-10 relative" alt="Sunset Cocktails">
                        <div class="absolute -top-6 -left-6 w-full h-full border-4 border-amber-500 rounded-2xl -z-0"></div>
                    </div>
                </div>
                <div class="md:w-1/2 order-1 md:order-2">
                    <h2 class="text-sm font-bold text-amber-500 uppercase tracking-[0.5em] mb-4">Cocktails & Dreams</h2>
                    <h3 class="text-4xl md:text-6xl font-black text-stone-900 mb-8 uppercase italic leading-tight">
                        Relaxing <br><span class="text-blue-900 text-3xl md:text-5xl">Above the Clouds</span>
                    </h3>
                    <p class="text-lg text-stone-600 mb-8 leading-relaxed">
                        At our **Sunset Bar**, every drink comes with a masterpiece: the view of Lake Arenal and the majestic Volcano. Whether you prefer a classic cocktail or a local tropical fusion, this is the place to be when the sun goes down.
                    </p>
                    <a href="https://wa.me/50662884010" class="inline-flex items-center gap-3 bg-stone-900 text-white px-10 py-4 rounded-full font-bold uppercase tracking-widest hover:bg-amber-500 hover:text-stone-900 transition-all shadow-xl">
                        <span>Reserve Your Spot</span>
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- FULL GALLERY GRID (sunsetbar1 to sunsetbar8) -->
    <section class="py-24 bg-stone-50">
        <div class="container mx-auto px-6 text-center mb-16">
            <h2 class="text-4xl font-black text-stone-900 uppercase italic">The Atmosphere</h2>
            <div class="w-20 h-1 bg-amber-500 mx-auto mt-4"></div>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 px-4">
            @for ($i = 1; $i <= 8; $i++)
                <div class="group relative h-64 md:h-80 overflow-hidden rounded-xl shadow-lg bg-stone-200">
                    <img src="{{ asset('images/sunsetbar' . $i . '.jpg') }}" 
                         class="w-full h-full object-cover transition duration-700 group-hover:scale-110" 
                         alt="Sunset Bar Gallery View {{ $i }}"
                         onerror="this.onerror=null; this.src='{{ asset('images/sunsetbar' . $i . '.jpeg') }}';">
                    <div class="absolute inset-0 bg-black/20 group-hover:bg-transparent transition duration-500"></div>
                </div>
            @endfor
        </div>
    </section>

    <!-- CALL TO ACTION -->
    <section class="py-24 bg-blue-900 text-white text-center">
        <div class="container mx-auto px-6">
            <h2 class="text-4xl md:text-6xl font-black mb-8 uppercase italic tracking-tighter">Cheers to Life!</h2>
            <p class="text-blue-200 mb-12 max-w-2xl mx-auto text-xl italic">
                "No visit to El Castillo is complete without a cocktail at our Sunset Bar."
            </p>
            <div class="flex flex-col md:flex-row justify-center gap-6">
                <a href="https://wa.me/50662884010" class="bg-white text-blue-900 px-12 py-5 rounded-full font-black uppercase tracking-widest hover:bg-amber-500 hover:text-stone-900 transition-all shadow-2xl">
                    WhatsApp: (506) 6288-4010
                </a>
                <a href="mailto:info@villasparadisecr.com" class="bg-blue-800 text-white border border-blue-700 px-12 py-5 rounded-full font-black uppercase tracking-widest hover:bg-blue-700 transition-all">
                    Email Us
                </a>
            </div>
        </div>
    </section>

    @include('partials.footer_en')
@endsection