<style>
    /* ওয়েবসাইটের থিম যাতে ডিজাইন ভাঙতে না পারে তাই !important দেওয়া হয়েছে */
    .fb-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        margin: 40px 0 !important;
        background: transparent !important;
    }

    .fb-book {
        position: relative !important;
        width: 100% !important;
        max-width: 700px !important;
        height: 500px !important; /* বইয়ের উচ্চতা ফিক্স করে দেওয়া হলো */
        perspective: 2500px !important;
        margin: 0 auto !important;
    }

    /* মোবাইলের জন্য ছোট সাইজ */
    @media (max-width: 768px) {
        .fb-book {
            height: 350px !important;
        }
    }
    @media (max-width: 480px) {
        .fb-book {
            height: 250px !important;
        }
    }

    .fb-page {
        position: absolute !important;
        width: 50% !important;
        height: 100% !important;
        top: 0 !important;
        right: 0 !important;
        transform-origin: left center !important;
        transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
        transform-style: preserve-3d !important;
        cursor: pointer !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    .fb-face {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        background-color: #fff !important;
        box-shadow: inset 0 0 10px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.2) !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 2px 8px 8px 2px !important;
    }

    .fb-face.back {
        transform: rotateY(180deg) !important;
        border-radius: 8px 2px 2px 8px !important;
    }

    .fb-face img {
        width: 100% !important;
        height: 100% !important;
        object-fit: fill !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        display: block !important;
    }

    .fb-page.flipped {
        transform: rotateY(-180deg) !important;
    }

    .fb-controls {
        margin-top: 30px !important;
        display: flex !important;
        gap: 15px !important;
        justify-content: center !important;
        z-index: 99 !important;
    }

    .fb-btn {
        padding: 10px 20px !important;
        background: #007bff !important;
        color: #fff !important;
        border: none !important;
        border-radius: 5px !important;
        cursor: pointer !important;
        font-size: 16px !important;
        font-weight: bold !important;
        line-height: 1 !important;
    }
    
    .fb-btn:disabled {
        background: #ccc !important;
        cursor: not-allowed !important;
    }
</style>

<div class="fb-wrapper">
    <div class="fb-book" id="fb-book">
        
        <!-- Page 1 -->
        <div class="fb-page" id="fb-page1">
            <div class="fb-face front">
                <img src="https://dummyimage.com/400x600/3498db/ffffff&text=Cover+(Page+1)" alt="Cover">
            </div>
            <div class="fb-face back">
                <img src="https://dummyimage.com/400x600/e74c3c/ffffff&text=Page+2" alt="Page 2">
            </div>
        </div>

        <!-- Page 2 -->
        <div class="fb-page" id="fb-page2">
            <div class="fb-face front">
                <img src="https://dummyimage.com/400x600/2ecc71/ffffff&text=Page+3" alt="Page 3">
            </div>
            <div class="fb-face back">
                <img src="https://dummyimage.com/400x600/f1c40f/ffffff&text=Back+Cover+(Page+4)" alt="Back Cover">
            </div>
        </div>

    </div>

    <!-- Buttons -->
    <div class="fb-controls">
        <button id="fb-prevBtn" class="fb-btn" disabled>&#8592; Previous</button>
        <button id="fb-nextBtn" class="fb-btn">Next &#8594;</button>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const nextBtn = document.getElementById("fb-nextBtn");
        const prevBtn = document.getElementById("fb-prevBtn");
        const pages = document.querySelectorAll(".fb-page");
        
        let currentLocation = 1;
        let totalPages = pages.length;
        let maxLocation = totalPages + 1;

        pages.forEach((page, index) => {
            page.style.zIndex = totalPages - index;
        });

        function updateButtons() {
            if(prevBtn) prevBtn.disabled = currentLocation === 1;
            if(nextBtn) nextBtn.disabled = currentLocation === maxLocation;
        }

        function goNextPage() {
            if (currentLocation < maxLocation) {
                const page = document.getElementById("fb-page" + currentLocation);
                if(page) {
                    page.classList.add("flipped");
                    page.style.zIndex = currentLocation;
                    currentLocation++;
                    updateButtons();
                }
            }
        }

        function goPrevPage() {
            if (currentLocation > 1) {
                currentLocation--;
                const page = document.getElementById("fb-page" + currentLocation);
                if(page) {
                    page.classList.remove("flipped");
                    page.style.zIndex = totalPages - currentLocation + 1;
                    updateButtons();
                }
            }
        }

        if(nextBtn) nextBtn.addEventListener("click", goNextPage);
        if(prevBtn) prevBtn.addEventListener("click", goPrevPage);

        pages.forEach((page) => {
            page.addEventListener("click", function() {
                if (this.classList.contains("flipped")) {
                    goPrevPage();
                } else {
                    goNextPage();
                }
            });
        });
    });
</script>