document.addEventListener('DOMContentLoaded', function() {
    feather.replace();
    
    // Sample bot data (in a real app, this would come from an API)
    const sampleBots = [
        {
            id: 1,
            name: "Moderation Pro",
            description: "Advanced moderation bot with auto-moderation, logging, and customizable filters.",
            price: 25,
            cashapp: "$modbotdev",
            image: "http://static.photos/technology/320x240/1"
        },
        {
            id: 2,
            name: "Music Maestro",
            description: "High quality music bot with Spotify integration and playlist management.",
            price: 15,
            cashapp: "$musiccoder",
            image: "http://static.photos/music/320x240/2"
        },
        {
            id: 3,
            name: "Game Stats Tracker",
            description: "Tracks player statistics for popular games like Valorant and League of Legends.",
            price: 20,
            cashapp: "$gamestats",
            image: "http://static.photos/gaming/320x240/3"
        }
    ];

    // Render bots to the marketplace
    const renderBots = (bots) => {
        const container = document.getElementById('bots-container');
        container.innerHTML = '';
        
        bots.forEach(bot => {
            const botCard = document.createElement('div');
            botCard.className = 'bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300';
            botCard.innerHTML = `
                <img src="${bot.image}" alt="${bot.name}" class="w-full h-48 object-cover">
                <div class="p-6">
                    <h3 class="text-xl font-bold text-gray-900 mb-2">${bot.name}</h3>
                    <p class="text-gray-600 mb-4">${bot.description}</p>
                    <div class="flex justify-between items-center">
                        <span class="text-primary font-bold text-lg">$${bot.price}</span>
                        <a href="https://cash.app/${bot.cashapp.replace('$', '')}" 
                           target="_blank" 
                           class="bg-primary hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300">
                            Buy via Cash App
                        </a>
                    </div>
                </div>
            `;
            container.appendChild(botCard);
        });
    };

    // Initialize with sample bots
    renderBots(sampleBots);

    // Handle form submission
    document.getElementById('sell-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const botName = document.getElementById('bot-name').value;
        const botDescription = document.getElementById('bot-description').value;
        const botPrice = document.getElementById('bot-price').value;
        const cashappId = document.getElementById('cashapp-id').value;
        
        // In a real app, you would send this data to your backend
        alert(`Your bot "${botName}" has been listed for $${botPrice}! Buyers will pay you at ${cashappId}`);
        
        // Reset form
        this.reset();
    });
});