@extends('layouts.app')

@section('title', 'Pashupatinath Temple - 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-1626621341517-bbf3d9990a23?w=1920&h=600&fit=crop&q=80" 
             alt="Pashupatinath Temple" 
             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">
            Pashupatinath Temple
        </h1>
        <p class="text-xl text-shadow" data-aos="fade-up" data-aos-delay="100">
            UNESCO World Heritage Site - Less than 1 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">Sacred Temple</span>
                    <h2 class="text-3xl font-display font-bold mb-6">About Pashupatinath Temple</h2>
                    
                    <p class="text-lg text-gray-600 mb-6 leading-relaxed">
                        Located within 1km from Hotel Bardan Boutique, Pashupatinath is one of the most sacred temples for Hindus all over the world. 
                        It is dedicated to Lord Shiva and located on the banks of the Bagmati River. Every year, many tourists visit this holy temple.
                    </p>
                    
                    <p class="text-lg text-gray-600 mb-6 leading-relaxed">
                        Only followers of Hinduism can enter the main temple, but all the other buildings are available for visitors to explore. 
                        From the Eastern bank of the river, the main temple can be seen in its whole beauty.
                    </p>
                    
                    <p class="text-lg text-gray-600 mb-8 leading-relaxed">
                        It is also enlisted in the list of UNESCO World Heritage Sites and is considered the most important temple dedicated to 
                        Lord Shiva in Nepal and one of the four most important sites for Lord Shiva's devotees in Asia.
                    </p>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                        <img src="https://images.unsplash.com/photo-1626621341517-bbf3d9990a23?w=600&h=400&fit=crop&q=80" 
                             alt="Pashupatinath Temple" 
                             class="rounded-lg shadow-lg w-full h-64 object-cover">
                        <img src="https://images.unsplash.com/photo-1609137144813-7d9921338f24?w=600&h=400&fit=crop&q=80" 
                             alt="Temple Complex" 
                             class="rounded-lg shadow-lg w-full h-64 object-cover">
                    </div>
                    
                    <div class="bg-blue-50 border-l-4 border-blue-500 p-6 rounded-lg mb-8">
                        <h3 class="text-xl font-display font-bold mb-4 text-blue-900">Things to Know</h3>
                        <ul class="space-y-3 text-blue-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>Dress modestly and respectfully</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>Main temple entry restricted to Hindus only</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>Best viewed from the eastern bank of Bagmati River</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>Photography allowed in most areas</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>Walking distance from Hotel Bardan Boutique (< 1 km)</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">Less than 1 km (Walking distance)</p>
                        </div>
                        
                        <div>
                            <h4 class="font-bold text-gray-700 mb-1">Travel Time</h4>
                            <p class="text-gray-600">10-15 minutes walk</p>
                        </div>
                        
                        <div>
                            <h4 class="font-bold text-gray-700 mb-1">Opening Hours</h4>
                            <p class="text-gray-600">4:00 AM - 9: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 evening</p>
                        </div>
                    </div>
                    
                    <div class="mt-8 pt-6 border-t">
                        <h4 class="font-bold text-gray-700 mb-4">Need Assistance?</h4>
                        <p class="text-sm text-gray-600 mb-4">Our hotel staff can help you arrange your visit and provide directions.</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-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 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-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>
                <div class="p-6">
                    <h3 class="text-xl font-display font-bold mb-2">Kathmandu Durbar Square</h3>
                    <p class="text-gray-600 mb-4">Ancient palace complex - 5 km away</p>
                    <a href="{{ route('kathmandu-durbar-square') }}" class="btn btn-outline">Learn More</a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

