@extends('layouts.app')

@section('title', 'About 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-1566073771259-6a8506099945?w=1920&h=600&fit=crop&q=80"
                alt="About Hotel Bardan Boutique" 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">
                About Us
            </h1>
            <p class="text-xl text-shadow" data-aos="fade-up" data-aos-delay="100">
                More than a hotel...an experience
            </p>
        </div>
    </section>

    <!-- About Content -->
    <section class="py-20">
        <div class="container-custom">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-20">
                <div data-aos="fade-right">
                    <span class="section-badge">Our Story</span>
                    <h2 class="section-title">Welcome to Hotel Bardan Boutique</h2>
                    <div class="divider mb-6"></div>
                    <p class="text-lg text-gray-600 mb-4 leading-relaxed">
                        Hotel Bardan Boutique is a boutique family hotel centrally located at Gaushala way to Ratopul
                        at walking distance from the Holy Temple of Lord Pashupatinath, a World Heritage Site, and around
                        1.5 km away from Tribhuwan International Airport.
                    </p>
                    <p class="text-lg text-gray-600 mb-4 leading-relaxed">
                        This hotel's motto is to serve our prestigious and valued guests with a smile in a homely
                        environment
                        to make them feel at home away from their homes. We understand that travel is not just about
                        reaching
                        a destination, but about the experience and memories you create along the way.
                    </p>
                    <p class="text-lg text-gray-600 mb-6 leading-relaxed">
                        This hotel is managed by a group of professionals with 15 years of experience in the Hospitality
                        sector,
                        ensuring that every aspect of your stay is carefully curated for comfort and convenience.
                    </p>
                </div>
                <div data-aos="fade-left">
                    <img src="https://images.unsplash.com/photo-1564501049412-61c2a3083791?w=800&h=600&fit=crop&q=80"
                        alt="Hotel Bardan Boutique Interior" class="rounded-2xl shadow-2xl w-full">
                </div>
            </div>

            <!-- Why Choose Us -->
            <div class="mb-20">
                <div class="text-center mb-12" data-aos="fade-up">
                    <span class="section-badge">Why Choose Us</span>
                    <h2 class="section-title">What Makes Us Special</h2>
                    <div class="divider mb-4"></div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="text-center" data-aos="fade-up" data-aos-delay="0">
                        <div
                            class="w-20 h-20 bg-gradient-to-br from-primary-100 to-accent-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-10 h-10 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>
                        <h3 class="text-xl font-display font-bold mb-2">Prime Location</h3>
                        <p class="text-gray-600">
                            Perfectly located near Pashupatinath Temple and Tribhuwan International Airport,
                            with easy access to major attractions.
                        </p>
                    </div>

                    <div class="text-center" data-aos="fade-up" data-aos-delay="100">
                        <div
                            class="w-20 h-20 bg-gradient-to-br from-primary-100 to-accent-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-10 h-10 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
                            </svg>
                        </div>
                        <h3 class="text-xl font-display font-bold mb-2">Boutique Experience</h3>
                        <p class="text-gray-600">
                            Each room is uniquely designed with modern amenities and elegant décor,
                            offering a personalized boutique experience.
                        </p>
                    </div>

                    <div class="text-center" data-aos="fade-up" data-aos-delay="200">
                        <div
                            class="w-20 h-20 bg-gradient-to-br from-primary-100 to-accent-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-10 h-10 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <h3 class="text-xl font-display font-bold mb-2">Warm Hospitality</h3>
                        <p class="text-gray-600">
                            Our experienced team ensures personalized service with a smile,
                            making you feel at home throughout your stay.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Our Values -->
            <div class="bg-gradient-to-r from-primary-50 to-accent-50 rounded-3xl p-12" data-aos="fade-up">
                <div class="text-center mb-12">
                    <span class="section-badge">Our Commitment</span>
                    <h2 class="section-title">Our Core Values</h2>
                    <div class="divider mb-4"></div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="bg-white rounded-xl p-6 shadow-md">
                        <div class="text-4xl mb-3">🏆</div>
                        <h3 class="text-lg font-bold mb-2">Excellence</h3>
                        <p class="text-gray-600 text-sm">Striving for excellence in every aspect of our service</p>
                    </div>

                    <div class="bg-white rounded-xl p-6 shadow-md">
                        <div class="text-4xl mb-3">🤝</div>
                        <h3 class="text-lg font-bold mb-2">Integrity</h3>
                        <p class="text-gray-600 text-sm">Building trust through honest and transparent practices</p>
                    </div>

                    <div class="bg-white rounded-xl p-6 shadow-md">
                        <div class="text-4xl mb-3">💚</div>
                        <h3 class="text-lg font-bold mb-2">Care</h3>
                        <p class="text-gray-600 text-sm">Genuine care for our guests, staff, and community</p>
                    </div>

                    <div class="bg-white rounded-xl p-6 shadow-md">
                        <div class="text-4xl mb-3">✨</div>
                        <h3 class="text-lg font-bold mb-2">Innovation</h3>
                        <p class="text-gray-600 text-sm">Continuously improving to exceed expectations</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Team Section (Optional) -->
    <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">Our Team</span>
                <h2 class="section-title">Meet Our Professionals</h2>
                <div class="divider mb-4"></div>
                <p class="section-subtitle">
                    15 years of combined experience in hospitality ensures your stay is exceptional
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div class="text-center" data-aos="fade-up" data-aos-delay="0">
                    <div
                        class="w-32 h-32 bg-gradient-to-br from-primary-400 to-accent-400 rounded-full mx-auto mb-4 flex items-center justify-center">
                        <svg class="w-16 h-16 text-white" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                                clip-rule="evenodd" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-display font-bold mb-1">Management Team</h3>
                    <p class="text-primary-600">Leadership</p>
                </div>

                <div class="text-center" data-aos="fade-up" data-aos-delay="100">
                    <div
                        class="w-32 h-32 bg-gradient-to-br from-primary-400 to-accent-400 rounded-full mx-auto mb-4 flex items-center justify-center">
                        <svg class="w-16 h-16 text-white" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                                clip-rule="evenodd" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-display font-bold mb-1">Front Desk</h3>
                    <p class="text-primary-600">Guest Services</p>
                </div>

                <div class="text-center" data-aos="fade-up" data-aos-delay="200">
                    <div
                        class="w-32 h-32 bg-gradient-to-br from-primary-400 to-accent-400 rounded-full mx-auto mb-4 flex items-center justify-center">
                        <svg class="w-16 h-16 text-white" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                                clip-rule="evenodd" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-display font-bold mb-1">Housekeeping</h3>
                    <p class="text-primary-600">Cleanliness & Comfort</p>
                </div>

                <div class="text-center" data-aos="fade-up" data-aos-delay="300">
                    <div
                        class="w-32 h-32 bg-gradient-to-br from-primary-400 to-accent-400 rounded-full mx-auto mb-4 flex items-center justify-center">
                        <svg class="w-16 h-16 text-white" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                                clip-rule="evenodd" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-display font-bold mb-1">Culinary Team</h3>
                    <p class="text-primary-600">Dining Experience</p>
                </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">Experience the Difference</h2>
                <p class="text-xl mb-8 max-w-2xl mx-auto">
                    Join thousands of satisfied guests who have made Hotel Bardan Boutique their home away from home
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="{{ route('rooms.index') }}"
                        class="btn bg-white text-primary-600 hover:bg-gray-100 text-lg px-8 py-4">
                        Explore Rooms
                    </a>
                    <a href="{{ route('contact.index') }}"
                        class="btn border-2 border-white text-white hover:bg-white hover:text-primary-600 text-lg px-8 py-4">
                        Contact Us
                    </a>
                </div>
            </div>
        </div>
    </section>
@endsection