bildirchin/views/pages/home.php

<?php
$pageTitle = 'صفحه اصلی';
require __DIR__ . '/../layout/header.php';
require __DIR__ . '/../layout/navbar.php';
?>

<!-- Hero Section -->
<section class="relative bg-gradient-to-br from-stone-900 via-stone-850 to-amber-950 text-white overflow-hidden py-16 md:py-24">
    <div class="absolute inset-0 opacity-10 bg-[radial-gradient(#f59e0b_1px,transparent_1px)] [background-size:16px_16px]"></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 -->
            <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-amber-500/20 text-amber-300 border border-amber-500/30 text-xs font-semibold">
                    <i class="fas fa-certificate text-amber-400"></i>
                    <span>بزرگ‌ترین مجتمع پرورشی و اصلاح نژاد بلدرچین در کشور</span>
                </div>
                
                <h1 class="text-3xl sm:text-5xl font-black tracking-tight leading-tight sm:leading-snug">
                    خرید مستقیم و بی‌واسطه <br>
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-amber-200">بلدرچین، تخم نطفه‌دار و خوراکی، دان و قفس</span>
                </h1>
                
                <p class="text-stone-300 text-base sm:text-lg leading-relaxed max-w-2xl mx-auto lg:mx-0">
                    تولید روزانه با بالاترین استانداردهای بهداشتی دامپزشکی. امکان خرید آنلاین در مقیاس خرد و ارائه بهترین قیمت‌های رقابتی برای سفارش‌های عمده، رستوران‌ها، هچری‌ها و سالن‌داران سراسر کشور.
                </p>

                <!-- CTA Buttons -->
                <div class="flex flex-wrap items-center justify-center lg:justify-start gap-4 pt-2">
                    <a href="/products" class="px-7 py-3.5 rounded-xl bg-amber-500 hover:bg-amber-600 text-stone-950 font-extrabold text-base shadow-lg shadow-amber-500/25 transition transform hover:-translate-y-0.5 flex items-center gap-2">
                        <i class="fas fa-shopping-bag"></i>
                        <span>مشاهده محصولات و خرید</span>
                    </a>
                    
                    <a href="/wholesale" class="px-7 py-3.5 rounded-xl bg-white/10 hover:bg-white/20 text-white font-bold text-base border border-white/20 backdrop-blur-sm transition flex items-center gap-2">
                        <i class="fas fa-boxes-stacked text-amber-400"></i>
                        <span>استعلام قیمت عمده و تناژ</span>
                    </a>
                </div>

                <!-- Fast Phone Banner -->
                <div class="pt-4 flex items-center justify-center lg:justify-start gap-3 text-stone-400 text-sm">
                    <i class="fas fa-headset text-amber-400 text-lg"></i>
                    <span>پاسخگویی سریع و ثبت تلفنی:</span>
                    <a href="tel:<?= \Bildirchin\Config::PHONE ?>" class="text-amber-300 font-bold hover:underline tracking-wider"><?= \Bildirchin\Helpers::toPersianDigits(\Bildirchin\Config::PHONE) ?></a>
                </div>
            </div>

            <!-- Hero Feature Card -->
            <div class="lg:col-span-5">
                <div class="bg-gradient-to-b from-stone-800/90 to-stone-900/90 p-6 sm:p-8 rounded-3xl border border-stone-700 shadow-2xl backdrop-blur-md relative overflow-hidden">
                    <div class="absolute -top-12 -right-12 w-40 h-40 bg-amber-500/10 rounded-full blur-2xl"></div>
                    
                    <div class="text-center pb-6 border-b border-stone-700/80">
                        <span class="text-xs uppercase tracking-wider text-amber-400 font-bold block mb-1">ظرفیت و توانمندی مزرعه</span>
                        <h3 class="text-xl font-bold text-white">تامین پایدار برای مشتریان سراسر کشور</h3>
                    </div>

                    <div class="grid grid-cols-2 gap-4 my-6">
                        <div class="bg-stone-950/60 p-4 rounded-2xl border border-stone-800 text-center">
                            <span class="text-2xl font-black text-amber-400 block persian-num">۵۰,۰۰۰+</span>
                            <span class="text-xs text-stone-400 mt-1 block">تولید ماهانه بلدرچین</span>
                        </div>
                        <div class="bg-stone-950/60 p-4 rounded-2xl border border-stone-800 text-center">
                            <span class="text-2xl font-black text-emerald-400 block persian-num">۸۵٪ +</span>
                            <span class="text-xs text-stone-400 mt-1 block">تضمین هچ تخم نطفه‌دار</span>
                        </div>
                        <div class="bg-stone-950/60 p-4 rounded-2xl border border-stone-800 text-center">
                            <span class="text-2xl font-black text-sky-400 block persian-num">۱۰۰٪</span>
                            <span class="text-xs text-stone-400 mt-1 block">کشتار روز و ارگانیک</span>
                        </div>
                        <div class="bg-stone-950/60 p-4 rounded-2xl border border-stone-800 text-center">
                            <span class="text-2xl font-black text-rose-400 block persian-num">۲۴ ساعته</span>
                            <span class="text-xs text-stone-400 mt-1 block">ارسال با ماشین یخچال‌دار</span>
                        </div>
                    </div>

                    <a href="/wholesale" class="block w-full py-3 px-4 rounded-xl bg-amber-500 hover:bg-amber-600 text-stone-950 text-center font-bold text-sm transition">
                        دریافت پیش‌فاکتور رسمی و خرید تیراژ <i class="fas fa-arrow-left mr-1"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Trust Badges -->
