{% extends "base.html" %}

{% block title %}تماس با ما | بازار آنلاین ۷۲۴ - ارتباط با تیم پشتیبانی{% endblock %}

{% block meta_description %}تماس با بازار آنلاین ۷۲۴ - راه‌های ارتباطی، تلفن، ایمیل، آدرس و فرم تماس با پشتیبانی فروشگاه تجهیزات صنعتی{% endblock %}

{% block meta_keywords %}تماس با ما, پشتیبانی, ارتباط با فروشگاه, تجهیزات صنعتی, بازار آنلاین ۷۲۴{% endblock %}

{% block og_title %}تماس با ما | بازار آنلاین ۷۲۴{% endblock %}

{% block og_description %}ارتباط با تیم پشتیبانی بازار آنلاین ۷۲۴ - پاسخگویی ۲۴ ساعته{% endblock %}

{% block content %}

<!-- ============================================================
     HERO CONTACT
     ============================================================ -->
<section style="
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #2563eb 100%);
    padding: 50px 0 40px;
    color: white;
    border-radius: 0 0 40px 40px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
">
    <div style="position: absolute; top: -50%; right: -20%; width: 500px; height: 500px; background: rgba(37,99,235,0.1); border-radius: 50%;"></div>
    <div style="position: absolute; bottom: -30%; left: -10%; width: 400px; height: 400px; background: rgba(37,99,235,0.08); border-radius: 50%;"></div>
    
    <div class="container position-relative">
        <div class="row align-items-center">
            <div class="col-lg-8 col-md-10 col-12">
                <div style="display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;">
                    <span style="background: rgba(34,197,94,0.2); color: #4ade80; padding: 4px 14px; border-radius: 50px; font-size: 12px; font-weight: 600; border: 1px solid rgba(34,197,94,0.2);">
                        <i class="fas fa-headset me-1"></i> پشتیبانی ۲۴/۷
                    </span>
                    <span style="background: rgba(96,165,250,0.2); color: #60a5fa; padding: 4px 14px; border-radius: 50px; font-size: 12px; font-weight: 600; border: 1px solid rgba(96,165,250,0.2);">
                        <i class="fas fa-clock me-1"></i> پاسخگویی سریع
                    </span>
                </div>
                
                <h1 style="font-size: 42px; font-weight: 900; line-height: 1.2;">
                    ارتباط با 
                    <span style="background: linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
                        ما
                    </span>
                </h1>
                <p style="font-size: 18px; opacity: 0.9; margin: 16px 0 0; max-width: 600px;">
                    ما همواره در کنار شما هستیم. هر سوال یا نظری دارید، خوشحال می‌شویم بشنویم
                </p>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
     CONTENT
     ============================================================ -->
