@extends('layouts.app')
@section('content')

    @section('title', 'Experiences')

    <!-- Experiences Hero Section -->
    <section class="experiences-hero pt-24">
        <div class="container mx-auto px-4">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">Experiences at G4 Homez</h1>
            <p class="text-xl max-w-2xl mx-auto">Furnished rooms, apartments, and a conference facility in Kilakala — productive stays, calm surroundings, and easy access to Morogoro</p>
        </div>
    </section>

    <!-- Experiences Content -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="section-title text-4xl font-bold text-gray-800">Tailored to you</h2>
                <p class="text-xl text-gray-600 mt-6">Whether you are on business, hosting a team, or unwinding in the Uluguru foothills</p>
            </div>

            <div class="tab-container">
                <button class="tab-btn active" data-tab="all">All</button>
                <button class="tab-btn" data-tab="conference">Conference &amp; business</button>
                <button class="tab-btn" data-tab="stay">Stay &amp; comfort</button>
                <button class="tab-btn" data-tab="explore">Morogoro &amp; around</button>
                <button class="tab-btn" data-tab="relax">Relaxation</button>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
                <div class="experience-card" data-category="conference">
                    <div class="experience-img">
                        <img src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Conference facility">
                    </div>
                    <div class="experience-content">
                        <span class="experience-category">Conference &amp; business</span>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">Meetings &amp; team retreats</h3>
                        <div class="experience-duration">
                            <i class="fas fa-users"></i> Up to 25 participants
                        </div>
                        <p class="text-gray-600 mb-4">Dedicated conference space with high-speed internet — teams stay on site for focused sessions without travelling between venues.</p>
                        <ul class="experience-features">
                            <li><i class="fas fa-check"></i> Direct access to the conference area</li>
                            <li><i class="fas fa-check"></i> Ample parking &amp; 24-hour front desk</li>
                            <li><i class="fas fa-check"></i> Bar &amp; restaurant on site</li>
                            <li><i class="fas fa-check"></i> Modern guest rooms for delegates</li>
                        </ul>
                        <div class="experience-price">Ask for a package</div>
                        <a href="{{ route('booking.index') }}" class="btn-primary w-full inline-block text-center">Enquire</a>
                    </div>
                </div>

                <div class="experience-card" data-category="stay">
                    <div class="experience-img">
                        <img src="https://images.unsplash.com/photo-1582582621959-48d27397dc69?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Furnished room">
                    </div>
                    <div class="experience-content">
                        <span class="experience-category">Stay &amp; comfort</span>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">Furnished rooms &amp; apartments</h3>
                        <div class="experience-duration">
                            <i class="fas fa-moon"></i> Nightly stays
                        </div>
                        <p class="text-gray-600 mb-4">Private bathroom, fresh linen, 43&quot; smart TV, Wi‑Fi, air-conditioning, and balcony — views toward the Uluguru Mountains.</p>
                        <ul class="experience-features">
                            <li><i class="fas fa-check"></i> Single &amp; double options</li>
                            <li><i class="fas fa-check"></i> Impeccable hygiene standards</li>
                            <li><i class="fas fa-check"></i> Affordable rates</li>
                            <li><i class="fas fa-check"></i> Personalized service</li>
                        </ul>
                        <div class="experience-price">See room rates</div>
                        <a href="{{ url('/rooms') }}" class="btn-primary w-full inline-block text-center">View rooms</a>
                    </div>
                </div>

                <div class="experience-card" data-category="explore">
                    <div class="experience-img">
                        <img src="https://images.unsplash.com/photo-1578662996442-48f60103fc96?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Morogoro town">
                    </div>
                    <div class="experience-content">
                        <span class="experience-category">Morogoro &amp; around</span>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">City access &amp; transport</h3>
                        <div class="experience-duration">
                            <i class="fas fa-road"></i> ~5 km from centre
                        </div>
                        <p class="text-gray-600 mb-4">Stay in a calm Kilakala setting while reaching central Morogoro easily via Bolt and other services.</p>
                        <ul class="experience-features">
                            <li><i class="fas fa-check"></i> Privacy away from congestion</li>
                            <li><i class="fas fa-check"></i> Ideal for work &amp; leisure</li>
                            <li><i class="fas fa-check"></i> Individual &amp; group travellers</li>
                            <li><i class="fas fa-check"></i> Team stays &amp; retreats</li>
                        </ul>
                        <div class="experience-price">Location advantage</div>
                        <a href="{{ url('/contact') }}" class="btn-primary w-full inline-block text-center">Get directions</a>
                    </div>
                </div>

                <div class="experience-card" data-category="explore">
                    <div class="experience-img">
                        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Uluguru Mountains">
                    </div>
                    <div class="experience-content">
                        <span class="experience-category">Morogoro &amp; around</span>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">Uluguru scenery</h3>
                        <div class="experience-duration">
                            <i class="fas fa-mountain"></i> Mountain setting
                        </div>
                        <p class="text-gray-600 mb-4">Enjoy serene mountain scenery and refreshing air — a natural backdrop for rest after work or travel.</p>
                        <ul class="experience-features">
                            <li><i class="fas fa-check"></i> Calming outlooks</li>
                            <li><i class="fas fa-check"></i> Quiet environment</li>
                            <li><i class="fas fa-check"></i> Balance of nature &amp; convenience</li>
                            <li><i class="fas fa-check"></i> Memorable stays</li>
                        </ul>
                        <div class="experience-price">Included with your stay</div>
                        <a href="{{ url('/gallery') }}" class="btn-primary w-full inline-block text-center">See gallery</a>
                    </div>
                </div>

                <div class="experience-card" data-category="stay">
                    <div class="experience-img">
                        <img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Restaurant">
                    </div>
                    <div class="experience-content">
                        <span class="experience-category">Stay &amp; comfort</span>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">Bar &amp; restaurant</h3>
                        <div class="experience-duration">
                            <i class="fas fa-utensils"></i> On site
                        </div>
                        <p class="text-gray-600 mb-4">Guests and conference groups can dine and unwind without leaving the property — everything in one place.</p>
                        <ul class="experience-features">
                            <li><i class="fas fa-check"></i> Convenient for delegates</li>
                            <li><i class="fas fa-check"></i> Social &amp; business meals</li>
                            <li><i class="fas fa-check"></i> Complements longer working sessions</li>
                            <li><i class="fas fa-check"></i> 24-hour front desk support</li>
                        </ul>
                        <div class="experience-price">On site</div>
                        <a href="{{ url('/contact') }}" class="btn-primary w-full inline-block text-center">Contact us</a>
                    </div>
                </div>

                <div class="experience-card" data-category="relax">
                    <div class="experience-img">
                        <img src="https://images.unsplash.com/photo-1416879595882-3373a0480b5b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Terraces and garden">
                    </div>
                    <div class="experience-content">
                        <span class="experience-category">Relaxation</span>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">Gardens &amp; terraces</h3>
                        <div class="experience-duration">
                            <i class="fas fa-leaf"></i> Outdoor spaces
                        </div>
                        <p class="text-gray-600 mb-4">Neat grounds, flower gardens, and terraces — perfect to relax or hold informal conversations.</p>
                        <ul class="experience-features">
                            <li><i class="fas fa-check"></i> Well-maintained compound</li>
                            <li><i class="fas fa-check"></i> Free parking for guests</li>
                            <li><i class="fas fa-check"></i> Safe, secure environment</li>
                            <li><i class="fas fa-check"></i> Peace of mind</li>
                        </ul>
                        <div class="experience-price">Complimentary</div>
                        <a href="{{ url('/') }}#about-g4-homez" class="btn-primary w-full inline-block text-center">Our motto</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Team Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="section-title text-4xl font-bold text-gray-800">Hospitality you can trust</h2>
                <p class="text-xl text-gray-600 mt-6 max-w-3xl mx-auto">Our team is committed to the G4 Homez motto: service that makes you feel at home, safe, and productive away from home — with 24-hour security, front desk support, and attentive care throughout your stay.</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto text-center">
                <div class="p-8 rounded-xl bg-gray-50 shadow-sm">
                    <div class="text-4xl mb-4" style="color: var(--primary-color);"><i class="fas fa-concierge-bell"></i></div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">Front desk</h3>
                    <p class="text-gray-600">24-hour assistance for check-in, conference needs, and local information.</p>
                </div>
                <div class="p-8 rounded-xl bg-gray-50 shadow-sm">
                    <div class="text-4xl mb-4" style="color: var(--primary-color);"><i class="fas fa-shield-alt"></i></div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">Safety &amp; security</h3>
                    <p class="text-gray-600">CCTV, smoke alarms, fire extinguishers in common areas, and professional security around the clock.</p>
                </div>
                <div class="p-8 rounded-xl bg-gray-50 shadow-sm">
                    <div class="text-4xl mb-4" style="color: var(--primary-color);"><i class="fas fa-hand-holding-heart"></i></div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">Personalized care</h3>
                    <p class="text-gray-600">Privacy, quality, and value — whether you stay for a night or host a multi-day meeting.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-16 wild-life-section">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Plan your stay at G4 Homez</h2>
            <p class="text-xl text-gray-200 mb-8 max-w-2xl mx-auto">Kilakala Bong'ola, Morogoro — furnished accommodation and conference facilities in one peaceful location</p>
            <a href="{{ route('booking.index') }}" class="btn-primary inline-block mx-2 mb-4">Book now</a>
            <a href="{{ url('/contact') }}" class="inline-block mx-2 mb-4 border-2 border-white text-white px-6 py-3 rounded-full font-medium transition hover:bg-white hover:text-gray-800">Contact us</a>
        </div>
    </section>
@endsection