{% extends "base.html" %}
{% block title %}Contact Workforce – We're Here to Help{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row g-5">
        <!-- Left Column: Contact Info -->
        <div class="col-lg-5">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-4">
                    <h2 class="h3 mb-4">Let's Talk</h2>
                    <p class="text-muted">Have questions, feedback, or need support? Fill out the form and we'll get back to you within 24 hours.</p>
                    
                    <div class="mt-4">
                        <div class="d-flex mb-3">
                            <i class="fas fa-map-marker-alt fa-2x text-primary me-3"></i>
                            <div>
                                <h6 class="mb-0">Visit Us</h6>
                                <small class="text-muted">123 Work Street, Tech City, 90210</small>
                            </div>
                        </div>
                        <div class="d-flex mb-3">
                            <i class="fas fa-envelope fa-2x text-primary me-3"></i>
                            <div>
                                <h6 class="mb-0">Email Us</h6>
                                <small class="text-muted">support@workforce.com</small>
                            </div>
                        </div>
                        <div class="d-flex mb-3">
                            <i class="fas fa-phone-alt fa-2x text-primary me-3"></i>
                            <div>
                                <h6 class="mb-0">Call Us</h6>
                                <small class="text-muted">+1 (555) 123-4567</small>
                            </div>
                        </div>
                        <div class="d-flex">
                            <i class="fas fa-clock fa-2x text-primary me-3"></i>
                            <div>
                                <h6 class="mb-0">Support Hours</h6>
                                <small class="text-muted">Mon–Fri, 9am – 6pm (EST)</small>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">
                    <h6>Follow Us</h6>
                    <div class="d-flex gap-3 mt-2">
                        <a href="#" class="text-primary"><i class="fab fa-facebook fa-lg"></i></a>
                        <a href="#" class="text-primary"><i class="fab fa-twitter fa-lg"></i></a>
                        <a href="#" class="text-primary"><i class="fab fa-linkedin fa-lg"></i></a>
                        <a href="#" class="text-primary"><i class="fab fa-instagram fa-lg"></i></a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column: Contact Form -->
        <div class="col-lg-7">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <h2 class="h3 mb-4">Send a Message</h2>
                    <form method="POST" action="{{ url_for('contact_submit') }}" id="contactForm">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Full Name *</label>
                                <input type="text" name="name" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Email Address *</label>
                                <input type="email" name="email" class="form-control" required>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Subject</label>
                                <input type="text" name="subject" class="form-control" placeholder="e.g., Pricing question, Support request">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Message *</label>
                                <textarea name="message" rows="5" class="form-control" required></textarea>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary btn-lg w-100" id="submitBtn">
                                    Send Message <i class="fas fa-paper-plane ms-2"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Optional Map Section (Google Maps embed) -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card border-0 shadow-sm overflow-hidden">
                <iframe 
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.2219901290355!2d-74.00369368400567!3d40.71312937933085!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a316bb7c8cd%3A0xb89d1fe6bc499443!2sDowntown%20Conference%20Center!5e0!3m2!1sen!2sus!4v1616161616161!5m2!1sen!2sus" 
                    width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
            </div>
        </div>
    </div>
</div>

<!-- Loading Spinner (same as used elsewhere) -->
<div id="loadingOverlay" class="loading-overlay">
    <div class="spinner"></div>
    <p>Sending message, please wait...</p>
</div>

<style>
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        display: none;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: white;
        z-index: 9999;
    }
    .loading-overlay .spinner {
        width: 50px;
        height: 50px;
        border: 5px solid rgba(255,255,255,0.3);
        border-radius: 50%;
        border-top-color: #fff;
        animation: spin 1s ease-in-out infinite;
        margin-bottom: 15px;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
</style>

<script>
    document.getElementById('contactForm').addEventListener('submit', function() {
        document.getElementById('loadingOverlay').style.display = 'flex';
        document.getElementById('submitBtn').disabled = true;
    });
</script>
{% endblock %}