<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Premium Rewards | Inscipe Coins</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap">
    <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore-compat.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="coines.css">
</head>
<body>
    <header>
        <div class="header-content">
            <div class="header-logo">
                <span class="In">Ins</span><span class="scipe">cipe</span>
            </div>
            <h1><i class="fas fa-gift"></i> Premium Rewards</h1>
            <a href="account" class="profile-icon"><i class="fas fa-user"></i></a>
        </div>
    </header>

    <div id="loader" class="loader-overlay">
        <div class="loader"></div>
    </div>

    <main id="main-content">
        <section id="output" class="user-coins">
            <h2>Loading Your Inscipe Coins...</h2>
            <div id="progress-bar" class="progress-bar">
                <div class="progress-fill"></div>
            </div>
        </section>

        <section id="user-address" class="address-section">
            <h2><i class="fas fa-map-marker-alt"></i> Your Saved Addresses</h2>
            <div id="address-list"></div>
        </section>

        <section id="gift-section" class="gift-section">
            <div class="catalog-header">
                <h2><i class="fas fa-star"></i> Premium Rewards Catalog</h2>
                <div class="filter-sort">
                    <select id="filter-category">
                        <option value="all">All Categories</option>
                    </select>
                    <select id="sort-order">
                        <option value="coins-asc" selected>Coins: Low to High</option>
                        <option value="coins-desc">Coins: High to Low</option>
                    </select>
                </div>
            </div>
            <div id="gift-catalog"></div>
            <p id="message" class="message"></p>
        </section>
    </main>

    <div id="quick-view-modal" class="modal">
        <div class="modal-content">
            <button class="modal-close"><i class="fas fa-times"></i></button>
            <h3 id="modal-title"></h3>
            <img id="modal-image" src="" alt="">
            <p id="modal-description"></p>
            <div id="modal-price"></div>
            <button id="modal-redeem" class="redeem-btn" disabled>Redeem</button>
        </div>
    </div>

    <div class="bottom-navigation">
        <a href="/" class="nav-item"><i class="fas fa-home"></i><span>Home</span></a>
        <a href="account" class="nav-item"><i class="fas fa-user"></i><span>You</span></a>
        <a href="MY-order" class="nav-item"><i class="fas fa-shopping-bag"></i><span>My Orders</span></a>
        <a href="inscipecoins" class="nav-item active"><i class="fas fa-gift"></i><span>Redeem</span></a>
        <a href="bot" class="nav-item"><i class="fas fa-headset"></i><span>Nova</span></a>
    </div>

    <footer>
        <div class="footer-content">
            <p>© 2025 Inscipe. All rights reserved.</p>
            <nav>
                <a href="Privacy-Policy">Privacy Policy</a> | 
                <a href="TandC.html">Terms of Service</a> 
            </nav>
        </div>
    </footer>
    <script src="inscipecoines.js"></script>
</body>
</html>
    <script>
      console.clear();
    </script>
  