@extends('layouts.app')

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

@section('meta')
    <meta name="description" content="Cabins in el castillo la fortuna, lodging castillo la fortuna, hotels near arenal volcano, Hotels near arenal lake . Villas paradise el castillo La Fortuna," />
    <meta name="keywords" content="cabins in el castillo la fortuna,lodging castillo la fortuna,hotels near arenal volcano,hotels near arenal lake . villas paradise el castillo la fortuna,el castillo la fortuna hotel,hotel with view to arenal volcano,hotels with arenal lake view," />
@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="Arenal Volcano View">
            <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">
                Experience Unmatched Serenity at the Foot of Arenal Volcano
            </p>
            <div class="flex flex-col md:flex-row justify-center gap-4">
                <a href="/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">
                    View Gallery
                </a>
                {{-- CONTACTO ACTUALIZADO CON WHATSAPP CORRECTO --}}
                <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">
                    Contact Us
                </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">
                    <div class="relative">
                        <img src="{{ asset('images/villas-paradise.jpg') }}" alt="Villas Paradise CR" class="rounded-2xl shadow-2xl z-10 relative">
                        <div class="absolute -bottom-6 -right-6 w-64 h-64 bg-amber-100 rounded-2xl -z-0 hidden md:block"></div>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <h2 class="text-sm font-bold text-amber-500 uppercase tracking-[0.3em] mb-4">Prime Location</h2>
                    <h3 class="text-4xl md:text-5xl font-black text-stone-900 mb-6 leading-tight">
                        Adventure Just <br><span class="text-blue-900">100 Meters Away</span>
                    </h3>
                    <p class="text-lg text-stone-600 mb-8 leading-relaxed">
                        Located in the heart of **El Castillo, La Fortuna**, our villas offer the perfect balance between comfort and nature. 
                        All water activities and lake excursions are located just steps from your doorstep.
                    </p>
                    <div class="grid grid-cols-2 gap-6 mb-10">
                        <div class="flex items-start gap-3 text-stone-800">
                            <span class="text-amber-500 font-bold">✔</span>
                            <p class="font-bold">Volcano Views</p>
                        </div>
                        <div class="flex items-start gap-3 text-stone-800">
                            <span class="text-amber-500 font-bold">✔</span>
                            <p class="font-bold">Lake Access</p>
                        </div>
                        <div class="flex items-start gap-3 text-stone-800">
                            <span class="text-amber-500 font-bold">✔</span>
                            <p class="font-bold">Nature Trails</p>
                        </div>
                        <div class="flex items-start gap-3 text-stone-800">
                            <span class="text-amber-500 font-bold">✔</span>
                            <p class="font-bold">Private Parking</p>
                        </div>
                    </div>
                    {{-- CORREO ELECTRÓNICO OFICIAL --}}
                    <p class="text-stone-500 text-sm font-semibold">
                        Email: <a href="mailto:info@villasparadisecr.com" class="text-blue-900 hover:underline">info@villasparadisecr.com</a>
                    </p>
                </div>
            </div>
        </div>
    </section>
@include('components.hero')
    <!-- 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">"The best view of the Volcano and Lake Arenal."</h2>
            <p class="text-stone-400 mb-10 max-w-2xl mx-auto text-lg">
                Ready to book? Reach out to us via email or WhatsApp.
            </p>
            <div class="flex flex-col md:flex-row justify-center gap-6">
                <a href="https://wa.me/50662884010" class="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">
                    WhatsApp Reservation
                </a>
                <a href="mailto:info@villasparadisecr.com" class="bg-white text-stone-900 px-12 py-4 rounded-full font-black uppercase tracking-widest hover:bg-stone-200 transition-all shadow-2xl">
                    Send an Email
                </a>
            </div>
        </div>
    </section>

    @include('partials.footer_en')
@endsection