gasemi_tier/index.php

<?php
// index.php
require_once __DIR__ . '/includes/db.php';
$tires = TireStore::getTires();
$brands = TireStore::getBrands();
$articles = TireStore::getArticles();

$pageTitle = 'تایر قاسمی | سامانه هوشمند معرفی، بررسی و انتخاب لاستیک خودرو';
$activeNav = 'home';
require_once __DIR__ . '/includes/header.php';
?>

<!-- Hero Section -->
<section class="relative overflow-hidden pt-8 pb-16 lg:pt-14 lg:pb-24 border-b border-slate-800">
    <!-- Ambient Background Lighting -->
    <div class="absolute top-1/4 -right-20 w-96 h-96 bg-brand-600/15 rounded-full blur-3xl pointer-events-none"></div>
    <div class="absolute bottom-10 -left-20 w-96 h-96 bg-amber-600/10 rounded-full blur-3xl pointer-events-none"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
            
            <!-- Hero Text & CTA -->
            <div class="lg:col-span-7 space-y-6 text-center lg:text-right">
                <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-brand-500/10 border border-brand-500/30 text-brand-400 text-xs font-semibold">
                    <i data-lucide="award" class="w-4 h-4"></i>
                    <span>بزرگترین مرکز تخصصی تایر در پایتخت با گارانتی اصالت</span>
                </div>
                
                <h1 class="text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight leading-tight text-white">
                    انتخاب هوشمند <span class="bg-gradient-to-l from-brand-500 via-rose-500 to-amber-400 bg-clip-text text-transparent">تایر مناسب</span> خودروی شما با بهترین قیمت
                </h1>

                <p class="text-base sm:text-lg text-slate-300 font-normal leading-relaxed max-w-2xl mx-auto lg:mx-0">
                    مرجع کامل مشخصات فنی، بررسی‌های تخصصی، مقایسه ابعاد، تاریخ تولید به‌روز (DOT 2026) و تامین مستقیم انواع لاستیک‌های ایرانی و برندهای معتبر جهانی.
                </p>

                <!-- Quick Stats Badges -->
                <div class="grid grid-cols-3 gap-3 pt-2 max-w-lg mx-auto lg:mx-0">
                    <div class="p-3.5 rounded-2xl bg-slate-900/80 border border-slate-800 text-center">
                        <div class="text-xl sm:text-2xl font-black text-brand-500">+۲۵</div>
                        <div class="text-[11px] text-slate-400 font-medium">برند معتبر جهانی و ایرانی</div>
                    </div>
                    <div class="p-3.5 rounded-2xl bg-slate-900/80 border border-slate-800 text-center">
                        <div class="text-xl sm:text-2xl font-black text-amber-400">۱۰۰٪</div>
                        <div class="text-[11px] text-slate-400 font-medium">تضمین تاریخ تولید روز</div>
                    </div>
                    <div class="p-3.5 rounded-2xl bg-slate-900/80 border border-slate-800 text-center">
                        <div class="text-xl sm:text-2xl font-black text-emerald-400">۶۰ ماه</div>
                        <div class="text-[11px] text-slate-400 font-medium">گارانتی طلایی تعویض</div>
                    </div>
                </div>

                <!-- Action CTAs -->
                <div class="flex flex-wrap items-center justify-center lg:justify-start gap-4 pt-4">
                    <a href="#finder" class="px-6 py-3.5 rounded-xl bg-brand-600 hover:bg-brand-500 text-white font-bold text-sm shadow-xl shadow-brand-600/30 flex items-center gap-2 hover:-translate-y-0.5 transition-all">
                        <i data-lucide="search" class="w-4 h-4"></i>
                        جستجوی هوشمند بر اساس خودرو
                    </a>
                    <a href="calculator.php" class="px-6 py-3.5 rounded-xl bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-200 font-bold text-sm flex items-center gap-2 transition-all">
                        <i data-lucide="calculator" class="w-4 h-4"></i>
                        محاسبه‌گر تغییر سایز
                    </a>
                </div>
            </div>

            <!-- Hero Tire Showcase Visual -->
            <div class="lg:col-span-5 relative flex items-center justify-center">
                <div class="relative w-72 sm:w-88 lg:w-full max-w-sm group">
                    <div class="absolute inset-0 bg-gradient-to-tr from-brand-600 to-amber-500 rounded-full blur-2xl opacity-30 group-hover:opacity-50 transition-opacity"></div>
                    <img src="assets/images/tire_michelin_primacy.svg" alt="Tire Showcase" class="relative z-10 w-full h-auto drop-shadow-[0_20px_35px_rgba(0,0,0,0.8)] animate-pulse-slow">
                    
                    <!-- Floating Highlight Tag 1 -->
                    <div class="absolute -top-4 right-2 z-20 glass-card px-3.5 py-2 rounded-xl shadow-xl flex items-center gap-2 border border-brand-500/40">
                        <span class="w-2.5 h-2.5 rounded-full bg-emerald-400 animate-ping"></span>
                        <span class="text-xs font-bold text-white">تکنولوژی ترمز خیس A</span>
                    </div>

                    <!-- Floating Highlight Tag 2 -->
                    <div class="absolute -bottom-4 left-2 z-20 glass-card px-3.5 py-2 rounded-xl shadow-xl flex items-center gap-2 border border-slate-700">
                        <i data-lucide="sparkles" class="w-4 h-4 text-amber-400"></i>
                        <span class="text-xs font-bold text-slate-200">فوق‌العاده نرم و بی‌صدا</span>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<!-- Smart Tire Finder Filter Box -->
