<?php
if (!defined('ABSPATH')) exit;

$current_url = get_permalink();
?>

<div class="dima-guide-page" dir="rtl">
    
    <!-- Header -->
    <div class="guide-header">
        <div class="container mx-auto px-6 py-16">
            <div class="text-center">
                <div class="inline-block mb-6">
                    <span class="text-6xl">📘</span>
                </div>
                <h1 class="text-4xl md:text-5xl font-black text-white mb-4">
                    راهنمای کامل Dima Shop
                </h1>
                <p class="text-xl text-blue-100 max-w-2xl mx-auto">
                    همه چیز درباره شورت‌کدها، تنظیمات و ویژگی‌های پلاگین فروشگاه Dima Shop
                </p>
                
                <div class="flex flex-wrap justify-center gap-4 mt-8">
                    <a href="#shortcodes" class="bg-white text-blue-600 px-6 py-3 rounded-full font-bold hover:bg-blue-50 transition">
                        📝 شورت‌کدها
                    </a>
                    <a href="#features" class="bg-blue-700 text-white px-6 py-3 rounded-full font-bold hover:bg-blue-800 transition border-2 border-blue-500">
                        ⭐ ویژگی‌ها
                    </a>
                    <a href="#examples" class="bg-white text-blue-600 px-6 py-3 rounded-full font-bold hover:bg-blue-50 transition">
                        💡 مثال‌ها
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="container mx-auto px-6 py-12">
        
        <!-- بخش شورت‌کدها -->
        <section id="shortcodes" class="mb-16">
            <div class="flex items-center gap-3 mb-8">
                <span class="text-4xl">📝</span>
                <h2 class="text-3xl font-black text-gray-800">شورت‌کدهای Dima Shop</h2>
            </div>
            
            <p class="text-gray-600 mb-8 text-lg">
                با استفاده از شورت‌کدهای زیر می‌توانید هر بخش از فروشگاه را در هر صفحه‌ای نمایش دهید. کافیست کد را در ویرایشگر وردپرس کپی کنید.
            </p>
            
            <div class="grid md:grid-cols-2 gap-6">
                
                <!-- Shortcode 1 -->
                <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-xl transition">
                    <div class="bg-gradient-to-r from-blue-500 to-purple-600 p-4 text-white">
                        <div class="flex items-center gap-2">
                            <span class="text-2xl">🛍️</span>
                            <h3 class="font-bold text-lg">نمایش فروشگاه</h3>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm mb-4" dir="ltr">
                            [dima_shop]
                        </div>
                        <p class="text-gray-600 text-sm mb-3">نمایش گرید محصولات با دسته‌بندی‌ها و جستجو</p>
                        <div class="text-xs text-gray-500">
                            <strong>پارامترها:</strong>
                            <ul class="mt-2 space-y-1">
                                <li>• <code>products_per_page</code> - تعداد محصولات (پیش‌فرض: 12)</li>
                                <li>• <code>columns</code> - تعداد ستون (پیش‌فرض: 4)</li>
                            </ul>
                        </div>
                        <div class="mt-4 p-3 bg-blue-50 rounded-lg">
                            <code class="text-sm text-blue-700" dir="ltr">[dima_shop products_per_page="8" columns="3"]</code>
                        </div>
                    </div>
                </div>
                
                <!-- Shortcode 2 -->
                <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-xl transition">
                    <div class="bg-gradient-to-r from-green-500 to-teal-600 p-4 text-white">
                        <div class="flex items-center gap-2">
                            <span class="text-2xl">🛒</span>
                            <h3 class="font-bold text-lg">سبد خرید</h3>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm mb-4" dir="ltr">
                            [dima_cart]
                        </div>
                        <p class="text-gray-600 text-sm mb-3">نمایش سبد خرید با امکان ویرایش و حذف</p>
                        <div class="text-xs text-gray-500">
                            <strong>نکته:</strong> این شورت‌کد به صورت خودکار محصولات اضافه شده را نمایش می‌دهد.
                        </div>
                    </div>
                </div>
                
                <!-- Shortcode 3 -->
                <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-xl transition">
                    <div class="bg-gradient-to-r from-orange-500 to-red-600 p-4 text-white">
                        <div class="flex items-center gap-2">
                            <span class="text-2xl">💳</span>
                            <h3 class="font-bold text-lg">صفحه پرداخت</h3>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm mb-4" dir="ltr">
                            [dima_checkout]
                        </div>
                        <p class="text-gray-600 text-sm mb-3">فرم تکمیل خرید با اطلاعات مشتری و درگاه پرداخت</p>
                        <div class="text-xs text-gray-500">
                            <strong>نکته:</strong> کاربر باید حداقل یک محصول در سبد داشته باشد.
                        </div>
                    </div>
                </div>
                
                <!-- Shortcode 4 -->
                <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-xl transition">
                    <div class="bg-gradient-to-r from-pink-500 to-rose-600 p-4 text-white">
                        <div class="flex items-center gap-2">
                            <span class="text-2xl">📦</span>
                            <h3 class="font-bold text-lg">محصول تکی</h3>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm mb-4" dir="ltr">
                            [dima_product id="123"]
                        </div>
                        <p class="text-gray-600 text-sm mb-3">نمایش یک محصول خاص با تمام جزئیات</p>
                        <div class="text-xs text-gray-500">
                            <strong>پارامترها:</strong>
                            <ul class="mt-2 space-y-1">
                                <li>• <code>id</code> - شناسه محصول (الزامی)</li>
                            </ul>
                        </div>
                        <div class="mt-4 p-3 bg-pink-50 rounded-lg">
                            <code class="text-sm text-pink-700" dir="ltr">[dima_product id="45"]</code>
                        </div>
                    </div>
                </div>
                
                <!-- Shortcode 5 -->
                <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-xl transition">
                    <div class="bg-gradient-to-r from-red-500 to-pink-600 p-4 text-white">
                        <div class="flex items-center gap-2">
                            <span class="text-2xl"></span>
                            <h3 class="font-bold text-lg">محصولات شگفت‌انگیز</h3>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm mb-4" dir="ltr">
                            [dima_flash_sale_products]
                        </div>
                        <p class="text-gray-600 text-sm mb-3">نمایش محصولات با تخفیف ویژه و تایمر</p>
                        <div class="text-xs text-gray-500">
                            <strong>پارامترها:</strong>
                            <ul class="mt-2 space-y-1">
                                <li>• <code>limit</code> - تعداد (پیش‌فرض: 8)</li>
                                <li>• <code>category</code> - اسلاگ دسته‌بندی</li>
                            </ul>
                        </div>
                        <div class="mt-4 p-3 bg-red-50 rounded-lg">
                            <code class="text-sm text-red-700" dir="ltr">[dima_flash_sale_products limit="6"]</code>
                        </div>
                    </div>
                </div>
                
                <!-- Shortcode 6 -->
                <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-xl transition">
                    <div class="bg-gradient-to-r from-indigo-500 to-blue-600 p-4 text-white">
                        <div class="flex items-center gap-2">
                            <span class="text-2xl">📂</span>
                            <h3 class="font-bold text-lg">گرید دسته‌بندی‌ها</h3>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm mb-4" dir="ltr">
                            [dima_categories_grid]
                        </div>
                        <p class="text-gray-600 text-sm mb-3">نمایش دسته‌بندی‌ها با آیکون و تصویر</p>
                        <div class="text-xs text-gray-500">
                            <strong>پارامترها:</strong>
                            <ul class="mt-2 space-y-1">
                                <li>• <code>columns</code> - تعداد ستون (پیش‌فرض: 8)</li>
                                <li>• <code>parent</code> - شناسه والد (0 = همه)</li>
                            </ul>
                        </div>
                        <div class="mt-4 p-3 bg-indigo-50 rounded-lg">
                            <code class="text-sm text-indigo-700" dir="ltr">[dima_categories_grid columns="6"]</code>
                        </div>
                    </div>
                </div>
                
                <!-- Shortcode 7 -->
                <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-xl transition">
                    <div class="bg-gradient-to-r from-yellow-500 to-orange-600 p-4 text-white">
                        <div class="flex items-center gap-2">
                            <span class="text-2xl">🏷️</span>
                            <h3 class="font-bold text-lg">برندها</h3>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm mb-4" dir="ltr">
                            [dima_brands]
                        </div>
                        <p class="text-gray-600 text-sm mb-3">نمایش لوگوی برندها در یک گرید</p>
                        <div class="text-xs text-gray-500">
                            <strong>نکته:</strong> ابتدا برندها را از منوی محصولات > برندها اضافه کنید.
                        </div>
                    </div>
                </div>
                
                <!-- Shortcode 8 -->
                <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-xl transition">
                    <div class="bg-gradient-to-r from-teal-500 to-green-600 p-4 text-white">
                        <div class="flex items-center gap-2">
                            <span class="text-2xl">✨</span>
                            <h3 class="font-bold text-lg">نوار ویژگی‌ها</h3>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm mb-4" dir="ltr">
                            [dima_features_bar]
                        </div>
                        <p class="text-gray-600 text-sm mb-3">نمایش ویژگی‌های فروشگاه (ارسال، ضمانت، پشتیبانی)</p>
                        <div class="text-xs text-gray-500">
                            <strong>کاربرد:</strong> معمولاً در فوتر یا بالای صفحه اصلی قرار می‌گیرد.
                        </div>
                    </div>
                </div>
                
                <!-- Shortcode 9 -->
                <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-xl transition">
                    <div class="bg-gradient-to-r from-purple-500 to-pink-600 p-4 text-white">
                        <div class="flex items-center gap-2">
                            <span class="text-2xl"></span>
                            <h3 class="font-bold text-lg">حساب کاربری</h3>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm mb-4" dir="ltr">
                            [dima_account]
                        </div>
                        <p class="text-gray-600 text-sm mb-3">صفحه حساب کاربری با سفارشات، علاقه‌مندی‌ها و امتیازات</p>
                        <div class="text-xs text-gray-500">
                            <strong>نکته:</strong> فقط برای کاربران لاگین شده نمایش داده می‌شود.
                        </div>
                    </div>
                </div>
                
                <!-- Shortcode 10 -->
                <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-xl transition">
                    <div class="bg-gradient-to-r from-rose-500 to-red-600 p-4 text-white">
                        <div class="flex items-center gap-2">
                            <span class="text-2xl">❤️</span>
                            <h3 class="font-bold text-lg">علاقه‌مندی‌ها</h3>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm mb-4" dir="ltr">
                            [dima_wishlist]
                        </div>
                        <p class="text-gray-600 text-sm mb-3">نمایش لیست محصولات مورد علاقه کاربر</p>
                    </div>
                </div>
                
                <!-- Shortcode 11 -->
                <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-xl transition">
                    <div class="bg-gradient-to-r from-cyan-500 to-blue-600 p-4 text-white">
                        <div class="flex items-center gap-2">
                            <span class="text-2xl">⚖️</span>
                            <h3 class="font-bold text-lg">مقایسه محصولات</h3>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm mb-4" dir="ltr">
                            [dima_compare]
                        </div>
                        <p class="text-gray-600 text-sm mb-3">نمایش جدول مقایسه محصولات انتخاب شده</p>
                    </div>
                </div>
                
                <!-- Shortcode 12 -->
                <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-xl transition">
                    <div class="bg-gradient-to-r from-violet-500 to-purple-600 p-4 text-white">
                        <div class="flex items-center gap-2">
                            <span class="text-2xl"></span>
                            <h3 class="font-bold text-lg">شگفت‌انگیز (ویجت)</h3>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm mb-4" dir="ltr">
                            [dima_flash_sale limit="5"]
                        </div>
                        <p class="text-gray-600 text-sm mb-3">نمایش محصولات شگفت‌انگیز با تایمر (نسخه ویجت)</p>
                    </div>
                </div>
                
            </div>
        </section>
        
        <!-- بخش مثال‌های کاربردی -->
        <section id="examples" class="mb-16">
            <div class="flex items-center gap-3 mb-8">
                <span class="text-4xl">💡</span>
                <h2 class="text-3xl font-black text-gray-800">مثال‌های کاربردی</h2>
            </div>
            
            <div class="space-y-6">
                
                <!-- مثال 1 -->
                <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
                    <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                        <span class="bg-blue-100 text-blue-600 w-8 h-8 rounded-full flex items-center justify-center text-sm">۱</span>
                        صفحه اصلی فروشگاه (شبیه دیجی‌کالا)
                    </h3>
                    <div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm" dir="ltr">
