@extends('layouts.app')

@section('title', 'Contact Us - Paradise Villas CR | El Castillo La Fortuna')

@section('meta')
    <meta name="description" content="Contact Paradise Villas CR in El Castillo, La Fortuna. Reach us via WhatsApp at (506) 6288-4010 or email for reservations and inquiries." />
    <meta name="keywords" content="contact villas paradise, hotel el castillo phone, villas paradise email, location la fortuna hotel" />
@endsection

@section('content')
    <!-- HERO SECTION -->
    <header class="relative h-[40vh] flex items-center justify-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="Contact Us Hero">
            <div class="absolute inset-0 bg-blue-900/60"></div>
        </div>
        <div class="relative z-10 text-center">
            <h1 class="text-5xl md:text-7xl font-black uppercase italic tracking-tighter">Get In Touch</h1>
            <p class="text-amber-400 font-bold tracking-[0.3em] uppercase mt-2">We are here to help you</p>
        </div>
    </header>

    <section class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
                
                <!-- CONTACT INFO -->
                <div>
                    <h2 class="text-4xl font-black text-stone-900 uppercase italic mb-8">Contact Information</h2>
                    
                    <div class="space-y-8">
                        <!-- Address -->
                        <div class="flex items-start gap-6">
                            <div class="bg-amber-100 p-4 rounded-lg text-amber-600">
                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                            </div>
                            <div>
                                <h4 class="text-xl font-bold text-stone-900 uppercase">Location</h4>
                                <p class="text-stone-600 mt-1">El Castillo, La Fortuna, San Carlos, Costa Rica.</p>
                                <p class="text-stone-500 text-sm italic">100 meters from Lake Arenal.</p>
                            </div>
                        </div>

                        <!-- Phone / WhatsApp -->
                        <div class="flex items-start gap-6">
                            <div class="bg-green-100 p-4 rounded-lg text-green-600">
                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
                            </div>
                            <div>
                                <h4 class="text-xl font-bold text-stone-900 uppercase">WhatsApp</h4>
                                <a href="https://wa.me/50662884010" class="text-2xl font-black text-green-600 hover:underline">
                                    (506) 6288-4010
                                </a>
                            </div>
                        </div>

                        <!-- Email -->
                        <div class="flex items-start gap-6">
                            <div class="bg-blue-100 p-4 rounded-lg text-blue-600">
                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 012-2V7a2 2 0 01-2-2H5a2 2 0 01-2 2v10a2 2 0 012 2z"></path></svg>
                            </div>
                            <div>
                                <h4 class="text-xl font-bold text-stone-900 uppercase">Email</h4>
                                <a href="mailto:info@villasparadisecr.com" class="text-stone-600 hover:text-blue-600 transition underline">
                                    info@villasparadisecr.com
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="mt-12 p-8 bg-stone-900 rounded-2xl text-white">
                        <h4 class="text-2xl font-bold mb-4">Book Directly</h4>
                        <p class="text-stone-400 mb-6 font-light">The fastest way to confirm your stay is through our  official page or via WhatsApp.</p>
                        <a href="https://www.booking.com/hotel/cr/el-castillo-paradise-el-castillo-de-la-fortuna1.en.html?aid=2426794&no_rooms=1&group_adults=2" 
                           target="_blank" 
                           class="inline-block w-full text-center bg-amber-500 text-stone-900 py-4 rounded-full font-black uppercase tracking-widest hover:bg-amber-400 transition">
                            Book on The Web
                        </a>
                    </div>
                </div>

                <!-- GOOGLE MAP -->
                <div class="h-[500px] lg:h-full min-h-[400px] rounded-3xl overflow-hidden shadow-2xl border-8 border-stone-50">
                    <iframe 
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3923.6334641551694!2d-84.7516246!3d10.4113941!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8fa0059f1311029b%3A0xc3910543e06f159a!2sVillas%20Paradise%20Arenal!5e0!3m2!1sen!2scr!4v1714800000000!5m2!1sen!2scr" 
                        width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
                    </iframe>
                </div>

            </div>
        </div>
    </section>

    @include('partials.footer_en')
@endsection