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

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

try {
    // Fetch ALL Active Products
    $stmt = $pdo->query("SELECT * FROM products WHERE status = 1 ORDER BY id DESC");
    $products = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    // Error handling silent
}

// হোয়াটসঅ্যাপের জন্য ফোন নাম্বার ক্লিন করা (যাতে সরাসরি চ্যাটে যায়)
$raw_phone = $contact_phone ?? '01879995834';
$wa_phone = preg_replace('/[^0-9]/', '', $raw_phone); // + বা অন্য চিহ্ন রিমুভ করবে
if(substr($wa_phone, 0, 2) !== '88') {
    $wa_phone = '88' . $wa_phone; // শুরুতে 88 না থাকলে বসিয়ে নিবে
}
?>

<!-- Hero Slider Section -->
<section class="relative bg-gray-900 text-white overflow-hidden h-[400px] md:h-[500px]">
    <!-- Slider Wrapper -->
    <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 z-10" 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-sm md:text-base mb-2 block">প্রফেশনাল প্রিন্টিং সল্যুশন</span>
                    <h1 class="text-3xl 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>
                    <p class="text-gray-200 mb-8 text-sm md:text-lg font-bangla">ভিজিটিং কার্ড, ব্যানার, ক্যাশ মেমো থেকে শুরু করে সব ধরনের প্রিন্টিং সার্ভিস এখন এক ছাদের নিচে।</p>
                </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-sm md:text-base mb-2 block">সেরা কোয়ালিটি</span>
                    <h1 class="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 font-bangla leading-tight">আইডি কার্ড ও অফিশিয়াল <br> স্টেশনারি প্রিন্টিং</h1>
                    <p class="text-gray-200 mb-8 text-sm md:text-lg font-bangla">খুব দ্রুত সময়ে এবং সাশ্রয়ী মূল্যে হাই-কোয়ালিটি প্রিন্টিং সার্ভিস।</p>
                </div>
            </div>
        </div>
        <!-- Slide 3 -->
        <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-1616423640778-28d1b53229bd?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80');">
            <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center">
                <div class="text-center px-4 max-w-3xl">
                    <span class="text-secondary font-bold tracking-wider uppercase text-sm md:text-base mb-2 block">অত্যাধুনিক প্রযুক্তি</span>
                    <h1 class="text-3xl 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-blue-400 to-green-400">মডার্ন প্রিন্টিং ডিজাইন</span></h1>
                    <p class="text-gray-200 mb-8 text-sm md:text-lg font-bangla">উন্নতমানের সিএমওয়াইকে (CMYK) কালার প্রসেসিং এবং প্রিমিয়াম পেপার কোয়ালিটি।</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Slider Controls (Arrows - Hidden on mobile) -->
    <button id="prevBtn" class="hidden md:block absolute left-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-20 hover:bg-opacity-40 p-3 rounded-full text-white transition z-30"><i class="fa-solid fa-chevron-left"></i></button>
    <button id="nextBtn" class="hidden md:block absolute right-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-20 hover:bg-opacity-40 p-3 rounded-full text-white transition z-30"><i class="fa-solid fa-chevron-right"></i></button>

    <!-- Slider Pagination (Stylish Dots for all devices) -->
    <div class="absolute bottom-6 left-1/2 transform -translate-x-1/2 flex space-x-3 z-30">
        <div class="dot cursor-pointer transition-all duration-300 h-2.5 rounded-full w-8 bg-secondary" onclick="goToSlide(0)"></div>
        <div class="dot cursor-pointer transition-all duration-300 h-2.5 rounded-full w-2.5 bg-white bg-opacity-50 hover:bg-opacity-100" onclick="goToSlide(1)"></div>
        <div class="dot cursor-pointer transition-all duration-300 h-2.5 rounded-full w-2.5 bg-white bg-opacity-50 hover:bg-opacity-100" onclick="goToSlide(2)"></div>
    </div>
</section>