<pre>[dima_features_bar]
[dima_categories_grid columns="8"]
[dima_flash_sale_products limit="8"]
[dima_shop products_per_page="12"]
[dima_brands]
[dima_features_bar]</pre>
                    </div>
                    <p class="text-gray-600 text-sm mt-4">
                        این ترکیب یک صفحه اصلی کامل با نوار ویژگی‌ها، دسته‌بندی‌ها، محصولات شگفت‌انگیز، گرید محصولات و برندها ایجاد می‌کند.
                    </p>
                </div>
                
                <!-- مثال 2 -->
                <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
                    <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                        <span class="bg-green-100 text-green-600 w-8 h-8 rounded-full flex items-center justify-center text-sm">۲</span>
                        صفحه دسته‌بندی خاص
                    </h3>
                    <div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm" dir="ltr">
<pre>[dima_shop products_per_page="16" columns="4"]</pre>
                    </div>
                    <p class="text-gray-600 text-sm mt-4">
                        برای نمایش ۶ محصول در ۴ ستون. می‌توانید از فیلتر دسته‌بندی در URL استفاده کنید.
                    </p>
                </div>
                
                <!-- مثال 3 -->
                <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
                    <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                        <span class="bg-red-100 text-red-600 w-8 h-8 rounded-full flex items-center justify-center text-sm">۳</span>
                        صفحه جشنواره فروش
                    </h3>
                    <div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm" dir="ltr">
