gasemi_tier/guide.php

<?php
// guide.php
require_once __DIR__ . '/includes/db.php';
$pressureGuide = TireStore::getPressureGuide();
$articles = TireStore::getArticles();

$pageTitle = 'راهنمای جامع، جدول تنظیم باد و نگهداری تایر | تایر قاسمی';
$activeNav = 'guide';
require_once __DIR__ . '/includes/header.php';
?>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-16">
    
    <!-- Title Header -->
    <div class="text-center max-w-3xl mx-auto">
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-600/20 text-brand-400 text-xs font-bold mb-3">
            <i data-lucide="book-open" class="w-4 h-4"></i>
            مرکز آموزش و راهنمای فنی
        </div>
        <h1 class="text-3xl sm:text-4xl font-black text-white">دانشنامه و راهنمای جامع تایر خودرو</h1>
        <p class="text-sm text-slate-400 mt-2">
            آموزش خواندن کدهای روی لاستیک، جدول تنظیم باد استاندارد انواع خودروها و عیب‌یابی علائم ساییدگی و خرابی تایر.
        </p>
    </div>

    <!-- 1. Interactive Tire Sidewall Decoder -->
    <div class="glass-card rounded-3xl p-6 sm:p-10 border border-slate-800 space-y-6">
        <div class="flex items-center gap-3 pb-4 border-b border-slate-800">
            <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="info" class="w-5 h-5"></i>
            </div>
            <div>
                <h2 class="text-lg font-black text-white">راهنمای رمزگشایی و خواندن مشخصات روی دیواره تایر</h2>
                <p class="text-xs text-slate-400">روی هر بخش از کد زیر کلیک کنید تا مفهوم فنی آن را مشاهده کنید:</p>
            </div>
        </div>

        <!-- Interactive Code Blocks -->
        <div class="flex flex-wrap items-center justify-center gap-2 sm:gap-3 py-4 text-center">
            <button onclick="showDecoder('width')" class="dec-btn px-4 py-3 rounded-2xl bg-slate-900 border-2 border-brand-500 text-white font-black text-xl hover:scale-105 transition-all shadow-lg shadow-brand-900/30">
                205
                <span class="block text-[10px] text-brand-400 font-normal mt-1">عرض (mm)</span>
            </button>
            <span class="text-2xl font-black text-slate-600">/</span>
            <button onclick="showDecoder('aspect')" class="dec-btn px-4 py-3 rounded-2xl bg-slate-900 border-2 border-slate-700 hover:border-amber-500 text-white font-black text-xl hover:scale-105 transition-all">
                55
                <span class="block text-[10px] text-amber-400 font-normal mt-1">نسبت فاق (%)</span>
            </button>
            <button onclick="showDecoder('structure')" class="dec-btn px-4 py-3 rounded-2xl bg-slate-900 border-2 border-slate-700 hover:border-emerald-500 text-white font-black text-xl hover:scale-105 transition-all">
                R
                <span class="block text-[10px] text-emerald-400 font-normal mt-1">ساختار رادیال</span>
            </button>
            <button onclick="showDecoder('rim')" class="dec-btn px-4 py-3 rounded-2xl bg-slate-900 border-2 border-slate-700 hover:border-blue-500 text-white font-black text-xl hover:scale-105 transition-all">
                16
                <span class="block text-[10px] text-blue-400 font-normal mt-1">قطر رینگ (اینچ)</span>
            </button>
            <button onclick="showDecoder('load')" class="dec-btn px-4 py-3 rounded-2xl bg-slate-900 border-2 border-slate-700 hover:border-purple-500 text-white font-black text-xl hover:scale-105 transition-all">
                91
                <span class="block text-[10px] text-purple-400 font-normal mt-1">شاخص بار</span>
            </button>
            <button onclick="showDecoder('speed')" class="dec-btn px-4 py-3 rounded-2xl bg-slate-900 border-2 border-slate-700 hover:border-rose-500 text-white font-black text-xl hover:scale-105 transition-all">
                V
                <span class="block text-[10px] text-rose-400 font-normal mt-1">شاخص سرعت</span>
            </button>
            <button onclick="showDecoder('dot')" class="dec-btn px-4 py-3 rounded-2xl bg-slate-900 border-2 border-slate-700 hover:border-cyan-500 text-white font-black text-xl hover:scale-105 transition-all">
                DOT 2626
                <span class="block text-[10px] text-cyan-400 font-normal mt-1">تاریخ تولید</span>
            </button>
        </div>

        <!-- Decoder Explanation Box -->
        <div id="decoder-info-box" class="p-5 rounded-2xl bg-slate-950 border border-slate-800 text-sm">
            <h3 id="dec-title" class="font-bold text-brand-400 text-base mb-1">عدد ۲۰۵: پهنای مقطع تایر (Section Width)</h3>
            <p id="dec-desc" class="text-xs text-slate-300 leading-relaxed">
                این عدد نشان‌دهنده عرض لاستیک به میلی‌متر از خارجی‌ترین لبه دیواره تا لبه مخالف آن در حالت باد شده استاندارد است. افزایش پهنا باعث چسبندگی بهتر و کوتاه‌تر شدن خط ترمز می‌شود.
            </p>
        </div>
    </div>

    <!-- 2. Searchable Tire Pressure Table -->
    <div class="glass-card rounded-3xl p-6 sm:p-10 border border-slate-800 space-y-6">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-4 border-b border-slate-800">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-amber-500/20 border border-amber-500/30 flex items-center justify-center text-amber-400">
                    <i data-lucide="gauge" class="w-5 h-5"></i>
                </div>
                <div>
                    <h2 class="text-lg font-black text-white">جدول میزان باد استاندارد انواع خودروها (PSI)</h2>
                    <p class="text-xs text-slate-400">تنظیم باد در حالت سرد (حداقل ۲ ساعت پس از توقف خودرو)</p>
                </div>
            </div>

            <!-- Search in table -->
            <div class="relative max-w-xs w-full">
                <i data-lucide="search" class="w-4 h-4 text-slate-400 absolute right-3 top-3"></i>
                <input type="text" id="pressure-search" oninput="filterPressureTable()" placeholder="جستجوی مدل خودرو..." class="w-full bg-slate-950 border border-slate-800 rounded-xl pr-9 pl-3.5 py-2 text-xs text-white focus:outline-none focus:border-amber-500">
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-right text-xs" id="pressure-table">
                <thead>
                    <tr class="border-b border-slate-800 text-slate-400">
                        <th class="p-3.5 font-bold">مدل خودرو</th>
                        <th class="p-3.5 font-bold text-amber-400">فشار چرخ جلو (PSI)</th>
                        <th class="p-3.5 font-bold text-amber-400">فشار چرخ عقب (PSI)</th>
                        <th class="p-3.5 font-bold text-slate-300">سایز تایر استاندارد</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/60 text-slate-200">
                    <?php foreach ($pressureGuide as $pg): ?>
                        <tr class="pressure-row hover:bg-slate-800/30 transition-colors">
                            <td class="p-3.5 font-bold text-white"><?= htmlspecialchars($pg['vehicle']) ?></td>
                            <td class="p-3.5 font-bold text-amber-400"><?= htmlspecialchars($pg['front_psi']) ?> PSI</td>
                            <td class="p-3.5 font-bold text-amber-400"><?= htmlspecialchars($pg['rear_psi']) ?> PSI</td>
                            <td class="p-3.5 text-slate-400"><?= htmlspecialchars($pg['standard_tire']) ?></td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 3. Tire Wear Diagnostic Guide -->
    <div class="glass-card rounded-3xl p-6 sm:p-10 border border-slate-800 space-y-6">
        <div class="flex items-center gap-3 pb-4 border-b border-slate-800">
            <div class="w-10 h-10 rounded-xl bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center text-emerald-400">
                <i data-lucide="activity" class="w-5 h-5"></i>
            </div>
            <div>
                <h2 class="text-lg font-black text-white">راهنمای عیب‌یابی خودرو از روی الگوی ساییدگی لاستیک</h2>
                <p class="text-xs text-slate-400">شکل سایش آج تایر رازهای مهمی از وضعیت جلوبندی و سیستم تعلیق را فاش می‌کند:</p>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            
            <div class="p-5 rounded-2xl bg-slate-950 border border-slate-800 space-y-2">
                <span class="px-2.5 py-1 rounded bg-rose-500/20 text-rose-400 text-xs font-bold inline-block">ساییدگی دو لبه خارجی</span>
                <h4 class="text-sm font-bold text-white">علت: کم‌بادی مزمن (Under-Inflation)</h4>
                <p class="text-xs text-slate-400 leading-relaxed">
                    وقتی باد تایر کم است، وزن خودرو به دو لبه کناری وارد شده و مرکز لاستیک بالا می‌آید. این حالت مصرف بنزین را شدیداً افزایش می‌دهد.
                </p>
            </div>

            <div class="p-5 rounded-2xl bg-slate-950 border border-slate-800 space-y-2">
                <span class="px-2.5 py-1 rounded bg-amber-500/20 text-amber-400 text-xs font-bold inline-block">ساییدگی فقط خط وسط</span>
                <h4 class="text-sm font-bold text-white">علت: پُربادی بیش از حد (Over-Inflation)</h4>
                <p class="text-xs text-slate-400 leading-relaxed">
                    باد زیاد باعث باد کردن بخش میانی تایر و کاهش سطح تماس با زمین می‌گردد؛ در نتیجه کوبش سیستم تعلیق و کاهش تعادل رخ می‌دهد.
                </p>
            </div>

            <div class="p-5 rounded-2xl bg-slate-950 border border-slate-800 space-y-2">
                <span class="px-2.5 py-1 rounded bg-blue-500/20 text-blue-400 text-xs font-bold inline-block">ساییدگی یک‌طرفه (لبه داخل یا خارج)</span>
                <h4 class="text-sm font-bold text-white">علت: عدم تنظیم زاویه چرخ (کمبر / تو این)</h4>
                <p class="text-xs text-slate-400 leading-relaxed">
                    نشان‌دهنده کج بودن زاویه چرخ نسبت به خط عمود است. نیاز فوری به تنظیم فرمان با دستگاه لیزری دارد.
                </p>
            </div>

            <div class="p-5 rounded-2xl bg-slate-950 border border-slate-800 space-y-2">
                <span class="px-2.5 py-1 rounded bg-purple-500/20 text-purple-400 text-xs font-bold inline-block">ساییدگی پله‌پله و تکه‌ای (Cup)</span>
                <h4 class="text-sm font-bold text-white">علت: خرابی کمک‌فنرها یا نابالانسی شدید</h4>
                <p class="text-xs text-slate-400 leading-relaxed">
                    پریدن چرخ روی دست‌اندازها به علت مستهلک بودن کمک‌فنرها باعث کنده شدن موضعی تکه‌های لاستیک و ایجاد صدای زوزه می‌شود.
                </p>
            </div>

        </div>
    </div>

    <!-- 4. Articles & Maintenance Tips -->
    <div class="space-y-6">
        <h2 class="text-xl font-black text-white flex items-center gap-2">
            <i data-lucide="file-text" class="w-5 h-5 text-brand-400"></i>
            مقالات و نکات طلایی نگهداری لاستیک
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <?php foreach ($articles as $art): ?>
                <div class="glass-card p-6 rounded-3xl border border-slate-800 flex flex-col justify-between space-y-4">
                    <div>
                        <div class="flex items-center justify-between text-[11px] text-slate-400 mb-2">
                            <span class="px-2 py-0.5 rounded bg-slate-800 text-brand-400 font-bold"><?= htmlspecialchars($art['category']) ?></span>
                            <span><?= htmlspecialchars($art['date']) ?></span>
                        </div>
                        <h3 class="text-base font-bold text-white line-clamp-2"><?= htmlspecialchars($art['title']) ?></h3>
                        <p class="text-xs text-slate-400 mt-2 leading-relaxed"><?= htmlspecialchars($art['summary']) ?></p>
                    </div>

                    <div class="pt-3 border-t border-slate-800/80 flex items-center justify-between text-xs text-slate-500">
                        <span>زمان مطالعه: <?= htmlspecialchars($art['read_time']) ?></span>
                        <a href="#consultation" class="text-brand-400 font-bold hover:underline">مشاوره بیشتر</a>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>

