@extends('layouts.app')

@section('title', 'Inicio - Paradise Villas Arenal | El Castillo La Fortuna')

@section('meta')
    <meta name="description" content="Cabinas en el Castillo La Fortuna, hospedaje con vista al Volcán Arenal y el Lago. Villas Paradise CR, el mejor descanso." />
@endsection

@section('content')
    <!-- HERO SECTION -->
    <header class="relative h-screen flex items-center justify-center text-center text-white overflow-hidden">
        <div class="absolute inset-0 z-0">
            <img src="{{ asset('images/hero.jpg') }}" class="w-full h-full object-cover" alt="Vista Volcán Arenal">
            <div class="absolute inset-0 bg-black/40"></div>
        </div>
        
        <div class="relative z-10 max-w-5xl px-6">
            <h1 class="text-5xl md:text-7xl font-extrabold mb-6 drop-shadow-2xl tracking-tighter uppercase">
                Paradise Villas <span class="text-amber-400">CR</span>
            </h1>
            <p class="text-xl md:text-3xl mb-10 drop-shadow-lg font-light tracking-wide">
                Serenidad Inigualable al Pie del Volcán Arenal
            </p>
            <div class="flex flex-col md:flex-row justify-center gap-4">
                <a href="{{ url('/es/gallery') }}" class="bg-amber-500 hover:bg-amber-600 text-stone-900 px-10 py-4 rounded-full font-bold uppercase tracking-widest transition-all shadow-xl">
                    Ver Galería
                </a>
                <a href="https://wa.me/50662884010" class="bg-white/10 backdrop-blur-md hover:bg-white/20 text-white border border-white/30 px-10 py-4 rounded-full font-bold uppercase tracking-widest transition-all">
                    Contáctenos
                </a>
            </div>
        </div>
    </header>

    <!-- INFO 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">
                    <img src="{{ asset('images/villas-paradise.jpg') }}" alt="Villas Paradise CR" class="rounded-2xl shadow-2xl relative">
                </div>
                <div class="md:w-1/2">
                    <h2 class="text-sm font-bold text-amber-500 uppercase tracking-[0.3em] mb-4">Ubicación Prime</h2>
                    <h3 class="text-4xl md:text-5xl font-black text-stone-900 mb-6 leading-tight">
                        Aventura a Solo <br><span class="text-blue-900">100 Metros</span>
                    </h3>
                    <p class="text-lg text-stone-600 mb-8 leading-relaxed">
                        Ubicados en el corazón de **El Castillo, La Fortuna**, nuestras villas ofrecen el equilibrio perfecto entre comodidad y naturaleza. Todas las actividades acuáticas y excursiones al lago están a solo pasos de su puerta.
                    </p>
                    <div class="grid grid-cols-2 gap-6">
                        <div class="flex items-start gap-3 text-stone-800 italic">
                            <span class="text-amber-500 font-bold">✔</span> Vista al Volcán
                        </div>
                        <div class="flex items-start gap-3 text-stone-800 italic">
                            <span class="text-amber-500 font-bold">✔</span> Acceso al Lago
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CALL TO ACTION -->
    <section class="py-20 bg-stone-900 text-white text-center">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl md:text-5xl font-bold mb-8 italic">"La mejor vista del Volcán y el Lago Arenal."</h2>
            <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 por WhatsApp
            </a>
        </div>
    </section>

    @include('partials.footer_es')
@endsection