<?php
/**
 * قالب صفحه راهنمای Dima Shop
 * نسخه: 3.2.0
 * 
 * شامل تمام شورت‌کدها، تنظیمات و راهنمای استفاده
 */
if (!defined('ABSPATH')) exit;

// لیست کامل شورت‌کدها
$shortcodes = array(
    'shop' => array(
        'name' => 'فروشگاه',
        'code' => '[dima_shop]',
        'description' => 'نمایش کامل فروشگاه با دسته‌بندی‌ها، جستجو و محصولات',
        'params' => array(
            'products_per_page' => 'تعداد محصولات در هر صفحه (پیش‌فرض: 12)',
            'columns' => 'تعداد ستون (پیش‌فرض: 4)',
        ),
        'example' => '[dima_shop products_per_page="16" columns="3"]',
        'icon' => '🛍️',
        'category' => 'اصلی'
    ),
    'cart' => array(
        'name' => 'سبد خرید',
        'code' => '[dima_cart]',
        'description' => 'نمایش سبد خرید با امکان ویرایش تعداد و حذف محصول',
        'params' => array(),
        'example' => '[dima_cart]',
        'icon' => '🛒',
        'category' => 'اصلی'
    ),
    'checkout' => array(
        'name' => 'تکمیل خرید',
        'code' => '[dima_checkout]',
        'description' => 'فرم تکمیل خرید با اطلاعات مشتری و اتصال به درگاه پرداخت',
        'params' => array(),
        'example' => '[dima_checkout]',
        'icon' => '💳',
        'category' => 'اصلی'
    ),
    'product' => array(
        'name' => 'محصول تکی',
        'code' => '[dima_product id="123"]',
        'description' => 'نمایش یک محصول خاص با تمام جزئیات و گالری تصاویر',
        'params' => array(
            'id' => 'شناسه محصول (الزامی)',
        ),
        'example' => '[dima_product id="45"]',
        'icon' => '📦',
        'category' => 'اصلی'
    ),
    'account' => array(
        'name' => 'حساب کاربری',
        'code' => '[dima_account]',
        'description' => 'صفحه حساب کاربری با سفارشات، علاقه‌مندی‌ها و امتیازات',
        'params' => array(),
        'example' => '[dima_account]',
        'icon' => '👤',
        'category' => 'کاربر'
    ),
    'wishlist' => array(
        'name' => 'علاقه‌مندی‌ها',
        'code' => '[dima_wishlist]',
        'description' => 'نمایش لیست محصولات مورد علاقه کاربر',
        'params' => array(),
        'example' => '[dima_wishlist]',
        'icon' => '❤️',
        'category' => 'کاربر'
    ),
    'compare' => array(
        'name' => 'مقایسه محصولات',
        'code' => '[dima_compare]',
        'description' => 'نمایش جدول مقایسه محصولات انتخاب شده',
        'params' => array(),
        'example' => '[dima_compare]',
        'icon' => '⚖️',
        'category' => 'کاربر'
    ),
    'flash_sale' => array(
        'name' => 'شگفت‌انگیز (ویجت)',
        'code' => '[dima_flash_sale limit="5"]',
        'description' => 'نمایش محصولات شگفت‌انگیز با تایمر زنده',
        'params' => array(
            'limit' => 'تعداد محصولات (پیش‌فرض: 5)',
        ),
        'example' => '[dima_flash_sale limit="8"]',
        'icon' => '🔥',
        'category' => 'فروش'
    ),
    'flash_sale_products' => array(
        'name' => 'محصولات شگفت‌انگیز',
        'code' => '[dima_flash_sale_products limit="8"]',
        'description' => 'نمایش گرید محصولات شگفت‌انگیز با تخفیف و تایمر',
        'params' => array(
            'limit' => 'تعداد محصولات (پیش‌فرض: 8)',
            'category' => 'اسلاگ دسته‌بندی (اختیاری)',
        ),
        'example' => '[dima_flash_sale_products limit="12" category="mobiles"]',
        'icon' => '⚡',
        'category' => 'فروش'
    ),
    'categories_grid' => array(
        'name' => 'گرید دسته‌بندی‌ها',
        'code' => '[dima_categories_grid columns="8"]',
        'description' => 'نمایش دسته‌بندی‌ها با آیکون و تصویر به صورت گرید',
        'params' => array(
            'columns' => 'تعداد ستون (پیش‌فرض: 8)',
            'parent' => 'شناسه والد (0 = همه)',
        ),
        'example' => '[dima_categories_grid columns="6" parent="0"]',
        'icon' => '',
        'category' => 'نمایش'
    ),
    'brands' => array(
        'name' => 'برندها',
        'code' => '[dima_brands]',
        'description' => 'نمایش لوگوی برندها در یک گرید',
        'params' => array(),
        'example' => '[dima_brands]',
        'icon' => '🏷️',
        'category' => 'نمایش'
    ),
    'features_bar' => array(
        'name' => 'نوار ویژگی‌ها',
        'code' => '[dima_features_bar]',
        'description' => 'نمایش ویژگی‌های فروشگاه (ارسال، ضمانت، پشتیبانی)',
        'params' => array(),
        'example' => '[dima_features_bar]',
        'icon' => '✨',
        'category' => 'نمایش'
    ),
    'quick_view' => array(
        'name' => 'مشاهده سریع',
        'code' => '[dima_quick_view]',
        'description' => 'نمایش مودال مشاهده سریع محصول',
        'params' => array(),
        'example' => '[dima_quick_view]',
        'icon' => '👁️',
        'category' => 'نمایش'
    ),
    'guide' => array(
        'name' => 'راهنما',
        'code' => '[dima_guide]',
        'description' => 'نمایش همین صفحه راهنما',
        'params' => array(),
        'example' => '[dima_guide]',
        'icon' => '📖',
        'category' => 'سایر'
    ),
    'footer' => array(
        'name' => 'فوتر',
        'code' => '[dima_footer]',
        'description' => 'نمایش فوتر کامل با اطلاعات فروشگاه و شبکه‌های اجتماعی',
        'params' => array(),
        'example' => '[dima_footer]',
        'icon' => '🦶',
        'category' => 'سایر',
        'new' => true
    ),
    'contact' => array(
        'name' => 'تماس با ما',
        'code' => '[dima_contact]',
        'description' => 'نمایش فرم تماس با ما و اطلاعات فروشگاه',
        'params' => array(),
        'example' => '[dima_contact]',
        'icon' => '',
        'category' => 'سایر',
        'new' => true
    ),
);

