script.js

// Enhanced Client Data with more details
const clients = [
    { 
        name: "Chanda Mumba", 
        service: "Netflix Premium", 
        expiry: "Expires in 2 days", 
        theme: "netflix-theme", 
        color: "#E50914",
        price: "ZMW 120",
        paymentMethod: "Airtel Money",
        lastRenewal: "2 weeks ago",
        avatar: "http://static.photos/people/200x200/1"
    },
    { 
        name: "John Banda", 
        service: "Spotify Duo", 
        expiry: "Expires Tomorrow", 
        theme: "spotify-theme", 
        color: "#1DB954",
        price: "ZMW 80",
        paymentMethod: "MTN Money",
        lastRenewal: "3 weeks ago",
        avatar: "http://static.photos/people/200x200/2"
    },
    { 
        name: "Sarah Lungu", 
        service: "Apple Music", 
        expiry: "Expires Today", 
        theme: "spotify-theme", 
        color: "#FC3C44",
        price: "ZMW 60",
        paymentMethod: "Zanaco",
        lastRenewal: "4 weeks ago",
        avatar: "http://static.photos/people/200x200/3"
    },
];

let activeIndex = clients.length - 1;

function renderCards() {
    const stack = document.getElementById('cardStack');
    stack.innerHTML = '';
    
    clients.forEach((client, index) => {
        const card = document.createElement('div');
        card.className = `card ${client.theme}`;
        let scale = 1 - (clients.length - 1 - index) * 0.04;
        let translateY = (clients.length - 1 - index) * 8;
let zIndex = index;
        
        card.style.zIndex = zIndex;
        card.style.transform = `scale(${scale}) translateY(-${translateY}px)`;
        card.style.backgroundImage = `url(${client.avatar})`;
        card.style.backgroundSize = 'cover';
        card.style.backgroundPosition = 'center';
        card.style.backgroundBlendMode = 'overlay';

        card.innerHTML = `
            <div class="service-badge" style="border-color:${client.color}; color:${client.color}; background: rgba(0,0,0,0.5)">
                <span>●</span> ${client.service}
            </div>
            <div class="client-info" style="background: rgba(0,0,0,0.5); padding: 15px; border-radius: 10px;">
                <h2>${client.name}</h2>
                <p>${client.service} • ${client.price} • ${client.paymentMethod}</p>
                <span class="expiry-warning">${client.expiry}</span>
                <p style="margin-top: 10px; font-size: 12px;">Last renewal: ${client.lastRenewal}</p>
            </div>
        `;
        stack.appendChild(card);
    });
}

// Enhanced Swipe Functions with API simulation
async function swipeRight() {
    if(activeIndex < 0) return;
    const cards = document.querySelectorAll('.card');
    const topCard = cards[activeIndex];
    const client = clients[activeIndex];
    
    topCard.classList.add('swipe-right');
    
    // Simulate API call
    try {
        topCard.innerHTML = '<div style="height:100%; display:flex; justify-content:center; align-items:center; font-size:18px;" class="loading">Processing renewal...</div>';
        
        // Simulate network delay
        await new Promise(resolve => setTimeout(resolve, 1500));
        
        // Success case
        topCard.innerHTML = `
            <div style="height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:20px;">
                <span style="font-size:48px;">✅</span>
                <h3 style="margin:10px 0;">Success!</h3>
                <p>${client.service} renewed for ${client.name}</p>
            </div>
        `;
        
        setTimeout(() => {
            activeIndex--;
            if(activeIndex >= 0) renderCards();
            else stack.innerHTML = '<div style="height:100%; display:flex; justify-content:center; align-items:center; font-size:18px;">All clients processed</div>';
        }, 1000);
    } catch {
        // Error case
        topCard.innerHTML = `
            <div style="height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:20px;">
                <span style="font-size:48px;">❌</span>
                <h3 style="margin:10px 0; color:#ff4b4b;">Error</h3>
                <p>Could not process renewal</p>
                <button onclick="window.location.reload()" style="margin-top:15px; background:#333; color:white; border:none; padding:8px 16px; border-radius:20px;">Retry</button>
            </div>
        `;
    }
}

async function swipeLeft() {
    if(activeIndex < 0) return;
    const cards = document.querySelectorAll('.card');
    const topCard = cards[activeIndex];
    const client = clients[activeIndex];
    
    topCard.classList.add('swipe-left');
    
    // Simulate WhatsApp opening
    await new Promise(resolve => setTimeout(resolve, 500));
    
    const whatsappUrl = `https://wa.me/260960000000?text=Hi%20${encodeURIComponent(client.name.split(' ')[0])},%20your%20${encodeURIComponent(client.service)}%20subscription%20is%20about%20to%20expire!`;
    window.open(whatsappUrl, '_blank');
    
    setTimeout(() => {
        activeIndex--;
        if(activeIndex >= 0) renderCards();
    }, 300);
}

// Initialize on load
document.addEventListener('DOMContentLoaded', () => {
    renderCards();
    
    // Add hover effects to bottom nav
    document.querySelectorAll('.nav-item').forEach(item => {
        item.addEventListener('click', function() {
            document.querySelector('.nav-item.active')?.classList.remove('active');
            this.classList.add('active');
        });
    });
});