</div>

<script>
    const decoderData = {
        width: {
            title: "عدد ۲۰۵: پهنای مقطع تایر (Section Width)",
            desc: "این عدد نشان‌دهنده عرض لاستیک به میلی‌متر از خارجی‌ترین لبه دیواره تا لبه مخالف آن در حالت باد شده استاندارد است. افزایش پهنا باعث چسبندگی بهتر و کوتاه‌تر شدن خط ترمز می‌شود."
        },
        aspect: {
            title: "عدد ۵۵: نسبت منظر یا فاق (Aspect Ratio)",
            desc: "نسبت ارتفاع دیواره لاستیک به پهنای آن به درصد. یعنی در این تایر، ارتفاع فاق برابر با ۵۵ درصد از ۲۰۵ میلی‌متر (معادل ۱۱۲.۷۵ میلی‌متر) می‌باشد. هر چه این عدد کمتر باشد، تایر اسپرت‌تر و کنترل‌پذیرتر اما خشک‌تر خواهد بود."
        },
        structure: {
            title: "حرف R: ساختار رادیال (Radial Construction)",
            desc: "نشان‌دهنده چیدمان لایه‌های سیمی و بافت داخلی تایر به صورت شعاعی و ۹۰ درجه نسبت به جهت حرکت است که امروزه استاندارد ۱۰۰٪ تایرهای سواری مدرن به دلیل دوام و خنک‌شوندگی بالا است."
        },
        rim: {
            title: "عدد ۱۶: قطر رینگ (Rim Diameter)",
            desc: "قطر لبه داخلی تایر که روی رینگ فلزی سوار می‌شود بر حسب اینچ. تایر رینگ ۱۶ تنها و تنها روی رینگ ۱۶ اینچی قابل نصب است."
        },
        load: {
            title: "عدد ۹۱: شاخص تحمل بار (Load Index)",
            desc: "کد عددی که حداکثر وزن قابل تحمل توسط یک حلقه لاستیک در حداکثر فشار باد مجاز را مشخص می‌کند. کد ۹۱ به معنای ظرفیت تحمل ۶۱۵ کیلوگرم برای هر چرخ (مجموعاً ۲۴۶۰ کیلوگرم برای ۴ چرخ) است."
        },
        speed: {
            title: "حرف V: شاخص حداکثر سرعت مجاز (Speed Rating)",
            desc: "نمایانگر حداکثر سرعتی است که تایر می‌تواند بدون افت پایداری و متلاشی شدن حرارتی طی کند. شاخص V به معنی حداکثر سرعت مجاز ۲۴۰ کیلومتر بر ساعت است. شاخص‌های متداول: T=190, H=210, V=240, W=270, Y=300 km/h."
        },
        dot: {
            title: "کد DOT 2626: تاریخ و هفته تولید تایر (Date of Manufacture)",
            desc: "چهار رقم آخر کد DOT نشان‌دهنده زمان تولید است. دو رقم اول نشان‌دهنده هفته و دو رقم آخر نشان‌دهنده سال میلادی است. مثلاً ۲۶۲۶ یعنی تولید شده در هفته بیست و ششم سال ۲۰۲۶ میلادی."
        }
    };

    function showDecoder(key) {
        const item = decoderData[key];
        if (!item) return;
        document.getElementById('dec-title').innerText = item.title;
        document.getElementById('dec-desc').innerText = item.desc;
    }

    function filterPressureTable() {
        const q = document.getElementById('pressure-search').value.toLowerCase().trim();
        const rows = document.querySelectorAll('.pressure-row');
        rows.forEach(r => {
            if (r.innerText.toLowerCase().includes(q)) {
                r.classList.remove('hidden');
            } else {
                r.classList.add('hidden');
            }
        });
    }
</script>

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