<section class="bg-white border-b border-stone-200 py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
            <div class="flex flex-col items-center justify-center p-3">
                <div class="w-12 h-12 rounded-2xl bg-amber-50 text-amber-600 flex items-center justify-center text-xl mb-2 shadow-sm">
                    <i class="fas fa-hand-holding-dollar"></i>
                </div>
                <h4 class="font-bold text-stone-900 text-sm">قیمت مستقیم درب مزرعه</h4>
                <p class="text-xs text-stone-500 mt-0.5">بدون واسطه و دلال با بهترین نرخ</p>
            </div>

            <div class="flex flex-col items-center justify-center p-3">
                <div class="w-12 h-12 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center text-xl mb-2 shadow-sm">
                    <i class="fas fa-shield-virus"></i>
                </div>
                <h4 class="font-bold text-stone-900 text-sm">مجوز و نظارت دامپزشکی</h4>
                <p class="text-xs text-stone-500 mt-0.5">سلامت تضمین‌شده گله و کشتار بهداشتی</p>
            </div>

            <div class="flex flex-col items-center justify-center p-3">
                <div class="w-12 h-12 rounded-2xl bg-sky-50 text-sky-600 flex items-center justify-center text-xl mb-2 shadow-sm">
                    <i class="fas fa-truck-ramp-box"></i>
                </div>
                <h4 class="font-bold text-stone-900 text-sm">ارسال به تمام استان‌ها</h4>
                <p class="text-xs text-stone-500 mt-0.5">بسته‌بندی تخصصی بدون افت تلفات</p>
            </div>

            <div class="flex flex-col items-center justify-center p-3">
                <div class="w-12 h-12 rounded-2xl bg-rose-50 text-rose-600 flex items-center justify-center text-xl mb-2 shadow-sm">
                    <i class="fas fa-headset"></i>
                </div>
                <h4 class="font-bold text-stone-900 text-sm">مشاوره رایگان پرورش</h4>
                <p class="text-xs text-stone-500 mt-0.5">پشتیبانی فنی از دان تا جوجه‌کشی</p>
            </div>
        </div>
    </div>
</section>

<!-- Categories Cards -->
<section class="py-14 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center max-w-2xl mx-auto mb-10">
        <span class="text-xs font-bold text-amber-600 uppercase tracking-widest block mb-1">دسته‌بندی‌ها</span>
        <h2 class="text-2xl sm:text-3xl font-extrabold text-stone-900">محصولات تولیدی و خدمات مزرعه</h2>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <?php foreach ($categories as $cat): ?>
            <a href="/products?cat=<?= $cat['id'] ?>" class="group bg-white rounded-2xl p-6 border border-stone-200 hover:border-amber-400 shadow-sm hover:shadow-md transition flex flex-col justify-between">
                <div>
                    <div class="w-14 h-14 rounded-2xl bg-amber-50 group-hover:bg-amber-500 text-amber-600 group-hover:text-white flex items-center justify-center text-2xl mb-5 transition shadow-sm">
                        <i class="<?= $cat['icon'] ?>"></i>
                    </div>
                    <h3 class="font-extrabold text-lg text-stone-900 group-hover:text-amber-600 transition mb-2"><?= htmlspecialchars($cat['name']) ?></h3>
                    <p class="text-xs text-stone-500 leading-relaxed"><?= htmlspecialchars($cat['description']) ?></p>
                </div>
                <div class="mt-6 pt-4 border-t border-stone-100 flex items-center justify-between text-xs font-bold text-stone-600 group-hover:text-amber-600">
                    <span>مشاهده محصولات</span>
                    <i class="fas fa-arrow-left transform group-hover:-translate-x-1 transition"></i>
                </div>
            </a>
        <?php endforeach; ?>
    </div>
