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

    @section('title', 'Contact')

    <!-- Contact 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">Get in touch</h1>
            <p class="text-xl max-w-2xl mx-auto">Questions about your stay at G4 Homez in Kilakala, Morogoro? We are here to help with bookings, conferences, and travel arrangements.</p>
        </div>
    </section>

    <!-- Contact 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">Contact us</h2>
                <p class="text-xl text-gray-600 mt-6">Reach out for reservations, conference inquiries, or directions to Kilakala Bong'ola</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
                <div class="contact-info-card">
                    <div class="contact-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-4 text-center">Our location</h3>
                    <p class="text-gray-600 text-center">G4 Homez, Kilakala Bong'ola, Morogoro — about 5 km from central Morogoro, with convenient access via Bolt and other transport.</p>
                </div>

                <div class="contact-info-card">
                    <div class="contact-icon">
                        <i class="fas fa-phone-alt"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-4 text-center">Phone</h3>
                    <p class="text-gray-600 text-center">+255 782 437 508</p>
                    <p class="text-sm text-gray-500 text-center mt-2">24-hour front desk</p>
                </div>

                <div class="contact-info-card">
                    <div class="contact-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-4 text-center">Email</h3>
                    <p class="text-gray-600 text-center">booking@g4homez.com</p>
                    <p class="text-sm text-gray-500 text-center mt-2">We typically respond within 24 hours</p>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                <div class="contact-form">
                    <h3 class="text-2xl font-bold text-gray-800 mb-6">Send us a message</h3>
                    <form action="{{ route('contact.store') }}" method="POST">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <input type="text" name="name" class="form-input" placeholder="Your Name" value="{{ old('name') }}" required>
                                @error('name')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <input type="email" name="email" class="form-input" placeholder="Your Email" value="{{ old('email') }}" required>
                                @error('email')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <input type="text" name="subject" class="form-input" placeholder="Subject" value="{{ old('subject') }}">
                        @error('subject')
                            <p class="text-red-500 text-sm -mt-3 mb-3">{{ $message }}</p>
                        @enderror
                        <textarea name="message" class="form-input form-textarea" placeholder="Your Message" required>{{ old('message') }}</textarea>
                        @error('message')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                        <button type="submit" class="btn-primary w-full">Send Message</button>
                    </form>
                </div>

                <div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-6">Find us</h3>
                    <div class="map-container">
                        <iframe src="https://www.google.com/maps?q=Kilakala%2C%20Morogoro%2C%20Tanzania&output=embed" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                    <p class="text-gray-600 mt-4 text-center">Serene mountain scenery in Kilakala — modern comfort with privacy away from the bustle of central Morogoro.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ 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">Frequently asked questions</h2>
                <p class="text-xl text-gray-600 mt-6">Quick answers about G4 Homez</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
                <div class="bg-gray-50 p-6 rounded-lg">
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Do you have a conference room?</h3>
                    <p class="text-gray-600">Yes. We offer an exclusive conference facility for small to medium teams of up to 25 participants, with on-site accommodation so your group can stay and meet in one place.</p>
                </div>

                <div class="bg-gray-50 p-6 rounded-lg">
                    <h3 class="text-xl font-bold text-gray-800 mb-3">What is included in the rooms?</h3>
                    <p class="text-gray-600">Rooms are fully furnished with private bathroom, fresh linen, 43&quot; smart TV, free Wi‑Fi, air conditioning, and private balcony access, with views toward the Uluguru Mountains.</p>
                </div>

                <div class="bg-gray-50 p-6 rounded-lg">
                    <h3 class="text-xl font-bold text-gray-800 mb-3">How far are you from Morogoro town?</h3>
                    <p class="text-gray-600">We are situated in Kilakala, approximately 5 km from central Morogoro — close enough for city access via Bolt and other services, yet calm and private.</p>
                </div>

                <div class="bg-gray-50 p-6 rounded-lg">
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Is parking and security available?</h3>
                    <p class="text-gray-600">Free parking is available for resident guests. The property has CCTV, smoke alarms, fire extinguishers in common areas, a security alarm system, and 24-hour security.</p>
                </div>
            </div>
        </div>
    </section>
@endsection