<?php
// Tự động nhận diện khách hàng đang ở trang nào
$trang_hien_tai = basename($_SERVER['PHP_SELF']);
?>
<style>
    /* CSS cho thanh điều hướng dưới cùng */
    .thanh-dieu-huong-di-dong {
        display: none;
        background: #0056b3;
        box-shadow: 0 -3px 15px rgba(0,0,0,0.2);
        padding: 8px 0;
        padding-bottom: env(safe-area-inset-bottom);
        position: fixed; /* Cố định dưới đáy màn hình */
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
    }
    .thanh-dieu-huong-di-dong ul {
        display: flex;
        justify-content: space-around;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .thanh-dieu-huong-di-dong a {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #b3d7ff;
        font-size: 11px;
        font-weight: 500;
        transition: 0.2s;
    }
    .thanh-dieu-huong-di-dong a .icon { 
        font-size: 22px; 
        margin-bottom: 3px; 
    }
    /* Đổi màu trắng sáng cho nút đang được chọn */
    .thanh-dieu-huong-di-dong a.dang-chon,
    .thanh-dieu-huong-di-dong a:hover { 
        color: #ffffff; 
        font-weight: 700;
    }

    /* Chỉ hiển thị thanh này trên thiết bị di động */
    @media (max-width: 768px) {
        .thanh-dieu-huong-di-dong { display: block; }
    }
</style>

<nav class="thanh-dieu-huong-di-dong">
    <ul>
        <li>
            <a href="index.php" class="<?php echo ($trang_hien_tai == 'index.php') ? 'dang-chon' : ''; ?>">
                <span class="icon">🏠</span>
                <span>Trang Chủ</span>
            </a>
        </li>
        <li>
            <a href="am-nhac.php" class="<?php echo ($trang_hien_tai == 'am-nhac.php') ? 'dang-chon' : ''; ?>">
                <span class="icon">🎵</span>
                <span>Âm Nhạc</span>
            </a>
        </li>
        <li>
            <a href="hoi-hoa.php" class="<?php echo ($trang_hien_tai == 'hoi-hoa.php') ? 'dang-chon' : ''; ?>">
                <span class="icon">🎨</span>
                <span>Hội Họa</span>
            </a>
        </li>
        <li>
            <a href="gian-hang.php" class="<?php echo ($trang_hien_tai == 'gian-hang.php') ? 'dang-chon' : ''; ?>">
                <span class="icon">🛍️</span>
                <span>Gian Hàng</span>
            </a>
        </li>
        <li>
            <a href="thong-bao-su-kien.php" class="<?php echo ($trang_hien_tai == 'thong-bao-su-kien.php') ? 'dang-chon' : ''; ?>">
                <span class="icon">📢</span>
                <span>Thông Báo</span>
            </a>
        </li>
        <li>
            <?php if(isset($_SESSION['nguoi_dung_id'])): ?>
                <a href="ho-so-ca-nhan.php" class="<?php echo ($trang_hien_tai == 'ho-so-ca-nhan.php') ? 'dang-chon' : ''; ?>">
                    <span class="icon">👤</span>
                    <span>Tài Khoản</span>
                </a>
            <?php else: ?>
                <a href="dang-nhap.php" class="<?php echo ($trang_hien_tai == 'dang-nhap.php') ? 'dang-chon' : ''; ?>">
                    <span class="icon">🔐</span>
                    <span>Tài Khoản</span>
                </a>
            <?php endif; ?>
        </li>
    </ul>
</nav>


<style>
    .nut-lien-he-co-dinh {
        position: fixed;
        right: 18px;
        bottom: 80px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 999;
    }
    .nut-lien-he-co-dinh a {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        box-shadow: 0 4px 14px rgba(0,0,0,0.25);
        transition: transform 0.2s, box-shadow 0.2s;
        position: relative;
    }
    .nut-lien-he-co-dinh a:hover {
        transform: scale(1.12);
        box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    }
    .nut-goi-dien { background: #28a745; }
    .nut-zalo     { background: #0068ff; }
    .nut-lien-he-co-dinh a svg { width: 26px; height: 26px; fill: white; }
    /* Tooltip */
    .nut-lien-he-co-dinh a::before {
        content: attr(data-tooltip);
        position: absolute;
        right: 60px;
        background: rgba(0,0,0,0.75);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 6px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
    }
    .nut-lien-he-co-dinh a:hover::before { opacity: 1; }
    /* Hiệu ứng rung cho nút gọi */
    @keyframes rung {
        0%,100% { transform: rotate(0deg); }
        20% { transform: rotate(-12deg); }
        40% { transform: rotate(12deg); }
        60% { transform: rotate(-8deg); }
        80% { transform: rotate(8deg); }
    }
    .nut-goi-dien { animation: rung 2.5s ease-in-out infinite; }
    .nut-goi-dien:hover { animation: none; }
    @media (max-width: 768px) {
        .nut-lien-he-co-dinh { bottom: 90px; right: 14px; }
        .nut-lien-he-co-dinh a { width: 46px; height: 46px; }
        .nut-lien-he-co-dinh a svg { width: 22px; height: 22px; }
    }
</style>

<div class="nut-lien-he-co-dinh">
    <!-- NÚT GỌI ĐIỆN -->
    <a href="tel:0913146887" class="nut-goi-dien" data-tooltip="Gọi: 0913 146 887" aria-label="Gọi điện">
        <svg viewBox="0 0 24 24"><path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z"/></svg>
    </a>
    <!-- NÚT ZALO -->
    <a href="https://zalo.me/0913146887" target="_blank" rel="noopener" class="nut-zalo" data-tooltip="Zalo: 0913 146 887" aria-label="Nhắn Zalo">
        <img src="images/icon-zalo.png" alt="Zalo" style="width:32px;height:32px;object-fit:contain;">
    </a>
</div>