{% 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 ABOUT
     ============================================================ -->
<section style="
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #2563eb 100%);
    padding: 60px 0 50px;
    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">
                <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-shield-alt 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>
                    <span style="background: rgba(245,158,11,0.2); color: #fbbf24; padding: 4px 14px; border-radius: 50px; font-size: 12px; font-weight: 600; border: 1px solid rgba(245,158,11,0.2);">
                        <i class="fas fa-star me-1"></i> {{ total_reviews|persian_number or '۰' }} نظر مثبت
                    </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>

<!-- ============================================================
     ABOUT CONTENT
     ============================================================ -->
<div class="container">
    <div class="row g-5">
        <div class="col-lg-8">
            <!-- ===== داستان ما ===== -->
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-body">
                    <h2 class="h3 mb-3">
                        <i class="fas fa-history text-primary me-2"></i>
                        داستان ما
                    </h2>
                    <p class="lead" style="font-size: 17px; color: var(--gray-700);">
                        بازار آنلاین ۷۲۴ با هدف ارائه بهترین تجهیزات صنعتی و ابزارآلات به صنعتگران و تولیدکنندگان عزیز تأسیس شد.
                    </p>
                    <p style="font-size: 15px; color: var(--gray-600); line-height: 2;">
                        ما با بیش از <strong>۱۰ سال تجربه</strong> در زمینه عرضه تجهیزات صنعتی، همواره تلاش کرده‌ایم 
                        بهترین محصولات را با مناسب‌ترین قیمت و بالاترین کیفیت به مشتریان عزیز ارائه دهیم. 
                        تیم ما متشکل از کارشناسان مجرب در حوزه صنعت است که با دانش فنی خود، 
                        بهترین راهکارها را برای تأمین نیازهای صنعتی شما ارائه می‌دهند.
                    </p>
                </div>
            </div>

            <!-- ===== آمار و ارقام ===== -->
            <div class="row g-3 mb-4">
                <div class="col-md-3 col-6">
                    <div class="card shadow-sm border-0 text-center p-3">
                        <div style="font-size: 32px; font-weight: 900; color: var(--primary);">{{ total_products|persian_number }}</div>
                        <div style="font-size: 13px; color: var(--gray-500);">محصولات</div>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="card shadow-sm border-0 text-center p-3">
                        <div style="font-size: 32px; font-weight: 900; color: var(--primary);">{{ total_users|persian_number }}</div>
                        <div style="font-size: 13px; color: var(--gray-500);">کاربران</div>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="card shadow-sm border-0 text-center p-3">
                        <div style="font-size: 32px; font-weight: 900; color: var(--primary);">{{ total_orders|persian_number }}</div>
                        <div style="font-size: 13px; color: var(--gray-500);">سفارشات</div>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="card shadow-sm border-0 text-center p-3">
                        <div style="font-size: 32px; font-weight: 900; color: var(--primary);">۱۰+</div>
                        <div style="font-size: 13px; color: var(--gray-500);">سال سابقه</div>
                    </div>
                </div>
            </div>

            <!-- ===== چرا ما؟ ===== -->
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-body">
                    <h2 class="h3 mb-4">
                        <i class="fas fa-question-circle text-primary me-2"></i>
                        چرا بازار آنلاین ۷۲۴؟
                    </h2>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div style="background: var(--gray-50); padding: 16px; border-radius: var(--radius-md);">
                                <div style="font-size: 28px; color: var(--primary);"><i class="fas fa-shield-alt"></i></div>
                                <h6 style="font-weight: 700; margin: 8px 0 4px;">ضمانت اصالت کالا</h6>
                                <p style="font-size: 13px; color: var(--gray-500); margin: 0;">همه محصولات با ضمانت اصالت و کیفیت عرضه می‌شوند</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div style="background: var(--gray-50); padding: 16px; border-radius: var(--radius-md);">
                                <div style="font-size: 28px; color: var(--primary);"><i class="fas fa-truck"></i></div>
                                <h6 style="font-weight: 700; margin: 8px 0 4px;">ارسال سریع</h6>
                                <p style="font-size: 13px; color: var(--gray-500); margin: 0;">ارسال به سراسر کشور در سریع‌ترین زمان ممکن</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div style="background: var(--gray-50); padding: 16px; border-radius: var(--radius-md);">
                                <div style="font-size: 28px; color: var(--primary);"><i class="fas fa-headset"></i></div>
                                <h6 style="font-weight: 700; margin: 8px 0 4px;">پشتیبانی ۲۴/۷</h6>
                                <p style="font-size: 13px; color: var(--gray-500); margin: 0;">تیم پشتیبانی ما همواره در کنار شماست</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div style="background: var(--gray-50); padding: 16px; border-radius: var(--radius-md);">
                                <div style="font-size: 28px; color: var(--primary);"><i class="fas fa-dollar-sign"></i></div>
                                <h6 style="font-weight: 700; margin: 8px 0 4px;">قیمت‌های رقابتی</h6>
                                <p style="font-size: 13px; color: var(--gray-500); margin: 0;">بهترین قیمت‌ها با بالاترین کیفیت</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ===== تیم ما ===== -->
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <h2 class="h3 mb-4">
                        <i class="fas fa-users text-primary me-2"></i>
                        تیم ما
                    </h2>
                    <p style="font-size: 15px; color: var(--gray-600); line-height: 2;">
                        تیم بازار آنلاین ۷۲۴ متشکل از متخصصان با تجربه در حوزه صنعت، 
                        بازرگانی و فناوری اطلاعات است. ما با همکاری و تعهد به کیفیت، 
                        همواره در تلاش برای ارائه بهترین خدمات به شما عزیزان هستیم.
                    </p>
                    <div class="row g-3 mt-2">
                        <div class="col-4 text-center">
                            <div style="width: 80px; height: 80px; border-radius: 50%; background: var(--primary-light); display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 32px; color: var(--primary);">
                                <i class="fas fa-user-tie"></i>
                            </div>
                            <div style="font-weight: 600; font-size: 14px; margin-top: 8px;">مدیریت</div>
                        </div>
                        <div class="col-4 text-center">
                            <div style="width: 80px; height: 80px; border-radius: 50%; background: var(--primary-light); display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 32px; color: var(--primary);">
                                <i class="fas fa-user-cog"></i>
                            </div>
                            <div style="font-weight: 600; font-size: 14px; margin-top: 8px;">کارشناسان فنی</div>
                        </div>
                        <div class="col-4 text-center">
                            <div style="width: 80px; height: 80px; border-radius: 50%; background: var(--primary-light); display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 32px; color: var(--primary);">
                                <i class="fas fa-headset"></i>
                            </div>
                            <div style="font-weight: 600; font-size: 14px; margin-top: 8px;">پشتیبانی</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ===== سایدبار ===== -->
        <div class="col-lg-4">
            <!-- اطلاعات تماس -->
            <div class="card shadow-sm border-0 mb-4 sticky-top" style="top: 100px;">
                <div class="card-body">
                    <h5 class="card-title">
                        <i class="fas fa-address-card text-primary me-2"></i>
                        اطلاعات تماس
                    </h5>
                    <hr>
                    <div style="margin-bottom: 12px;">
                        <i class="fas fa-phone text-primary" style="width: 24px;"></i>
                        <span style="font-size: 14px;">{{ site_phone or '۰۲۱-۱۲۳۴۵۶۷۸' }}</span>
                    </div>
                    <div style="margin-bottom: 12px;">
                        <i class="fas fa-envelope text-primary" style="width: 24px;"></i>
                        <span style="font-size: 14px;">{{ site_email or 'info@onlinemarket724.ir' }}</span>
                    </div>
                    <div style="margin-bottom: 12px;">
                        <i class="fas fa-map-marker-alt text-primary" style="width: 24px;"></i>
                        <span style="font-size: 14px;">{{ site_address or 'تهران، خیابان صنعت' }}</span>
                    </div>
                    <hr>
                    <a href="{{ url_for('contact') }}" class="btn btn-primary w-100">
                        <i class="fas fa-paper-plane me-2"></i> ارتباط با ما
                    </a>
                </div>
            </div>

            <!-- لینک‌های سریع -->
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <h5 class="card-title">
                        <i class="fas fa-link text-primary me-2"></i>
                        دسترسی سریع
                    </h5>
                    <hr>
                    <a href="{{ url_for('products') }}" class="d-block py-2" style="color: var(--gray-600); font-size: 14px;">
                        <i class="fas fa-box me-2"></i> محصولات
                    </a>
                    <a href="{{ url_for('coupons') }}" class="d-block py-2" style="color: var(--gray-600); font-size: 14px;">
                        <i class="fas fa-ticket-alt me-2"></i> کوپن‌های تخفیف
                    </a>
                    <a href="{{ url_for('contact') }}" class="d-block py-2" style="color: var(--gray-600); font-size: 14px;">
                        <i class="fas fa-phone me-2"></i> تماس با ما
                    </a>
                    <a href="{{ url_for('rules') }}" class="d-block py-2" style="color: var(--gray-600); font-size: 14px;">
                        <i class="fas fa-gavel me-2"></i> قوانین
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ============================================================
     CTA
     ============================================================ -->
<section style="margin: 50px 0; background: linear-gradient(135deg, #0f172a, #1e293b); padding: 50px 0; border-radius: 30px;">
    <div class="container text-center">
        <h2 style="color: white; font-weight: 800; font-size: 28px;">
            آماده‌اید خرید کنید؟
        </h2>
        <p style="color: var(--gray-400); max-width: 500px; margin: 12px auto 24px;">
            با بهترین قیمت‌ها و کیفیت بالا، همین حالا خرید خود را شروع کنید
        </p>
        <a href="{{ url_for('products') }}" class="btn" style="
            background: linear-gradient(135deg, var(--primary), #7c3aed);
            color: white;
            padding: 14px 40px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 16px;
            transition: var(--transition);
        ">
            <i class="fas fa-shopping-bag me-2"></i> شروع خرید
        </a>
    </div>
</section>

{% endblock %}