@extends('layouts.app')

@section('title', 'Restaurant & Sunset Bar - Paradise Villas CR')

@section('meta')
    <meta name="description" content="Enjoy the best fusion cuisine and cocktails with a panoramic view of the Arenal Volcano and Lake at our Sunset Bar." />
    <meta name="keywords" content="restaurant el castillo la fortuna, sunset bar arenal, volcano view restaurant, cocktails la fortuna" />
@endsection

@section('content')
    <!-- HERO SECTION RESTAURANT -->
    <header class="relative h-[70vh] flex items-center justify-center text-white overflow-hidden">
        <div class="absolute inset-0 z-0">
            <img src="{{ asset('images/sunsetbar7.jpg') }}" class="w-full h-full object-cover" alt="Sunset Bar Restaurant">
            <div class="absolute inset-0 bg-black/40"></div>
        </div>
        <div class="relative z-10 text-center px-4">
            <h2 class="text-sm font-bold uppercase tracking-[0.4em] mb-4 text-amber-400">Unique Fusion Cuisine</h2>
            <h1 class="text-5xl md:text-8xl font-black uppercase italic tracking-tighter drop-shadow-2xl">
                Fusion Mirador <span class="text-amber-500">Arenal</span>
            </h1>
            <div class="w-32 h-1 bg-white mx-auto mt-6"></div>
        </div>
    </header>

    <!-- INFO SECTION -->
    <section class="py-20 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">
                    <h3 class="text-4xl font-black text-stone-900 uppercase italic leading-tight mb-6">
                        The Best View of the <br> <span class="text-blue-900">Volcano and Lake</span>
                    </h3>
                    <p class="text-lg text-stone-600 leading-relaxed mb-8">
                        Our Restaurant offers a unique fusion of local flavors and international cuisine. 
                        Enjoy a panoramic view of the Arenal Volcano while you relax after a day of adventure.
                    </p>
                    <div class="flex items-center gap-4 border-l-4 border-amber-500 pl-6 py-2">
                        <p class="text-stone-800 font-bold italic text-xl">
                            "A culinary experience at the foot of the volcano."
                        </p>
                    </div>
                </div>
                <div class="md:w-1/2 grid grid-cols-2 gap-4">
                    <img src="{{ asset('images/sunsetbar1.jpg') }}" class="rounded-2xl shadow-lg h-64 w-full object-cover" alt="Bar Interior">
                    <img src="{{ asset('images/sunsetbar8.jpg') }}" class="rounded-2xl shadow-lg h-64 w-full object-cover mt-8" alt="Special Cocktails">
                </div>
            </div>
        </div>
    </section>

    <!-- GALLERY GRID -->
    <section class="py-20 bg-stone-50">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-black text-stone-900 uppercase italic text-center">Our Atmosphere</h2>
            </div>

            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                @for ($i = 1; $i <= 8; $i++)
                    <div class="group relative h-64 overflow-hidden rounded-xl shadow-md bg-stone-200">
                        <img src="{{ asset('images/sunsetbar' . $i . '.jpg') }}" 
                             class="w-full h-full object-cover transition duration-500 group-hover:scale-110" 
                             alt="Sunset Bar Gallery {{ $i }}"
                             onerror="this.onerror=null; this.src='{{ asset('images/sunsetbar' . $i . '.jpeg') }}';">
                    </div>
                @endfor
            </div>
        </div>
    </section>

    <!-- CALL TO ACTION RESTAURANTE -->
    <section class="py-20 bg-stone-900 text-white text-center">
        <div class="container mx-auto px-6">
            <h2 class="text-4xl font-bold mb-6 uppercase italic">Hungry?</h2>
            <p class="text-stone-400 mb-10 text-xl max-w-2xl mx-auto">
                Visit us today and enjoy the most iconic sunset in El Castillo.
            </p>
            {{-- NÚMERO CORREGIDO --}}
            <a href="https://wa.me/50662884010" 
               class="inline-block bg-amber-500 text-stone-900 px-12 py-4 rounded-full font-black uppercase tracking-widest hover:bg-amber-400 transition-all shadow-2xl">
                Book a Table
            </a>
        </div>
    </section>

    @include('partials.footer_en')
@endsection