<section id="finder" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-8 relative z-20">
    <div class="glass-card rounded-3xl p-6 sm:p-8 shadow-2xl border border-slate-700/80 bg-slate-900/90">
        
        <div class="flex flex-col md:flex-row items-center justify-between gap-4 pb-6 border-b border-slate-800">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-brand-600/20 border border-brand-500/30 flex items-center justify-center text-brand-400">
                    <i data-lucide="filter" class="w-5 h-5"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-white">جستجوگر تخصصی و هوشمند تایر</h3>
                    <p class="text-xs text-slate-400">یافتن دقیق‌ترین سایز متناسب با خودرو یا ابعاد استاندارد</p>
                </div>
            </div>

            <!-- Switch Mode Tabs -->
            <div class="flex items-center bg-slate-950 p-1 rounded-xl border border-slate-800 text-xs font-semibold">
                <button id="tab-btn-car" onclick="switchFinderTab('car')" class="px-4 py-2 rounded-lg bg-brand-600 text-white transition-all">بر اساس مدل خودرو</button>
                <button id="tab-btn-size" onclick="switchFinderTab('size')" class="px-4 py-2 rounded-lg text-slate-400 hover:text-white transition-all">بر اساس ابعاد (سایز)</button>
            </div>
        </div>

        <!-- Mode 1: By Car Model -->
        <div id="finder-car-tab" class="pt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 items-end">
            <div>
                <label class="block text-xs font-bold text-slate-300 mb-2">۱. گروه خودروساز</label>
                <select id="filter-car-brand" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-brand-500">
                    <option value="">همه خودروسازان</option>
                    <option value="ایران خودرو">ایران خودرو (پژو، دنا، تارا، سمند، رانا)</option>
                    <option value="سایپا">سایپا (پراید، تیبا، شاهین، کوئیک)</option>
                    <option value="کره ای">هیوندای / کیا (سوناتا، اپتیما، آزرا، توسان)</option>
                    <option value="ژاپنی">تویوتا / نیسان (کمری، هایلوکس، پرادو)</option>
                    <option value="چینی">مدیران خودرو / بهمن (تیگو، دیگنیتی، فیدلیتی، هایما)</option>
                </select>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-300 mb-2">۲. خودروی شما</label>
                <input type="text" id="filter-car-name" placeholder="مثلاً: پژو ۲۰۶، دنا پلاس، کمری..." class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-brand-500">
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-300 mb-2">۳. فصل کاربری</label>
                <select id="filter-car-season" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-brand-500">
                    <option value="">همه فصول</option>
                    <option value="four_season">چهار فصل (همه‌کاره)</option>
                    <option value="summer">تابستانه و اسپرت</option>
                    <option value="winter">زمستانه</option>
                </select>
            </div>

            <div>
                <button onclick="applyFilters()" class="w-full py-2.5 px-4 rounded-xl bg-brand-600 hover:bg-brand-500 text-white font-bold text-sm shadow-lg shadow-brand-600/30 flex items-center justify-center gap-2 transition-all">
                    <i data-lucide="search" class="w-4 h-4"></i>
                    نمایش تایرهای سازگار
                </button>
            </div>
        </div>

        <!-- Mode 2: By Tire Dimensions (Hidden by default) -->
        <div id="finder-size-tab" class="hidden pt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 items-end">
            <div>
                <label class="block text-xs font-bold text-slate-300 mb-2">پهنای تایر (عرض - mm)</label>
                <select id="filter-size-width" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-brand-500">
                    <option value="">همه پهنا‌ها</option>
                    <option value="165">165</option>
                    <option value="175">175</option>
                    <option value="185">185</option>
                    <option value="195">195</option>
                    <option value="205">205</option>
                    <option value="215">215</option>
                    <option value="225">225</option>
                    <option value="235">235</option>
                    <option value="265">265</option>
                </select>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-300 mb-2">نسبت منظر (فاق - %)</label>
                <select id="filter-size-aspect" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-brand-500">
                    <option value="">همه فاق‌ها</option>
                    <option value="45">45</option>
                    <option value="50">50</option>
                    <option value="55">55</option>
                    <option value="60">60</option>
                    <option value="65">65</option>
                    <option value="70">70</option>
                </select>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-300 mb-2">قطر رینگ (Rim - اینچ)</label>
                <select id="filter-size-rim" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-brand-500">
                    <option value="">همه رینگ‌ها</option>
                    <option value="13">رینگ ۱۳</option>
                    <option value="14">رینگ ۱۴</option>
                    <option value="15">رینگ ۱۵</option>
                    <option value="16">رینگ ۱۶</option>
                    <option value="17">رینگ ۱۷</option>
                    <option value="18">رینگ ۱۸</option>
                </select>
            </div>

            <div>
                <button onclick="applyFilters()" class="w-full py-2.5 px-4 rounded-xl bg-brand-600 hover:bg-brand-500 text-white font-bold text-sm shadow-lg shadow-brand-600/30 flex items-center justify-center gap-2 transition-all">
                    <i data-lucide="check" class="w-4 h-4"></i>
                    اعمال فیلتر ابعاد
                </button>
            </div>
        </div>

    </div>
