<!-- Swiper JS CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<style>
    .main-slider { width: 100%; height: 450px !important; padding: 0 !important; background: #fff; }
    .swiper-slide { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; }
    .slide-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: 1; }
    .slide-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 2; }
    .slide-content { position: relative; z-index: 3; text-align: center; max-width: 1000px; padding: 0 20px; }
    .slide-content h2 { font-size: clamp(2rem, 5vw, 2.7rem); font-weight: 800; margin-bottom: 15px; transform: translateY(40px); opacity: 0; transition: 0.8s all ease; }
    .slide-content p { font-size: clamp(1rem, 2vw, 1.4rem); margin-bottom: 30px; transform: translateY(40px); opacity: 0; transition: 0.8s all ease 0.2s; }
    .swiper-slide-active .slide-content h2, .swiper-slide-active .slide-content p { transform: translateY(0); opacity: 1; }
    .slider-btn { display: inline-block; padding: 14px 40px; background: #00aeef; color: #fff; text-decoration: none; border-radius: 50px; font-weight: bold; transition: 0.3s; transform: scale(0.9); opacity: 0; }
    .swiper-slide-active .slider-btn { transform: scale(1); opacity: 1; transition: 0.5s all ease 0.4s; }
    .slider-btn:hover { background: #57a03a; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
    .swiper-button-next, .swiper-button-prev { color: #fff !important; width: 50px; height: 50px; background: rgba(255,255,255,0.1); border-radius: 50%; backdrop-filter: blur(5px); }
    .swiper-button-next:after, .swiper-button-prev:after { font-size: 20px; font-weight: bold; }
    .swiper-pagination-bullet { background: #fff; opacity: 0.5; width: 12px; height: 12px; }
    .swiper-pagination-bullet-active { background: #00aeef; opacity: 1; }
</style>

<div class="swiper main-slider">
    <div class="swiper-wrapper">
        <?php
        $slides = mysqli_query($conn, "SELECT * FROM sliders ORDER BY order_no ASC");
        if (mysqli_num_rows($slides) > 0) {
            while ($s = mysqli_fetch_assoc($slides)) {
                ?>
                <div class="swiper-slide">
                    <div class="slide-bg" style="background-image: url('<?php echo $s['image_url']; ?>');"></div>
                    <div class="slide-overlay"></div>
                    <div class="slide-content">
                        <h2><?php echo $s['title']; ?></h2>
                        <p><?php echo $s['description']; ?></p>
                        <?php if (!empty($s['btn_text'])): ?>
                            <a href="<?php echo $s['btn_link'] ?: '#'; ?>" class="slider-btn"><?php echo $s['btn_text']; ?></a>
                        <?php endif; ?>
                    </div>
                </div>
                <?php
            }
        } else {
            // ডিফল্ট স্লাইড যদি ডাটাবেস খালি থাকে
            echo '<div class="swiper-slide"><div class="slide-bg" style="background: #333;"></div><div class="slide-content"><h2>No Slides Found</h2><p>Please add slides from admin panel.</p></div></div>';
        }
        ?>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
    new Swiper('.main-slider', {
        loop: true,
        effect: 'fade',
        fadeEffect: { crossFade: true },
        autoplay: { delay: 9000, disableOnInteraction: false },
        pagination: { el: '.swiper-pagination', clickable: true },
        navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
    });
</script>