root/gasemi_tier
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete modern PHP tire showcase, calculator, comparison, guide and admin platform

Browse Source
This commit is contained in:
Antigravity Bot
2026-08-30 14:07:07 +03:30
parent db26990247
commit 27d35177b6
33 changed files with 4675 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+703
View File
@@ -0,0 +1,703 @@
<?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'; ?>