</section>

<!-- Featured Products Section -->
<section class="py-14 bg-stone-100/70 border-y border-stone-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col sm:flex-row items-start sm:items-end justify-between mb-10 gap-4">
            <div>
                <span class="text-xs font-bold text-amber-600 uppercase tracking-widest block mb-1">محصولات برگزیده</span>
                <h2 class="text-2xl sm:text-3xl font-extrabold text-stone-900">پرفروش‌ترین‌های مزرعه</h2>
            </div>
            <a href="/products" class="inline-flex items-center gap-2 text-sm font-bold text-amber-700 hover:text-amber-800 bg-white px-4 py-2 rounded-xl border border-stone-200 shadow-sm">
                <span>مشاهده تمام محصولات</span>
                <i class="fas fa-angle-left"></i>
            </a>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <?php foreach ($featuredProducts as $prod): ?>
                <div class="bg-white rounded-2xl border border-stone-200 overflow-hidden shadow-sm hover:shadow-lg transition flex flex-col justify-between group">
                    <div class="relative">
                        <a href="/product/<?= $prod['slug'] ?>" class="block h-52 bg-stone-50 overflow-hidden p-4 flex items-center justify-center">
                            <img src="<?= $prod['image'] ?>" alt="<?= htmlspecialchars($prod['name']) ?>" class="max-h-full max-w-full object-contain group-hover:scale-105 transition duration-300">
                        </a>

                        <?php if ((int)$prod['is_wholesale_available'] === 1): ?>
                            <span class="absolute top-3 right-3 bg-amber-500 text-stone-950 text-[11px] font-extrabold px-2.5 py-1 rounded-lg shadow-sm">
                                <i class="fas fa-boxes-stacked ml-1"></i> تخفیف عمده
                            </span>
                        <?php endif; ?>
                    </div>

                    <div class="p-5 flex-1 flex flex-col justify-between">
                        <div>
                            <span class="text-[11px] font-semibold text-amber-700 block mb-1"><?= htmlspecialchars($prod['category_name']) ?></span>
                            <a href="/product/<?= $prod['slug'] ?>" class="font-bold text-stone-900 group-hover:text-amber-600 transition text-base block mb-2 leading-snug">
                                <?= htmlspecialchars($prod['name']) ?>
                            </a>
                            <p class="text-xs text-stone-500 line-clamp-2 mb-4 leading-relaxed">
                                <?= htmlspecialchars($prod['short_desc']) ?>
                            </p>
                        </div>

                        <div>
                            <!-- Price breakdown -->
                            <div class="bg-stone-50 p-3 rounded-xl mb-4 border border-stone-100">
                                <div class="flex items-center justify-between">
                                    <span class="text-xs text-stone-500">قیمت مصرف‌کننده:</span>
                                    <span class="text-base font-black text-stone-900"><?= \Bildirchin\Helpers::formatPrice($prod['price']) ?></span>
                                </div>
                                <?php if ((int)$prod['is_wholesale_available'] === 1 && $prod['wholesale_price'] > 0): ?>
                                    <div class="flex items-center justify-between mt-1 pt-1 border-t border-stone-200/60 text-xs">
                                        <span class="text-amber-700 font-medium">عمده (از <?= \Bildirchin\Helpers::toPersianDigits($prod['wholesale_min_qty']) ?> <?= $prod['unit'] ?>):</span>
                                        <span class="font-bold text-emerald-700"><?= \Bildirchin\Helpers::formatPrice($prod['wholesale_price']) ?></span>
                                    </div>
                                <?php endif; ?>
                            </div>

                            <!-- Buttons -->
                            <div class="flex items-center gap-2">
                                <a href="/product/<?= $prod['slug'] ?>" class="flex-1 text-center py-2.5 px-3 rounded-xl bg-stone-100 hover:bg-stone-200 text-stone-800 text-xs font-bold transition">
                                    جزییات و خرید
                                </a>
                                <button onclick="addToCart(<?= $prod['id'] ?>, 1)" class="w-10 h-10 rounded-xl bg-amber-500 hover:bg-amber-600 text-stone-950 flex items-center justify-center transition shadow-sm" title="افزودن به سبد خرید">
                                    <i class="fas fa-cart-plus"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- Wholesale Calculator Interactive Banner -->
