<?php
require_once 'includes/header.php';

// ডাটাবেস থেকে ক্যাটাগরি এবং প্রোডাক্ট আনার লজিক
$categories = [];
$products =[];

try {
    $stmt = $pdo->query("SELECT * FROM categories WHERE status = 1 LIMIT 6");
    $categories = $stmt->fetchAll(PDO::FETCH_ASSOC);

    $stmt = $pdo->query("SELECT * FROM products WHERE status = 1 ORDER BY id DESC LIMIT 8");
    $products = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) { }
?>

<!-- Hero Slider Section -->
<section class="relative bg-gray-900 text-white overflow-hidden h-[300px] md:h-[500px]">
    <div id="heroSlider" class="absolute inset-0 w-full h-full">
        <!-- Slide 1 -->
        <div class="slide absolute inset-0 w-full h-full bg-cover bg-center transition-opacity duration-1000 opacity-100" style="background-image: url('https://images.unsplash.com/photo-1562564025-51dc11516a0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80');">
            <div class="absolute inset-0 bg-black bg-opacity-60 flex items-center justify-center">
                <div class="text-center px-4 max-w-3xl">
                    <span class="text-secondary font-bold tracking-wider uppercase text-xs md:text-base mb-2 block">প্রফেশনাল প্রিন্টিং সল্যুশন</span>
                    <h1 class="text-2xl md:text-5xl lg:text-6xl font-bold mb-4 font-bangla leading-tight">আপনার ব্র্যান্ডিং হোক <br> <span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-500">প্রিমিয়াম ও আকর্ষণীয়</span></h1>
                    <a href="category.php" class="bg-secondary text-white px-6 py-2 md:px-8 md:py-3 text-sm md:text-base rounded-full font-bold hover:bg-yellow-600 transition shadow-lg transform hover:-translate-y-1 inline-block font-bangla">অর্ডার করুন <i class="fa-solid fa-arrow-right ml-2"></i></a>
                </div>
            </div>
        </div>
        <!-- Slide 2 -->
        <div class="slide absolute inset-0 w-full h-full bg-cover bg-center transition-opacity duration-1000 opacity-0" style="background-image: url('https://images.unsplash.com/photo-1586281380349-632531db7ed4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80');">
            <div class="absolute inset-0 bg-black bg-opacity-60 flex items-center justify-center">
                <div class="text-center px-4 max-w-3xl">
                    <span class="text-secondary font-bold tracking-wider uppercase text-xs md:text-base mb-2 block">সেরা কোয়ালিটি</span>
                    <h1 class="text-2xl md:text-5xl lg:text-6xl font-bold mb-4 font-bangla leading-tight">আইডি কার্ড ও অফিশিয়াল <br> স্টেশনারি প্রিন্টিং</h1>
                    <a href="category.php" class="bg-secondary text-white px-6 py-2 md:px-8 md:py-3 text-sm md:text-base rounded-full font-bold hover:bg-yellow-600 transition shadow-lg transform hover:-translate-y-1 inline-block font-bangla">বিস্তারিত দেখুন <i class="fa-solid fa-arrow-right ml-2"></i></a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Controls -->
    <button id="prevBtn" class="absolute left-2 md:left-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-20 hover:bg-opacity-40 p-2 md:p-3 rounded-full text-white transition"><i class="fa-solid fa-chevron-left"></i></button>
    <button id="nextBtn" class="absolute right-2 md:right-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-20 hover:bg-opacity-40 p-2 md:p-3 rounded-full text-white transition"><i class="fa-solid fa-chevron-right"></i></button>
</section>