// دسته‌بندی‌ها
$categories = array(
    'اصلی' => array('icon' => '️', 'color' => '#6366f1'),
    'کاربر' => array('icon' => '', 'color' => '#10b981'),
    'فروش' => array('icon' => '🔥', 'color' => '#ef4444'),
    'نمایش' => array('icon' => '', 'color' => '#f59e0b'),
    'سایر' => array('icon' => '📦', 'color' => '#8b5cf6'),
);
?>

<div class="dima-guide-page" dir="rtl">
    
    <!-- هدر -->
    <div class="guide-hero">
        <div class="container">
            <div class="hero-content">
                <span class="hero-badge">📖 نسخه ۳.۲.۰</span>
                <h1>راهنمای کامل Dima Shop</h1>
                <p>تمام شورت‌کدها، تنظیمات و امکانات پلاگین فروشگاهی Dima Shop را در یک صفحه مشاهده کنید</p>
                
                <!-- جستجو -->
                <div class="guide-search">
                    <input type="text" id="guide-search-input" placeholder="🔍 جستجو در شورت‌کدها و راهنما...">
                </div>
                
                <!-- آمار -->
                <div class="guide-stats">
                    <div class="stat-item">
                        <span class="stat-number"><?php echo count($shortcodes); ?></span>
                        <span class="stat-label">شورت‌کد</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number"><?php echo count($categories); ?></span>
                        <span class="stat-label">دسته‌بندی</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">۲۵+</span>
                        <span class="stat-label">ویژگی</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="container">
        
        <!-- فیلتر دسته‌بندی -->
        <div class="guide-filters">
            <button class="filter-btn active" data-category="all">
                همه
            </button>
            <?php foreach ($categories as $cat_key => $cat_data): ?>
                <button class="filter-btn" data-category="<?php echo esc_attr($cat_key); ?>">
                    <span class="filter-icon"><?php echo $cat_data['icon']; ?></span>
                    <?php echo esc_html($cat_key); ?>
                </button>
            <?php endforeach; ?>
        </div>
        
        <!-- لیست شورت‌کدها -->
        <div class="shortcodes-grid" id="shortcodes-grid">
            <?php foreach ($shortcodes as $key => $sc): 
                $cat = $categories[$sc['category']] ?? array('color' => '#6b7280');
            ?>
            <div class="shortcode-card" 
                 data-category="<?php echo esc_attr($sc['category']); ?>"
                 data-name="<?php echo esc_attr($sc['name']); ?>"
                 data-code="<?php echo esc_attr($sc['code']); ?>">
                
                <?php if (!empty($sc['new'])): ?>
                    <span class="badge-new">جدید</span>
                <?php endif; ?>
                
                <div class="card-header">
                    <div class="card-icon" style="background: <?php echo $cat['color']; ?>20; color: <?php echo $cat['color']; ?>">
                        <?php echo $sc['icon']; ?>
                    </div>
                    <div class="card-title">
                        <h3><?php echo esc_html($sc['name']); ?></h3>
                        <span class="card-category" style="color: <?php echo $cat['color']; ?>">
                            <?php echo esc_html($sc['category']); ?>
                        </span>
                    </div>
                </div>
                
                <p class="card-description"><?php echo esc_html($sc['description']); ?></p>
                
                <div class="card-code">
                    <code><?php echo esc_html($sc['code']); ?></code>
                    <button class="copy-btn" data-code="<?php echo esc_attr($sc['code']); ?>" title="کپی">
                        📋
                    </button>
                </div>
                
                <?php if (!empty($sc['params'])): ?>
                <div class="card-params">
                    <h4>پارامترها:</h4>
                    <ul>
                        <?php foreach ($sc['params'] as $param => $desc): ?>
                            <li>
                                <code><?php echo esc_html($param); ?></code>
                                <span><?php echo esc_html($desc); ?></span>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
                <?php endif; ?>
                
                <?php if ($sc['example'] !== $sc['code']): ?>
                <div class="card-example">
                    <h4>مثال:</h4>
                    <code><?php echo esc_html($sc['example']); ?></code>
                </div>
                <?php endif; ?>
                
            </div>
            <?php endforeach; ?>
        </div>
        
        <!-- نتیجه جستجو -->
        <div id="search-no-result" class="no-result" style="display:none;">
            <div class="no-result-icon">🔍</div>
            <h3>نتیجه‌ای یافت نشد</h3>
            <p>عبارت دیگری را جستجو کنید</p>
        </div>
        
        <!-- بخش‌های راهنما -->
        <div class="guide-sections">
            
            <!-- نصب اولیه -->
            <section class="guide-section" id="section-setup">
                <div class="section-header">
                    <span class="section-icon"></span>
                    <h2>نصب و راه‌اندازی اولیه</h2>
                </div>
                
                <div class="section-content">
                    <div class="steps-list">
                        <div class="step-item">
                            <div class="step-number">۱</div>
                            <div class="step-content">
                                <h4>نصب پلاگین</h4>
                                <p>پوشه <code>dima-shop</code> را در مسیر <code>wp-content/plugins/</code> آپلود کنید و از منوی افزونه‌ها، Dima Shop را فعال کنید.</p>
                            </div>
                        </div>
                        
                        <div class="step-item">
                            <div class="step-number">۲</div>
                            <div class="step-content">
                                <h4>ایجاد خودکار صفحات</h4>
                                <p>پس از فعال‌سازی، صفحات زیر به صورت خودکار ایجاد می‌شوند:</p>
                                <ul class="pages-list">
                                    <li>🛍️ فروشگاه <code>[dima_shop]</code></li>
                                    <li>🛒 سبد خرید <code>[dima_cart]</code></li>
                                    <li>💳 تکمیل خرید <code>[dima_checkout]</code></li>
                                    <li>👤 حساب کاربری <code>[dima_account]</code></li>
                                    <li>❤️ علاقه‌مندی‌ها <code>[dima_wishlist]</code></li>
                                    <li>⚖️ مقایسه <code>[dima_compare]</code></li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="step-item">
                            <div class="step-number">۳</div>
                            <div class="step-content">
                                <h4>تنظیم درگاه پرداخت</h4>
                                <p>به منوی <strong>Dima Shop > تنظیمات > تب درگاه پرداخت</strong> بروید و اطلاعات درگاه مورد نظر (زرین‌پال، IDPay یا ملت) را وارد کنید.</p>
                            </div>
                        </div>
                        
                        <div class="step-item">
                            <div class="step-number">۴</div>
                            <div class="step-content">
                                <h4>افزودن اولین محصول</h4>
                                <p>از منوی <strong>محصولات Dima > افزودن محصول</strong> اولین محصول خود را با قیمت و موجودی اضافه کنید.</p>
                            </div>
                        </div>
                        
                        <div class="step-item">
                            <div class="step-number">۵</div>
                            <div class="step-content">
                                <h4>فعال‌سازی لایسنس (اختیاری)</h4>
                                <p>برای دریافت بروزرسانی‌های خودکار و پشتیبانی، لایسنس خود را از <a href="https://api.dimashop.ir" target="_blank">api.dimashop.ir</a> دریافت و در تنظیمات فعال کنید.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- اطلاعات فروشگاه -->
            <section class="guide-section" id="section-store-info">
                <div class="section-header">
                    <span class="section-icon">🏪</span>
                    <h2>تنظیم اطلاعات فروشگاه</h2>
                </div>
                
                <div class="section-content">
                    <p>در تب <strong>اطلاعات فروشگاه</strong> از تنظیمات، اطلاعات زیر را وارد کنید:</p>
                    
                    <div class="info-grid">
                        <div class="info-card">
                            <div class="info-icon"></div>
                            <h4>اطلاعات پایه</h4>
                            <ul>
                                <li>نام فروشگاه</li>
                                <li>توضیحات کوتاه</li>
                                <li>لوگو فروشگاه</li>
                                <li>وب‌سایت</li>
                            </ul>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-icon">📞</div>
                            <h4>اطلاعات تماس</h4>
                            <ul>
                                <li>تلفن تماس</li>
                                <li>ایمیل</li>
                                <li>آدرس کامل</li>
                                <li>شهر و کد پستی</li>
                                <li>ساعات کاری</li>
                            </ul>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-icon">🌐</div>
                            <h4>شبکه‌های اجتماعی</h4>
                            <ul>
                                <li>اینستاگرام</li>
                                <li>تلگرام</li>
                                <li>واتساپ</li>
                                <li>توییتر</li>
                                <li>لینکدین</li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="tip-box">
                        <span class="tip-icon">💡</span>
                        <div class="tip-content">
                            <strong>نکته:</strong> این اطلاعات در فوتر سایت، صفحه تماس با ما، Schema.org و ایمیل‌های ارسالی استفاده می‌شوند.
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- ساختار پیشنهادی صفحات -->
            <section class="guide-section" id="section-pages">
                <div class="section-header">
                    <span class="section-icon"></span>
                    <h2>ساختار پیشنهادی صفحات</h2>
                </div>
                
                <div class="section-content">
                    <div class="pages-structure">
                        <div class="page-structure-item main-page">
                            <div class="page-icon">🏠</div>
                            <div class="page-info">
                                <h4>صفحه اصلی</h4>
                                <p>ترکیبی از تمام شورت‌کدها برای نمایش کامل فروشگاه</p>
                            </div>
                            <div class="page-code">
