add_shortcode('accessible_slider', function($atts) {
    // 接收短碼參數：高度
    $atts = shortcode_atts(array(
        'height' => '460px', // 預設高度
    ), $atts);

    ob_start();
    ?>
    <style>
        .slider-container {
            position: relative;
            width: 100%; /* 響應式寬度 */
            height: <?php echo esc_attr($atts['height']); ?>; /* 可設定高度 */
            overflow: hidden;
        }
        .slider-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
        }
        .slider-container img.active {
            display: block;
        }
        .slider-controls {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 5px;
        }
        .slider-controls button {
            background: #fff;
            border: 1px solid #333;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
        .slider-controls button[aria-current="true"] {
            background: #333;
            color: #fff;
        }
        /* Focus 樣式：明顯顏色差異 */
        .slider-controls button:focus {
            outline: 3px solid #ff6600;
            background: #ffcc00;
            color: #000;
        }
        .slider-playback {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            gap: 10px;
        }
        .slider-playback button {
            background: #333;
            color: #fff;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 4px;
        }
        .slider-playback button:focus {
            outline: 3px solid #ff6600;
            background: #ffcc00;
            color: #000;
        }
    </style>

    <div class="slider-container" role="region" aria-label="圖片輪播">
		<div class="slider-playback">
            <button id="pauseBtn" aria-label="暫停輪播">暫停</button>
            <button id="playBtn" aria-label="繼續播放輪播">播放</button>
        </div>
		
        <img src="https://mgnt.npust.edu.tw/wp-content/uploads/2022/07/AACSB.png" alt="國立屏東科技大學管理學院通過AACSB認證" class="active" />
        <img src="https://mgnt.npust.edu.tw/wp-content/uploads/2022/03/15714438044121-scaled.jpg" alt="國立屏東科技大學管理學院大樓外觀" />
        <img src="https://mgnt.npust.edu.tw/wp-content/uploads/2023/07/IMG_8590_1-2-scaled.jpg" alt="國立屏東科技大學管理學院大樓正面" />

        <div class="slider-controls" role="tablist" aria-label="輪播控制">
            <button role="tab" aria-selected="true" aria-current="true" aria-label="顯示第一張圖片"></button>
            <button role="tab" aria-selected="false" aria-label="顯示第二張圖片"></button>
            <button role="tab" aria-selected="false" aria-label="顯示第三張圖片"></button>
        </div>

    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const images = document.querySelectorAll(".slider-container img");
            const buttons = document.querySelectorAll(".slider-controls button");
            const pauseBtn = document.getElementById("pauseBtn");
            const playBtn = document.getElementById("playBtn");
            let index = 0;
            let intervalId;

            function showSlide(i) {
                images.forEach((img, idx) => {
                    img.classList.toggle("active", idx === i);
                });
                buttons.forEach((btn, idx) => {
                    btn.setAttribute("aria-selected", idx === i ? "true" : "false");
                    btn.setAttribute("aria-current", idx === i ? "true" : "false");
                });
                index = i;
            }

            function startSlider() {
                intervalId = setInterval(() => {
                    let next = (index + 1) % images.length;
                    showSlide(next);
                }, 5000);
                playBtn.setAttribute("aria-pressed", "true");
                pauseBtn.setAttribute("aria-pressed", "false");
            }

            function stopSlider() {
                clearInterval(intervalId);
                playBtn.setAttribute("aria-pressed", "false");
                pauseBtn.setAttribute("aria-pressed", "true");
            }

            // 初始化自動輪播
            startSlider();

            // 按鈕控制圖片切換
            buttons.forEach((btn, idx) => {
                btn.addEventListener("click", () => {
                    showSlide(idx);
                });
                btn.addEventListener("keydown", (e) => {
                    if (e.key === "Enter" || e.key === " ") {
                        showSlide(idx);
                    }
                });
            });

            // 暫停/播放控制
            pauseBtn.addEventListener("click", stopSlider);
            playBtn.addEventListener("click", startSlider);

            // 鍵盤左右方向鍵控制
            document.addEventListener("keydown", (e) => {
                if (document.activeElement.closest(".slider-container")) {
                    if (e.key === "ArrowLeft") {
                        let prev = (index - 1 + images.length) % images.length;
                        showSlide(prev);
                    } else if (e.key === "ArrowRight") {
                        let next = (index + 1) % images.length;
                        showSlide(next);
                    }
                }
            });
        });
    </script>
    <?php
    return ob_get_clean();
});