<!-- Features Section -->
<section class="py-8 bg-white -mt-8 relative z-10 container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-white p-5 rounded-xl shadow-lg border-b-4 border-secondary flex items-center gap-4 hover-lift">
            <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center text-primary text-xl"><i class="fa-solid fa-truck-fast"></i></div>
            <div><h3 class="font-bold text-base font-bangla">দ্রুত ডেলিভারি</h3><p class="text-xs text-gray-500 font-bangla">সারা বাংলাদেশে হোম ডেলিভারি</p></div>
        </div>
        <div class="bg-white p-5 rounded-xl shadow-lg border-b-4 border-secondary flex items-center gap-4 hover-lift">
            <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center text-primary text-xl"><i class="fa-regular fa-star"></i></div>
            <div><h3 class="font-bold text-base font-bangla">প্রিমিয়াম কোয়ালিটি</h3><p class="text-xs text-gray-500 font-bangla">সেরা মানের কালার ও পেপার</p></div>
        </div>
        <div class="bg-white p-5 rounded-xl shadow-lg border-b-4 border-secondary flex items-center gap-4 hover-lift">
            <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center text-primary text-xl"><i class="fa-solid fa-headset"></i></div>
            <div><h3 class="font-bold text-base font-bangla">২৪/৭ সাপোর্ট</h3><p class="text-xs text-gray-500 font-bangla">যেকোনো প্রয়োজনে কল করুন</p></div>
        </div>
    </div>
</section>

<!-- Categories Section -->
<section class="py-12 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="text-center mb-8">
            <h2 class="text-2xl md:text-3xl font-bold text-gray-800 font-bangla mb-2">জনপ্রিয় <span class="text-primary">ক্যাটাগরি</span></h2>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
            <?php 
            if(empty($categories)) {
                // ডেমো ক্যাটাগরি
                $demo_cats =['আইডি কার্ড', 'ব্যানার', 'ক্যাশ মেমো', 'প্যাড', 'স্টিকার', 'খাম'];
                foreach($demo_cats as $cat) {
                    echo '<a href="category.php" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition text-center group border border-gray-100"><div class="w-14 h-14 mx-auto bg-gray-100 rounded-full flex items-center justify-center text-gray-400 group-hover:bg-primary group-hover:text-white transition mb-3 overflow-hidden"><i class="fa-solid fa-layer-group text-xl"></i></div><h3 class="font-bold text-sm text-gray-700 font-bangla group-hover:text-primary">'.$cat.'</h3></a>';
                }
            } else {
                // ডাটাবেসের ক্যাটাগরি (ইমেজ সাপোর্ট সহ)
                foreach($categories as $cat) {
                    echo '<a href="category.php?id='.$cat['id'].'" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition text-center group border border-gray-100 flex flex-col items-center">';
                    echo '<div class="w-14 h-14 mx-auto bg-blue-50 text-primary rounded-full flex items-center justify-center group-hover:bg-primary group-hover:text-white transition mb-3 overflow-hidden border border-transparent group-hover:border-blue-200">';
                    
                    if(!empty($cat['image'])) {
                        // যদি ছবি থাকে
                        echo '<img src="uploads/categories/'.htmlspecialchars($cat['image']).'" alt="'.htmlspecialchars($cat['name']).'" class="w-full h-full object-cover">';
                    } else {
                        // ছবি না থাকলে আইকন
                        echo '<i class="fa-solid fa-layer-group text-xl"></i>';
                    }

                    echo '</div>';
                    echo '<h3 class="font-bold text-sm text-gray-700 font-bangla group-hover:text-primary">'.htmlspecialchars($cat['name']).'</h3>';
                    echo '</a>';
                }
            }
            ?>
        </div>
    </div>
</section>