<pre>[dima_features_bar]
[dima_categories_grid columns="8"]
[dima_flash_sale_products limit="8"]
[dima_shop products_per_page="12"]
[dima_brands]
[dima_footer]</pre>
                            </div>
                        </div>
                        
                        <div class="page-structure-item">
                            <div class="page-icon">🛍️</div>
                            <div class="page-info">
                                <h4>صفحه فروشگاه</h4>
                                <p>نمایش کامل محصولات با فیلتر و جستجو</p>
                            </div>
                            <div class="page-code">
<pre>[dima_shop]</pre>
                            </div>
                        </div>
                        
                        <div class="page-structure-item">
                            <div class="page-icon"></div>
                            <div class="page-info">
                                <h4>سبد خرید</h4>
                                <p>مدیریت محصولات انتخاب شده</p>
                            </div>
                            <div class="page-code">
<pre>[dima_cart]</pre>
                            </div>
                        </div>
                        
                        <div class="page-structure-item">
                            <div class="page-icon"></div>
                            <div class="page-info">
                                <h4>تکمیل خرید</h4>
                                <p>فرم اطلاعات مشتری و پرداخت</p>
                            </div>
                            <div class="page-code">
<pre>[dima_checkout]</pre>
                            </div>
                        </div>
                        
                        <div class="page-structure-item">
                            <div class="page-icon">👤</div>
                            <div class="page-info">
                                <h4>حساب کاربری</h4>
                                <p>مدیریت سفارشات، علاقه‌مندی‌ها و امتیازات</p>
                            </div>
                            <div class="page-code">
