@extends('layouts.app')

@section('title', 'About G4 Homez')

@section('content')
<section class="pt-24 relative overflow-hidden">
    <div class="absolute inset-0">
        <img src="{{ asset('assets/about_us.jpg') }}" alt="About G4 Homez" class="w-full h-full object-cover">
        <div class="absolute inset-0" style="background: linear-gradient(120deg, rgba(42, 12, 12, 0.86) 0%, rgba(91, 13, 9, 0.72) 50%, rgba(91, 13, 9, 0.55) 100%);"></div>
    </div>
    <div class="container mx-auto px-4 relative z-10 py-20 md:py-24">
        <div class="max-w-4xl">
            <span class="inline-flex items-center px-4 py-1 rounded-full text-sm font-semibold mb-6 border border-white/30 text-white bg-white/10">
                <i class="fas fa-hotel mr-2"></i> About G4 Homez
            </span>
            <h1 class="text-4xl md:text-6xl font-bold text-white leading-tight mb-5">A Boutique Stay Experience in Kilakala</h1>
            <p class="text-xl text-gray-100 mb-4">Comfort, privacy, and exceptional hospitality for business and leisure guests.</p>
            <p class="text-base md:text-lg text-gray-200 max-w-3xl">G4 Homez combines furnished rooms, elegant apartments, and a professional conference facility in one serene environment, helping every guest feel at home while staying productive.</p>
        </div>
    </div>
</section>

<section class="py-16 bg-white">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
            <div>
                <h2 class="section-title text-4xl font-bold text-gray-800 mb-8">Who We Are</h2>
                <p class="text-gray-700 mb-4 leading-relaxed">
                    G4 Homez is located in Kilakala Bong'ola, Morogoro, offering quality accommodation and conference services
                    for travelers, teams, and organizations seeking a peaceful yet practical destination.
                </p>
                <p class="text-gray-700 mb-6 leading-relaxed">
                    Our focus is simple: provide clean spaces, reliable service, and modern amenities that support rest,
                    meetings, and long or short stays with confidence.
                </p>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div class="rounded-lg border border-gray-200 p-4">
                        <h3 class="font-semibold text-gray-900 mb-1">Furnished Rooms</h3>
                        <p class="text-sm text-gray-600">Modern rooms prepared for comfort and convenience.</p>
                    </div>
                    <div class="rounded-lg border border-gray-200 p-4">
                        <h3 class="font-semibold text-gray-900 mb-1">Private Apartments</h3>
                        <p class="text-sm text-gray-600">Spacious apartment options for independent stays.</p>
                    </div>
                    <div class="rounded-lg border border-gray-200 p-4">
                        <h3 class="font-semibold text-gray-900 mb-1">Conference Facility</h3>
                        <p class="text-sm text-gray-600">Professional environment for meetings and workshops.</p>
                    </div>
                    <div class="rounded-lg border border-gray-200 p-4">
                        <h3 class="font-semibold text-gray-900 mb-1">Trusted Support</h3>
                        <p class="text-sm text-gray-600">A responsive team ready to help throughout your stay.</p>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <img src="{{ asset('assets/image_jengo.jpg') }}" alt="G4 Homez Apartments" class="rounded-2xl shadow-lg w-full h-56 object-cover">
                <img src="{{ asset('assets/image_ukumbi.jpg') }}" alt="G4 Homez Conference" class="rounded-2xl shadow-lg w-full h-56 object-cover mt-8">
                <img src="{{ asset('assets/about_us.jpg') }}" alt="G4 Homez Property" class="rounded-2xl shadow-lg w-full h-56 object-cover col-span-2">
            </div>
        </div>
    </div>
</section>

<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h2 class="section-title text-4xl font-bold text-gray-800">Why Guests Choose G4 Homez</h2>
            <p class="text-lg text-gray-600 mt-4 max-w-3xl mx-auto">We provide a complete stay and event experience with quality, security, and service at the center.</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="feature-card text-center p-6 rounded-2xl bg-white shadow-sm border border-gray-100">
                <div class="feature-icon mx-auto mb-4"><i class="fas fa-wifi"></i></div>
                <h3 class="text-lg font-bold text-gray-800 mb-2">Reliable Connectivity</h3>
                <p class="text-sm text-gray-600">Stable internet for meetings, work, and entertainment.</p>
            </div>
            <div class="feature-card text-center p-6 rounded-2xl bg-white shadow-sm border border-gray-100">
                <div class="feature-icon mx-auto mb-4"><i class="fas fa-shield-alt"></i></div>
                <h3 class="text-lg font-bold text-gray-800 mb-2">Safe Environment</h3>
                <p class="text-sm text-gray-600">24-hour security, CCTV, and secure parking on site.</p>
            </div>
            <div class="feature-card text-center p-6 rounded-2xl bg-white shadow-sm border border-gray-100">
                <div class="feature-icon mx-auto mb-4"><i class="fas fa-chalkboard-teacher"></i></div>
                <h3 class="text-lg font-bold text-gray-800 mb-2">Conference Ready</h3>
                <p class="text-sm text-gray-600">Practical venue setup for focused team sessions.</p>
            </div>
            <div class="feature-card text-center p-6 rounded-2xl bg-white shadow-sm border border-gray-100">
                <div class="feature-icon mx-auto mb-4"><i class="fas fa-concierge-bell"></i></div>
                <h3 class="text-lg font-bold text-gray-800 mb-2">Guest-Centered Service</h3>
                <p class="text-sm text-gray-600">Friendly support before, during, and after your stay.</p>
            </div>
        </div>
    </div>
</section>

<section class="py-16" style="background: linear-gradient(135deg, var(--primary-color), var(--dark-color));">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Ready to Experience G4 Homez?</h2>
        <p class="text-gray-200 text-lg mb-8 max-w-2xl mx-auto">Book your preferred space today or contact us for personalized support.</p>
        <div class="flex flex-wrap justify-center gap-4">
            <a href="{{ route('booking.index') }}" class="btn-primary inline-block px-8 py-3 rounded-full font-semibold">Book Now</a>
            <a href="{{ url('/contact') }}" class="inline-block px-8 py-3 rounded-full font-semibold border border-white text-white hover:bg-white hover:text-gray-900 transition">Contact Us</a>
        </div>
    </div>
</section>
@endsection