</section>

<!-- Main Products Catalog Section -->
<section id="catalog" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    
    <div class="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8">
        <div>
            <div class="inline-flex items-center gap-2 text-xs font-bold text-brand-400 uppercase tracking-widest mb-1">
                <i data-lucide="layers" class="w-4 h-4"></i>
                کاتالوگ تخصصی
            </div>
            <h2 class="text-2xl sm:text-3xl font-black text-white">انواع تایرهای سواری، اسپرت و شاسی‌بلند</h2>
        </div>

        <!-- Category Filter Pills -->
        <div class="flex flex-wrap items-center gap-2" id="quick-category-pills">
            <button onclick="filterCategory('')" class="cat-pill active px-4 py-2 rounded-xl text-xs font-bold bg-brand-600 text-white border border-brand-500/50 shadow transition-all">همه محصولات</button>
            <button onclick="filterCategory('سواری')" class="cat-pill px-4 py-2 rounded-xl text-xs font-bold bg-slate-900 hover:bg-slate-800 text-slate-300 border border-slate-800 transition-all">سواری شهری</button>
            <button onclick="filterCategory('اسپرت')" class="cat-pill px-4 py-2 rounded-xl text-xs font-bold bg-slate-900 hover:bg-slate-800 text-slate-300 border border-slate-800 transition-all">اسپرت و ریسینگ</button>
            <button onclick="filterCategory('SUV')" class="cat-pill px-4 py-2 rounded-xl text-xs font-bold bg-slate-900 hover:bg-slate-800 text-slate-300 border border-slate-800 transition-all">شاسی بلند و آفرود (4x4)</button>
            <button onclick="filterCategory('پرمیوم')" class="cat-pill px-4 py-2 rounded-xl text-xs font-bold bg-slate-900 hover:bg-slate-800 text-slate-300 border border-slate-800 transition-all">لوکس و وارداتی</button>
        </div>
    </div>

    <!-- Live Products Grid -->
    <div id="tires-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <?php foreach ($tires as $tire): ?>
            <div class="tire-card group rounded-3xl bg-slate-900/90 border border-slate-800 hover:border-brand-500/50 p-6 flex flex-col justify-between transition-all duration-300 hover:shadow-2xl hover:shadow-brand-950/40 hover:-translate-y-1"
                 data-brand="<?= htmlspecialchars($tire['brand']) ?>"
                 data-rim="<?= $tire['rim'] ?>"
                 data-category="<?= htmlspecialchars($tire['category']) ?>"
                 data-season="<?= $tire['season'] ?>"
                 data-name="<?= htmlspecialchars($tire['name']) ?>"
                 data-vehicles="<?= htmlspecialchars(implode(',', $tire['vehicles'] ?? [])) ?>">
                
                <div>
                    <!-- Top Badges -->
                    <div class="flex items-center justify-between gap-2 mb-4">
                        <span class="px-2.5 py-1 rounded-lg bg-slate-800 text-slate-300 text-xs font-bold border border-slate-700 flex items-center gap-1.5">
                            <i data-lucide="globe" class="w-3.5 h-3.5 text-brand-400"></i>
                            <?= htmlspecialchars($tire['country']) ?>
                        </span>
                        
                        <div class="flex items-center gap-1.5">
                            <?php if (!empty($tire['is_best_seller'])): ?>
                                <span class="px-2.5 py-1 rounded-lg bg-amber-500/20 text-amber-400 border border-amber-500/30 text-[11px] font-bold">پرفروش</span>
                            <?php endif; ?>
                            <span class="px-2.5 py-1 rounded-lg bg-brand-500/20 text-brand-400 border border-brand-500/30 text-xs font-bold tracking-wider"><?= htmlspecialchars($tire['size_str']) ?></span>
                        </div>
                    </div>

                    <!-- Tire Graphic -->
                    <div class="relative py-4 flex items-center justify-center">
                        <img src="<?= htmlspecialchars($tire['image']) ?>" alt="<?= htmlspecialchars($tire['name']) ?>" class="w-44 h-44 object-contain group-hover:scale-105 transition-transform duration-500">
                    </div>

                    <!-- Title & Brand -->
                    <div class="text-right mt-2">
                        <div class="text-xs text-brand-400 font-bold mb-1"><?= htmlspecialchars($tire['brand']) ?></div>
                        <h3 class="text-lg font-black text-white group-hover:text-brand-400 transition-colors line-clamp-1"><?= htmlspecialchars($tire['name']) ?></h3>
                        <p class="text-xs text-slate-400 mt-1 line-clamp-2 leading-relaxed"><?= htmlspecialchars($tire['description']) ?></p>
                    </div>

                    <!-- EU Specs Label Chips -->
                    <div class="grid grid-cols-3 gap-2 mt-4 pt-4 border-t border-slate-800 text-[11px]">
                        <div class="p-2 rounded-xl bg-slate-950 border border-slate-800/80 text-center">
                            <span class="block text-slate-500">چسبندگی</span>
                            <span class="font-bold text-emerald-400">گرید <?= $tire['wet_grip'] ?></span>
                        </div>
                        <div class="p-2 rounded-xl bg-slate-950 border border-slate-800/80 text-center">
                            <span class="block text-slate-500">مصرف سوخت</span>
                            <span class="font-bold text-amber-400">گرید <?= $tire['fuel_efficiency'] ?></span>
                        </div>
                        <div class="p-2 rounded-xl bg-slate-950 border border-slate-800/80 text-center">
                            <span class="block text-slate-500">صدای داخل</span>
                            <span class="font-bold text-cyan-400"><?= $tire['noise_level'] ?></span>
                        </div>
                    </div>

                    <!-- Compatible Vehicles Preview -->
                    <div class="mt-3 flex flex-wrap gap-1">
                        <?php foreach (array_slice($tire['vehicles'] ?? [], 0, 3) as $v): ?>
                            <span class="px-2 py-0.5 rounded-md bg-slate-800/70 text-slate-400 text-[10px]"><?= htmlspecialchars($v) ?></span>
                        <?php endforeach; ?>
                        <?php if (count($tire['vehicles'] ?? []) > 3): ?>
                            <span class="px-1.5 py-0.5 rounded-md bg-slate-800/70 text-slate-500 text-[10px]">+<?= count($tire['vehicles']) - 3 ?> دیگر</span>
                        <?php endif; ?>
                    </div>
                </div>

                <!-- Footer Price & CTA -->
                <div class="mt-5 pt-4 border-t border-slate-800/80 flex items-center justify-between gap-3">
                    <div>
                        <span class="text-[10px] text-slate-500 block">قیمت مصوب (حلقه)</span>
                        <div class="text-base font-black text-white">
                            <?= number_format($tire['price']) ?> <span class="text-xs text-brand-400 font-normal">تومان</span>
                        </div>
                    </div>

                    <div class="flex items-center gap-2">
                        <!-- Compare Button -->
                        <button onclick="toggleCompare('<?= $tire['id'] ?>')" class="p-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-300 hover:text-brand-400 transition-all" title="افزودن به مقایسه">
                            <i data-lucide="git-compare" class="w-4 h-4"></i>
                        </button>
                        
                        <!-- Detail Modal Trigger -->
                        <button onclick="openTireModal('<?= $tire['id'] ?>')" class="px-3.5 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-500 text-white font-bold text-xs shadow-md shadow-brand-600/20 flex items-center gap-1.5 transition-all">
                            <span>مشخصات فنی</span>
                            <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
                        </button>
                    </div>
                </div>

            </div>
        <?php endforeach; ?>
    </div>

    <!-- Empty State (Hidden) -->
    <div id="no-tires-found" class="hidden text-center py-16 bg-slate-900/50 rounded-3xl border border-slate-800">
        <i data-lucide="help-circle" class="w-12 h-12 text-slate-600 mx-auto mb-3"></i>
        <h3 class="text-lg font-bold text-white">تایری با این مشخصات یافت نشد!</h3>
        <p class="text-xs text-slate-400 mt-1 mb-4">می‌توانید فیلترها را تغییر داده یا مستقیماً از کارشناسان ما مشاوره تلفنی بگیرید.</p>
        <button onclick="resetFilters()" class="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white rounded-xl text-xs font-semibold">پاک کردن فیلترها</button>
    </div>

