@extends('layouts.app')

@section('title', 'Contact Us')
@section('meta_description', 'Get in touch with the Kuvaka team. We\'re here to help and answer any questions.')

@section('content')
<!-- Hero Section -->
<section class="bg-primary text-white py-5">
    <div class="container py-4">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center">
                <h1 class="display-4 fw-bold mb-4">Contact Us</h1>
                <p class="lead mb-0">We're here to help and answer any questions you might have.</p>
            </div>
        </div>
    </div>
</section>

<!-- Contact Information & Form -->
<section class="py-5">
    <div class="container py-4">
        <div class="row">
            <!-- Contact Information -->
            <div class="col-lg-4 mb-5 mb-lg-0">
                <h2 class="h3 mb-4">Get in Touch</h2>
                
                <div class="d-flex mb-4">
                    <div class="flex-shrink-0">
                        <div class="bg-primary bg-opacity-10 rounded-circle p-3">
                            <i class="fas fa-map-marker-alt text-primary fa-lg"></i>
                        </div>
                    </div>
                    <div class="ms-3">
                        <h5 class="mb-1">Visit Us</h5>
                        <p class="text-muted mb-0">
                            9th Floor, Kuvaka House<br>
                            123 Robert Mugabe Road<br>
                            Harare, Zimbabwe
                        </p>
                    </div>
                </div>
                
                <div class="d-flex mb-4">
                    <div class="flex-shrink-0">
                        <div class="bg-primary bg-opacity-10 rounded-circle p-3">
                            <i class="fas fa-phone text-primary fa-lg"></i>
                        </div>
                    </div>
                    <div class="ms-3">
                        <h5 class="mb-1">Call Us</h5>
                        <p class="text-muted mb-0">
                            Toll Free: <a href="tel:0800123456" class="text-decoration-none">0800 123 456</a><br>
                            Support: <a href="tel:+263242123456" class="text-decoration-none">+263 242 123 456</a>
                        </p>
                    </div>
                </div>
                
                <div class="d-flex mb-4">
                    <div class="flex-shrink-0">
                        <div class="bg-primary bg-opacity-10 rounded-circle p-3">
                            <i class="fas fa-envelope text-primary fa-lg"></i>
                        </div>
                    </div>
                    <div class="ms-3">
                        <h5 class="mb-1">Email Us</h5>
                        <p class="text-muted mb-0">
                            General: <a href="mailto:info@kuvaka.co.zw" class="text-decoration-none">info@kuvaka.co.zw</a><br>
                            Support: <a href="mailto:support@kuvaka.co.zw" class="text-decoration-none">support@kuvaka.co.zw</a>
                        </p>
                    </div>
                </div>
                
                <div class="d-flex">
                    <div class="flex-shrink-0">
                        <div class="bg-primary bg-opacity-10 rounded-circle p-3">
                            <i class="fas fa-clock text-primary fa-lg"></i>
                        </div>
                    </div>
                    <div class="ms-3">
                        <h5 class="mb-1">Office Hours</h5>
                        <p class="text-muted mb-0">
                            Monday - Friday: 8:00 AM - 4:30 PM<br>
                            Saturday - Sunday: Closed
                        </p>
                    </div>
                </div>
                
                <div class="mt-4">
                    <h5 class="mb-3">Follow Us</h5>
                    <div class="social-links">
                        <a href="#" class="btn btn-outline-primary btn-sm rounded-circle me-2">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="btn btn-outline-primary btn-sm rounded-circle me-2">
                            <i class="fab fa-x-twitter"></i>
                        </a>
                        <a href="#" class="btn btn-outline-primary btn-sm rounded-circle me-2">
                            <i class="fab fa-whatsapp"></i>
                        </a>
                        <a href="#" class="btn btn-outline-primary btn-sm rounded-circle">
                            <i class="fab fa-instagram"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Contact Form -->
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <h2 class="h3 mb-4">Send Us a Message</h2>
                        
                        @if(session('success'))
                            <div class="alert alert-success">
                                <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                            </div>
                        @endif
                        
                        <form method="POST" action="{{ route('contact.submit') }}">
                            @csrf
                            
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="name" class="form-label">Your Name *</label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                           id="name" name="name" value="{{ old('name') }}" required>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                
                                <div class="col-md-6">
                                    <label for="email" class="form-label">Email Address *</label>
                                    <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                           id="email" name="email" value="{{ old('email') }}" required>
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                
                                <div class="col-12">
                                    <label for="subject" class="form-label">Subject *</label>
                                    <input type="text" class="form-control @error('subject') is-invalid @enderror" 
                                           id="subject" name="subject" value="{{ old('subject') }}" required>
                                    @error('subject')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                
                                <div class="col-12">
                                    <label for="message" class="form-label">Message *</label>
                                    <textarea class="form-control @error('message') is-invalid @enderror" 
                                              id="message" name="message" rows="6" required>{{ old('message') }}</textarea>
                                    @error('message')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                
                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary btn-lg">
                                        <i class="fas fa-paper-plane me-2"></i>Send Message
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Map Section -->
<section class="bg-light py-5">
    <div class="container py-4">
        <h2 class="text-center h3 mb-4">Find Us</h2>
        <div class="ratio ratio-21x9">
            <iframe 
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3799.9999999999995!2d31.0335!3d-17.8252!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMTfCsDQ5JzMwLjciUyAzMcKwMDInMDAuNyJF!5e0!3m2!1sen!2szw!4v1234567890!5m2!1sen!2szw" 
                style="border:0;" 
                allowfullscreen="" 
                loading="lazy">
            </iframe>
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="py-5">
    <div class="container py-4">
        <h2 class="text-center h3 mb-4">Frequently Asked Questions</h2>
        
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="accordion" id="faqAccordion">
                    <div class="accordion-item">
                        <h3 class="accordion-header">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                How can I get help using the app?
                            </button>
                        </h3>
                        <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                You can contact our support team via email at support@kuvaka.co.zw or call our toll-free number 0800 123 456. We're available Monday to Friday, 8 AM to 4:30 PM.
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item">
                        <h3 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                Is my information private and secure?
                            </button>
                        </h3>
                        <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                Yes, we take privacy and security seriously. All personal information is encrypted, and you can use the app anonymously. We never share your data without your consent.
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item">
                        <h3 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                How can I partner with Kuvaka?
                            </button>
                        </h3>
                        <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                We're always looking for partners! Please email partnerships@kuvaka.co.zw with details about your organization and how you'd like to collaborate.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection