                </div>

                <footer class="content-footer" style="background: var(--tcs-gray-800); color: var(--tcs-white); margin-top: 4rem;">
                    <div class="container-xxl">
                        <div class="py-5">
                            <div class="row g-4">
                                <!-- Company Info -->
                                <div class="col-lg-4 col-md-6">
                                    <div class="mb-4">
                                        <div class="st-brand mb-3">
                                            <span class="st-brand-mark">ST</span>
                                            <span class="st-brand-name">
                                                <span class="app-brand-text demo menu-text fw-semibold text-white">SmartThink</span>
                                                <span class="d-block st-brand-sub text-white-50">Learning Hub</span>
                                            </span>
                                        </div>
                                        <p class="text-white-75 mb-3">
                                            Empowering learners worldwide with innovative technology solutions and comprehensive educational resources.
                                        </p>
                                        <div class="d-flex gap-3">
                                            <a href="#" class="text-white-75 hover-primary">
                                                <i class="icon-base ri ri-facebook-fill icon-lg"></i>
                                            </a>
                                            <a href="#" class="text-white-75 hover-primary">
                                                <i class="icon-base ri ri-twitter-fill icon-lg"></i>
                                            </a>
                                            <a href="#" class="text-white-75 hover-primary">
                                                <i class="icon-base ri ri-linkedin-fill icon-lg"></i>
                                            </a>
                                            <a href="#" class="text-white-75 hover-primary">
                                                <i class="icon-base ri ri-youtube-fill icon-lg"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>

                                <!-- Learning Resources -->
                                <div class="col-lg-2 col-md-6">
                                    <h6 class="text-white fw-semibold mb-3">Learning</h6>
                                    <ul class="list-unstyled">
                                        <li class="mb-2"><a href="courses.php" class="text-white-75 text-decoration-none hover-primary">Courses</a></li>
                                        <li class="mb-2"><a href="certificates.php" class="text-white-75 text-decoration-none hover-primary">Certificates</a></li>
                                        <li class="mb-2"><a href="assessments.php" class="text-white-75 text-decoration-none hover-primary">Assessments</a></li>
                                        <li class="mb-2"><a href="#" class="text-white-75 text-decoration-none hover-primary">Learning Paths</a></li>
                                        <li class="mb-2"><a href="#" class="text-white-75 text-decoration-none hover-primary">Resources</a></li>
                                    </ul>
                                </div>

                                <!-- Company -->
                                <div class="col-lg-2 col-md-6">
                                    <h6 class="text-white fw-semibold mb-3">Company</h6>
                                    <ul class="list-unstyled">
                                        <li class="mb-2"><a href="../website/about.php" class="text-white-75 text-decoration-none hover-primary">About Us</a></li>
                                        <li class="mb-2"><a href="../website/careers.php" class="text-white-75 text-decoration-none hover-primary">Careers</a></li>
                                        <li class="mb-2"><a href="../website/contact.php" class="text-white-75 text-decoration-none hover-primary">Contact</a></li>
                                        <li class="mb-2"><a href="../website/privacy-policy.php" class="text-white-75 text-decoration-none hover-primary">Data Privacy Policy</a></li>
                                        <li class="mb-2"><a href="../website/training-agreement.php" class="text-white-75 text-decoration-none hover-primary">Training Non-Compete &amp; Materials</a></li>
                                        <li class="mb-2"><a href="../website/payment-policy.php" class="text-white-75 text-decoration-none hover-primary">Non-Refundable Payment Policy</a></li>
                                        <li class="mb-2"><a href="../website/terms.php" class="text-white-75 text-decoration-none hover-primary">Terms of Service</a></li>
                                    </ul>
                                </div>

                                <!-- Support -->
                                <div class="col-lg-2 col-md-6">
                                    <h6 class="text-white fw-semibold mb-3">Support</h6>
                                    <ul class="list-unstyled">
                                        <li class="mb-2"><a href="profile.php" class="text-white-75 text-decoration-none hover-primary">My Profile</a></li>
                                        <li class="mb-2"><a href="#" class="text-white-75 text-decoration-none hover-primary">Help Center</a></li>
                                        <li class="mb-2"><a href="#" class="text-white-75 text-decoration-none hover-primary">System Status</a></li>
                                        <li class="mb-2"><a href="#" class="text-white-75 text-decoration-none hover-primary">Feedback</a></li>
                                        <li class="mb-2"><a href="#" class="text-white-75 text-decoration-none hover-primary">Community</a></li>
                                    </ul>
                                </div>

                                <!-- Contact Info -->
                                <div class="col-lg-2 col-md-6">
                                    <h6 class="text-white fw-semibold mb-3">Contact</h6>
                                    <div class="text-white-75">
                                        <p class="mb-2">
                                            <i class="icon-base ri ri-map-pin-line me-2"></i>
                                            Global Headquarters
                                        </p>
                                        <p class="mb-2">
                                            <i class="icon-base ri ri-phone-line me-2"></i>
                                            +1 (555) 123-4567
                                        </p>
                                        <p class="mb-2">
                                            <i class="icon-base ri ri-mail-line me-2"></i>
                                            support@smartthink.com
                                        </p>
                                        <p class="mb-0">
                                            <i class="icon-base ri ri-time-line me-2"></i>
                                            24/7 Support Available
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Bottom Bar -->
                        <div class="border-top border-white-10 py-4">
                            <div class="d-flex align-items-center justify-content-between flex-md-row flex-column">
                                <div class="mb-2 mb-md-0 text-white-75">
                                    &copy; <?php echo date('Y'); ?> SmartThink. All rights reserved.
                                </div>
                                <div class="d-flex gap-4 text-white-75">
                                    <a href="#" class="text-decoration-none hover-primary">Security</a>
                                    <a href="#" class="text-decoration-none hover-primary">Accessibility</a>
                                    <a href="#" class="text-decoration-none hover-primary">Sitemap</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <style>
                        .hover-primary:hover {
                            color: var(--tcs-primary-light) !important;
                            transition: color 0.2s ease;
                        }
                    </style>
                </footer>

                <div class="content-backdrop fade"></div>
            </div>
        </div>
    </div>

    <div class="layout-overlay layout-menu-toggle"></div>