</section>

<!-- Brand Showcase Carousel / Grid -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 border-t border-slate-800">
    <div class="text-center max-w-2xl mx-auto mb-10">
        <h3 class="text-xs font-bold text-brand-400 uppercase tracking-widest mb-1">تامین مستقیم و رسمی</h3>
        <h2 class="text-2xl sm:text-3xl font-black text-white">برترین برندهای تایر ایرانی و بین‌المللی</h2>
        <p class="text-xs text-slate-400 mt-2">کلیه محصولات با تضمین سلامت فیزیکی، بیمه‌نامه معتبر و برگ گارانتی کارخانه عرضه می‌گردد.</p>
    </div>

    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
        <?php foreach ($brands as $b): ?>
            <div class="glass-card p-5 rounded-2xl border border-slate-800 hover:border-brand-500/40 transition-all text-center flex flex-col items-center justify-center group">
                <img src="<?= htmlspecialchars($b['logo']) ?>" alt="<?= htmlspecialchars($b['name']) ?>" class="h-16 w-auto object-contain mb-3 group-hover:scale-105 transition-transform">
                <h4 class="text-sm font-black text-white"><?= htmlspecialchars($b['name']) ?></h4>
                <span class="text-[11px] text-slate-400 mt-1"><?= htmlspecialchars($b['desc']) ?></span>
            </div>
        <?php endforeach; ?>
    </div>
</section>

<!-- Why Choose Us / Features -->
<section class="bg-slate-900/60 border-y border-slate-800 py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="text-center max-w-2xl mx-auto mb-12">
            <h3 class="text-xs font-bold text-brand-400 uppercase tracking-widest mb-1">مزیت‌های رقابتی</h3>
            <h2 class="text-2xl sm:text-3xl font-black text-white">چرا خرید و مشاوره از تایر قاسمی؟</h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            
            <div class="glass-card p-6 rounded-2xl border border-slate-800 space-y-3">
                <div class="w-12 h-12 rounded-xl bg-brand-600/20 border border-brand-500/30 flex items-center justify-center text-brand-400">
                    <i data-lucide="calendar" class="w-6 h-6"></i>
                </div>
                <h4 class="text-base font-bold text-white">تاریخ تولید کاملاً به‌روز (DOT)</h4>
                <p class="text-xs text-slate-400 leading-relaxed">
                    تمامی تایرهای موجود در انبار دارای کد ساخت سال جاری هستند و هرگز تایر انبارخورده یا تاریخ گذشته ارسال نمی‌شود.
                </p>
            </div>

            <div class="glass-card p-6 rounded-2xl border border-slate-800 space-y-3">
                <div class="w-12 h-12 rounded-xl bg-amber-500/20 border border-amber-500/30 flex items-center justify-center text-amber-400">
                    <i data-lucide="wrench" class="w-6 h-6"></i>
                </div>
                <h4 class="text-base font-bold text-white">نصب و بالانس لیزری در شعب</h4>
                <p class="text-xs text-slate-400 leading-relaxed">
                    مجهز به مدرن‌ترین دستگاه‌های دیاگ و بالانس دیجیتال سه بعدی جهت تضمین نرمی و جلوگیری از هرگونه لرزش فرمان.
                </p>
            </div>

            <div class="glass-card p-6 rounded-2xl border border-slate-800 space-y-3">
                <div class="w-12 h-12 rounded-xl bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center text-emerald-400">
                    <i data-lucide="shield-check" class="w-6 h-6"></i>
                </div>
                <h4 class="text-base font-bold text-white">گارانتی تعویض و اصالت شرکتی</h4>
                <p class="text-xs text-slate-400 leading-relaxed">
                    کلیه تایرها با ضمانت‌نامه رسمی ۳۶ الی ۶۰ ماهه شرکتی و خدمات پس از فروش سراسری تقدیم می‌گردند.
                </p>
            </div>

            <div class="glass-card p-6 rounded-2xl border border-slate-800 space-y-3">
                <div class="w-12 h-12 rounded-xl bg-blue-500/20 border border-blue-500/30 flex items-center justify-center text-blue-400">
                    <i data-lucide="truck" class="w-6 h-6"></i>
                </div>
                <h4 class="text-base font-bold text-white">ارسال سریع و مطمئن</h4>
                <p class="text-xs text-slate-400 leading-relaxed">
                    تحویل ۲ ساعته در شهر تهران و ارسال سریع با باربری اختصاصی به کلیه شهرستان‌ها با بسته‌بندی مقاوم.
                </p>
            </div>

        </div>

    </div>