<pre>[dima_account]</pre>
                            </div>
                        </div>
                        
                        <div class="page-structure-item">
                            <div class="page-icon">📞</div>
                            <div class="page-info">
                                <h4>تماس با ما</h4>
                                <p>فرم تماس و اطلاعات فروشگاه</p>
                            </div>
                            <div class="page-code">
<pre>[dima_contact]
[dima_footer]</pre>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- ویژگی‌های کلیدی -->
            <section class="guide-section" id="section-features">
                <div class="section-header">
                    <span class="section-icon">⭐</span>
                    <h2>ویژگی‌های کلیدی پلاگین</h2>
                </div>
                
                <div class="section-content">
                    <div class="features-grid">
                        <div class="feature-item">
                            <div class="feature-icon"></div>
                            <h4>امنیت چندلایه</h4>
                            <p>محافظت در برابر Brute Force، SQL Injection، XSS و Rate Limiting</p>
                        </div>
                        
                        <div class="feature-item">
                            <div class="feature-icon">🎯</div>
                            <h4>SEO پیشرفته</h4>
                            <p>Schema.org، Open Graph، Twitter Cards و بهینه‌سازی کامل</p>
                        </div>
                        
                        <div class="feature-item">
                            <div class="feature-icon">💳</div>
                            <h4>درگاه‌های ایرانی</h4>
                            <p>زرین‌پال، IDPay و بانک ملت با تایید خودکار</p>
                        </div>
                        
                        <div class="feature-item">
                            <div class="feature-icon">⚡</div>
                            <h4>سبک و سریع</h4>
                            <p>کمتر از ۰۰KB حجم، ۱ برابر سبک‌تر از ووکامرس</p>
                        </div>
                        
                        <div class="feature-item">
                            <div class="feature-icon">🤖</div>
                            <h4>هوش مصنوعی</h4>
                            <p>تولید محتوا، تصویر و ترجمه با GapGPT</p>
                        </div>
                        
                        <div class="feature-item">
                            <div class="feature-icon">🔄</div>
                            <h4>بروزرسانی خودکار</h4>
                            <p>سیستم بروزرسانی با Backup و Rollback</p>
                        </div>
                        
                        <div class="feature-item">
                            <div class="feature-icon">🎁</div>
                            <h4>سیستم پاداش</h4>
                            <p>امتیاز وفاداری و تبدیل به کوپن تخفیف</p>
                        </div>
                        
                        <div class="feature-item">
                            <div class="feature-icon">🔥</div>
                            <h4>شگفت‌انگیز</h4>
                            <p>تخفیف‌های زمان‌دار با تایمر زنده</p>
                        </div>
                        
                        <div class="feature-item">
                            <div class="feature-icon">📊</div>
                            <h4>گزارشات پیشرفته</h4>
                            <p>نمودار فروش و آمار کامل با Chart.js</p>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- سوالات متداول -->
            <section class="guide-section" id="section-faq">
                <div class="section-header">
                    <span class="section-icon">❓</span>
                    <h2>سوالات متداول</h2>
                </div>
                
                <div class="section-content">
                    <div class="faq-list">
                        <div class="faq-item">
                            <button class="faq-question">
                                <span>آیا Dima Shop جایگزین ووکامرس است؟</span>
                                <span class="faq-toggle">+</span>
                            </button>
                            <div class="faq-answer">
                                <p>بله! Dima Shop برای فروشگاه‌های کوچک تا متوسط طراحی شده و ۱ برابر سبک‌تر از ووکامرس است. تمام امکانات اصلی فروشگاه را دارد.</p>
                            </div>
                        </div>
                        
                        <div class="faq-item">
                            <button class="faq-question">
                                <span>چگونه لایسنس را فعال کنم؟</span>
                                <span class="faq-toggle">+</span>
                            </button>
                            <div class="faq-answer">
                                <p>۱) به سایت <a href="https://api.dimashop.ir" target="_blank">api.dimashop.ir</a> بروید<br>
                                ۲) ثبت‌نام کنید (رایگان)<br>
                                ۳) پلن مورد نظر را انتخاب کنید<br>
                                ۴) کلید لایسنس را در تنظیمات > تب لایسنس وارد کنید</p>
                            </div>
                        </div>
                        
                        <div class="faq-item">
                            <button class="faq-question">
                                <span>آیا می‌توانم از ووکامرس مهاجرت کنم؟</span>
                                <span class="faq-toggle">+</span>
                            </button>
                            <div class="faq-answer">
                                <p>بله! از منوی <strong>Dima Shop > انتقال از ووکامرس</strong> می‌توانید محصولات، دسته‌بندی‌ها، سفارشات و نظرات را به صورت خودکار منتقل کنید.</p>
                            </div>
                        </div>
                        
                        <div class="faq-item">
                            <button class="faq-question">
                                <span>هوش مصنوعی چگونه کار می‌کند؟</span>
                                <span class="faq-toggle">+</span>
                            </button>
                            <div class="faq-answer">
                                <p>با ثبت‌نام در سایت <a href="https://gapgpt.app" target="_blank">gapgpt.app</a> و دریافت API Key، می‌توانید از تمام قابلیت‌های AI استفاده کنید. پلن رایگان ۱۰۰ درخواست روزانه دارد.</p>
                            </div>
                        </div>
                        
                        <div class="faq-item">
                            <button class="faq-question">
                                <span>چگونه داده‌های نمونه نصب کنم؟</span>
                                <span class="faq-toggle">+</span>
                            </button>
                            <div class="faq-answer">
                                <p>پس از فعال‌سازی پلاگین، Setup Wizard به صورت خودکار نمایش داده می‌شود. در مرحله دوم می‌توانید داده‌های نمونه شامل ۱۰ محصول، ۵ دسته‌بندی و ۳ کوپن را نصب کنید.</p>
                            </div>
                        </div>
                        
                        <div class="faq-item">
                            <button class="faq-question">
                                <span>آیا پلاگین با قالب من سازگار است؟</span>
                                <span class="faq-toggle">+</span>
                            </button>
                            <div class="faq-answer">
                                <p>بله! Dima Shop با اکثر قالب‌های استاندارد وردپرس سازگار است. از شورت‌کدها در هر صفحه‌ای استفاده کنید.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- لینک‌های مفید -->
            <section class="guide-section" id="section-links">
                <div class="section-header">
                    <span class="section-icon">🔗</span>
                    <h2>لینک‌های مفید</h2>
                </div>
                
                <div class="section-content">
                    <div class="links-grid">
                        <a href="https://api.dimashop.ir" target="_blank" class="link-card">
                            <div class="link-icon">🌐</div>
                            <div class="link-info">
                                <h4>سایت لایسنس</h4>
                                <p>api.dimashop.ir</p>
                            </div>
                            <span class="link-arrow">←</span>
                        </a>
                        
                        <a href="https://dimashop.ir/docs" target="_blank" class="link-card">
                            <div class="link-icon">📚</div>
                            <div class="link-info">
                                <h4>مستندات کامل</h4>
                                <p>dimashop.ir/docs</p>
                            </div>
                            <span class="link-arrow">←</span>
                        </a>
                        
                        <a href="https://dimashop.ir/support" target="_blank" class="link-card">
                            <div class="link-icon">💬</div>
                            <div class="link-info">
                                <h4>پشتیبانی</h4>
                                <p>dimashop.ir/support</p>
                            </div>
                            <span class="link-arrow">←</span>
                        </a>
                        
                        <a href="https://gapgpt.app" target="_blank" class="link-card">
                            <div class="link-icon">🤖</div>
                            <div class="link-info">
                                <h4>هوش مصنوعی GapGPT</h4>
                                <p>gapgpt.app</p>
                            </div>
                            <span class="link-arrow">←</span>
                        </a>
                        
                        <a href="https://github.com/dimashop" target="_blank" class="link-card">
                            <div class="link-icon">💻</div>
                            <div class="link-info">
                                <h4>گیت‌هاب</h4>
                                <p>github.com/dimashop</p>
                            </div>
                            <span class="link-arrow">←</span>
                        </a>
                        
                        <a href="https://dimashop.ir/blog" target="_blank" class="link-card">
                            <div class="link-icon">📝</div>
                            <div class="link-info">
                                <h4>بلاگ</h4>
                                <p>dimashop.ir/blog</p>
                            </div>
                            <span class="link-arrow">←</span>
                        </a>
                    </div>
                </div>
            </section>
            
        </div>
        
    </div>
    
