api/templates/main/index.html.twig

{% extends 'base.html.twig' %}

{% block title %}می‌مپس - سرویس نقشه رستری ایرانی با کیفیت بالا | نقشه آنلاین ایران{% endblock %}

{% block description %}سرویس نقشه می‌مپس - ارائه نقشه‌های رستری با کیفیت بالا، سرورهای ایرانی، بدون نیاز به API، به‌روزرسانی روزانه از OpenStreetMap. نقشه آنلاین ایران با سرعت بالا و دسترسی پایدار.{% endblock %}

{% block keywords %}نقشه ایران, نقشه آنلاین, سرویس نقشه ایرانی, نقشه رستری, تایل سرور, می‌مپس, OpenStreetMap, Leaflet, OpenLayers, نقشه تعاملی, نقشه وب, GIS ایران{% endblock %}

{% block og_title %}می‌مپس - سرویس نقشه رستری ایرانی با کیفیت بالا{% endblock %}

{% block og_description %}سرویس نقشه می‌مپس - ارائه نقشه‌های رستری با کیفیت بالا، سرورهای ایرانی، بدون نیاز به API، نقشه آنلاین ایران{% endblock %}

{% block body %}
    <!-- Hero Section -->
    <section class="hero-section text-white">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <h1 class="display-4 fw-bold mb-4">
                        سرویس نقشه ایرانی
                        <span class="d-block">با کیفیت بالا و سرعت فوق‌العاده</span>
                    </h1>
                    <p class="lead mb-4 opacity-90">
                        سرویس نقشه می‌مپس ارائه‌دهنده نقشه‌های رستری با کیفیت بالا برای استفاده در پروژه‌های مختلف. سرورهای ایرانی، بدون محدودیت تحریم، به‌روزرسانی روزانه از OpenStreetMap جهانی.
                    </p>
                    <div class="d-flex flex-column flex-sm-row gap-3">
                        <a href="#map-demo" class="btn btn-light btn-lg px-4 py-3 fw-bold shadow-lg">
                            مشاهده نقشه آنلاین
                        </a>
                        <div class="dropdown">
                            <button class="btn btn-outline-light btn-lg px-4 py-3 fw-bold dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                راهنمای استفاده
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="{{ path('app_main_usage') }}">استفاده از کاشی‌های نقشه</a></li>
                                <li><a class="dropdown-item" href="{{ path('app_main_search_api_guide') }}">API جستجوی مکان</a></li>
                                <li><a class="dropdown-item" href="{{ path('app_main_google_earth_api_guide') }}">API تایل‌های Google Earth</a></li>
                                <li><a class="dropdown-item" href="{{ path('app_main_bing_api_guide') }}">API تایل‌های Bing</a></li>
                                <li><a class="dropdown-item" href="{{ path('app_main_matrix_api_guide') }}">API مسیریابی ماتریسی</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 text-center">
                    <div class="mt-5 mt-lg-0">
                        <img src="{{asset('assets/images/splash.png')}}" alt="نقشه آنلاین ایران - سرویس می‌مپس" class="img-fluid" style="max-width: 300px;">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">مزایای سرویس نقشه می‌مپس</h2>
                <p class="lead text-muted">
                    سرویس نقشه می‌مپس با مزایای منحصر به فرد خود، تجربه‌ای متفاوت برای کاربران ایرانی ارائه می‌دهد
                </p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-4 col-md-6">
                    <div class="card feature-card h-100 p-4">
                        <div class="feature-icon">
                            🇮🇷
                        </div>
                        <div class="card-body text-center">
                            <h5 class="card-title fw-bold mb-3">سرورهای ایرانی</h5>
                            <p class="card-text text-muted">
                                سرورها در ایران قرار دارند، بدون مشکلات تحریم و کندی، دسترسی پایدار در تمام شرایط. نقشه آنلاین ایران با سرعت بالا.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-6">
                    <div class="card feature-card h-100 p-4">
                        <div class="feature-icon">
                            ⚡
                        </div>
                        <div class="card-body text-center">
                            <h5 class="card-title fw-bold mb-3">سرعت فوق‌العاده</h5>
                            <p class="card-text text-muted">
                                بارگذاری سریع‌تر از سرویس‌های خارجی، بهینه‌سازی شده برای کاربران ایرانی. نقشه رستری با کیفیت بالا.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-6">
                    <div class="card feature-card h-100 p-4">
                        <div class="feature-icon">
                            🔄
                        </div>
                        <div class="card-body text-center">
                            <h5 class="card-title fw-bold mb-3">به‌روزرسانی روزانه</h5>
                            <p class="card-text text-muted">
                                نقشه‌ها به صورت روزانه از OpenStreetMap جهانی دریافت و به‌روزرسانی می‌شوند. داده‌های نقشه همیشه به‌روز.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-6">
                    <div class="card feature-card h-100 p-4">
                        <div class="feature-icon">
                            🔓
                        </div>
                        <div class="card-body text-center">
                            <h5 class="card-title fw-bold mb-3">بدون نیاز به API</h5>
                            <p class="card-text text-muted">
                                استفاده کاملاً رایگان بدون نیاز به کلید API یا ثبت‌نام. تایل سرور آزاد برای همه.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-6">
                    <div class="card feature-card h-100 p-4">
                        <div class="feature-icon">
                            🛡️
                        </div>
                        <div class="card-body text-center">
                            <h5 class="card-title fw-bold mb-3">دسترسی پایدار</h5>
                            <p class="card-text text-muted">
                                در مواقع حساس دسترسی کاربران قطع نمی‌شود، پشتیبانی 24/7. سرویس نقشه ایرانی قابل اعتماد.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-6">
                    <div class="card feature-card h-100 p-4">
                        <div class="feature-icon">
                            🤝
                        </div>
                        <div class="card-body text-center">
                            <h5 class="card-title fw-bold mb-3">پشتیبانی کامل</h5>
                            <p class="card-text text-muted">
                                با کمک‌های مالی کاربران و پشتیبانی شرکت پارس‌پک خدمات ارائه می‌شود. جامعه کاربری فعال.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Map Demo Section -->
    <section id="map-demo" class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">نمایش نقشه آنلاین ایران</h2>
                <p class="lead text-muted">
                    نقشه تعاملی با استفاده از سرویس می‌مپس - نقشه رستری با کیفیت بالا
                </p>
            </div>
            
            <div class="card">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="mb-1 fw-bold">نقشه آنلاین ایران - سرویس می‌مپس</h5>
                    <p class="text-muted mb-0">نمایش نقشه با قابلیت زوم و حرکت - نقشه رستری تعاملی</p>
                </div>
                <div class="card-body p-0">
                    <div id="map" style="height: 400px;"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- Why Choose Us Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">چرا سرویس نقشه می‌مپس؟</h2>
                <p class="lead text-muted">
                    مزایای منحصر به فرد سرویس می‌مپس نسبت به سرویس‌های خارجی - نقشه آنلاین ایرانی
                </p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body p-4">
                            <h4 class="fw-bold mb-4 text-gradient">✅ مزایای سرورهای ایرانی</h4>
                            <ul class="list-unstyled">
                                <li class="mb-3 d-flex align-items-start">
                                    <span class="text-success me-2">✓</span>
                                    <span>بدون محدودیت تحریم و دسترسی - نقشه آنلاین آزاد</span>
                                </li>
                                <li class="mb-3 d-flex align-items-start">
                                    <span class="text-success me-2">✓</span>
                                    <span>سرعت بارگذاری بالا برای کاربران ایرانی - نقشه رستری سریع</span>
                                </li>
                                <li class="mb-3 d-flex align-items-start">
                                    <span class="text-success me-2">✓</span>
                                    <span>دسترسی پایدار در تمام شرایط - سرویس نقشه قابل اعتماد</span>
                                </li>
                                <li class="mb-3 d-flex align-items-start">
                                    <span class="text-success me-2">✓</span>
                                    <span>پشتیبانی فنی 24/7 - تیم پشتیبانی ایرانی</span>
                                </li>
                                <li class="mb-3 d-flex align-items-start">
                                    <span class="text-success me-2">✓</span>
                                    <span>به‌روزرسانی روزانه از OpenStreetMap - داده‌های به‌روز</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body p-4">
                            <h4 class="fw-bold mb-4 text-gradient-accent">❌ مشکلات سرویس‌های خارجی</h4>
                            <ul class="list-unstyled">
                                <li class="mb-3 d-flex align-items-start">
                                    <span class="text-danger me-2">✗</span>
                                    <span>محدودیت دسترسی به دلیل تحریم - نقشه آنلاین محدود</span>
                                </li>
                                <li class="mb-3 d-flex align-items-start">
                                    <span class="text-danger me-2">✗</span>
                                    <span>سرعت کند به دلیل فاصله جغرافیایی - نقشه رستری کند</span>
                                </li>
                                <li class="mb-3 d-flex align-items-start">
                                    <span class="text-danger me-2">✗</span>
                                    <span>قطع دسترسی در مواقع حساس - سرویس نقشه ناپایدار</span>
                                </li>
                                <li class="mb-3 d-flex align-items-start">
                                    <span class="text-danger me-2">✗</span>
                                    <span>نیاز به کلید API و محدودیت استفاده - تایل سرور محدود</span>
                                </li>
                                <li class="mb-3 d-flex align-items-start">
                                    <span class="text-danger me-2">✗</span>
                                    <span>هزینه بالا برای استفاده تجاری - نقشه آنلاین گران</span>
                                </li>
                </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Google Earth API Section -->
    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">🛰️ API تایل‌های Google Earth</h2>
                <p class="lead text-muted">
                    راه‌حل مشکلات توسعه‌دهندگان ایرانی: دسترسی سریع و پایدار به تصاویر ماهواره‌ای Google Earth
                </p>
            </div>
            
            <div class="row g-4 mb-5">
                <div class="col-lg-12">
                    <div class="card border-0 shadow-lg">
                        <div class="card-body p-4">
                            <div class="row align-items-center">
                                <div class="col-lg-8">
                                    <h3 class="fw-bold mb-3">مشکلات موجود و راه‌حل می‌مپس</h3>
                                    <p class="text-muted mb-3">
                                        با توجه به شرایط خاص ایران و محدودیت‌های اینترنتی، توسعه‌دهندگان ایرانی با چالش‌های متعددی در استفاده از سرویس‌های Google Earth مواجه هستند:
                                    </p>
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-6">
                                            <div class="d-flex align-items-start">
                                                <span class="text-danger me-2">❌</span>
                                                <div>
                                                    <strong>تحریم‌های گوگل:</strong> دسترسی مستقیم به سرویس‌های Google Earth با محدودیت مواجه است
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="d-flex align-items-start">
                                                <span class="text-danger me-2">❌</span>
                                                <div>
                                                    <strong>سرعت پایین اینترنت:</strong> اتصال به سرورهای خارجی با سرعت پایین و تاخیر بالا
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="d-flex align-items-start">
                                                <span class="text-danger me-2">❌</span>
                                                <div>
                                                    <strong>قطع‌ی‌های مکرر:</strong> ناپایداری در اتصال به سرورهای خارجی
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="d-flex align-items-start">
                                                <span class="text-danger me-2">❌</span>
                                                <div>
                                                    <strong>مصرف بالای پهنای باند:</strong> هر بار دانلود تایل‌ها از سرورهای خارجی
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="alert alert-success mb-0">
                                        <h5 class="alert-heading">✅ راه‌حل می‌مپس:</h5>
                                        <ul class="mb-0">
                                            <li><strong>سرور داخل کشور:</strong> استفاده از اینترنت داخلی برای سرعت بالاتر</li>
                                            <li><strong>آرشیو کامل:</strong> جمع‌آوری تدریجی تایل‌ها و ایجاد آرشیو کامل</li>
                                            <li><strong>سیستم کش هوشمند:</strong> کاهش مصرف پهنای باند با استفاده از کش</li>
                                            <li><strong>رفع مشکلات توسعه‌دهندگان:</strong> بدون نگرانی از محدودیت‌ها</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-lg-4 text-center">
                                    <div class="bg-primary text-white rounded p-4 mb-3">
                                        <h4 class="mb-3">مثال استفاده</h4>
                                        <pre class="bg-dark text-light p-3 rounded text-end mb-0" dir="ltr" style="font-size: 0.85rem;"><code>L.tileLayer(
  'https://memaps.ir/api/google-earth/satellite/{z}/{x}/{y}.png',
  { maxZoom: 20 }
).addTo(map);</code></pre>
                                    </div>
                                    <a href="{{ path('app_main_google_earth_api_guide') }}" class="btn btn-primary btn-lg w-100">
                                        📖 راهنمای کامل API
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Bing API Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">🗺️ API تایل‌های Bing</h2>
                <p class="lead text-muted">
                    تایل‌های Bing Maps با کش خودکار و محدودیت جغرافیایی به ایران
                </p>
            </div>

            <div class="row g-4 mb-5">
                <div class="col-lg-12">
                    <div class="card border-0 shadow-lg">
                        <div class="card-body p-4">
                            <div class="row align-items-center">
                                <div class="col-lg-8">
                                    <h3 class="fw-bold mb-3">سرویس Bing در می‌مپس</h3>
                                    <p class="text-muted mb-3">
                                        تایل‌های Bing (جاده، ماهواره، ترکیبی) از طریق API می‌مپس با کش سمت سرور و محدودیت به مرزهای ایران ارائه می‌شوند:
                                    </p>
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-6">
                                            <div class="d-flex align-items-start">
                                                <span class="text-success me-2">✅</span>
                                                <div>
                                                    <strong>محدود به ایران:</strong> فقط برای نواحی ایران از Bing درخواست زده می‌شود؛ خارج از ایران تایل سفید بدون تماس با سرور
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="d-flex align-items-start">
                                                <span class="text-success me-2">✅</span>
                                                <div>
                                                    <strong>کش خودکار:</strong> تایل‌های یک‌بار دریافت‌شده ذخیره و در درخواست‌های بعدی از سرور داخلی سرو می‌شوند
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="d-flex align-items-start">
                                                <span class="text-success me-2">✅</span>
                                                <div>
                                                    <strong>لایه‌های جاده، ماهواره و ترکیبی:</strong> سازگار با Leaflet و OpenLayers
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="d-flex align-items-start">
                                                <span class="text-success me-2">✅</span>
                                                <div>
                                                    <strong>زوم ۱ تا ۲۳:</strong> همان استاندارد XYZ برای نقشه‌های وب
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 text-center">
                                    <div class="bg-secondary text-white rounded p-4 mb-3">
                                        <h4 class="mb-3">مثال استفاده</h4>
                                        <pre class="bg-dark text-light p-3 rounded text-end mb-0" dir="ltr" style="font-size: 0.85rem;"><code>L.tileLayer(
  'https://memaps.ir/api/bing/road/{z}/{x}/{y}.png',
  { maxZoom: 23 }
).addTo(map);</code></pre>
                                    </div>
                                    <a href="{{ path('app_main_bing_api_guide') }}" class="btn btn-secondary btn-lg w-100">
                                        📖 راهنمای کامل API Bing
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Matrix API Section -->
            <div class="row g-4 mb-5">
                <div class="col-lg-12">
                    <div class="card border-0 shadow-lg">
                        <div class="card-body p-4">
                            <div class="row align-items-center">
                                <div class="col-lg-8">
                                    <h3 class="fw-bold mb-3">API مسیریابی ماتریسی</h3>
                                    <p class="text-muted mb-3">
                                        محاسبه ماتریس فاصله و زمان سفر بین چند مبدأ و مقصد روی شبکه جاده‌های ایران (داده OpenStreetMap و pgRouting). مناسب لجستیک، توزیع و بهینه‌سازی مسیر.
                                    </p>
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-6">
                                            <div class="d-flex align-items-start">
                                                <span class="text-success me-2">✅</span>
                                                <div><strong>فقط محدوده ایران:</strong> تمام نقاط باید داخل مرز ایران باشند</div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="d-flex align-items-start">
                                                <span class="text-success me-2">✅</span>
                                                <div><strong>فاصله و زمان:</strong> ماتریس N×M به متر و ثانیه</div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="d-flex align-items-start">
                                                <span class="text-success me-2">✅</span>
                                                <div><strong>Snap به شبکه جاده:</strong> نقاط به نزدیک‌ترین جاده نگاشت می‌شوند</div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="d-flex align-items-start">
                                                <span class="text-success me-2">✅</span>
                                                <div><strong>درخواست POST با JSON:</strong> حداکثر ۲۵ مبدأ و ۲۵ مقصد</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 text-center">
                                    <div class="bg-dark text-white rounded p-4 mb-3">
                                        <h4 class="mb-3">مثال</h4>
                                        <pre class="bg-secondary text-light p-2 rounded text-end mb-0" dir="ltr" style="font-size: 0.75rem;"><code>POST /api/matrix
{"origins":[[51.42,35.69]],
 "destinations":[[51.43,35.70]]}</code></pre>
                                    </div>
                                    <a href="{{ path('app_main_matrix_api_guide') }}" class="btn btn-dark btn-lg w-100">
                                        📖 راهنمای کامل API مسیریابی ماتریسی
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- API Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">API ساده و قدرتمند - تایل سرور</h2>
                <p class="lead text-muted">
                    با استفاده از API می‌مپس، به راحتی نقشه‌های رستری را در پروژه خود ادغام کنید
                </p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title fw-bold mb-3">
                                <span class="badge bg-primary me-2">Leaflet</span>
                                استفاده با Leaflet - نقشه تعاملی
                            </h5>
                            <p class="card-text text-muted mb-3">
                                کد ساده برای استفاده با کتابخانه Leaflet - نقشه آنلاین تعاملی
                            </p>
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>var map = L.map('map').setView([32.4279, 53.6880], 6);
L.tileLayer('https://memaps.ir/hot/{z}/{x}/{y}.png', {
    attribution: '© می‌مپس - نقشه رستری ایرانی'
}).addTo(map);</code></pre>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title fw-bold mb-3">
                                <span class="badge bg-success me-2">OpenLayers</span>
                                استفاده با OpenLayers - نقشه پیشرفته
                            </h5>
                            <p class="card-text text-muted mb-3">
                                کد ساده برای استفاده با کتابخانه OpenLayers - نقشه رستری پیشرفته
                            </p>
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>var layer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'https://memaps.ir/hot/{z}/{x}/{y}.png'
    })
});</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Technical Features Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">ویژگی‌های فنی سرویس نقشه</h2>
                <p class="lead text-muted">
                    مشخصات فنی و قابلیت‌های سرویس نقشه می‌مپس - تایل سرور پیشرفته
                </p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-3 col-md-6">
                    <div class="text-center">
                        <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <h3 class="mb-0">18</h3>
                        </div>
                        <h5 class="fw-bold">حداکثر زوم</h5>
                        <p class="text-muted">سطح زوم تا 18 برای جزئیات بالا</p>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-6">
                    <div class="text-center">
                        <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <h3 class="mb-0">256</h3>
                        </div>
                        <h5 class="fw-bold">اندازه تایل</h5>
                        <p class="text-muted">تایل‌های 256x256 پیکسل استاندارد</p>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-6">
                    <div class="text-center">
                        <div class="bg-warning text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <h3 class="mb-0">24/7</h3>
                        </div>
                        <h5 class="fw-bold">دسترسی</h5>
                        <p class="text-muted">دسترسی 24 ساعته و 7 روز هفته</p>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-6">
                    <div class="text-center">
                        <div class="bg-info text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <h3 class="mb-0">99%</h3>
                        </div>
                        <h5 class="fw-bold">آپتایم</h5>
                        <p class="text-muted">آپتایم 99% با پشتیبانی پارس‌پک</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">سوالات متداول</h2>
                <p class="lead text-muted">
                    پاسخ سوالات رایج درباره سرویس نقشه می‌مپس
                </p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body p-4">
                            <h5 class="fw-bold mb-3">آیا استفاده از سرویس نقشه می‌مپس رایگان است؟</h5>
                            <p class="text-muted mb-0">
                                بله، استفاده از سرویس نقشه می‌مپس کاملاً رایگان است و نیازی به ثبت‌نام یا کلید API ندارد.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body p-4">
                            <h5 class="fw-bold mb-3">آیا سرورهای می‌مپس در ایران قرار دارند؟</h5>
                            <p class="text-muted mb-0">
                                بله، سرورهای سرویس نقشه می‌مپس در ایران قرار دارند و از مشکلات تحریم و کندی دور هستند.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body p-4">
                            <h5 class="fw-bold mb-3">چرا بارگذاری نقشه در می‌مپس سریع‌تر است؟</h5>
                            <p class="text-muted mb-0">
                                چون سرورها داخل ایران هستند، فاصلهٔ بین کاربر و سرور کم است و درخواست‌ها بدون عبور از اینترنت بین‌الملل پاسخ داده می‌شوند؛ در نتیجه تأخیر کمتر و بارگذاری سریع‌تر است.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body p-4">
                            <h5 class="fw-bold mb-3">آیا در صورت قطع اینترنت بین‌الملل نقشه کار می‌کند؟</h5>
                            <p class="text-muted mb-0">
                                بله. می‌مپس روی سرورهای ایرانی میزبانی می‌شود؛ بنابراین در صورت قطع اینترنت بین‌الملل، نقشهٔ پایه (OSM) و تایل‌های قبلاً کش‌شده همچنان در دسترس هستند.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body p-4">
                            <h5 class="fw-bold mb-3">چگونه می‌توانم از نقشه می‌مپس در پروژه خود استفاده کنم؟</h5>
                            <p class="text-muted mb-0">
                                می‌توانید از کتابخانه‌های Leaflet یا OpenLayers استفاده کنید. کافی است URL تایل را در پروژه قرار دهید. کدهای نمونه در بخش راهنمای استفاده موجود است.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body p-4">
                            <h5 class="fw-bold mb-3">آیا تصاویر ماهواره‌ای گوگل یا بینگ دارید؟</h5>
                            <p class="text-muted mb-0">
                                بله. می‌مپس علاوه بر نقشهٔ OpenStreetMap، تایل‌های Google Earth (ماهواره) و Bing (جاده، ماهواره، ترکیبی) را هم از طریق API خود ارائه می‌دهد—بدون نیاز به API Key گوگل یا مایکروسافت.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body p-4">
                            <h5 class="fw-bold mb-3">آیا نقشه‌ها به‌روزرسانی می‌شوند؟</h5>
                            <p class="text-muted mb-0">
                                بله، نقشهٔ پایه به صورت روزانه از OpenStreetMap دریافت و به‌روزرسانی می‌شود.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body p-4">
                            <h5 class="fw-bold mb-3">آیا API جستجوی مکان دارید؟</h5>
                            <p class="text-muted mb-0">
                                بله. می‌مپس API جستجوی جغرافیایی (Geocoding) برای یافتن آدرس و مختصات مکان‌ها ارائه می‌دهد. جزئیات در راهنمای API جستجوی مکان موجود است.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body p-4">
                            <h5 class="fw-bold mb-3">آیا برای استفاده تجاری باید هزینه بپردازم؟</h5>
                            <p class="text-muted mb-0">
                                استفادهٔ شخصی و غیرتجاری رایگان است. برای استفادهٔ تجاری و سازمانی با ما تماس بگیرید؛ پشتیبانی سازمانی و طرح‌های مناسب ارائه می‌شود.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body p-4">
                            <h5 class="fw-bold mb-3">حداکثر سطح زوم نقشه چقدر است؟</h5>
                            <p class="text-muted mb-0">
                                نقشهٔ OSM می‌مپس تا زوم ۱۸ پشتیبانی می‌کند. تایل‌های Google Earth و Bing تا سطوح بالاتر (۲۰ و ۲۳) در دسترس هستند.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="section-gradient py-5">
        <div class="container text-center">
            <h2 class="display-5 fw-bold mb-4">آماده شروع هستید؟</h2>
            <p class="lead mb-4 opacity-90">
                همین حالا از سرویس نقشه می‌مپس در پروژه خود استفاده کنید - نقشه آنلاین ایرانی با کیفیت بالا
            </p>
            <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
                <a href="{{ path('app_main_map') }}" class="btn btn-light btn-lg px-4 py-3 fw-bold">
                    مشاهده نقشه آنلاین
                </a>
                <div class="dropdown">
                    <button class="btn btn-outline-light btn-lg px-4 py-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        راهنمای استفاده
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="{{ path('app_main_usage') }}">استفاده از کاشی‌های نقشه</a></li>
                        <li><a class="dropdown-item" href="{{ path('app_main_search_api_guide') }}">API جستجوی مکان</a></li>
                        <li><a class="dropdown-item" href="{{ path('app_main_google_earth_api_guide') }}">API تایل‌های Google Earth</a></li>
                        <li><a class="dropdown-item" href="{{ path('app_main_bing_api_guide') }}">API تایل‌های Bing</a></li>
                        <li><a class="dropdown-item" href="{{ path('app_main_matrix_api_guide') }}">API مسیریابی ماتریسی</a></li>
                    </ul>
                </div>
                <a href="{{ path('app_main_contact') }}" class="btn btn-outline-light btn-lg px-4 py-3">
                    تماس با ما
                </a>
            </div>
        </div>
    </section>
{% endblock %}
    