<section class="py-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="bg-gradient-to-r from-amber-700 via-amber-800 to-stone-900 rounded-3xl text-white p-8 sm:p-12 shadow-xl border border-amber-600/30">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
            <div class="lg:col-span-6 space-y-5 text-center lg:text-right">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-400/20 text-amber-200 text-xs font-bold">
                    <i class="fas fa-calculator text-amber-300"></i>
                    <span>سیستم قیمت‌گذاری هوشمند عمده</span>
                </div>
                <h2 class="text-2xl sm:text-4xl font-extrabold leading-snug">
                    خرید عمده تناژ و تیراژ بالا <br>با تخفیف‌های ویژه مزرعه
                </h2>
                <p class="text-stone-300 text-sm leading-relaxed">
                    اگر صاحب رستوران، هتل، سالن پرورش، فروشگاه پروتئینی یا کارگاه جوجه‌کشی هستید، قیمت‌ها برای شما با نرخ عمده محاسبه می‌شود. همین حالا تیراژ مورد نیاز خود را در ماشین‌حساب روبرو انتخاب کنید.
                </p>
                <div class="pt-2 flex flex-wrap gap-4 justify-center lg:justify-start">
                    <a href="/wholesale" class="px-6 py-3 rounded-xl bg-white text-stone-900 font-extrabold text-sm hover:bg-amber-50 transition shadow">
                        مشاهده شرایط و ثبت استعلام رسمی
                    </a>
                </div>
            </div>

            <!-- Interactive Mini Calculator -->
            <div class="lg:col-span-6">
                <div class="bg-white text-stone-800 p-6 sm:p-8 rounded-2xl shadow-2xl space-y-5">
                    <h3 class="font-bold text-base text-stone-900 flex items-center justify-between border-b pb-3">
                        <span><i class="fas fa-coins text-amber-600 ml-1.5"></i> محاسبه‌گر تخفیف تیراژ</span>
                        <span class="text-xs text-amber-700 bg-amber-50 px-2.5 py-1 rounded-md font-semibold">محاسبه آنلاین</span>
                    </h3>

                    <div>
                        <label class="block text-xs font-bold text-stone-700 mb-1.5">انتخاب محصول عمده:</label>
                        <select id="calc-product" class="w-full bg-stone-50 border border-stone-300 rounded-xl p-2.5 text-sm focus:ring-2 focus:ring-amber-500 focus:outline-none">
                            <?php foreach ($featuredProducts as $p): ?>
                                <?php if ((int)$p['is_wholesale_available'] === 1): ?>
                                    <option value="<?= $p['id'] ?>" data-price="<?= $p['price'] ?>" data-min="<?= $p['wholesale_min_qty'] ?>" data-wprice="<?= $p['wholesale_price'] ?>" data-t2qty="<?= $p['wholesale_tier2_qty'] ?>" data-t2price="<?= $p['wholesale_tier2_price'] ?>" data-unit="<?= $p['unit'] ?>">
                                        <?= htmlspecialchars($p['name']) ?>
                                    </option>
                                <?php endif; ?>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div>
                        <div class="flex justify-between items-center mb-1.5">
                            <label class="text-xs font-bold text-stone-700">تعداد / مقدار درخواستی:</label>
                            <span class="text-xs text-stone-500" id="calc-unit-label">واحد: عدد</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <input type="number" id="calc-qty" value="100" min="1" class="flex-1 bg-stone-50 border border-stone-300 rounded-xl p-2.5 text-sm font-bold focus:ring-2 focus:ring-amber-500 focus:outline-none">
                        </div>
                    </div>

                    <!-- Result Box -->
                    <div class="bg-amber-50 rounded-xl p-4 border border-amber-200 space-y-2">
                        <div class="flex justify-between text-xs text-stone-600">
                            <span>نرخ هر واحد در این تیراژ:</span>
                            <span class="font-bold text-stone-900" id="calc-unit-price">-</span>
                        </div>
                        <div class="flex justify-between text-xs text-emerald-700 font-bold">
                            <span>میزان سود و تخفیف شما:</span>
                            <span id="calc-savings">-</span>
                        </div>
                        <div class="flex justify-between text-sm font-extrabold text-stone-900 pt-2 border-t border-amber-200">
                            <span>مبلغ کل فاکتور:</span>
                            <span class="text-amber-800 text-base" id="calc-total-price">-</span>
                        </div>
                    </div>

                    <button id="calc-add-btn" class="w-full py-3 rounded-xl bg-amber-500 hover:bg-amber-600 text-stone-950 font-extrabold text-sm transition flex items-center justify-center gap-2 shadow-sm">
                        <i class="fas fa-cart-plus"></i>
                        <span>افزودن این سفارش به سبد خرید</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Latest Blog Articles -->