</div>

<style>
.dima-guide-page {
    font-family: 'Vazir', Tahoma, sans-serif;
    background: #f9fafb;
}

/* Hero */
.guide-hero {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    color: white;
    padding: 60px 0 80px;
    position: relative;
    overflow: hidden;
}

.guide-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.08) 0%, transparent 50%);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.3);
}

.guide-hero h1 {
    font-size: 42px;
    font-weight: 900;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.guide-hero p {
    font-size: 18px;
    opacity: 0.95;
    margin: 0 0 30px 0;
    line-height: 1.6;
}

/* Search */
.guide-search {
    max-width: 600px;
    margin: 0 auto 40px;
}

.guide-search input {
    width: 100%;
    padding: 16px 24px;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-family: inherit;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.guide-search input:focus {
    outline: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

/* Stats */
.guide-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 14px;
    opacity: 0.9;
}

/* Filters */
.guide-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin: -30px 0 30px;
    position: relative;
    z-index: 10;
}

.filter-btn {
    padding: 10px 20px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 25px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-btn:hover {
    border-color: #6366f1;
    color: #6366f1;
}

.filter-btn.active {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: white;
    border-color: transparent;
}

.filter-icon {
    font-size: 16px;
}

/* Shortcodes Grid */
.shortcodes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}

.shortcode-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    position: relative;
    transition: all 0.3s;
}

