{% extends 'landing/base_landing.html' %}

{% block title %}Contact Us - Get In Touch | 3ncount2026{% endblock %}

{% block extra_css %}
<style>
    .contact-section {
        padding: 5rem 0;
        background: var(--light-bg);
    }
    
    .contact-card {
        background: white;
        border-radius: 1rem;
        padding: 2.5rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        height: 100%;
    }
    
    .contact-info {
        margin-bottom: 2rem;
    }
    
    .contact-info-item {
        display: flex;
        align-items: start;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .contact-info-item i {
        font-size: 1.5rem;
        color: var(--primary-color);
        margin-top: 0.25rem;
    }
    
    .form-label {
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    .form-control, .form-select {
        padding: 0.75rem 1rem;
        border: 2px solid #e2e8f0;
        border-radius: 0.5rem;
    }
    
    .form-control:focus, .form-select:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.1);
    }
</style>
{% endblock %}

{% block content %}
<section class="contact-section">
    <div class="container">
        <div class="text-center mb-5">
            <h1>Get In Touch</h1>
            <p class="lead">Have questions? We're here to help!</p>
        </div>
        
        <div class="row g-4">
            <div class="col-lg-4">
                <div class="contact-card">
                    <h3 class="mb-4">Contact Information</h3>
                    
                    <div class="contact-info">
                        <div class="contact-info-item">
                            <i class="bi bi-geo-alt-fill"></i>
                            <div>
                                <h5>Office Address</h5>
                                <p class="text-muted mb-0">Kuala Lumpur, Malaysia</p>
                            </div>
                        </div>
                        
                        <div class="contact-info-item">
                            <i class="bi bi-envelope-fill"></i>
                            <div>
                                <h5>Email</h5>
                                <p class="text-muted mb-0">support@3ncount2026.com</p>
                            </div>
                        </div>
                        
                        <div class="contact-info-item">
                            <i class="bi bi-telephone-fill"></i>
                            <div>
                                <h5>Phone</h5>
                                <p class="text-muted mb-0">+60 12-345 6789</p>
                            </div>
                        </div>
                        
                        <div class="contact-info-item">
                            <i class="bi bi-clock-fill"></i>
                            <div>
                                <h5>Business Hours</h5>
                                <p class="text-muted mb-0">Mon - Fri: 9:00 AM - 6:00 PM</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <h5>Follow Us</h5>
                        <div class="d-flex gap-3 mt-3">
                            <a href="#" class="btn btn-outline-primary btn-sm">
                                <i class="bi bi-facebook"></i>
                            </a>
                            <a href="#" class="btn btn-outline-primary btn-sm">
                                <i class="bi bi-twitter"></i>
                            </a>
                            <a href="#" class="btn btn-outline-primary btn-sm">
                                <i class="bi bi-linkedin"></i>
                            </a>
                            <a href="#" class="btn btn-outline-primary btn-sm">
                                <i class="bi bi-instagram"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-8">
                <div class="contact-card">
                    <h3 class="mb-4">Send Us a Message</h3>
                    
                    <form method="post">
                        {% csrf_token %}
                        
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="name" class="form-label">Full Name *</label>
                                <input type="text" class="form-control" id="name" name="name" 
                                       placeholder="John Doe" required>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="email" class="form-label">Email Address *</label>
                                <input type="email" class="form-control" id="email" name="email" 
                                       placeholder="john@company.com" required>
                            </div>
                            
                            <div class="col-12">
                                <label for="subject" class="form-label">Subject *</label>
                                <input type="text" class="form-control" id="subject" name="subject" 
                                       placeholder="How can we help you?" required>
                            </div>
                            
                            <div class="col-12">
                                <label for="message" class="form-label">Message *</label>
                                <textarea class="form-control" id="message" name="message" rows="6" 
                                          placeholder="Tell us more about your inquiry..." required></textarea>
                            </div>
                            
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary-custom btn-lg">
                                    <i class="bi bi-send me-2"></i>Send Message
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}