<%- include('../partials/header') %>

<div class="container py-5">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="text-center mb-5">
                <h1 class="display-4 fw-bold" data-i18n="contact_us_title"></h1>
                <div class="divider-cus mx-auto my-4"></div>
            </div>
            
            <% if (success) { %>
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle me-2"></i>
                    <span data-i18n="contact_form_success"></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            <% } %>
            
            <% if (error) { %>
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    <span data-i18n="contact_form_error"></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            <% } %>
            
            <div class="row g-4">
                <div class="col-md-5">
                    <div class="contact-info text-bg-dark p-4 rounded-3">
                        <h4 class="mb-4"><i class="fas fa-info-circle me-2"></i> <span data-i18n="contact.info.title">اطلاعات تماس</span></h4>
                        
                        <div class="info-item d-flex align-items-start mb-4">
                            <i class="fas fa-map-marker-alt fa-lg mt-1 me-3" style="color: var(--primary-color-cus);"></i>
                            <div>
                                <strong><span data-i18n="contact_info_address"></span>:</strong>
                                <p class="mb-0"><%= contactInfo.address %></p>
                            </div>
                        </div>
                        
                        <div class="info-item d-flex align-items-start mb-4">
                            <i class="fas fa-phone fa-lg mt-1 me-3" style="color: var(--primary-color-cus);"></i>
                            <div>
                                <strong><span data-i18n="contact_info_phone"></span>:</strong>
                                <p class="mb-0"><%= contactInfo.phone %></p>
                            </div>
                        </div>
                        
                        <div class="info-item d-flex align-items-start mb-4">
                            <i class="fas fa-envelope fa-lg mt-1 me-3" style="color: var(--primary-color-cus);"></i>
                            <div>
                                <strong><span data-i18n="contact_info_email"></span>:</strong>
                                <p class="mb-0"><%= contactInfo.email %></p>
                            </div>
                        </div>
                        
                        <div class="social-links mt-4 pt-2">
                            <h5><span data-i18n="contact.social.title">ما را دنبال کنید</span></h5>
                            <a href="#" class="btn btn-outline-light btn-sm me-2"><i class="fab fa-telegram"></i></a>
                            <a href="#" class="btn btn-outline-light btn-sm me-2"><i class="fab fa-whatsapp"></i></a>
                            <a href="#" class="btn btn-outline-light btn-sm me-2"><i class="fab fa-instagram"></i></a>
                            <a href="#" class="btn btn-outline-light btn-sm"><i class="fab fa-linkedin"></i></a>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-7">
                    <div class="contact-form text-bg-dark p-4 rounded-3">
                        <h4 class="mb-4"><i class="fas fa-paper-plane me-2"></i> <span data-i18n="contact.form.title">ارسال پیام</span></h4>
                        
                        <form method="post" action="/contact/submit">
                            <div class="mb-3">
                                <label class="form-label"><span data-i18n="contact_form_name"></span> *</label>
                                <input type="text" name="name" class="form-control bg-dark text-white" required>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label"><span data-i18n="contact_form_email"></span> *</label>
                                <input type="email" name="email" class="form-control bg-dark text-white" required>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label"><span data-i18n="contact_form_phone"></span></label>
                                <input type="tel" name="phone" class="form-control bg-dark text-white">
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label"><span data-i18n="contact_form_subject"></span> *</label>
                                <input type="text" name="subject" class="form-control bg-dark text-white" required>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label"><span data-i18n="contact_form_message"></span> *</label>
                                <textarea name="message" class="form-control bg-dark text-white" rows="5" required></textarea>
                            </div>
                            
                            <button type="submit" class="btn btn-primary w-100 py-2">
                                <i class="fas fa-send me-2"></i> <span data-i18n="contact_form_send"></span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.divider-cus {
    width: 60px;
    height: 3px;
    background: var(--primary-color-cus, #0d6efd);
}
.contact-info, .contact-form {
    border: 1px solid rgba(255,255,255,0.1);
    height: 100%;
}
.info-item p {
    word-break: break-word;
}
.form-control:focus {
    border-color: var(--primary-color-cus, #0d6efd);
    box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.25);
}
</style>

<%- include('../partials/footer') %>