.shortcode-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.badge-new {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}

.card-header {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.card-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.card-title {
    flex: 1;
}

.card-title h3 {
    margin: 0 0 4px 0;
    font-size: 18px;
    color: #1f2937;
}

.card-category {
    font-size: 12px;
    font-weight: 600;
}

.card-description {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 15px 0;
}

.card-code {
    background: #1f2937;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.card-code code {
    color: #10b981;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.copy-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.copy-btn:hover {
    background: rgba(255,255,255,0.2);
}

.card-params, .card-example {
    margin-bottom: 15px;
}

.card-params h4, .card-example h4 {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.card-params ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card-params li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid #f3f4f6;
}

.card-params li:last-child {
    border-bottom: none;
}

.card-params code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: #6366f1;
    font-family: monospace;
}

.card-example code {
    display: block;
    background: #fef3c7;
    color: #92400e;
    padding: 10px 14px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 13px;
    border-right: 3px solid #f59e0b;
}

/* No Result */
.no-result {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 16px;
    border: 2px dashed #e5e7eb;
}

.no-result-icon {
    font-size: 64px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.no-result h3 {
    margin: 10px 0;
    color: #374151;
}

.no-result p {
    color: #6b7280;
}

/* Guide Sections */
.guide-sections {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 50px;
}

.guide-section {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f3f4f6;
}

.section-icon {
    font-size: 28px;
}

.section-header h2 {
    margin: 0;
    font-size: 22px;
    color: #1f2937;
}

/* Steps */
.steps-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.step-item {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: #f9fafb;
    border-radius: 12px;
    border-right: 4px solid #6366f1;
}

.step-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
}