</div>

    <script src="<?php echo APP_URL; ?>/assets/materio/assets/vendor/libs/jquery/jquery.js"></script>
    <script src="<?php echo APP_URL; ?>/assets/materio/assets/vendor/libs/popper/popper.js"></script>
    <script src="<?php echo APP_URL; ?>/assets/materio/assets/vendor/js/bootstrap.js"></script>
    <script src="<?php echo APP_URL; ?>/assets/materio/assets/vendor/libs/node-waves/node-waves.js"></script>
    <script src="<?php echo APP_URL; ?>/assets/materio/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
    <script src="<?php echo APP_URL; ?>/assets/materio/assets/vendor/js/menu.js"></script>

    <script src="<?php echo APP_URL; ?>/assets/materio/assets/js/main.js"></script>

    <!-- Toast container -->
    <div aria-live="polite" aria-atomic="true" class="position-fixed top-0 end-0 p-3" style="z-index: 1060;">
        <div id="toast-container"></div>
    </div>

    <script>
    function showToast(message, type) {
        type = type || 'info';
        var container = document.getElementById('toast-container');
        if (!container) return;
        var id = 't' + Date.now();
        var html = '<div id="'+id+'" class="toast align-items-center text-bg-' + (type === 'danger' ? 'danger' : (type === 'success' ? 'success' : 'info')) + ' border-0 mb-2" role="alert" aria-live="assertive" aria-atomic="true">'
            + '<div class="d-flex"><div class="toast-body">' + message + '</div>'
            + '<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button></div></div>';
        container.insertAdjacentHTML('beforeend', html);
        var el = document.getElementById(id);
        var bs = new bootstrap.Toast(el, { delay: 5000 });
        bs.show();
        // remove DOM node after hidden
        el.addEventListener('hidden.bs.toast', function(){ el.remove(); });
    }

    // Convert visible alerts to toasts for better UX
    document.addEventListener('DOMContentLoaded', function(){
        var alerts = document.querySelectorAll('.alert');
        alerts.forEach(function(a){
            var cls = a.className || '';
            var type = 'info';
            if (cls.indexOf('alert-success') !== -1) type = 'success';
            if (cls.indexOf('alert-danger') !== -1 || cls.indexOf('alert-error') !== -1) type = 'danger';
            var text = a.innerText.trim();
            if (text) showToast(text, type);
        });
    });
    </script>
</body>
</html>