<pre>[dima_flash_sale_products limit="20"]
[dima_shop products_per_page="24"]</pre>
                    </div>
                    <p class="text-gray-600 text-sm mt-4">
                        برای صفحات کمپین و جشنواره فروش با تمرکز روی محصولات تخفیف‌دار.
                    </p>
                </div>
                
                <!-- مثال 4 -->
                <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
                    <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                        <span class="bg-purple-100 text-purple-600 w-8 h-8 rounded-full flex items-center justify-center text-sm">۴</span>
                        صفحه محصول ویژه
                    </h3>
                    <div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm" dir="ltr">
<pre>[dima_product id="123"]
[dima_shop products_per_page="4"]</pre>
                    </div>
                    <p class="text-gray-600 text-sm mt-4">
                        نمایش یک محصول خاص به همراه محصولات مرتبط در پایین صفحه.
                    </p>
                </div>
                
            </div>
        </section>
        
        <!-- بخش ویژگی‌ها -->
        <section id="features" class="mb-16">
            <div class="flex items-center gap-3 mb-8">
                <span class="text-4xl">⭐</span>
                <h2 class="text-3xl font-black text-gray-800">ویژگی‌های کلیدی</h2>
            </div>
            
            <div class="grid md:grid-cols-3 gap-6">
                
                <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-6 border border-blue-200">
                    <div class="text-4xl mb-4">🔒</div>
                    <h3 class="font-bold text-lg text-gray-800 mb-2">امنیت چندلایه</h3>
                    <p class="text-gray-600 text-sm">محافظت در برابر brute force، SQL injection، XSS با سیستم لاگ‌گیری پیشرفته</p>
                </div>
                
                <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-2xl p-6 border border-green-200">
                    <div class="text-4xl mb-4">🎯</div>
                    <h3 class="font-bold text-lg text-gray-800 mb-2">SEO حرفه‌ای</h3>
                    <p class="text-gray-600 text-sm">Schema.org، Open Graph، Twitter Cards، Breadcrumbs و بهینه‌سازی کامل</p>
                </div>
                
                <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-2xl p-6 border border-purple-200">
                    <div class="text-4xl mb-4">💳</div>
                    <h3 class="font-bold text-lg text-gray-800 mb-2">درگاه‌های ایرانی</h3>
                    <p class="text-gray-600 text-sm">زرین‌پال، IDPay و بانک ملت با تایید خودکار تراکنش‌ها</p>
                </div>
                
                <div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-2xl p-6 border border-orange-200">
                    <div class="text-4xl mb-4"></div>
                    <h3 class="font-bold text-lg text-gray-800 mb-2">سبک و سریع</h3>
                    <p class="text-gray-600 text-sm">کمتر از ۵۰KB حجم، بدون وابستگی‌های اضافی و بهینه‌سازی شده</p>
                </div>
                
                <div class="bg-gradient-to-br from-pink-50 to-pink-100 rounded-2xl p-6 border border-pink-200">
                    <div class="text-4xl mb-4">❤️</div>
                    <h3 class="font-bold text-lg text-gray-800 mb-2">علاقه‌مندی و مقایسه</h3>
                    <p class="text-gray-600 text-sm">سیستم کامل Wishlist و Compare برای تجربه خرید بهتر</p>
                </div>
                
                <div class="bg-gradient-to-br from-teal-50 to-teal-100 rounded-2xl p-6 border border-teal-200">
                    <div class="text-4xl mb-4">🎁</div>
                    <h3 class="font-bold text-lg text-gray-800 mb-2">سیستم پاداش</h3>
                    <p class="text-gray-600 text-sm">امتیاز وفاداری، کوپن تخفیف و محصولات شگفت‌انگیز</p>
                </div>
                
                <div class="bg-gradient-to-br from-indigo-50 to-indigo-100 rounded-2xl p-6 border border-indigo-200">
                    <div class="text-4xl mb-4">📊</div>
                    <h3 class="font-bold text-lg text-gray-800 mb-2">گزارشات پیشرفته</h3>
                    <p class="text-gray-600 text-sm">داشبورد حرفه‌ای با نمودارهای فروش و آمار کامل</p>
                </div>
                
                <div class="bg-gradient-to-br from-rose-50 to-rose-100 rounded-2xl p-6 border border-rose-200">
                    <div class="text-4xl mb-4">🔄</div>
                    <h3 class="font-bold text-lg text-gray-800 mb-2">بروزرسانی خودکار</h3>
                    <p class="text-gray-600 text-sm">سیستم بروزرسانی با Backup و Rollback خودکار</p>
                </div>
                
                <div class="bg-gradient-to-br from-cyan-50 to-cyan-100 rounded-2xl p-6 border border-cyan-200">
                    <div class="text-4xl mb-4">📱</div>
                    <h3 class="font-bold text-lg text-gray-800 mb-2">REST API</h3>
                    <p class="text-gray-600 text-sm">API کامل برای اپلیکیشن موبایل و یکپارچه‌سازی</p>
                </div>
                
            </div>
        </section>
        
        <!-- بخش سوالات متداول -->
        <section class="mb-16">
            <div class="flex items-center gap-3 mb-8">
                <span class="text-4xl">❓</span>
                <h2 class="text-3xl font-black text-gray-800">سوالات متداول</h2>
            </div>
            
            <div class="space-y-4">
                
                <div class="bg-white rounded-xl shadow border border-gray-100 overflow-hidden">
                    <button class="w-full px-6 py-4 text-right font-bold text-gray-800 flex justify-between items-center faq-toggle">
                        <span>چگونه محصولات شگفت‌انگیز ایجاد کنم؟</span>
                        <span class="text-2xl transition-transform">+</span>
                    </button>
                    <div class="px-6 pb-4 text-gray-600 hidden faq-content">
                        از منوی <strong>Dima Shop > شگفت‌انگیز</strong> می‌توانید محصولات را با قیمت تخفیف‌دار و زمان شروع/پایان مشخص کنید. سپس با شورت‌کد <code>[dima_flash_sale_products]</code> در هر صفحه‌ای نمایش دهید.
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow border border-gray-100 overflow-hidden">
                    <button class="w-full px-6 py-4 text-right font-bold text-gray-800 flex justify-between items-center faq-toggle">
                        <span>چگونه برندها را اضافه کنم؟</span>
                        <span class="text-2xl transition-transform">+</span>
                    </button>
                    <div class="px-6 pb-4 text-gray-600 hidden faq-content">
                        به منوی <strong>محصولات Dima > برندها</strong> بروید و برندهای جدید اضافه کنید. برای هر برند می‌توانید لوگو آپلود کنید. سپس با <code>[dima_brands]</code> نمایش دهید.
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow border border-gray-100 overflow-hidden">
                    <button class="w-full px-6 py-4 text-right font-bold text-gray-800 flex justify-between items-center faq-toggle">
                        <span>آیا می‌توانم از Tailwind CSS استفاده کنم؟</span>
                        <span class="text-2xl transition-transform">+</span>
                    </button>
                    <div class="px-6 pb-4 text-gray-600 hidden faq-content">
                        بله! Dima Shop به صورت پیش‌فرض Tailwind CSS را از CDN بارگذاری می‌کند. می‌توانید در قالب خود از کلاس‌های Tailwind استفاده کنید.
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow border border-gray-100 overflow-hidden">
                    <button class="w-full px-6 py-4 text-right font-bold text-gray-800 flex justify-between items-center faq-toggle">
                        <span>چگونه درگاه پرداخت را تنظیم کنم؟</span>
                        <span class="text-2xl transition-transform">+</span>
                    </button>
                    <div class="px-6 pb-4 text-gray-600 hidden faq-content">
                        به <strong>Dima Shop > تنظیمات</strong> بروید و در بخش «درگاه پرداخت»، Merchant ID زرین‌پال یا API Key IDPay را وارد کنید.
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow border border-gray-100 overflow-hidden">
                    <button class="w-full px-6 py-4 text-right font-bold text-gray-800 flex justify-between items-center faq-toggle">
                        <span>آیا پلاگین با قالب من سازگار است؟</span>
                        <span class="text-2xl transition-transform">+</span>
                    </button>
                    <div class="px-6 pb-4 text-gray-600 hidden faq-content">
                        بله! Dima Shop با اکثر قالب‌های استاندارد وردپرس سازگار است. از شورت‌کدها در هر صفحه‌ای استفاده کنید.
                    </div>
                </div>
                
            </div>
        </section>
        
        <!-- CTA -->
        <section class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-3xl p-12 text-center text-white">
            <h2 class="text-3xl font-black mb-4">آماده شروع هستید؟ 🚀</h2>
            <p class="text-xl mb-8 text-blue-100">
                همین الان فروشگاه حرفه‌ای خود را با Dima Shop راه‌اندازی کنید
            </p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="<?php echo esc_url(admin_url('admin.php?page=dima-shop-settings')); ?>" class="bg-white text-blue-600 px-8 py-4 rounded-full font-bold hover:bg-blue-50 transition shadow-lg">
                    ⚙️ تنظیمات پلاگین
                </a>
                <a href="<?php echo esc_url(admin_url('post-new.php?post_type=dima_product')); ?>" class="bg-blue-700 text-white px-8 py-4 rounded-full font-bold hover:bg-blue-800 transition border-2 border-blue-500">
                    ➕ افزودن محصول
                </a>
            </div>
        </section>
        
    </div>
</div>

<style>
.dima-guide-page .guide-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.dima-guide-page code {
    font-family: 'Courier New', monospace;
    background: rgba(0,0,0,0.05);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

.dima-guide-page pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.faq-toggle.active span:last-child {
    transform: rotate(45deg);
}

.faq-content.active {
    display: block !important;
}
</style>

<script>
jQuery(document).ready(function($) {
    // FAQ Toggle
    $('.faq-toggle').on('click', function() {
        var $content = $(this).next('.faq-content');
        var isActive = $(this).hasClass('active');
        
        // Close all
        $('.faq-toggle').removeClass('active');
        $('.faq-content').removeClass('active');
        
        // Open clicked if wasn't active
        if (!isActive) {
            $(this).addClass('active');
            $content.addClass('active');
        }
    });
    
    // Smooth scroll for anchor links
    $('a[href^="#"]').on('click', function(e) {
        e.preventDefault();
        var target = $(this.getAttribute('href'));
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top - 100
            }, 800);
        }
    });
});
</script>