.step-content h4 {
    margin: 0 0 8px 0;
    color: #1f2937;
}

.step-content p {
    margin: 0 0 10px 0;
    color: #4b5563;
    line-height: 1.6;
}

.pages-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
}

.pages-list li {
    padding: 8px 12px;
    background: white;
    border-radius: 8px;
    font-size: 14px;
}

.pages-list code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: #6366f1;
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.info-card {
    background: #f9fafb;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.info-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.info-card h4 {
    margin: 0 0 10px 0;
    color: #1f2937;
}

.info-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-card li {
    padding: 6px 0;
    font-size: 14px;
    color: #4b5563;
    border-bottom: 1px solid #e5e7eb;
}

.info-card li:last-child {
    border-bottom: none;
}

/* Tip Box */
.tip-box {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: #fef3c7;
    border-radius: 12px;
    border-right: 4px solid #f59e0b;
}

.tip-icon {
    font-size: 24px;
}

.tip-content {
    flex: 1;
    color: #92400e;
    line-height: 1.6;
}

/* Pages Structure */
.pages-structure {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.page-structure-item {
    display: grid;
    grid-template-columns: 50px 1fr 2fr;
    gap: 20px;
    padding: 20px;
    background: #f9fafb;
    border-radius: 12px;
    align-items: center;
}

.page-structure-item.main-page {
    background: linear-gradient(135deg, #eef2ff, #faf5ff);
    border: 2px solid #6366f1;
}

.page-icon {
    font-size: 32px;
    text-align: center;
}

.page-info h4 {
    margin: 0 0 5px 0;
    color: #1f2937;
}

.page-info p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

.page-code {
    background: #1f2937;
    border-radius: 10px;
    padding: 15px;
    overflow-x: auto;
}

.page-code pre {
    margin: 0;
    color: #10b981;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.feature-item {
    padding: 20px;
    background: #f9fafb;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.feature-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.feature-item h4 {
    margin: 0 0 8px 0;
    color: #1f2937;
}

.feature-item p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}

/* FAQ */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: #f9fafb;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.faq-question {
    width: 100%;
    padding: 16px 20px;
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    text-align: right;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.faq-question:hover {
    background: #f3f4f6;
}

.faq-toggle {
    font-size: 20px;
    color: #6366f1;
    transition: transform 0.3s;
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-answer p {
    padding: 0 20px 20px;
    margin: 0;
    color: #4b5563;
    line-height: 1.7;
}

.faq-answer a {
    color: #6366f1;
    text-decoration: none;
}

.faq-answer a:hover {
    text-decoration: underline;
}

/* Links Grid */
.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}

.link-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #f9fafb;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s;
    border: 1px solid #e5e7eb;
}

