@extends('layouts.app')

@section('title', 'Contact Us - Hotel Bardan Boutique')

@section('content')
<!-- Page Header -->
<section class="relative h-96 flex items-center justify-center overflow-hidden">
    <div class="absolute inset-0 z-0">
        <img src="https://images.unsplash.com/photo-1596524430615-b46475ddff6e?w=1920&h=600&fit=crop&q=80" 
             alt="Contact Us" 
             class="w-full h-full object-cover">
    </div>
    <div class="hero-overlay"></div>
    <div class="relative z-10 container-custom text-center text-white">
        <h1 class="text-5xl md:text-6xl font-display font-bold mb-4 text-shadow-lg" data-aos="fade-up">
            Contact Us
        </h1>
        <p class="text-xl text-shadow" data-aos="fade-up" data-aos-delay="100">
            We'd love to hear from you
        </p>
    </div>
</section>

<!-- Contact Section -->
<section class="py-20">
    <div class="container-custom">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <!-- Contact Form -->
            <div data-aos="fade-right">
                <div class="mb-8">
                    <span class="section-badge">Get in Touch</span>
                    <h2 class="text-3xl font-display font-bold mb-4">Send Us a Message</h2>
                    <p class="text-gray-600">
                        Have a question or need assistance? Fill out the form below and we'll get back to you as soon as possible.
                    </p>
                </div>
                
                <form action="{{ route('contact.submit') }}" method="POST" class="space-y-6 needs-validation">
                    @csrf
                    
                    <div>
                        <label for="name" class="form-label">Full Name *</label>
                        <input type="text" id="name" name="name" class="form-input" required value="{{ old('name') }}">
                        @error('name')
                            <p class="form-error">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div>
                        <label for="email" class="form-label">Email Address *</label>
                        <input type="email" id="email" name="email" class="form-input" required value="{{ old('email') }}">
                        @error('email')
                            <p class="form-error">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div>
                        <label for="phone" class="form-label">Phone Number</label>
                        <input type="tel" id="phone" name="phone" class="form-input" value="{{ old('phone') }}">
                        @error('phone')
                            <p class="form-error">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div>
                        <label for="subject" class="form-label">Subject</label>
                        <input type="text" id="subject" name="subject" class="form-input" value="{{ old('subject') }}">
                        @error('subject')
                            <p class="form-error">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div>
                        <label for="message" class="form-label">Message *</label>
                        <textarea id="message" name="message" rows="5" class="form-input" required>{{ old('message') }}</textarea>
                        @error('message')
                            <p class="form-error">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <button type="submit" class="btn btn-primary w-full text-lg">
                        Send Message
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                        </svg>
                    </button>
                </form>
            </div>
            
            <!-- Contact Information -->
            <div data-aos="fade-left">
                <div class="mb-8">
                    <span class="section-badge">Contact Information</span>
                    <h2 class="text-3xl font-display font-bold mb-4">Reach Us Directly</h2>
                </div>
                
                <div class="space-y-6">
                    <!-- Address -->
                    <div class="flex gap-4">
                        <div class="flex-shrink-0">
                            <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center">
                                <svg class="w-6 h-6 text-primary-600" 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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                                </svg>
                            </div>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-1">Address</h3>
                            <p class="text-gray-600">Battisputali, Gaushala<br>Kathmandu, Nepal</p>
                        </div>
                    </div>
                    
                    <!-- Phone -->
                    <div class="flex gap-4">
                        <div class="flex-shrink-0">
                            <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center">
                                <svg class="w-6 h-6 text-primary-600" 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"/>
                                </svg>
                            </div>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-1">Phone</h3>
                            <p class="text-gray-600">
                                <a href="tel:+97714599977" class="hover:text-primary-600">+977-1-4599977</a><br>
                                <a href="tel:+97714597977" class="hover:text-primary-600">+977-1-4597977</a>
                            </p>
                        </div>
                    </div>
                    
                    <!-- Email -->
                    <div class="flex gap-4">
                        <div class="flex-shrink-0">
                            <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center">
                                <svg class="w-6 h-6 text-primary-600" 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 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                                </svg>
                            </div>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-1">Email</h3>
                            <p class="text-gray-600">
                                <a href="mailto:info@hotelbardanboutique.com" class="hover:text-primary-600">info@hotelbardanboutique.com</a>
                            </p>
                        </div>
                    </div>
                    
                    <!-- Working Hours -->
                    <div class="flex gap-4">
                        <div class="flex-shrink-0">
                            <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center">
                                <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                            </div>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-1">Reception Hours</h3>
                            <p class="text-gray-600">24/7 Front Desk Service</p>
                        </div>
                    </div>
                </div>
                
                <!-- Map -->
                <div class="mt-8 rounded-lg overflow-hidden shadow-lg h-80">
                    <iframe 
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3532.1234567890!2d85.3500!3d27.7100!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjfCsDQyJzM2LjAiTiA4NcKwMjEnMDAuMCJF!5e0!3m2!1sen!2snp!4v1234567890"
                        width="100%" 
                        height="100%" 
                        style="border:0;" 
                        allowfullscreen="" 
                        loading="lazy" 
                        referrerpolicy="no-referrer-when-downgrade">
                    </iframe>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Nearby Attractions -->
