gasemi_tier/contact.php

<?php
// contact.php
$pageTitle = 'تماس با ما، شعب و خدمات تخصصی | تایر قاسمی';
$activeNav = 'contact';
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-12">
    
    <!-- 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="map-pin" 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>

    <!-- Branch Cards Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        
        <!-- Branch 1 -->
        <div class="glass-card p-6 rounded-3xl border border-slate-800 space-y-4">
            <div class="flex items-center justify-between">
                <span class="px-3 py-1 rounded-lg bg-brand-600/20 text-brand-400 text-xs font-bold">شعبه اصلی (غرب تهران)</span>
                <i data-lucide="building" class="w-5 h-5 text-brand-400"></i>
            </div>
            <h3 class="text-base font-black text-white">مجتمع خدمات خودرویی یادگار</h3>
            <p class="text-xs text-slate-400 leading-relaxed">
                تهران، خیابان آزادی، تقاطع بزرگراه یادگار امام، جنب پمپ بنزین، پلاک ۲۳۴
            </p>
            <div class="pt-3 border-t border-slate-800 space-y-2 text-xs text-slate-300">
                <div class="flex items-center gap-2"><i data-lucide="phone" class="w-4 h-4 text-brand-400"></i> تلفن: ۰۲۱-۸۸۸۸۹۹۰۰</div>
                <div class="flex items-center gap-2"><i data-lucide="clock" class="w-4 h-4 text-amber-400"></i> ساعت کاری: ۸:۰۰ الی ۲۱:۰۰</div>
                <div class="flex items-center gap-2"><i data-lucide="wrench" class="w-4 h-4 text-emerald-400"></i> مجهز به بالانس سه بعدی و نیتروژن</div>
            </div>
        </div>

        <!-- Branch 2 -->
        <div class="glass-card p-6 rounded-3xl border border-slate-800 space-y-4">
            <div class="flex items-center justify-between">
                <span class="px-3 py-1 rounded-lg bg-blue-600/20 text-blue-400 text-xs font-bold">شعبه ۲ (شرق و شمال شرق)</span>
                <i data-lucide="building" class="w-5 h-5 text-blue-400"></i>
            </div>
            <h3 class="text-base font-black text-white">مرکز تایر پاسداران</h3>
            <p class="text-xs text-slate-400 leading-relaxed">
                تهران، بزرگراه شهید صیاد شیرازی، بالاتر از میدان هروی، خیابان وفامنش
            </p>
            <div class="pt-3 border-t border-slate-800 space-y-2 text-xs text-slate-300">
                <div class="flex items-center gap-2"><i data-lucide="phone" class="w-4 h-4 text-blue-400"></i> تلفن: ۰۲۱-۲۲۲۲۳۳۴۴</div>
                <div class="flex items-center gap-2"><i data-lucide="clock" class="w-4 h-4 text-amber-400"></i> ساعت کاری: ۸:۳۰ الی ۲۰:۳۰</div>
                <div class="flex items-center gap-2"><i data-lucide="wrench" class="w-4 h-4 text-emerald-400"></i> خدمات ویژه خودروهای وارداتی و SUV</div>
            </div>
        </div>

        <!-- Branch 3 -->
        <div class="glass-card p-6 rounded-3xl border border-slate-800 space-y-4">
            <div class="flex items-center justify-between">
                <span class="px-3 py-1 rounded-lg bg-emerald-600/20 text-emerald-400 text-xs font-bold">واحد امداد و تعویض در محل</span>
                <i data-lucide="truck" class="w-5 h-5 text-emerald-400"></i>
            </div>
            <h3 class="text-base font-black text-white">ناوگان سیار تایر قاسمی</h3>
            <p class="text-xs text-slate-400 leading-relaxed">
                ارائه کلیه خدمات تعویض، پنچرگیری و باد نیتروژن در محل سکونت یا محل کار شما در سراسر تهران
            </p>
            <div class="pt-3 border-t border-slate-800 space-y-2 text-xs text-slate-300">
                <div class="flex items-center gap-2"><i data-lucide="phone" class="w-4 h-4 text-emerald-400"></i> خط ویژه اعزام امداد: ۰۹۱۲۳۴۵۶۷۸۹</div>
                <div class="flex items-center gap-2"><i data-lucide="clock" class="w-4 h-4 text-amber-400"></i> ساعت خدمت‌رسانی: ۲۴ ساعته ۷ روز هفته</div>
                <div class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> بدون هزینه ایاب و ذهاب در مناطق مرکزی</div>
            </div>
        </div>

    </div>

    <!-- Contact Form & Map Representation -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        
        <div class="lg:col-span-6 glass-card p-8 rounded-3xl border border-slate-800">
            <h3 class="text-xl font-black text-white mb-2">ارسال پیام یا انتقاد و پیشنهاد</h3>
            <p class="text-xs text-slate-400 mb-6">پیام‌های شما مستقیماً توسط مدیریت بازبینی و پاسخ داده می‌شود.</p>

            <form onsubmit="submitContactMessage(event)" class="space-y-4">
                <div id="contact-alert" class="hidden p-3 rounded-xl text-xs font-bold"></div>

                <div>
                    <label class="block text-xs font-bold text-slate-300 mb-1">نام کامل شما</label>
                    <input type="text" id="c-name" required placeholder="نام و نام خانوادگی" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-xs text-white focus:outline-none focus:border-brand-500">
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-300 mb-1">شماره همراه</label>
                    <input type="tel" id="c-phone" required placeholder="0912..." dir="ltr" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-xs text-white focus:outline-none focus:border-brand-500 text-right">
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-300 mb-1">متن پیام یا درخواست</label>
                    <textarea id="c-msg" rows="4" required placeholder="متن پیام خود را بنویسید..." class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-xs text-white focus:outline-none focus:border-brand-500"></textarea>
                </div>

                <button type="submit" class="w-full py-3 rounded-xl bg-brand-600 hover:bg-brand-500 text-white font-bold text-xs shadow-lg transition-all">
                    ارسال پیام به مدیریت
                </button>
            </form>
        </div>

        <div class="lg:col-span-6 glass-card p-8 rounded-3xl border border-slate-800 space-y-6">
            <h3 class="text-xl font-black text-white">موقعیت جغرافیایی و دسترسی</h3>
            
            <div class="h-64 rounded-2xl bg-slate-950 border border-slate-800 flex flex-col items-center justify-center p-6 text-center space-y-3 relative overflow-hidden">
                <div class="w-14 h-14 rounded-full bg-brand-600/20 text-brand-400 border border-brand-500/30 flex items-center justify-center">
                    <i data-lucide="map" class="w-7 h-7"></i>
                </div>
                <h4 class="text-sm font-bold text-white">مسیریابی هوشمند با نشان، بلد و ویز</h4>
                <p class="text-xs text-slate-400 max-w-sm">
                    با جستجوی عبارت <strong>«تایر قاسمی»</strong> در اپلیکیشن‌های نشان، بلد یا Google Maps سریع‌ترین مسیر را تا فروشگاه و تعمیرگاه پیدا کنید.
                </p>
                <div class="flex items-center gap-2 pt-2">
                    <a href="https://nshn.ir" target="_blank" class="px-3 py-1.5 rounded-lg bg-slate-900 border border-slate-700 text-slate-300 hover:text-white text-xs font-bold transition-colors">مسیریابی در نشان</a>
                    <a href="https://balad.ir" target="_blank" class="px-3 py-1.5 rounded-lg bg-slate-900 border border-slate-700 text-slate-300 hover:text-white text-xs font-bold transition-colors">مسیریابی در بلد</a>
                </div>
            </div>

            <div class="p-4 rounded-2xl bg-slate-950 border border-slate-800/80 text-xs text-slate-400 space-y-2">
                <div class="font-bold text-white flex items-center gap-1.5"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> خدمات ویژه مشتریان حضوری:</div>
                <p>پارکینگ اختصاصی، اتاق استراحت مشتریان، تست رایگان بالانس و فشار باد و تنظیم زاویه چرخ با تخفیف ویژه.</p>
            </div>
        </div>

    </div>

</div>

<script>
    function submitContactMessage(e) {
        e.preventDefault();
        const alertBox = document.getElementById('contact-alert');
        alertBox.className = 'p-3 rounded-xl text-xs font-bold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30';
        alertBox.innerText = 'پیام شما با موفقیت دریافت شد. با تشکر از همراهی شما.';
        alertBox.classList.remove('hidden');
        e.target.reset();
    }
</script>

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