.link-card:hover {
    background: white;
    border-color: #6366f1;
    transform: translateX(-5px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.link-icon {
    font-size: 32px;
}

.link-info {
    flex: 1;
}

.link-info h4 {
    margin: 0 0 4px 0;
    color: #1f2937;
    font-size: 16px;
}

.link-info p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}

.link-arrow {
    font-size: 20px;
    color: #6366f1;
}

/* Responsive */
@media (max-width: 768px) {
    .guide-hero h1 {
        font-size: 28px;
    }
    
    .guide-hero p {
        font-size: 16px;
    }
    
    .page-structure-item {
        grid-template-columns: 1fr;
    }
    
    .shortcodes-grid {
        grid-template-columns: 1fr;
    }
}
</style>

<script>
jQuery(document).ready(function($) {
    
    // ═══════════════════════════════════════════════════════════
    // جستجو
    // ═══════════════════════════════════════════════════════════
    $('#guide-search-input').on('input', function() {
        var query = $(this).val().toLowerCase().trim();
        var $cards = $('.shortcode-card');
        var visibleCount = 0;
        
        $cards.each(function() {
            var name = $(this).data('name').toLowerCase();
            var code = $(this).data('code').toLowerCase();
            var category = $(this).data('category').toLowerCase();
            
            if (name.indexOf(query) !== -1 || code.indexOf(query) !== -1 || category.indexOf(query) !== -1) {
                $(this).show();
                visibleCount++;
            } else {
                $(this).hide();
            }
        });
        
        if (visibleCount === 0 && query) {
            $('#search-no-result').show();
        } else {
            $('#search-no-result').hide();
        }
        
        // ریست فیلتر
        $('.filter-btn').removeClass('active');
        $('.filter-btn[data-category="all"]').addClass('active');
    });
    
    // ═══════════════════════════════════════════════════════════
    // فیلتر دسته‌بندی
    // ═══════════════════════════════════════════════════════════
    $('.filter-btn').on('click', function() {
        var category = $(this).data('category');
        
        $('.filter-btn').removeClass('active');
        $(this).addClass('active');
        
        var $cards = $('.shortcode-card');
        var visibleCount = 0;
        
        $cards.each(function() {
            if (category === 'all' || $(this).data('category') === category) {
                $(this).fadeIn(300);
                visibleCount++;
            } else {
                $(this).fadeOut(300);
            }
        });
        
        if (visibleCount === 0) {
            $('#search-no-result').show();
        } else {
            $('#search-no-result').hide();
        }
        
        // پاک کردن جستجو
        $('#guide-search-input').val('');
    });
    
    // ═══════════════════════════════════════════════════════════
    // کپی کد
    // ═══════════════════════════════════════════════════════════
    $(document).on('click', '.copy-btn', function() {
        var code = $(this).data('code');
        var $btn = $(this);
        
        navigator.clipboard.writeText(code).then(function() {
            var originalText = $btn.text();
            $btn.text('✓').css('background', '#10b981');
            
            setTimeout(function() {
                $btn.text(originalText).css('background', '');
            }, 2000);
        });
    });
    
    // ═══════════════════════════════════════════════════════════
    // FAQ Toggle
    // ═══════════════════════════════════════════════════════════
    $('.faq-question').on('click', function() {
        var $item = $(this).closest('.faq-item');
        var isActive = $item.hasClass('active');
        
        // بستن همه
        $('.faq-item').removeClass('active');
        
        // باز کردن اگر بسته بود
        if (!isActive) {
            $item.addClass('active');
        }
    });
    
    // ═══════════════════════════════════════════════════════════
    // Smooth Scroll برای لینک‌های داخلی
    // ═══════════════════════════════════════════════════════════
    $('a[href^="#section-"]').on('click', function(e) {
        e.preventDefault();
        var target = $(this.getAttribute('href'));
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top - 100
            }, 500);
        }
    });
    
});
</script>