@extends('layouts.app')

@section('title', 'Restaurante y Sunset Bar - Paradise Villas CR')

@section('meta')
    <meta name="description" content="Disfrute de la mejor cocina fusión y cocteles con una vista panorámica al Volcán Arenal y al Lago en nuestro Sunset Bar." />
    <meta name="keywords" content="restaurante el castillo la fortuna, sunset bar arenal, restaurante con vista al volcán, cocteles la fortuna" />
@endsection

@section('content')
    <!-- SECCIÓN HERO RESTAURANTE -->
    <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="Restaurante Sunset Bar">
            <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">Cocina Fusión Única</h2>
            <h1 class="text-5xl md:text-8xl font-black uppercase italic tracking-tighter drop-shadow-2xl">
                MIrador Fusion <span class="text-amber-500">Arenal</span>
            </h1>
            <div class="w-32 h-1 bg-white mx-auto mt-6"></div>
        </div>
    </header>

    <!-- SECCIÓN DE INFORMACIÓN -->
    <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">
                        La Mejor Vista del <br> <span class="text-blue-900">Volcán y el Lago</span>
                    </h3>
                    <p class="text-lg text-stone-600 leading-relaxed mb-8">
                        Nuestro restaurante ofrece una fusión única de sabores locales y cocina internacional. 
                        Disfrute de una vista panorámica del Volcán Arenal mientras se relaja después de un día de aventura.
                    </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">
                            "Una experiencia culinaria al pie del volcán."
                        </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="Interior del Bar">
                    <img src="{{ asset('images/sunsetbar8.jpg') }}" class="rounded-2xl shadow-lg h-64 w-full object-cover mt-8" alt="Cocteles Especiales">
                </div>
            </div>
        </div>
    </section>

    <!-- CUADRÍCULA DE GALERÍA -->
    <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">Nuestro Ambiente</h2>
                <p class="text-stone-500 mt-2">Cocteles, Comida y Vistas</p>
            </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="Galería Sunset Bar {{ $i }}"
                             onerror="this.onerror=null; this.src='{{ asset('images/sunsetbar' . $i . '.jpeg') }}';">
                    </div>
                @endfor
            </div>
        </div>
    </section>

    <!-- LLAMADO A LA ACCIÓN -->
    <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 text-center">¿Tiene Hambre?</h2>
            <p class="text-stone-400 mb-10 text-xl max-w-2xl mx-auto">
                Visítenos hoy y disfrute del atardecer más icónico en El Castillo.
            </p>
            <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">
                Reservar una Mesa
            </a>
        </div>
    </section>

    @include('partials.footer_es')
@endsection