<!-- All Products Section -->
<section class="py-16 bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4">
        <div class="text-center mb-10">
            <h2 class="text-3xl md:text-4xl font-bold text-gray-800 font-bangla mb-2">আমাদের সকল <span class="text-primary">প্রোডাক্টস</span></h2>
            <p class="text-gray-500 font-bangla">আপনার পছন্দের প্রিন্টিং সার্ভিসটি অর্ডার করুন</p>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
            <?php 
            // যদি ডাটাবেসে প্রোডাক্ট না থাকে, ডেমো প্রোডাক্ট দেখাবে
            if(empty($products)) {
                for($i=1; $i<=8; $i++) {
                    echo '
                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-lg transition group overflow-hidden flex flex-col">
                        <div class="relative bg-gray-100 h-40 md:h-48 flex items-center justify-center overflow-hidden">
                            <span class="text-gray-400"><i class="fa-solid fa-image text-4xl"></i></span>
                        </div>
                        <div class="p-4 flex flex-col flex-grow">
                            <h3 class="font-bold text-gray-800 text-base md:text-lg mb-1 truncate font-bangla group-hover:text-primary transition">ডেমো প্রোডাক্ট নাম '.$i.'</h3>
                            
                            <!-- Rating -->
                            <div class="flex items-center text-yellow-400 text-[10px] md:text-xs mb-2">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-regular fa-star text-gray-300"></i>
                                <span class="text-gray-400 ml-1 en-font">(4.0)</span>
                            </div>

                            <span class="text-primary font-bold text-lg en-font mb-4">৳ ৫০০.০০</span>
                            
                            <!-- Action Buttons Stacked -->
                            <div class="mt-auto space-y-2">
                                <a href="product-details.php" class="block w-full text-center bg-primary text-white py-2 md:py-2.5 rounded-md font-bold hover:bg-blue-800 transition font-bangla text-xs md:text-sm">
                                    অর্ডার করুন
                                </a>
                                <a href="product-details.php" class="block w-full text-center bg-blue-50 text-primary border border-primary py-2 md:py-2.5 rounded-md font-bold hover:bg-primary hover:text-white transition font-bangla text-xs md:text-sm">
                                    কার্টে যোগ করুন
                                </a>
                            </div>
                        </div>
                    </div>';
                }
            } else {
                foreach($products as $prod) {
                    echo '
                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-lg transition group overflow-hidden flex flex-col">
                        <div class="relative bg-gray-100 h-40 md:h-48 flex items-center justify-center overflow-hidden">
                            '.($prod['image'] ? '<img src="uploads/products/'.$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-4xl"></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-4 py-2 rounded-full text-sm font-bold hover:bg-secondary hover:text-white transition">বিস্তারিত</a>
                            </div>
                        </div>
                        <div class="p-4 flex flex-col flex-grow">
                            <h3 class="font-bold text-gray-800 text-base md:text-lg mb-1 truncate font-bangla group-hover:text-primary transition">'.htmlspecialchars($prod['name']).'</h3>
                            
                            <!-- Rating (Static 4 Stars) -->
                            <div class="flex items-center text-yellow-400 text-[10px] md:text-xs mb-2">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-regular fa-star text-gray-300"></i>
                                <span class="text-gray-400 ml-1 en-font">(4.0)</span>
                            </div>

                            <!-- Price -->
                            <span class="text-primary font-bold text-lg en-font mb-4">৳ '.number_format($prod['base_price'], 2).'</span>
                            
                            <!-- Action Buttons Stacked -->
                            <div class="mt-auto space-y-2">
                                <a href="product-details.php?id='.$prod['id'].'" class="block w-full text-center bg-primary text-white py-2 md:py-2.5 rounded-md font-bold hover:bg-blue-800 transition font-bangla text-xs md:text-sm shadow-sm">
                                    অর্ডার করুন
                                </a>
                                <a href="product-details.php?id='.$prod['id'].'" class="block w-full text-center bg-blue-50 text-primary border border-primary border-opacity-30 py-2 md:py-2.5 rounded-md font-bold hover:bg-primary hover:text-white transition font-bangla text-xs md:text-sm">
                                    কার্টে যোগ করুন
                                </a>
                            </div>
                        </div>
                    </div>';
                }
            }
            ?>
        </div>
    </div>