{% block javascripts %}
    <!-- Leaflet JS -->
    <script src="{{ asset('assets/leaflet/leaflet.js') }}"></script>
    <script>
        // Initialize map
        var map = L.map('map').setView([32.4279, 53.6880], 6);
        
        L.tileLayer('https://memaps.ir/hot/{z}/{x}/{y}.png', {
            attribution: '© می‌مپس - نقشه رستری ایرانی',
            maxZoom: 18
        }).addTo(map);
        
        // Add a marker for Tehran
        L.marker([35.6892, 51.3890]).addTo(map)
            .bindPopup('تهران - پایتخت ایران')
            .openPopup();
            
        // Add a marker for Isfahan
        L.marker([32.6546, 51.6680]).addTo(map)
            .bindPopup('اصفهان - نصف جهان');
            
        // Add a marker for Shiraz
        L.marker([29.5916, 52.5836]).addTo(map)
            .bindPopup('شیراز - شهر شعر و ادب');
    </script>
    
    <!-- FAQ Structured Data -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": [
            {
                "@type": "Question",
                "name": "آیا استفاده از سرویس نقشه می‌مپس رایگان است؟",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "بله، استفاده از سرویس نقشه می‌مپس کاملاً رایگان است و نیازی به ثبت‌نام یا کلید API ندارد."
                }
            },
            {
                "@type": "Question",
                "name": "آیا سرورهای می‌مپس در ایران قرار دارند؟",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "بله، سرورهای سرویس نقشه می‌مپس در ایران قرار دارند و از مشکلات تحریم و کندی دور هستند."
                }
            },
            {
                "@type": "Question",
                "name": "چرا بارگذاری نقشه در می‌مپس سریع‌تر است؟",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "چون سرورها داخل ایران هستند، فاصلهٔ بین کاربر و سرور کم است و درخواست‌ها بدون عبور از اینترنت بین‌الملل پاسخ داده می‌شوند؛ در نتیجه تأخیر کمتر و بارگذاری سریع‌تر است."
                }
            },
            {
                "@type": "Question",
                "name": "آیا در صورت قطع اینترنت بین‌الملل نقشه کار می‌کند؟",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "بله. می‌مپس روی سرورهای ایرانی میزبانی می‌شود؛ بنابراین در صورت قطع اینترنت بین‌الملل، نقشهٔ پایه (OSM) و تایل‌های قبلاً کش‌شده همچنان در دسترس هستند."
                }
            },
            {
                "@type": "Question",
                "name": "چگونه می‌توانم از نقشه می‌مپس در پروژه خود استفاده کنم؟",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "می‌توانید از کتابخانه‌های Leaflet یا OpenLayers استفاده کنید. کافی است URL تایل را در پروژه قرار دهید. کدهای نمونه در بخش راهنمای استفاده موجود است."
                }
            },
            {
                "@type": "Question",
                "name": "آیا تصاویر ماهواره‌ای گوگل یا بینگ دارید؟",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "بله. می‌مپس علاوه بر نقشهٔ OpenStreetMap، تایل‌های Google Earth (ماهواره) و Bing (جاده، ماهواره، ترکیبی) را هم از طریق API خود ارائه می‌دهد—بدون نیاز به API Key گوگل یا مایکروسافت."
                }
            },
            {
                "@type": "Question",
                "name": "آیا نقشه‌ها به‌روزرسانی می‌شوند؟",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "بله، نقشهٔ پایه به صورت روزانه از OpenStreetMap دریافت و به‌روزرسانی می‌شود."
                }
            },
            {
                "@type": "Question",
                "name": "آیا API جستجوی مکان دارید؟",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "بله. می‌مپس API جستجوی جغرافیایی (Geocoding) برای یافتن آدرس و مختصات مکان‌ها ارائه می‌دهد. جزئیات در راهنمای API جستجوی مکان موجود است."
                }
            },
            {
                "@type": "Question",
                "name": "آیا برای استفاده تجاری باید هزینه بپردازم؟",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "استفادهٔ شخصی و غیرتجاری رایگان است. برای استفادهٔ تجاری و سازمانی با ما تماس بگیرید؛ پشتیبانی سازمانی و طرح‌های مناسب ارائه می‌شود."
                }
            },
            {
                "@type": "Question",
                "name": "حداکثر سطح زوم نقشه چقدر است؟",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "نقشهٔ OSM می‌مپس تا زوم ۱۸ پشتیبانی می‌کند. تایل‌های Google Earth و Bing تا سطوح بالاتر (۲۰ و ۲۳) در دسترس هستند."
                }
            }
        ]
    }
    </script>
{% endblock %}