<!-- Featured Products -->
<section class="py-12 bg-white mb-16 md:mb-0">
    <div class="container mx-auto px-4">
        <div class="flex justify-between items-end mb-8">
            <h2 class="text-2xl md:text-3xl font-bold text-gray-800 font-bangla">প্রিমিয়াম <span class="text-primary">প্রোডাক্টস</span></h2>
            <a href="category.php" class="text-primary font-semibold hover:text-secondary transition font-bangla hidden md:block">সব দেখুন <i class="fa-solid fa-arrow-right ml-1"></i></a>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            <?php 
            if(empty($products)) {
                for($i=1; $i<=4; $i++) {
                    echo '
                    <div class="bg-white rounded-lg shadow-sm border border-gray-100 hover:shadow-lg transition group overflow-hidden">
                        <div class="relative bg-gray-100 h-36 md:h-48 flex items-center justify-center overflow-hidden">
                            <span class="text-gray-400"><i class="fa-solid fa-image text-3xl"></i></span>
                            <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300"><a href="product-details.php" class="bg-white text-gray-800 px-3 py-1 rounded-full text-xs font-bold hover:bg-secondary hover:text-white transition font-bangla">বিস্তারিত</a></div>
                        </div>
                        <div class="p-3">
                            <h3 class="font-bold text-gray-800 text-sm mb-2 truncate font-bangla group-hover:text-primary transition">ডেমো প্রোডাক্ট '.$i.'</h3>
                            <div class="flex items-center justify-between"><span class="text-primary font-bold text-sm en-font">৳ ৫০০.০০</span><button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-secondary hover:text-white transition"><i class="fa-solid fa-cart-plus text-xs"></i></button></div>
                        </div>
                    </div>';
                }
            } else {
                foreach($products as $prod) {
                    echo '
                    <div class="bg-white rounded-lg shadow-sm border border-gray-100 hover:shadow-lg transition group overflow-hidden">
                        <div class="relative bg-gray-100 h-36 md:h-48 flex items-center justify-center overflow-hidden">
                            '.($prod['image'] ? '<img src="uploads/products/'.htmlspecialchars($prod['image']).'" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">' : '<span class="text-gray-400"><i class="fa-solid fa-image text-3xl"></i></span>').'
                            <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300"><a href="product-details.php?id='.$prod['id'].'" class="bg-white text-gray-800 px-3 py-1 rounded-full text-xs font-bold hover:bg-secondary hover:text-white transition font-bangla">বিস্তারিত</a></div>
                        </div>
                        <div class="p-3">
                            <h3 class="font-bold text-gray-800 text-sm mb-2 truncate font-bangla group-hover:text-primary transition">'.htmlspecialchars($prod['name']).'</h3>
                            <div class="flex items-center justify-between"><span class="text-primary font-bold text-sm md:text-lg en-font">৳ '.number_format($prod['base_price'], 2).'</span><a href="product-details.php?id='.$prod['id'].'" class="w-8 h-8 md:w-9 md:h-9 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-secondary hover:text-white transition"><i class="fa-solid fa-cart-plus text-xs md:text-sm"></i></a></div>
                        </div>
                    </div>';
                }
            }
            ?>
        </div>
        <div class="mt-8 text-center md:hidden">
             <a href="category.php" class="bg-white border border-primary text-primary px-6 py-2 rounded-full font-semibold hover:bg-primary hover:text-white transition font-bangla text-sm">সব প্রোডাক্ট দেখুন</a>
        </div>
    </div>
</section>

<script>
    const slides = document.querySelectorAll('.slide');
    const nextBtn = document.getElementById('nextBtn');
    const prevBtn = document.getElementById('prevBtn');
    let currentSlide = 0;
    function showSlide(index) {
        slides.forEach((slide, i) => {
            if (i === index) { slide.classList.remove('opacity-0'); slide.classList.add('opacity-100'); } 
            else { slide.classList.remove('opacity-100'); slide.classList.add('opacity-0'); }
        });
    }
    function nextSlide() { currentSlide = (currentSlide + 1) % slides.length; showSlide(currentSlide); }
    function prevSlide() { currentSlide = (currentSlide - 1 + slides.length) % slides.length; showSlide(currentSlide); }
    if(nextBtn && prevBtn) { nextBtn.addEventListener('click', nextSlide); prevBtn.addEventListener('click', prevSlide); setInterval(nextSlide, 5000); }
</script>

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