{% extends "base.html" %}

{% block title %}تماس با ما - {{ settings.site_name }}{% endblock %}

{% block content %}

<section style="padding:60px 0;">
    <div class="container">
        <div style="text-align:center;margin-bottom:50px;">
            <h1 style="font-size:34px;color:#0d1b6b;">تماس با ما</h1>
            <p style="color:#666;font-size:18px;">برای دریافت خدمات تعمیرات دوو با ما تماس بگیرید</p>
        </div>
        
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:40px;">
            <!-- اطلاعات تماس -->
            <div style="background:white;padding:40px;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,0.06);">
                <h3 style="color:#0d1b6b;margin-bottom:20px;">اطلاعات تماس</h3>
                
                <div style="display:flex;align-items:center;gap:15px;padding:15px 0;border-bottom:1px solid #eee;">
                    <i class="fas fa-phone" style="font-size:24px;color:#e53935;width:40px;"></i>
                    <div>
                        <div style="font-weight:500;">شماره تماس</div>
                        <a href="tel:{{ settings.phone1 }}" style="color:#0d1b6b;font-size:18px;">{{ settings.phone1 }}</a>
                        {% if settings.phone2 %}
                        <br><a href="tel:{{ settings.phone2 }}" style="color:#0d1b6b;">{{ settings.phone2 }}</a>
                        {% endif %}
                    </div>
                </div>
                
                {% if settings.whatsapp %}
                <div style="display:flex;align-items:center;gap:15px;padding:15px 0;border-bottom:1px solid #eee;">
                    <i class="fab fa-whatsapp" style="font-size:24px;color:#25d366;width:40px;"></i>
                    <div>
                        <div style="font-weight:500;">واتساپ</div>
                        <a href="https://wa.me/{{ settings.whatsapp }}" target="_blank" style="color:#25d366;">{{ settings.whatsapp }}</a>
                    </div>
                </div>
                {% endif %}
                
                <div style="display:flex;align-items:center;gap:15px;padding:15px 0;border-bottom:1px solid #eee;">
                    <i class="fas fa-envelope" style="font-size:24px;color:#0d1b6b;width:40px;"></i>
                    <div>
                        <div style="font-weight:500;">ایمیل</div>
                        <a href="mailto:{{ settings.email }}" style="color:#0d1b6b;">{{ settings.email|default('info@daewoo.com') }}</a>
                    </div>
                </div>
                
                <div style="display:flex;align-items:center;gap:15px;padding:15px 0;">
                    <i class="fas fa-map-marker-alt" style="font-size:24px;color:#e53935;width:40px;"></i>
                    <div>
                        <div style="font-weight:500;">آدرس</div>
                        <div style="color:#555;">{{ settings.address|default('تهران') }}</div>
                    </div>
                </div>
                
                <div style="margin-top:20px;padding:20px;background:#f8f9fa;border-radius:10px;">
                    <div style="font-weight:500;">ساعات کاری</div>
                    <div style="color:#555;">{{ settings.work_hours|default('شنبه تا پنجشنبه ۹ صبح تا ۸ شب') }}</div>
                </div>
            </div>
            
            <!-- فرم تماس -->
            <div style="background:white;padding:40px;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,0.06);">
                <h3 style="color:#0d1b6b;margin-bottom:20px;">ارسال پیام</h3>
                <form method="POST" action="#">
                    <div style="margin-bottom:15px;">
                        <label style="display:block;font-weight:500;margin-bottom:5px;">نام و نام خانوادگی</label>
                        <input type="text" name="name" style="width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:16px;">
                    </div>
                    <div style="margin-bottom:15px;">
                        <label style="display:block;font-weight:500;margin-bottom:5px;">شماره تماس</label>
                        <input type="tel" name="phone" style="width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:16px;">
                    </div>
                    <div style="margin-bottom:15px;">
                        <label style="display:block;font-weight:500;margin-bottom:5px;">موضوع</label>
                        <select name="subject" style="width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:16px;">
                            <option>تعمیر یخچال</option>
                            <option>تعمیر لباسشویی</option>
                            <option>تعمیر ظرفشویی</option>
                            <option>تعمیر پکیج</option>
                            <option>سایر</option>
                        </select>
                    </div>
                    <div style="margin-bottom:20px;">
                        <label style="display:block;font-weight:500;margin-bottom:5px;">پیام شما</label>
                        <textarea name="message" rows="5" style="width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:16px;"></textarea>
                    </div>
                    <button type="submit" style="background:#0d1b6b;color:white;padding:14px 40px;border:none;border-radius:30px;font-size:16px;font-weight:700;cursor:pointer;">
                        ارسال پیام
                    </button>
                </form>
                <p style="font-size:13px;color:#888;margin-top:15px;">پس از ارسال پیام، در سریع‌ترین زمان با شما تماس می‌گیریم.</p>
            </div>
        </div>
    </div>
</section>

{% endblock %}