@extends('layouts.app')

@section('title', 'Kathmandu Durbar Square - Nearby Attractions')

@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-1626621797758-e28c10c9e66e?w=1920&h=600&fit=crop&q=80" 
             alt="Kathmandu Durbar Square" 
             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">
            Kathmandu Durbar Square
        </h1>
        <p class="text-xl text-shadow" data-aos="fade-up" data-aos-delay="100">
            UNESCO World Heritage Site - 5 km from Hotel Bardan Boutique
        </p>
    </div>
</section>

<!-- Content -->
<section class="py-20">
    <div class="container-custom">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
            <div class="lg:col-span-2">
                <div data-aos="fade-up">
                    <span class="section-badge">Historical Palace</span>
                    <h2 class="text-3xl font-display font-bold mb-6">About Kathmandu Durbar Square</h2>
                    
                    <p class="text-lg text-gray-600 mb-6 leading-relaxed">
                        Located within 5 km from Hotel Bardan Boutique, Kathmandu Durbar Square is the cultural, religious, 
                        and artistic reflection of Kathmandu. The house of the living goddess (Kumari) is also next to the palace (Durbar).
                    </p>
                    
                    <p class="text-lg text-gray-600 mb-6 leading-relaxed">
                        The complex has a fine display of woodcarving and pagoda architecture. The palace courtyard is open to tourists, 
                        and during office hours, one can visit and take a picture of the Gurkha soldier in his traditional uniform.
                    </p>
                    
                    <p class="text-lg text-gray-600 mb-8 leading-relaxed">
                        Durbar Square is surrounded by spectacular architecture and vividly showcases the skills of the Newar artists 
                        and craftsmen over several centuries. The Royal Palace was originally at Dattaraya square and was later moved 
                        to the Durbar square. This UNESCO World Heritage Site is a must-visit destination for anyone interested in 
                        Nepalese culture, history, and architecture.
                    </p>
                    
                    <div class="bg-purple-50 border-l-4 border-purple-500 p-6 rounded-lg mb-8">
                        <h3 class="text-xl font-display font-bold mb-4 text-purple-900">Key Highlights</h3>
                        <ul class="space-y-3 text-purple-800">
                            <li class="flex items-start gap-2">
                                <svg class="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                <span><strong>Kumari Ghar:</strong> Home of the Living Goddess Kumari</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                <span><strong>Taleju Temple:</strong> Three-tiered temple dedicated to Goddess Taleju</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                <span><strong>Hanuman Dhoka:</strong> Ancient royal palace complex</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                <span><strong>Kasthamandap:</strong> Ancient wooden pavilion (reconstruction after 2015 earthquake)</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                <span><strong>Shiva-Parvati Temple:</strong> Temple with famous deity statues on upper floor</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                <span><strong>Intricate Wood Carvings:</strong> Showcasing Newari craftsmanship</span>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="bg-yellow-50 border-l-4 border-yellow-500 p-6 rounded-lg">
                        <h3 class="text-xl font-display font-bold mb-4 text-yellow-900">Visitor Tips</h3>
                        <ul class="space-y-3 text-yellow-800">
                            <li class="flex items-start gap-2">
                                <svg class="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                                </svg>
                                <span>Wear comfortable walking shoes as the area is large</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                                </svg>
                                <span>Consider hiring a guide for detailed historical insights</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                                </svg>
                                <span>Be respectful when photographing religious sites</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                                </svg>
                                <span>Explore the surrounding Thamel area for shopping and dining</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <!-- Sidebar -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-2xl shadow-xl p-6 sticky top-24" data-aos="fade-left">
                    <h3 class="text-2xl font-display font-bold mb-6">Quick Info</h3>
                    
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-bold text-gray-700 mb-1">Distance from Hotel</h4>
                            <p class="text-gray-600">5 km</p>
                        </div>
                        
                        <div>
                            <h4 class="font-bold text-gray-700 mb-1">Travel Time</h4>
                            <p class="text-gray-600">15-20 minutes by taxi</p>
                        </div>
                        
                        <div>
                            <h4 class="font-bold text-gray-700 mb-1">Opening Hours</h4>
                            <p class="text-gray-600">6:00 AM - 7:00 PM daily</p>
                        </div>
                        
                        <div>
                            <h4 class="font-bold text-gray-700 mb-1">Entry Fee</h4>
                            <p class="text-gray-600">NPR 1000 for foreigners</p>
                        </div>
                        
                        <div>
                            <h4 class="font-bold text-gray-700 mb-1">Best Time to Visit</h4>
                            <p class="text-gray-600">Early morning or late afternoon</p>
                        </div>
                        
                        <div>
                            <h4 class="font-bold text-gray-700 mb-1">Recommended Duration</h4>
                            <p class="text-gray-600">2-3 hours</p>
                        </div>
                    </div>
                    
                    <div class="mt-8 pt-6 border-t">
                        <h4 class="font-bold text-gray-700 mb-4">Need Transportation?</h4>
                        <p class="text-sm text-gray-600 mb-4">We can arrange comfortable transportation and tours to Durbar Square.</p>
                        <a href="{{ route('contact.index') }}" class="btn btn-primary w-full">Contact Us</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Other Attractions -->
<section class="py-20 bg-gray-50">
    <div class="container-custom">
        <div class="text-center mb-12" data-aos="fade-up">
            <h2 class="text-3xl font-display font-bold mb-4">Other Nearby Attractions</h2>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div class="card card-hover" data-aos="fade-up">
                <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>
                <div class="p-6">
                    <h3 class="text-xl font-display font-bold mb-2">Pashupatinath Temple</h3>
                    <p class="text-gray-600 mb-4">Sacred Hindu temple - Less than 1 km away</p>
                    <a href="{{ route('pashupatinath') }}" class="btn btn-outline">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>
                <div class="p-6">
                    <h3 class="text-xl font-display font-bold mb-2">Boudhanath Stupa</h3>
                    <p class="text-gray-600 mb-4">One of the largest Buddhist stupas - 3 km away</p>
                    <a href="{{ route('boudhanath') }}" class="btn btn-outline">Learn More</a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