</section>

<!-- Consultation & Inquiry Section -->
<section id="consultation" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    <div class="glass-card rounded-3xl p-8 sm:p-12 border border-brand-500/30 bg-gradient-to-br from-slate-900 via-slate-900 to-brand-950/40 relative overflow-hidden">
        
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
            
            <div class="lg:col-span-6 space-y-4">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-500/20 text-brand-400 text-xs font-bold">
                    <i data-lucide="phone-call" class="w-3.5 h-3.5"></i>
                    پاسخگویی سریع کمتر از ۱۵ دقیقه
                </div>
                <h3 class="text-2xl sm:text-3xl font-black text-white leading-tight">در انتخاب سایز یا برند مناسب مردد هستید؟</h3>
                <p class="text-sm text-slate-300 leading-relaxed">
                    شماره تماس و مدل خودروی خود را وارد کنید تا کارشناسان فنی تایر قاسمی بهترین گزینه‌های متناسب با بودجه و سبک رانندگی شما را معرفی کنند.
                </p>
                <div class="flex items-center gap-4 text-xs text-slate-400 pt-2">
                    <span class="flex items-center gap-1"><i data-lucide="check-circle" class="w-4 h-4 text-emerald-400"></i> مشاوره کاملاً رایگان</span>
                    <span class="flex items-center gap-1"><i data-lucide="check-circle" class="w-4 h-4 text-emerald-400"></i> بدون نیاز به خرید حتمی</span>
                </div>
            </div>

            <div class="lg:col-span-6">
                <form id="consultation-form" onsubmit="submitConsultationForm(event)" class="bg-slate-950/90 p-6 rounded-2xl border border-slate-800 space-y-4">
                    <div id="consultation-alert" class="hidden p-3 rounded-xl text-xs font-bold"></div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-bold text-slate-300 mb-1.5">نام و نام خانوادگی *</label>
                            <input type="text" name="name" required placeholder="مثلاً: محمد کریمی" class="w-full bg-slate-900 border border-slate-800 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-brand-500">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-slate-300 mb-1.5">شماره تماس همراه *</label>
                            <input type="tel" name="phone" required placeholder="0912..." dir="ltr" class="w-full bg-slate-900 border border-slate-800 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-brand-500 text-right">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-300 mb-1.5">مدل خودرو و سایز فعلی</label>
                        <input type="text" name="car" placeholder="مثلاً: دنا پلاس، رینگ ۱۶ فابریک" class="w-full bg-slate-900 border border-slate-800 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-brand-500">
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-300 mb-1.5">توضیحات یا اولویت شما (اختیاری)</label>
                        <textarea name="message" rows="2" placeholder="نرمی، دوام بالا، سواری کم‌صدا..." class="w-full bg-slate-900 border border-slate-800 rounded-xl px-3.5 py-2 text-sm text-white focus:outline-none focus:border-brand-500"></textarea>
                    </div>

                    <button type="submit" id="consultation-submit-btn" class="w-full py-3 rounded-xl bg-gradient-to-r from-brand-600 to-rose-600 hover:from-brand-500 hover:to-rose-500 text-white font-bold text-sm shadow-lg shadow-brand-600/30 flex items-center justify-center gap-2 transition-all">
                        <i data-lucide="send" class="w-4 h-4"></i>
                        ثبت درخواست استعلام و تماس کارشناس
                    </button>
                </form>
            </div>

        </div>

    </div>
</section>

<!-- Tire Detail Modal -->
<div id="tire-modal" class="fixed inset-0 z-50 bg-black/80 backdrop-blur-md hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-700 rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto p-6 sm:p-8 shadow-2xl relative">
        <button onclick="closeTireModal()" class="absolute top-6 left-6 p-2 rounded-xl bg-slate-800 text-slate-400 hover:text-white transition-colors">
            <i data-lucide="x" class="w-5 h-5"></i>
        </button>

        <div id="modal-content" class="space-y-6">
            <!-- Injected via JavaScript -->
        </div>
    </div>
</div>

