<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="easepay">
    <meta property="og:type" content="website">
    <meta name="format-detection" content="telephone=0">

    <!-- Favicon -->
    <link rel="icon" href="images/niv1cEEAdunO.ico" type="image/x-icon">

    <!-- Homescreen Icon -->
    <link rel="apple-touch-icon" sizes="180x180" href="images/Ot3Fnfod2wqv.png">
    <link rel="icon" type="image/png" sizes="32x32" href="images/Ot3Fnfod2wqv.png">
    <link rel="icon" type="image/png" sizes="16x16" href="images/Ot3Fnfod2wqv.png">

    <meta name="theme-color" content="#b70101">
    <link rel="stylesheet" href="css/uMTiK40sub7i.css">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <link href="https://fonts.googleapis.com/css2?family=Arimo&family=Merriweather&family=Kanitfamily=Roboto&family=Ubuntu&display=swap" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="css/Uht97h7pQdUn.css">
    <link rel="stylesheet" href="css/3thIsPR2wWGL.css">
    
    <!-- Basic Meta Tags -->
    <meta name="description" content="Download the easepay app now and unlock exclusive discounts on data MB and airtime in Nigeria. At easepay.ng, find unbeatable prices and lightning-fast service for all your data and airtime needs. Stay connected affordably with easepay.ng.">
    <meta name="keywords" content="download easepay, easepay app, app data MB, airtime, cheap data, affordable airtime, mobile data, easepay login, internet plans, data bundles, top-up, recharge cards, easepay data, best data prices, login easepay.ng, data and airtime deals, telecom services">
    <meta name="author" content="easepay">

    <meta name="format-detection" content="telephone=no">    
    <title>Download EasePay APP</title>
    
    <style>
        /* Review Form Styles */
        .review-form-container {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .review-form-container h3 {
            margin-top: 0;
            color: #03016d;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .form-group input, 
        .form-group textarea, 
        .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: inherit;
        }
        
        .form-group textarea {
            min-height: 100px;
            resize: vertical;
        }
        
        .rating-stars {
            display: flex;
            gap: 5px;
            margin-bottom: 10px;
        }
        
        .rating-stars span {
            font-size: 24px;
            cursor: pointer;
            color: #ddd;
        }
        
        .rating-stars span.active {
            color: #03016d;
        }
        
        .submit-review-btn {
            background-color: #03016d;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }
        
        .submit-review-btn:hover {
            background-color: #990000;
        }
        
        .notification {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            display: none;
        }
        
        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        /* New Styles for Added Features */
        .button-container {
            display: flex;
            gap: 15px;
            margin: 20px 0;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .visit-website-btn {
            background-color: #990000;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            font-size: 16px;
            transition: background-color 0.3s;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }
        
        .visit-website-btn:hover {
            background-color: #770000;
        }
        
        .slider-container {
            margin: 30px 0;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            position: relative;
        }
        
        .slider {
            display: flex;
            transition: transform 0.5s ease;
            height: 300px;
        }
        
        .slide {
            min-width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }
        
        .slide img {
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
        
        .slider-controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 15px;
        }
        
        .slider-btn {
            background-color: #03016d;
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s;
        }
        
        .slider-btn:hover {
            background-color: #990000;
        }
        
        .slider-dots {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 15px;
        }
        
        .slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #ddd;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .slider-dot.active {
            background-color: #03016d;
        }
        
        .fallback-text {
            text-align: center;
            padding: 60px 20px;
            color: #666;
            font-style: italic;
            background-color: #f9f9f9;
            border-radius: 8px;
            margin: 10px 0;
            border: 2px dashed #ddd;
        }
        
        .fallback-text h3 {
            color: #03016d;
            margin-bottom: 10px;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .slider {
                height: 250px;
            }
            
            .button-container {
                flex-direction: column;
                align-items: center;
            }
            
            .visit-website-btn,
            .st-download-button button {
                width: 100%;
                max-width: 300px;
            }
        }
        
        @media (max-width: 480px) {
            .slider {
                height: 200px;
            }
        }
    </style>
</head>

<body>
    <!-- Track page visit -->
    <script>
        // Track page visit
        document.addEventListener('DOMContentLoaded', function() {
            // Send request to track page visit
            fetch('track_visit.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    page: 'download',
                    url: window.location.href,
                    referrer: document.referrer
                })
            }).catch(error => console.log('Visit tracking error:', error));
            
            // Initialize slider
            initSlider();
        });
    </script>

    <!-- chat bot here -->
    <div>
        <div>
          <div onclick="window.location='https://wa.me/+2348161812085?text=Hello%2C+EasePay+i+love+using+your+service'" class="chat_box">
            <i class="fa fa-headset" aria-hidden="true"></i>
          </div>
        </div>
    </div>
    <!-- end of chat bot -->
    
    <!-- menubar section -->
    <main class="menubar_main">
        <section class="main_sec">
            <section class="sign_section set_menu_center">
                <div>
                    <div>
                        <div class="sign_button">
                            <a href="https://easepay.ng/user/signup.php">
                                <button>
                                    Sign up
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
            </section>
            <section class="menu_bar_section set_menu_center">
                <h3>EASEPAY</h3>
            </section>
            <section class="login_section set_menu_center">
                <div>
                    <div>
                        <div class="sign_button">
                            <a href="https://easepay.ng/user/login.php">
                                <button>
                                    Sign in
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
            </section>
        </section>
    </main>
    
    <!-- website content section -->
    <main class="content_main">
        <section class="main_content">
            <section id="leftright" class="left_section">
                <!-- LEFT SECTION -->
            </section>
            <section class="center_section">

                <div class="st-download-parent">
                    <br>
                    <div class="st-app-info-container">
                        <div class="st-app-icon">
                            <img class="app-icon" src="images/0EV2HahWekXe.png" alt="EasePay App Icon">
                        </div>
                        <div class="st-app-name-detail">
                            <div class="st-app-name">
                                <h1>
                                    EasePay | 1GB N213
                                </h1>
                            </div>
                            <div class="st-developer-name">
                                <div>
                                    EasePay Dev
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="st-total-download-parent">
                        <div class="st-total-download">
                            <div class="as-d-number" id="total-downloads">
                                Loading...
                            </div>
                            <div class="as-d-name">
                                Downloads
                            </div>
                        </div>
                        <div class="st-total-review">
                            <div class="as-d-number" id="total-reviews">
                                Loading...
                            </div>
                            <div class="as-d-name">
                                Reviews
                            </div>
                        </div>
                        <div class="st-total-rate">
                            <div class="as-d-number" id="average-rating">
                                Loading...
                            </div>
                            <div class="as-d-name">
                                Rated
                            </div>
                        </div>
                    </div>
                    <div class="button-container">
                        <div class="st-download-button">
                            <a href="easepay1.0.3.apk" class="st-download-app" style="display: none" download="">Download</a>
                            <div>
                                <button onclick="downloadApp(this)" style="padding: 12px 30px; font-size: 16px;">
                                    Install App
                                </button>
                            </div>
                        </div>
                        <a href="https://easepay.ng" class="visit-website-btn" target="_blank">
                            Visit Website
                        </a>
                    </div>
                </div>

                <div class="st-screenshot-container">
                    <div class="st-screenshot-child">
                        <img src="images/src%20%281%29.png" alt="App Screenshot 1">
                    </div>
                    <div class="st-screenshot-child">
                        <img src="images/src%20%282%29.png" alt="App Screenshot 2">
                    </div>
                    <div class="st-screenshot-child">
                        <img src="images/src%20%283%29.png" alt="App Screenshot 3">
                    </div>
                    <div class="st-screenshot-child">
                        <img src="images/src%20%284%29.png" alt="App Screenshot 4">
                    </div>
                </div>

                <!-- Image Slider Section -->
                <div class="slider-container">
                    <div class="slider" id="imageSlider">
                        <!-- Slides will be added dynamically -->
                    </div>
                    
                    <!-- Fallback text if images don't load -->
                    <div class="fallback-text" id="sliderFallback" style="display: none;">
                        <h3>Discover EasePay Features</h3>
                        <p>Experience seamless mobile recharge and data purchases with our user-friendly app.</p>
                        <p>Get the best rates for airtime and data bundles across all networks in Nigeria.</p>
                        <p>Enjoy instant transactions and 24/7 customer support with EasePay.</p>
                    </div>
                    
                    <div class="slider-controls">
                        <button class="slider-btn" id="prevBtn">←</button>
                        <button class="slider-btn" id="nextBtn">→</button>
                    </div>
                    <div class="slider-dots" id="sliderDots">
                        <!-- Dots will be added dynamically -->
                    </div>
                </div>

                <!-- Review Form -->
                <div class="review-form-container">
                    <h3>Leave a Review</h3>
                    <div id="notification" class="notification"></div>
                    <form id="reviewForm">
                        <div class="form-group">
                            <label for="name">Your Name</label>
                            <input type="text" id="name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="rating">Rating</label>
                            <div class="rating-stars" id="rating-stars">
                                <span data-value="1">☆</span>
                                <span data-value="2">☆</span>
                                <span data-value="3">☆</span>
                                <span data-value="4">☆</span>
                                <span data-value="5">☆</span>
                            </div>
                            <input type="hidden" id="rating" name="rating" required>
                        </div>
                        <div class="form-group">
                            <label for="review">Your Review</label>
                            <textarea id="review" name="review" required></textarea>
                        </div>
                        <button type="submit" class="submit-review-btn">Submit Review</button>
                    </form>
                </div>

                <div class="st-review-rating-container">
                    <div class="st-rating-number">
                        <div class="st-rating">
                            <h2 id="average-rating-display">
                                0.0
                            </h2>
                        </div>
                        <div class="as-d-name" id="total-reviews-display">
                            0 reviews
                        </div>
                    </div>
                    <div class="st-rating-chart">
                        <div class="st-rating-chart-child">
                            <div>
                                5
                            </div>
                            <div class="st-background">
                                <div class="st-length" id="rating-5" style="width: 0%"></div>
                            </div>
                        </div>
                        <div class="st-rating-chart-child">
                            <div>
                                4
                            </div>
                            <div class="st-background">
                                <div class="st-length" id="rating-4" style="width: 0%"></div>
                            </div>
                        </div>
                        <div class="st-rating-chart-child">
                            <div>
                                3
                            </div>
                            <div class="st-background">
                                <div class="st-length" id="rating-3" style="width: 0%"></div>
                            </div>
                        </div>
                        <div class="st-rating-chart-child">
                            <div>
                                2
                            </div>
                            <div class="st-background">
                                <div class="st-length" id="rating-2" style="width: 0%"></div>
                            </div>
                        </div>
                        <div class="st-rating-chart-child">
                            <div>
                                1
                            </div>
                            <div class="st-background">
                                <div class="st-length" id="rating-1" style="width: 0%"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="reviews-container">
                    <!-- Reviews will be loaded here -->
                </div>

                <div class="st-load-more" id="load-more-container" style="display: none;">
                    <div onclick="loadMoreReviews()">
                        Load more
                    </div>
                </div>

            </section>
            <section id="leftright" class="right_section">
                <!-- right section -->
            </section>
        </section>
    </main>

    <script>
        // Global variables
        let currentPage = 1;
        const reviewsPerPage = 5;
        let currentSlide = 0;
        let sliderInterval;
        const sliderImages = [
            { src: 'images/slider1.jpg', alt: 'EasePay Banner 1' },
            { src: 'images/slider2.jpg', alt: 'EasePay Banner 2' },
            { src: 'images/slider3.jpg', alt: 'EasePay Banner 3' }
        ];
        
        // DOM Content Loaded
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize rating stars
            initRatingStars();
            
            // Load app statistics
            loadAppStatistics();
            
            // Load reviews
            loadReviews();
            
            // Handle review form submission
            document.getElementById('reviewForm').addEventListener('submit', handleReviewSubmit);
            
            // Initialize slider
            initSlider();
            
            // Setup slider controls
            setupSliderControls();
        });
        
        // Initialize rating stars
        function initRatingStars() {
            const stars = document.querySelectorAll('#rating-stars span');
            stars.forEach(star => {
                star.addEventListener('click', function() {
                    const rating = parseInt(this.getAttribute('data-value'));
                    document.getElementById('rating').value = rating;
                    
                    // Update star display
                    stars.forEach((s, index) => {
                        if (index < rating) {
                            s.textContent = '★';
                            s.classList.add('active');
                        } else {
                            s.textContent = '☆';
                            s.classList.remove('active');
                        }
                    });
                });
            });
        }
        
        // Initialize slider
        function initSlider() {
            const slider = document.getElementById('imageSlider');
            const dotsContainer = document.getElementById('sliderDots');
            const fallback = document.getElementById('sliderFallback');
            
            // Clear any existing content
            slider.innerHTML = '';
            dotsContainer.innerHTML = '';
            
            // Create slides
            sliderImages.forEach((image, index) => {
                // Create slide
                const slide = document.createElement('div');
                slide.className = 'slide';
                
                const img = document.createElement('img');
                img.src = image.src;
                img.alt = image.alt;
                img.onerror = function() {
                    // If image fails to load, show fallback
                    if (index === 0) {
                        slider.style.display = 'none';
                        fallback.style.display = 'block';
                    }
                };
                
                slide.appendChild(img);
                slider.appendChild(slide);
                
                // Create dot
                const dot = document.createElement('div');
                dot.className = 'slider-dot';
                if (index === 0) dot.classList.add('active');
                dot.setAttribute('data-index', index);
                dot.addEventListener('click', () => goToSlide(index));
                dotsContainer.appendChild(dot);
            });
            
            // Auto slide every 5 seconds
            startAutoSlide();
        }
        
        // Setup slider controls
        function setupSliderControls() {
            const prevBtn = document.getElementById('prevBtn');
            const nextBtn = document.getElementById('nextBtn');
            
            prevBtn.addEventListener('click', () => {
                stopAutoSlide();
                prevSlide();
                startAutoSlide();
            });
            
            nextBtn.addEventListener('click', () => {
                stopAutoSlide();
                nextSlide();
                startAutoSlide();
            });
        }
        
        // Go to specific slide
        function goToSlide(index) {
            const slider = document.getElementById('imageSlider');
            const dots = document.querySelectorAll('.slider-dot');
            
            currentSlide = index;
            slider.style.transform = `translateX(-${currentSlide * 100}%)`;
            
            // Update dots
            dots.forEach((dot, i) => {
                if (i === currentSlide) {
                    dot.classList.add('active');
                } else {
                    dot.classList.remove('active');
                }
            });
        }
        
        // Next slide
        function nextSlide() {
            currentSlide = (currentSlide + 1) % sliderImages.length;
            goToSlide(currentSlide);
        }
        
        // Previous slide
        function prevSlide() {
            currentSlide = (currentSlide - 1 + sliderImages.length) % sliderImages.length;
            goToSlide(currentSlide);
        }
        
        // Start auto slide
        function startAutoSlide() {
            stopAutoSlide();
            sliderInterval = setInterval(nextSlide, 5000);
        }
        
        // Stop auto slide
        function stopAutoSlide() {
            if (sliderInterval) {
                clearInterval(sliderInterval);
            }
        }
        
        // Load app statistics
        function loadAppStatistics() {
            fetch('get_statistics.php')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        document.getElementById('total-downloads').textContent = data.downloads.toLocaleString();
                        document.getElementById('total-reviews').textContent = data.reviews.toLocaleString();
                        document.getElementById('average-rating').textContent = data.avg_rating.toFixed(1);
                        
                        // Update rating display
                        document.getElementById('average-rating-display').textContent = data.avg_rating.toFixed(1);
                        document.getElementById('total-reviews-display').textContent = data.reviews + ' reviews';
                        
                        // Update rating bars
                        if (data.rating_distribution) {
                            const maxRatingCount = Math.max(...Object.values(data.rating_distribution));
                            for (let i = 1; i <= 5; i++) {
                                const count = data.rating_distribution[i] || 0;
                                const percentage = maxRatingCount > 0 ? (count / maxRatingCount) * 100 : 0;
                                document.getElementById('rating-' + i).style.width = percentage + '%';
                            }
                        }
                    } else {
                        console.error('Failed to load statistics:', data.message);
                    }
                })
                .catch(error => {
                    console.error('Error loading statistics:', error);
                });
        }
        
        // Load reviews
        function loadReviews() {
            fetch(`get_reviews.php?page=${currentPage}&per_page=${reviewsPerPage}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const reviewsContainer = document.getElementById('reviews-container');
                        
                        if (currentPage === 1) {
                            reviewsContainer.innerHTML = '';
                        }
                        
                        if (data.reviews.length > 0) {
                            data.reviews.forEach(review => {
                                reviewsContainer.appendChild(createReviewElement(review));
                            });
                            
                            // Show or hide load more button
                            if (data.has_more) {
                                document.getElementById('load-more-container').style.display = 'block';
                            } else {
                                document.getElementById('load-more-container').style.display = 'none';
                            }
                        } else if (currentPage === 1) {
                            reviewsContainer.innerHTML = '<p>No reviews yet. Be the first to review!</p>';
                        }
                    } else {
                        console.error('Failed to load reviews:', data.message);
                    }
                })
                .catch(error => {
                    console.error('Error loading reviews:', error);
                });
        }
        
        // Create review element
        function createReviewElement(review) {
            const reviewElement = document.createElement('div');
            reviewElement.className = 'st-users-review-container';
            
            // Format date
            const reviewDate = new Date(review.created_at);
            const formattedDate = reviewDate.toLocaleDateString('en-US', { 
                year: 'numeric', 
                month: 'short', 
                day: 'numeric' 
            });
            
            // Generate star rating HTML
            let starsHtml = '';
            for (let i = 1; i <= 5; i++) {
                if (i <= review.rating) {
                    starsHtml += `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="16" fill="#b70101" viewBox="0 0 24 24" width="16">
                        <g><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M0 0h24v24H0V0z" fill="none"></path></g>
                        <g><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27z"></path></g>
                    </svg>`;
                } else {
                    starsHtml += `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="16" fill="#dfdfdf" viewBox="0 0 24 24" width="16">
                        <g><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M0 0h24v24H0V0z" fill="none"></path></g>
                        <g><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27z"></path></g>
                    </svg>`;
                }
            }
            
            reviewElement.innerHTML = `
                <div class="st-user-review">
                    <div class="st-user-profile">
                        ${review.name.charAt(0).toUpperCase()}
                    </div>
                    <div class="st-user-name">
                        ${review.name}
                    </div>
                </div>
                <div class="st-star-date">
                    <div class="st-stars">
                        ${starsHtml}
                    </div>
                    <div class="st-date">
                        ${formattedDate}
                    </div>
                </div>
                <div class="st-review-text">
                    <p>${review.review}</p>
                </div>
            `;
            
            return reviewElement;
        }
        
        // Handle review form submission
        function handleReviewSubmit(e) {
            e.preventDefault();
            
            const formData = new FormData(e.target);
            const reviewData = {
                name: formData.get('name'),
                rating: parseInt(formData.get('rating')),
                review: formData.get('review')
            };
            
            // Basic validation
            if (!reviewData.name || !reviewData.rating || !reviewData.review) {
                showNotification('Please fill all fields', 'error');
                return;
            }
            
            if (reviewData.rating < 1 || reviewData.rating > 5) {
                showNotification('Please select a valid rating', 'error');
                return;
            }
            
            // Submit review
            fetch('submit_review.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(reviewData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showNotification('Review submitted successfully!', 'success');
                    e.target.reset();
                    resetRatingStars();
                    
                    // Reload statistics and reviews
                    loadAppStatistics();
                    currentPage = 1;
                    loadReviews();
                } else {
                    showNotification('Error: ' + data.message, 'error');
                }
            })
            .catch(error => {
                console.error('Error submitting review:', error);
                showNotification('An error occurred. Please try again.', 'error');
            });
        }
        
        // Show notification
        function showNotification(message, type) {
            const notification = document.getElementById('notification');
            notification.textContent = message;
            notification.className = 'notification ' + type;
            notification.style.display = 'block';
            
            // Hide notification after 5 seconds
            setTimeout(() => {
                notification.style.display = 'none';
            }, 5000);
        }
        
        // Reset rating stars
        function resetRatingStars() {
            const stars = document.querySelectorAll('#rating-stars span');
            stars.forEach(star => {
                star.textContent = '☆';
                star.classList.remove('active');
            });
            document.getElementById('rating').value = '';
        }
        
        // Load more reviews
        function loadMoreReviews() {
            currentPage++;
            loadReviews();
        }
        
        // Download app
        function downloadApp(button) {
            // Track download
            fetch('track_download.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({})
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Update download count
                    const downloadCount = document.getElementById('total-downloads');
                    const currentCount = parseInt(downloadCount.textContent.replace(/,/g, '')) || 0;
                    downloadCount.textContent = (currentCount + 1).toLocaleString();
                    
                    // Trigger download
                    const downloadLink = document.querySelector('.st-download-app');
                    if (downloadLink) {
                        downloadLink.click();
                    }
                    
                    // Show success message
                    showNotification('App download started!', 'success');
                } else {
                    console.error('Failed to track download:', data.message);
                    showNotification('Failed to track download. Please try again.', 'error');
                }
            })
            .catch(error => {
                console.error('Error tracking download:', error);
                showNotification('An error occurred. Please try again.', 'error');
            });
        }
        
        // Pause auto-slide when user interacts with slider
        document.querySelector('.slider-container').addEventListener('mouseenter', stopAutoSlide);
        document.querySelector('.slider-container').addEventListener('mouseleave', startAutoSlide);
        
        // Touch events for mobile swipe
        let touchStartX = 0;
        let touchEndX = 0;
        
        const sliderContainer = document.querySelector('.slider-container');
        
        sliderContainer.addEventListener('touchstart', e => {
            touchStartX = e.changedTouches[0].screenX;
            stopAutoSlide();
        });
        
        sliderContainer.addEventListener('touchend', e => {
            touchEndX = e.changedTouches[0].screenX;
            handleSwipe();
            startAutoSlide();
        });
        
        function handleSwipe() {
            const swipeThreshold = 50;
            
            if (touchEndX < touchStartX - swipeThreshold) {
                // Swipe left - next slide
                nextSlide();
            }
            
            if (touchEndX > touchStartX + swipeThreshold) {
                // Swipe right - previous slide
                prevSlide();
            }
        }
    </script>
</body>
</html>