<div class="container">
    <div class="row g-4">
        <!-- ===== فرم تماس ===== -->
        <div class="col-lg-7 col-md-12">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <h2 class="h4 mb-4">
                        <i class="fas fa-paper-plane text-primary me-2"></i>
                        ارسال پیام
                    </h2>
                    <form method="POST" action="{{ url_for('contact') }}">
                        <div class="row g-3">
                            <div class="col-md-6 col-12">
                                <label class="form-label">نام و نام خانوادگی <span class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control" placeholder="نام خود را وارد کنید" required>
                            </div>
                            <div class="col-md-6 col-12">
                                <label class="form-label">ایمیل <span class="text-danger">*</span></label>
                                <input type="email" name="email" class="form-control" placeholder="ایمیل خود را وارد کنید" required>
                            </div>
                            <div class="col-md-6 col-12">
                                <label class="form-label">تلفن</label>
                                <input type="text" name="phone" class="form-control" placeholder="تلفن خود را وارد کنید">
                            </div>
                            <div class="col-md-6 col-12">
                                <label class="form-label">موضوع <span class="text-danger">*</span></label>
                                <select name="subject" class="form-select" required>
                                    <option value="">انتخاب کنید</option>
                                    <option value="پشتیبانی">پشتیبانی و راهنمایی</option>
                                    <option value="سفارش">پیگیری سفارش</option>
                                    <option value="انتقاد">انتقاد و پیشنهاد</option>
                                    <option value="همکاری">همکاری و فروش</option>
                                    <option value="سایر">سایر موارد</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label">پیام شما <span class="text-danger">*</span></label>
                                <textarea name="message" class="form-control" rows="5" placeholder="پیام خود را بنویسید..." required></textarea>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary btn-lg w-100">
                                    <i class="fas fa-paper-plane me-2"></i> ارسال پیام
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- ===== اطلاعات تماس ===== -->
        <div class="col-lg-5 col-md-12">
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-body">
                    <h2 class="h4 mb-4">
                        <i class="fas fa-address-card text-primary me-2"></i>
                        اطلاعات تماس
                    </h2>
                    
                    <div style="display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--gray-200);">
                        <div style="width: 48px; height: 48px; border-radius: 50%; background: var(--primary-light); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--primary); flex-shrink: 0;">
                            <i class="fas fa-phone-alt"></i>
                        </div>
                        <div>
                            <div style="font-size: 13px; color: var(--gray-500);">تلفن</div>
                            <div style="font-weight: 700; font-size: 16px; direction: ltr; text-align: right;">{{ site_phone or '۰۲۱-۱۲۳۴۵۶۷۸' }}</div>
                        </div>
                    </div>
                    
                    <div style="display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--gray-200);">
                        <div style="width: 48px; height: 48px; border-radius: 50%; background: var(--primary-light); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--primary); flex-shrink: 0;">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div>
                            <div style="font-size: 13px; color: var(--gray-500);">ایمیل</div>
                            <div style="font-weight: 700; font-size: 14px; direction: ltr; text-align: right;">{{ site_email or 'info@onlinemarket724.ir' }}</div>
                        </div>
                    </div>
                    
                    <div style="display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--gray-200);">
                        <div style="width: 48px; height: 48px; border-radius: 50%; background: var(--primary-light); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--primary); flex-shrink: 0;">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div>
                            <div style="font-size: 13px; color: var(--gray-500);">آدرس</div>
                            <div style="font-weight: 700; font-size: 14px;">{{ site_address or 'تهران، خیابان صنعت، پلاک ۱۲' }}</div>
                        </div>
                    </div>
                    
                    <div style="display: flex; align-items: center; gap: 16px; padding: 12px 0;">
                        <div style="width: 48px; height: 48px; border-radius: 50%; background: var(--primary-light); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--primary); flex-shrink: 0;">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div>
                            <div style="font-size: 13px; color: var(--gray-500);">ساعات کاری</div>
                            <div style="font-weight: 700; font-size: 14px;">شنبه تا پنجشنبه ۹ الی ۱۸</div>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <div style="text-align: center;">
                        <p style="font-size: 13px; color: var(--gray-500);">ما در شبکه‌های اجتماعی</p>
                        <div style="display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
                            {% set social = social_media or {} %}
                            {% if social.instagram %}
                                <a href="{{ social.instagram }}" target="_blank" style="width: 44px; height: 44px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--gray-600); transition: var(--transition);">
                                    <i class="fab fa-instagram"></i>
                                </a>
                            {% endif %}
                            {% if social.telegram %}
                                <a href="{{ social.telegram }}" target="_blank" style="width: 44px; height: 44px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--gray-600); transition: var(--transition);">
                                    <i class="fab fa-telegram"></i>
                                </a>
                            {% endif %}
                            {% if social.whatsapp %}
                                <a href="{{ social.whatsapp }}" target="_blank" style="width: 44px; height: 44px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--gray-600); transition: var(--transition);">
                                    <i class="fab fa-whatsapp"></i>
                                </a>
                            {% endif %}
                            {% if social.linkedin %}
                                <a href="{{ social.linkedin }}" target="_blank" style="width: 44px; height: 44px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--gray-600); transition: var(--transition);">
                                    <i class="fab fa-linkedin-in"></i>
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ============================================================
     MAP - نقشه با HTML + CSS (هیچوقت بلاک نمیشه)
     ============================================================ -->