<script>
    // Tab switching in smart finder
    function switchFinderTab(tab) {
        const carTab = document.getElementById('finder-car-tab');
        const sizeTab = document.getElementById('finder-size-tab');
        const btnCar = document.getElementById('tab-btn-car');
        const btnSize = document.getElementById('tab-btn-size');

        if (tab === 'car') {
            carTab.classList.remove('hidden');
            sizeTab.classList.add('hidden');
            btnCar.className = 'px-4 py-2 rounded-lg bg-brand-600 text-white transition-all';
            btnSize.className = 'px-4 py-2 rounded-lg text-slate-400 hover:text-white transition-all';
        } else {
            carTab.classList.add('hidden');
            sizeTab.classList.remove('hidden');
            btnSize.className = 'px-4 py-2 rounded-lg bg-brand-600 text-white transition-all';
            btnCar.className = 'px-4 py-2 rounded-lg text-slate-400 hover:text-white transition-all';
        }
    }

    // Category pills filter
    function filterCategory(cat) {
        document.querySelectorAll('#quick-category-pills .cat-pill').forEach(btn => {
            btn.className = 'cat-pill px-4 py-2 rounded-xl text-xs font-bold bg-slate-900 hover:bg-slate-800 text-slate-300 border border-slate-800 transition-all';
        });
        event.target.className = 'cat-pill active px-4 py-2 rounded-xl text-xs font-bold bg-brand-600 text-white border border-brand-500/50 shadow transition-all';

        const cards = document.querySelectorAll('.tire-card');
        let count = 0;
        cards.forEach(card => {
            const cardCat = card.getAttribute('data-category') || '';
            if (!cat || cardCat.includes(cat)) {
                card.classList.remove('hidden');
                count++;
            } else {
                card.classList.add('hidden');
            }
        });
        toggleEmptyState(count);
    }

    // Apply combined filters
    function applyFilters() {
        const carName = document.getElementById('filter-car-name').value.trim().toLowerCase();
        const season = document.getElementById('filter-car-season').value;
        const width = document.getElementById('filter-size-width').value;
        const aspect = document.getElementById('filter-size-aspect').value;
        const rim = document.getElementById('filter-size-rim').value;

        const cards = document.querySelectorAll('.tire-card');
        let count = 0;

        cards.forEach(card => {
            const name = card.getAttribute('data-name').toLowerCase();
            const vehicles = card.getAttribute('data-vehicles').toLowerCase();
            const cardRim = card.getAttribute('data-rim');
            const cardSeason = card.getAttribute('data-season');

            let match = true;

            if (carName && !vehicles.includes(carName) && !name.includes(carName)) {
                match = false;
            }
            if (season && cardSeason !== season) {
                match = false;
            }
            if (rim && cardRim !== rim) {
                match = false;
            }

            if (match) {
                card.classList.remove('hidden');
                count++;
            } else {
                card.classList.add('hidden');
            }
        });

        toggleEmptyState(count);
        document.getElementById('catalog').scrollIntoView({ behavior: 'smooth' });
    }

    function resetFilters() {
        document.getElementById('filter-car-name').value = '';
        document.getElementById('filter-car-season').value = '';
        document.getElementById('filter-size-rim').value = '';
        document.querySelectorAll('.tire-card').forEach(c => c.classList.remove('hidden'));
        toggleEmptyState(1);
    }

    function toggleEmptyState(count) {
        const empty = document.getElementById('no-tires-found');
        if (count === 0) {
            empty.classList.remove('hidden');
        } else {
            empty.classList.add('hidden');
        }
    }

    // Toggle Compare item
    function toggleCompare(tireId) {
        if (CompareStore.add(tireId)) {
            alert('تایر با موفقیت به لیست مقایسه اضافه شد.');
        }
    }

    // Open detailed modal
    async function openTireModal(id) {
        const modal = document.getElementById('tire-modal');
        const content = document.getElementById('modal-content');
        content.innerHTML = '<div class="text-center py-12 text-slate-400"><i data-lucide="loader-2" class="w-8 h-8 animate-spin mx-auto mb-2"></i> در حال بارگذاری مشخصات...</div>';
        lucide.createIcons();
        modal.classList.remove('hidden');

        try {
            const res = await fetch(`api.php?action=get_tire&id=${id}`);
            const data = await res.json();
            if (data.status === 'success') {
                const t = data.data;
                content.innerHTML = `
                    <div class="flex flex-col sm:flex-row items-center gap-6 pb-6 border-b border-slate-800">
                        <img src="${t.image}" alt="${t.name}" class="w-40 h-40 object-contain">
                        <div class="text-right flex-1">
                            <span class="text-xs font-bold text-brand-400">${t.brand} - ساخت ${t.country}</span>
                            <h2 class="text-xl font-black text-white mt-1">${t.name}</h2>
                            <p class="text-xs text-slate-300 mt-2 leading-relaxed">${t.description}</p>
                            <div class="mt-3 text-lg font-black text-white">
                                ${Number(t.price).toLocaleString('fa-IR')} <span class="text-xs text-brand-400 font-normal">تومان</span>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs">
                        <div class="p-3 rounded-xl bg-slate-950 border border-slate-800">
                            <span class="text-slate-400 block">سایز تایر</span>
                            <span class="font-bold text-white text-sm mt-0.5 block">${t.size_str}</span>
                        </div>
                        <div class="p-3 rounded-xl bg-slate-950 border border-slate-800">
                            <span class="text-slate-400 block">شاخص سرعت</span>
                            <span class="font-bold text-white text-sm mt-0.5 block">${t.speed_index}</span>
                        </div>
                        <div class="p-3 rounded-xl bg-slate-950 border border-slate-800">
                            <span class="text-slate-400 block">شاخص تحمل وزن</span>
                            <span class="font-bold text-white text-sm mt-0.5 block">${t.load_index}</span>
                        </div>
                        <div class="p-3 rounded-xl bg-slate-950 border border-slate-800">
                            <span class="text-slate-400 block">مدت گارانتی</span>
                            <span class="font-bold text-emerald-400 text-sm mt-0.5 block">${t.warranty_months} ماه شرکتی</span>
                        </div>
                    </div>

                    <div>
                        <h4 class="text-sm font-bold text-white mb-2">ویژگی‌های برجسته:</h4>
                        <ul class="space-y-1.5 text-xs text-slate-300">
                            ${(t.features || []).map(f => `<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400 shrink-0"></i> ${f}</li>`).join('')}
                        </ul>
                    </div>

                    <div>
                        <h4 class="text-sm font-bold text-white mb-2">خودروهای سازگار:</h4>
                        <div class="flex flex-wrap gap-1.5">
                            ${(t.vehicles || []).map(v => `<span class="px-2.5 py-1 rounded-lg bg-slate-800 text-slate-300 text-xs font-medium border border-slate-700">${v}</span>`).join('')}
                        </div>
                    </div>

                    <div class="pt-4 border-t border-slate-800 flex items-center justify-between gap-4">
                        <button onclick="toggleCompare('${t.id}')" class="px-4 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-bold flex items-center gap-2">
                            <i data-lucide="git-compare" class="w-4 h-4"></i> افزودن به مقایسه
                        </button>
                        <a href="tel:02188889900" class="px-6 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-500 text-white text-xs font-bold shadow-lg flex items-center gap-2">
                            <i data-lucide="phone" class="w-4 h-4"></i> سفارش و استعلام فوری
                        </a>
                    </div>
                `;
                lucide.createIcons();
            }
        } catch(e) {
            content.innerHTML = '<div class="text-center py-8 text-rose-400">خطا در بارگذاری اطلاعات تایر.</div>';
        }
    }

    function closeTireModal() {
        document.getElementById('tire-modal').classList.add('hidden');
    }

    // Submit consultation form
    async function submitConsultationForm(e) {
        e.preventDefault();
        const form = e.target;
        const btn = document.getElementById('consultation-submit-btn');
        const alertBox = document.getElementById('consultation-alert');
        
        btn.disabled = true;
        btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> در حال ثبت...';
        lucide.createIcons();

        const formData = new FormData(form);
        formData.append('action', 'submit_consultation');

        try {
            const res = await fetch('api.php', {
                method: 'POST',
                body: formData
            });
            const data = await res.json();
            
            alertBox.classList.remove('hidden');
            if (data.status === 'success') {
                alertBox.className = 'p-3 rounded-xl text-xs font-bold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30';
                alertBox.innerText = data.message;
                form.reset();
            } else {
                alertBox.className = 'p-3 rounded-xl text-xs font-bold bg-rose-500/20 text-rose-300 border border-rose-500/30';
                alertBox.innerText = data.message;
            }
        } catch(err) {
            alertBox.classList.remove('hidden');
            alertBox.className = 'p-3 rounded-xl text-xs font-bold bg-rose-500/20 text-rose-300 border border-rose-500/30';
            alertBox.innerText = 'خطای اتصال به سرور. لطفاً با شماره تلفن تماس بگیرید.';
        } finally {
            btn.disabled = false;
            btn.innerHTML = '<i data-lucide="send" class="w-4 h-4"></i> ثبت درخواست استعلام و تماس کارشناس';
            lucide.createIcons();
        }
    }
</script>

<?php require_once __DIR__ . '/includes/footer.php'; ?>