</section>

<!-- Call to Action Section -->
<section class="py-16 bg-primary text-white relative overflow-hidden">
    <div class="absolute top-0 right-0 opacity-10">
        <i class="fa-solid fa-print text-[300px] -mr-20 -mt-20"></i>
    </div>
    <div class="container mx-auto px-4 relative z-10 text-center">
        <h2 class="text-3xl md:text-4xl font-bold mb-4 font-bangla">কাস্টম ডিজাইনের প্রয়োজন?</h2>
        <p class="text-blue-100 mb-8 max-w-2xl mx-auto font-bangla text-lg">আপনার প্রতিষ্ঠানের জন্য ইউনিক ডিজাইন এবং বাল্ক অর্ডারের জন্য আমাদের সাথে সরাসরি কথা বলুন। আমরা দিচ্ছি স্পেশাল ডিসকাউন্ট।</p>
        
        <div class="flex flex-col md:flex-row gap-4 justify-center items-center">
            <!-- কলের জন্য অরিজিনাল নাম্বার (যেমন আছে সেভাবেই) -->
            <a href="tel:<?= $contact_phone ?? '+8801879995834' ?>" class="w-full md:w-auto bg-secondary text-white px-8 py-3.5 rounded-full font-bold hover:bg-yellow-600 transition shadow-lg font-bangla flex items-center justify-center">
                <i class="fa-solid fa-phone mr-2"></i> কল করুন
            </a>
            <!-- হোয়াটসঅ্যাপের জন্য ক্লিন করা নাম্বার ($wa_phone) ব্যবহার করা হয়েছে -->
            <a href="https://wa.me/<?= $wa_phone ?>?text=হ্যালো, আমি আপনাদের প্রিন্টিং সার্ভিস সম্পর্কে জানতে চাই।" target="_blank" class="w-full md:w-auto bg-[#25D366] text-white px-8 py-3.5 rounded-full font-bold hover:bg-green-600 transition shadow-lg font-bangla flex items-center justify-center">
                <i class="fa-brands fa-whatsapp text-2xl mr-2"></i> হোয়াটসঅ্যাপ করুন
            </a>
        </div>
    </div>
</section>

<!-- Slider Script -->
<script>
    const slides = document.querySelectorAll('.slide');
    const dots = document.querySelectorAll('.dot');
    const nextBtn = document.getElementById('nextBtn');
    const prevBtn = document.getElementById('prevBtn');
    let currentSlide = 0;
    let slideInterval;

    function showSlide(index) {
        slides.forEach((slide, i) => {
            if (i === index) {
                slide.classList.remove('opacity-0');
                slide.classList.add('opacity-100', 'z-10');
            } else {
                slide.classList.remove('opacity-100', 'z-10');
                slide.classList.add('opacity-0');
            }
        });

        dots.forEach((dot, i) => {
            if (i === index) {
                dot.className = "dot cursor-pointer transition-all duration-300 h-2.5 rounded-full w-8 bg-secondary";
            } else {
                dot.className = "dot cursor-pointer transition-all duration-300 h-2.5 rounded-full w-2.5 bg-white bg-opacity-50 hover:bg-opacity-100";
            }
        });
    }

    function resetInterval() {
        clearInterval(slideInterval);
        slideInterval = setInterval(nextSlide, 5000); 
    }

    function nextSlide() {
        currentSlide = (currentSlide + 1) % slides.length;
        showSlide(currentSlide);
        resetInterval();
    }

    function prevSlide() {
        currentSlide = (currentSlide - 1 + slides.length) % slides.length;
        showSlide(currentSlide);
        resetInterval();
    }

    function goToSlide(index) {
        currentSlide = index;
        showSlide(currentSlide);
        resetInterval();
    }

    if(nextBtn && prevBtn) {
        nextBtn.addEventListener('click', nextSlide);
        prevBtn.addEventListener('click', prevSlide);
    }

    slideInterval = setInterval(nextSlide, 5000);
</script>

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