@extends('layouts.app')

@section('title', 'Contacto - Paradise Villas CR')

@section('content')
    <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">
            <div class="absolute inset-0 bg-blue-900/60"></div>
        </div>
        <h1 class="relative z-10 text-5xl md:text-7xl font-black uppercase italic">Contáctenos</h1>
    </header>

    <section class="py-20 bg-white">
        <div class="container mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16">
            <div>
                <h2 class="text-4xl font-black uppercase italic mb-8">Información de Contacto</h2>
                <div class="space-y-6">
                    <p class="text-xl"><strong>Ubicación:</strong> El Castillo, La Fortuna, Costa Rica.</p>
                    <p class="text-xl"><strong>WhatsApp:</strong> <a href="https://wa.me/50662884010" class="text-green-600 font-bold">(506) 6288-4010</a></p>
                    <p class="text-xl"><strong>Email:</strong> info@villasparadisecr.com</p>
                </div>
                <div class="mt-10">
                    <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="block bg-amber-500 text-center py-4 rounded-full font-bold uppercase shadow-lg">Reservar en la Web</a>
                </div>
            </div>
            <div class="h-[400px] rounded-3xl overflow-hidden shadow-2xl">
                <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!1ses!2scr!4v1714800000000!5m2!1ses!2scr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
            </div>
        </div>
    </section>

    @include('partials.footer_es')
@endsection