<?php $__env->startSection('title', 'Our Services - Hotel Bardan Boutique'); ?>

<?php $__env->startSection('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-1582719508461-905c673771fd?w=1920&h=600&fit=crop&q=80" 
             alt="Hotel Services" 
             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">
            Our Services
        </h1>
        <p class="text-xl text-shadow" data-aos="fade-up" data-aos-delay="100">
            World-class amenities for an exceptional stay
        </p>
    </div>
</section>

<!-- Services Section -->
<section class="py-20">
    <div class="container-custom">
        <!-- Section Header -->
        <div class="text-center mb-12" data-aos="fade-up">
            <span class="section-badge">What We Offer</span>
            <h2 class="section-title">Premium Services & Amenities</h2>
            <div class="divider mb-4"></div>
            <p class="section-subtitle">
                Everything you need for a comfortable and memorable stay
            </p>
        </div>
        
        <!-- Services Grid -->
        <div id="servicesGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <?php $__currentLoopData = $services; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $service): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="card card-hover" 
                 data-aos="fade-up" 
                 data-aos-delay="<?php echo e($index * 100); ?>"
                 data-service-name="<?php echo e(strtolower($service->name)); ?>"
                 data-service-description="<?php echo e(strtolower($service->description)); ?>">
                
                <!-- Service Icon/Image -->
                <div class="relative h-48 bg-gradient-to-br from-primary-50 to-accent-50 flex items-center justify-center overflow-hidden">
                    <?php if($service->image): ?>
                    <img src="<?php echo e(asset('storage/' . $service->image)); ?>" 
                         alt="<?php echo e($service->name); ?>" 
                         class="w-full h-full object-cover">
                    <?php else: ?>
                    <div class="w-20 h-20 bg-gradient-to-br from-primary-100 to-accent-100 rounded-2xl flex items-center justify-center">
                        <svg class="w-10 h-10 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <?php switch($service->icon):
                                case ('wifi'): ?>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"/>
                                    <?php break; ?>
                                <?php case ('bed'): ?>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                                    <?php break; ?>
                                <?php case ('utensils'): ?>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                                    <?php break; ?>
                                <?php case ('parking'): ?>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"/>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-4-1a1 1 0 001 1h3M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"/>
                                    <?php break; ?>
                                <?php case ('plane'): ?>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                                    <?php break; ?>
                                <?php case ('shield'): ?>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                                    <?php break; ?>
                                <?php case ('bell'): ?>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                                    <?php break; ?>
                                <?php case ('shirt'): ?>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                                    <?php break; ?>
                                <?php default: ?>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            <?php endswitch; ?>
                        </svg>
                    </div>
                    <?php endif; ?>
                </div>
                
                <!-- Card Content -->
                <div class="p-6">
                    <h3 class="text-2xl font-display font-bold mb-3"><?php echo e($service->name); ?></h3>
                    <p class="text-gray-600 leading-relaxed"><?php echo e($service->description); ?></p>
                </div>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>

<!-- Additional Features -->
<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">Comfort & Convenience</span>
            <h2 class="section-title">What You Can Expect</h2>
            <div class="divider mb-4"></div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="0">
                <div class="flex gap-6">
                    <div class="flex-shrink-0">
                        <div class="w-16 h-16 bg-gradient-to-br from-primary-100 to-accent-100 rounded-xl flex items-center justify-center">
                            <svg class="w-8 h-8 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="text-xl font-display font-bold mb-3">24/7 Front Desk</h3>
                        <p class="text-gray-600 leading-relaxed">Our staff is available round the clock to assist you with any requests or concerns.</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="100">
                <div class="flex gap-6">
                    <div class="flex-shrink-0">
                        <div class="w-16 h-16 bg-gradient-to-br from-primary-100 to-accent-100 rounded-xl flex items-center justify-center">
                            <svg class="w-8 h-8 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="text-xl font-display font-bold mb-3">Concierge Services</h3>
                        <p class="text-gray-600 leading-relaxed">Let us help you plan your Kathmandu adventure with local insights and bookings.</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="200">
                <div class="flex gap-6">
                    <div class="flex-shrink-0">
                        <div class="w-16 h-16 bg-gradient-to-br from-primary-100 to-accent-100 rounded-xl flex items-center justify-center">
                            <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                            </svg>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-xl font-display font-bold mb-3">Travel Assistance</h3>
                        <p class="text-gray-600 leading-relaxed">From booking tours to arranging transportation, we're here to make your trip seamless.</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="300">
                <div class="flex gap-6">
                    <div class="flex-shrink-0">
                        <div class="w-16 h-16 bg-gradient-to-br from-primary-100 to-accent-100 rounded-xl flex items-center justify-center">
                            <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-xl font-display font-bold mb-3">Currency Exchange</h3>
                        <p class="text-gray-600 leading-relaxed">Convenient currency exchange services available at the hotel for your ease.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Call to Action -->
<section class="py-20">
    <div class="container-custom">
        <div class="bg-gradient-to-r from-primary-600 to-accent-600 rounded-3xl p-12 text-center text-white" data-aos="fade-up">
            <h2 class="text-4xl font-display font-bold mb-4">Ready to Experience Our Services?</h2>
            <p class="text-xl mb-8 max-w-2xl mx-auto">
                Book your stay now and enjoy all the premium amenities Hotel Bardan Boutique has to offer
            </p>
            <a href="<?php echo e(route('rooms.index')); ?>" class="btn bg-white text-primary-600 hover:bg-gray-100 text-lg px-8 py-4">
                Book Now
                <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="M17 8l4 4m0 0l-4 4m4-4H3"/>
                </svg>
            </a>
        </div>
    </div>
</section>
<?php $__env->stopSection(); ?>


<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /Users/sumankc/Desktop/Hotel Bardan Boutique/resources/views/services.blade.php ENDPATH**/ ?>