<section class="py-14 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col sm:flex-row items-start sm:items-end justify-between mb-10 gap-4">
        <div>
            <span class="text-xs font-bold text-amber-600 uppercase tracking-widest block mb-1">دانشنامه و آموزش</span>
            <h2 class="text-2xl sm:text-3xl font-extrabold text-stone-900">مقالات تخصصی پرورش بلدرچین</h2>
        </div>
        <a href="/blog" class="inline-flex items-center gap-2 text-sm font-bold text-amber-700 hover:text-amber-800 bg-white px-4 py-2 rounded-xl border border-stone-200 shadow-sm">
            <span>مشاهده تمام مقالات</span>
            <i class="fas fa-angle-left"></i>
        </a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <?php foreach ($latestArticles as $art): ?>
            <div class="bg-white rounded-2xl border border-stone-200 overflow-hidden shadow-sm hover:shadow-md transition flex flex-col justify-between group">
                <a href="/blog/<?= $art['slug'] ?>" class="block h-48 bg-stone-800 overflow-hidden">
                    <img src="<?= $art['image'] ?>" alt="<?= htmlspecialchars($art['title']) ?>" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                </a>
                <div class="p-6 flex-1 flex flex-col justify-between">
                    <div>
                        <div class="flex items-center gap-2 text-xs text-stone-400 mb-2">
                            <i class="far fa-calendar-alt"></i>
                            <span><?= \Bildirchin\Helpers::getJalaliDate($art['created_at']) ?></span>
                        </div>
                        <a href="/blog/<?= $art['slug'] ?>" class="font-extrabold text-base text-stone-900 group-hover:text-amber-600 transition mb-3 block leading-snug">
                            <?= htmlspecialchars($art['title']) ?>
                        </a>
                        <p class="text-xs text-stone-500 line-clamp-3 leading-relaxed mb-4">
                            <?= htmlspecialchars($art['summary']) ?>
                        </p>
                    </div>
                    <a href="/blog/<?= $art['slug'] ?>" class="text-xs font-bold text-amber-600 hover:text-amber-700 flex items-center gap-1.5">
                        <span>مطالعه کامل مقاله</span>
                        <i class="fas fa-arrow-left"></i>
                    </a>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</section>

<script>
    // Dynamic Calculator Script
    function runCalculator() {
        const sel = document.getElementById('calc-product');
        const opt = sel.options[sel.selectedIndex];
        const qty = parseInt(document.getElementById('calc-qty').value) || 1;
        const regularPrice = parseFloat(opt.dataset.price);
        const minQty = parseInt(opt.dataset.min);
        const wPrice = parseFloat(opt.dataset.wprice);
        const t2Qty = parseInt(opt.dataset.t2qty);
        const t2Price = parseFloat(opt.dataset.t2price);
        const unit = opt.dataset.unit;

        document.getElementById('calc-unit-label').innerText = 'واحد: ' + unit;

        let unitPrice = regularPrice;
        if (t2Qty > 0 && qty >= t2Qty && t2Price > 0) {
            unitPrice = t2Price;
        } else if (minQty > 0 && qty >= minQty && wPrice > 0) {
            unitPrice = wPrice;
        }

        const totalPrice = unitPrice * qty;
        const savings = Math.max(0, (regularPrice - unitPrice) * qty);

        const formatFa = (num) => new Intl.NumberFormat('fa-IR').format(num) + ' تومان';

        document.getElementById('calc-unit-price').innerText = formatFa(unitPrice);
        document.getElementById('calc-total-price').innerText = formatFa(totalPrice);
        document.getElementById('calc-savings').innerText = savings > 0 ? formatFa(savings) + ' (تخفیف ویژه)' : 'نرخ خرده‌فروشی عادی';
    }

    document.getElementById('calc-product').addEventListener('change', runCalculator);
    document.getElementById('calc-qty').addEventListener('input', runCalculator);
    runCalculator();

    document.getElementById('calc-add-btn').addEventListener('click', function() {
        const prodId = document.getElementById('calc-product').value;
        const qty = parseInt(document.getElementById('calc-qty').value) || 1;
        addToCart(prodId, qty);
    });
</script>

<?php
require __DIR__ . '/../layout/footer.php';
?>