{% extends "base.html" %}

{% block title %}Contact Us - Phogo Insurance{% endblock %}

{% block content %}
<!-- Page Header -->
<section class="page-header bg-primary text-white py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center">
                <h1 class="display-5 fw-bold mb-3">Contact Us</h1>
                <p class="lead">Get in touch with our insurance experts today</p>
            </div>
        </div>
    </div>
</section>

<!-- Contact Content -->
<section class="py-5">
    <div class="container">
        <div class="row g-5">
            <!-- Contact Information -->
            <div class="col-lg-6">
                <div class="contact-info">
                    <h3 class="fw-bold mb-4">Get in Touch</h3>
                    <p class="lead text-muted mb-4">Ready to protect what matters most? Contact our experienced team for personalized insurance solutions.</p>
                    
                    <div class="contact-details">
                        <div class="contact-item mb-4">
                            <div class="d-flex align-items-start">
                                <div class="contact-icon me-3">
                                    <i class="fas fa-map-marker-alt fa-2x text-primary"></i>
                                </div>
                                <div class="contact-content">
                                    <h6 class="fw-bold mb-2">Office Address</h6>
                                    <p class="text-muted mb-0">
                                        Kiambu Road, Flame Tree Drive<br>
                                        Runda Estate, Nairobi<br>
                                        P.O. Box 25077-00100
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="contact-item mb-4">
                            <div class="d-flex align-items-start">
                                <div class="contact-icon me-3">
                                    <i class="fas fa-phone fa-2x text-primary"></i>
                                </div>
                                <div class="contact-content">
                                    <h6 class="fw-bold mb-2">Phone Numbers</h6>
                                    <p class="text-muted mb-1">
                                        <a href="tel:+254711879140" class="text-decoration-none text-muted">+254 711 879 140</a>
                                    </p>
                                    <p class="text-muted mb-0">
                                        <a href="tel:+254738125046" class="text-decoration-none text-muted">+254 738 125 046</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="contact-item mb-4">
                            <div class="d-flex align-items-start">
                                <div class="contact-icon me-3">
                                    <i class="fas fa-envelope fa-2x text-primary"></i>
                                </div>
                                <div class="contact-content">
                                    <h6 class="fw-bold mb-2">Email Address</h6>
                                    <p class="text-muted mb-0">
                                        <a href="mailto:info@phogosoftwares.co.ke" class="text-decoration-none text-muted">info@phogosoftwares.co.ke</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="contact-item">
                            <div class="d-flex align-items-start">
                                <div class="contact-icon me-3">
                                    <i class="fas fa-clock fa-2x text-primary"></i>
                                </div>
                                <div class="contact-content">
                                    <h6 class="fw-bold mb-2">Business Hours</h6>
                                    <p class="text-muted mb-1">Monday - Friday: 8:00 AM - 6:00 PM</p>
                                    <p class="text-muted mb-1">Saturday: 9:00 AM - 2:00 PM</p>
                                    <p class="text-muted mb-0">Sunday: Closed</p>
                                    <small class="text-success">24/7 Emergency Claims Support</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Contact Form -->
            <div class="col-lg-6">
                <div class="contact-form">
                    <div class="bg-light p-4 rounded">
                        <h4 class="fw-bold mb-4">Request a Quote</h4>
                        
                        <!-- Flash Messages -->
                        {% with messages = get_flashed_messages(with_categories=true) %}
                            {% if messages %}
                                {% for category, message in messages %}
                                    <div class="alert alert-{% if category == 'error' %}danger{% else %}{{ category }}{% endif %} alert-dismissible fade show" role="alert">
                                        {{ message }}
                                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                    </div>
                                {% endfor %}
                            {% endif %}
                        {% endwith %}
                        
                        <form method="POST" action="{{ url_for('contact') }}">
                            {{ form.hidden_tag() }}
                            
                            <div class="mb-3">
                                {{ form.name.label(class="form-label fw-bold") }}
                                {{ form.name(class="form-control" + (" is-invalid" if form.name.errors else "")) }}
                                {% if form.name.errors %}
                                    <div class="invalid-feedback">
                                        {% for error in form.name.errors %}{{ error }}{% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                            
                            <div class="mb-3">
                                {{ form.email.label(class="form-label fw-bold") }}
                                {{ form.email(class="form-control" + (" is-invalid" if form.email.errors else "")) }}
                                {% if form.email.errors %}
                                    <div class="invalid-feedback">
                                        {% for error in form.email.errors %}{{ error }}{% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                            
                            <div class="mb-3">
                                {{ form.phone.label(class="form-label fw-bold") }}
                                {{ form.phone(class="form-control" + (" is-invalid" if form.phone.errors else "")) }}
                                {% if form.phone.errors %}
                                    <div class="invalid-feedback">
                                        {% for error in form.phone.errors %}{{ error }}{% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                            
                            <div class="mb-3">
                                {{ form.service_interest.label(class="form-label fw-bold") }}
                                {{ form.service_interest(class="form-select" + (" is-invalid" if form.service_interest.errors else "")) }}
                                {% if form.service_interest.errors %}
                                    <div class="invalid-feedback">
                                        {% for error in form.service_interest.errors %}{{ error }}{% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                            
                            <div class="mb-4">
                                {{ form.message.label(class="form-label fw-bold") }}
                                {{ form.message(class="form-control" + (" is-invalid" if form.message.errors else ""), rows="4") }}
                                {% if form.message.errors %}
                                    <div class="invalid-feedback">
                                        {% for error in form.message.errors %}{{ error }}{% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                            
                            <button type="submit" class="btn btn-primary btn-lg w-100">
                                <i class="fas fa-paper-plane me-2"></i>Send Message
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Why Choose Us -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-lg-8 mx-auto">
                <h2 class="fw-bold mb-3">Why Choose Phogo Insurance?</h2>
                <p class="lead text-muted">Experience the difference of working with Kenya's trusted insurance professionals</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-4">
                <div class="feature-card h-100 p-4 bg-white rounded shadow-sm text-center">
                    <i class="fas fa-clock fa-3x text-primary mb-3"></i>
                    <h5 class="fw-bold mb-3">Quick Response</h5>
                    <p class="text-muted">We respond to all inquiries within 24 hours and provide fast claim processing.</p>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="feature-card h-100 p-4 bg-white rounded shadow-sm text-center">
                    <i class="fas fa-user-tie fa-3x text-primary mb-3"></i>
                    <h5 class="fw-bold mb-3">Expert Advice</h5>
                    <p class="text-muted">Our experienced agents provide personalized guidance to help you make informed decisions.</p>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="feature-card h-100 p-4 bg-white rounded shadow-sm text-center">
                    <i class="fas fa-shield-alt fa-3x text-primary mb-3"></i>
                    <h5 class="fw-bold mb-3">Reliable Coverage</h5>
                    <p class="text-muted">Count on us for dependable insurance protection when you need it most.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Emergency Contact -->
<section class="py-5 bg-primary text-white">
    <div class="container">
        <div class="row text-center">
            <div class="col-lg-8 mx-auto">
                <h2 class="fw-bold mb-3">Need Emergency Assistance?</h2>
                <p class="lead mb-4">For urgent claims and emergency support, our team is available 24/7 to assist you.</p>
                <div class="d-flex justify-content-center gap-3 flex-wrap">
                    <a href="tel:+254711879140" class="btn btn-light btn-lg text-primary">
                        <i class="fas fa-phone me-2"></i>+254 711 879 140
                    </a>
                    <a href="tel:+254738125046" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-phone me-2"></i>+254 738 125 046
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}