<section style="margin: 50px 0;">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm border-0 overflow-hidden">
                    <div style="border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(135deg, #0f172a, #1e293b); min-height: 400px; position: relative;">
                        
                        <!-- ===== پس‌زمینه نقشه ===== -->
                        <div style="
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            background-image: 
                                radial-gradient(circle at 20% 30%, rgba(37,99,235,0.05) 0%, transparent 50%),
                                radial-gradient(circle at 80% 70%, rgba(124,58,237,0.05) 0%, transparent 50%),
                                linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
                        "></div>
                        
                        <!-- ===== خطوط نقشه ===== -->
                        <div style="
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            opacity: 0.1;
                            background-image: 
                                linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
                                linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
                            background-size: 50px 50px;
                        "></div>
                        
                        <!-- ===== محتوای نقشه ===== -->
                        <div style="position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; min-height: 400px; padding: 40px 20px;">
                            <div style="text-align: center; max-width: 600px;">
                                
                                <!-- ===== مارکر ===== -->
                                <div style="
                                    width: 80px;
                                    height: 80px;
                                    border-radius: 50%;
                                    background: linear-gradient(135deg, var(--primary), #7c3aed);
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    margin: 0 auto 24px;
                                    box-shadow: 0 0 60px rgba(37,99,235,0.3);
                                    animation: pulse 2s ease-in-out infinite;
                                ">
                                    <i class="fas fa-map-pin" style="font-size: 36px; color: white;"></i>
                                </div>
                                
                                <!-- ===== اطلاعات ===== -->
                                <h3 style="color: white; font-weight: 700; font-size: 24px; margin-bottom: 8px;">
                                    {{ site_address or 'تهران، خیابان صنعت، پلاک ۱۲' }}
                                </h3>
                                <p style="color: var(--gray-400); margin-bottom: 24px;">
                                    <i class="fas fa-phone me-2"></i> {{ site_phone or '۰۲۱-۱۲۳۴۵۶۷۸' }}
                                    <span style="margin: 0 12px; color: var(--gray-600);">|</span>
                                    <i class="fas fa-envelope me-2"></i> {{ site_email or 'info@onlinemarket724.ir' }}
                                </p>
                                
                                <!-- ===== دکمه ===== -->
                                <a href="https://www.google.com/maps/search/{{ site_address or 'Tehran+Iran' }}" target="_blank" style="
                                    display: inline-flex;
                                    align-items: center;
                                    gap: 10px;
                                    background: linear-gradient(135deg, var(--primary), #7c3aed);
                                    color: white;
                                    padding: 14px 34px;
                                    border-radius: 50px;
                                    font-weight: 700;
                                    font-size: 16px;
                                    transition: var(--transition);
                                    text-decoration: none;
                                ">
                                    <i class="fas fa-external-link-alt"></i>
                                    مشاهده در گوگل مپ
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
     CTA
     ============================================================ -->
<section style="margin: 50px 0;">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div style="background: linear-gradient(135deg, #0f172a, #1e293b); padding: 40px; border-radius: var(--radius-lg); text-align: center; position: relative; overflow: hidden;">
                    <div style="position: absolute; right: -30px; bottom: -30px; font-size: 120px; opacity: 0.03;">
                        <i class="fas fa-headset"></i>
                    </div>
                    <div style="position: relative; z-index: 1;">
                        <h3 style="color: white; font-weight: 700; font-size: 24px; margin-bottom: 8px;">
                            <i class="fas fa-headset text-primary me-2"></i>
                            نیاز به راهنمایی دارید؟
                        </h3>
                        <p style="color: var(--gray-400); max-width: 500px; margin: 0 auto 20px;">
                            تیم پشتیبانی ما آماده پاسخگویی به سوالات شماست
                        </p>
                        <a href="tel:{{ site_phone or '02112345678' }}" style="
                            display: inline-flex;
                            align-items: center;
                            gap: 10px;
                            background: linear-gradient(135deg, var(--primary), #7c3aed);
                            color: white;
                            padding: 12px 30px;
                            border-radius: 50px;
                            font-weight: 700;
                            font-size: 16px;
                            transition: var(--transition);
                            text-decoration: none;
                        ">
                            <i class="fas fa-phone-alt"></i>
                            تماس بگیرید
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 0 60px rgba(37,99,235,0.3);
        }
        50% {
            transform: scale(1.05);
            box-shadow: 0 0 80px rgba(37,99,235,0.5);
        }
    }
</style>

{% endblock %}

{% block extra_css %}
<style>
    @media (max-width: 768px) {
        h1 {
            font-size: 32px !important;
        }
        .btn-lg {
            font-size: 14px !important;
            padding: 10px 16px !important;
        }
        .card-body {
            padding: 16px !important;
        }
        section {
            margin-bottom: 30px !important;
        }
        .map-container {
            min-height: 300px !important;
            padding: 30px 16px !important;
        }
        .map-marker {
            width: 60px !important;
            height: 60px !important;
            font-size: 28px !important;
        }
    }
    
    @media (max-width: 576px) {
        h1 {
            font-size: 24px !important;
        }
        .display-1 {
            font-size: 40px !important;
        }
        .btn {
            font-size: 13px !important;
        }
        .form-control, .form-select {
            font-size: 14px !important;
        }
        .map-marker {
            width: 50px !important;
            height: 50px !important;
            font-size: 22px !important;
        }
    }
</style>
{% endblock %}