script.js

document.addEventListener('DOMContentLoaded', () => {
    const rallyClasses = {
        'Group B': 'Lancia Delta S4 Group B monster, aggressive aero, massive turbo vents, martini livery, gravel spray, 1980s film grain',
        'WRC 2025': 'Toyota GR Yaris WRC 2025 hybrid, modern aerodynamic kit, mud flaps, dynamic action shot, forest rally stage',
        'Dakar': 'Audi RS Q e-tron Dakar off-road buggy, massive suspension, sand dunes background, desert dust storm, dramatic lighting',
        'Rallycross': 'Subaru WRX STI Rallycross, widebody kit, tarmac and dirt mix, drifting, smoke from tires, stadium background'
    };
    const buttons = document.querySelectorAll('#canvas-container .rally-btn');
const canvasContainer = document.getElementById('shared-canvas');
    
    buttons.forEach(btn => {
        btn.addEventListener('click', async () => {
            const rallyClass = btn.dataset.class;
            const prompt = rallyClasses[rallyClass];
            
            // Show loading state
            canvasContainer.innerHTML = `
                <div class="flex flex-col items-center justify-center h-full">
                    <div class="w-12 h-12 border-4 border-orange-500 border-t-transparent rounded-full animate-spin mb-4"></div>
                    <p class="text-orange-500 font-bold">MANUFACTURING CHASSIS...</p>
                </div>
            `;
            
            try {
                // Generate image URL
                const finalPrompt = `hyperrealistic rally photography, ${prompt}, 8k resolution, unreal engine 5 render, motion blur --ar 16:9`;
                const url = `https://image.pollinations.ai/prompt/${encodeURIComponent(finalPrompt)}?nologo=true&seed=${Math.floor(Math.random() * 1000)}`;
                
                // Create stats
                const stats = {
                    name: `${rallyClass} SPEC`,
                    hp: Math.floor(Math.random() * (600 - 300) + 300),
                    torque: Math.floor(Math.random() * (700 - 400) + 400)
                };
                
                // Create rally car component
                const rallyCar = document.createElement('rally-car');
                rallyCar.setCarData(url, stats);
                
                // Clear and append
                canvasContainer.innerHTML = '';
                canvasContainer.appendChild(rallyCar);
                
            } catch (error) {
                console.error('Generation failed:', error);
                canvasContainer.innerHTML = '<p class="text-red-500">Failed to generate rally car. Please try again.</p>';
            }
        });
    });
});