<section class="py-20 bg-gray-50">
    <div class="container-custom">
        <div class="text-center mb-12" data-aos="fade-up">
            <span class="section-badge">Explore Nearby</span>
            <h2 class="section-title">Nearby Attractions</h2>
            <div class="divider mb-4"></div>
            <p class="section-subtitle">Discover the cultural heritage sites near our hotel</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="card card-hover" data-aos="fade-up" data-aos-delay="0">
                <div class="relative overflow-hidden h-48">
                    <img src="https://images.unsplash.com/photo-1626621341517-bbf3d9990a23?w=600&h=400&fit=crop&q=80" 
                         alt="Pashupatinath Temple" 
                         class="w-full h-full object-cover transform transition-transform duration-500 hover:scale-110">
                    <div class="absolute top-4 left-4 bg-white text-primary-600 px-3 py-1 rounded-full font-bold text-sm">
                        < 1 km
                    </div>
                </div>
                <div class="p-6">
                    <h3 class="text-xl font-display font-bold mb-2">Pashupatinath Temple</h3>
                    <p class="text-gray-600 text-sm mb-4">UNESCO World Heritage Site, sacred Hindu temple</p>
                    <a href="{{ route('pashupatinath') }}" class="text-primary-600 font-medium hover:underline">Learn More →</a>
                </div>
            </div>
            
            <div class="card card-hover" data-aos="fade-up" data-aos-delay="100">
                <div class="relative overflow-hidden h-48">
                    <img src="https://images.unsplash.com/photo-1605640840605-14ac1855827b?w=600&h=400&fit=crop&q=80" 
                         alt="Boudhanath Stupa" 
                         class="w-full h-full object-cover transform transition-transform duration-500 hover:scale-110">
                    <div class="absolute top-4 left-4 bg-white text-primary-600 px-3 py-1 rounded-full font-bold text-sm">
                        3 km
                    </div>
                </div>
                <div class="p-6">
                    <h3 class="text-xl font-display font-bold mb-2">Boudhanath Stupa</h3>
                    <p class="text-gray-600 text-sm mb-4">One of the largest Buddhist stupas in the world</p>
                    <a href="{{ route('boudhanath') }}" class="text-primary-600 font-medium hover:underline">Learn More →</a>
                </div>
            </div>
            
            <div class="card card-hover" data-aos="fade-up" data-aos-delay="200">
                <div class="relative overflow-hidden h-48">
                    <img src="https://images.unsplash.com/photo-1626621797758-e28c10c9e66e?w=600&h=400&fit=crop&q=80" 
                         alt="Kathmandu Durbar Square" 
                         class="w-full h-full object-cover transform transition-transform duration-500 hover:scale-110">
                    <div class="absolute top-4 left-4 bg-white text-primary-600 px-3 py-1 rounded-full font-bold text-sm">
                        5 km
                    </div>
                </div>
                <div class="p-6">
                    <h3 class="text-xl font-display font-bold mb-2">Kathmandu Durbar Square</h3>
                    <p class="text-gray-600 text-sm mb-4">Ancient palace complex and cultural center</p>
                    <a href="{{ route('kathmandu-durbar-square') }}" class="text-primary-600 font-medium hover:underline">Learn More →</a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

