document.addEventListener('DOMContentLoaded', function() {
    // Sample car data (would normally come from API)
    const cars = [
        {
            id: 1,
            name: "Ferrari SF90 Stradale",
            description: "Hybrid supercar with 986 horsepower",
            image: "http://static.photos/automotive/640x360/10",
            specs: {
                engine: "4.0L V8 + 3 electric motors",
                horsepower: 986,
                torque: "800 Nm",
                topSpeed: "340 km/h"
            }
        },
        {
            id: 2,
            name: "Porsche Taycan Turbo S",
            description: "High-performance electric sedan",
            image: "http://static.photos/automotive/640x360/11",
            specs: {
                engine: "Dual electric motors",
                horsepower: 750,
                torque: "1050 Nm",
                topSpeed: "260 km/h"
            }
        },
        {
            id: 3,
            name: "Lamborghini Huracán EVO",
            description: "Naturally aspirated V10 supercar",
            image: "http://static.photos/automotive/640x360/12",
            specs: {
                engine: "5.2L V10",
                horsepower: 630,
                torque: "600 Nm",
                topSpeed: "325 km/h"
            }
        }
    ];

    // Sample monitored websites data
    const monitoredWebsites = [
        { url: "https://tesla.com", status: "up", lastChecked: "2023-06-15T10:30:00Z" },
        { url: "https://porsche.com", status: "up", lastChecked: "2023-06-15T10:35:00Z" },
        { url: "https://ferrari.com", status: "down", lastChecked: "2023-06-15T10:40:00Z" }
    ];

    // Populate car showcase
    const carShowcase = document.querySelector('#showcase .grid');
    cars.forEach(car => {
        const carCard = document.createElement('div');
        carCard.className = 'bg-white rounded-xl shadow-md overflow-hidden card-hover';
        carCard.innerHTML = `
            <img src="${car.image}" alt="${car.name}" class="w-full h-48 object-cover">
            <div class="p-6">
                <h3 class="font-bold text-xl mb-2">${car.name}</h3>
                <p class="text-gray-600 mb-4">${car.description}</p>
                <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-500">${car.specs.horsepower} HP</span>
                    <a href="#" class="text-red-600 hover:text-red-700 font-semibold">Details →</a>
                </div>
            </div>
        `;
        carShowcase.appendChild(carCard);
    });

    // Populate monitored websites table
    const monitorTable = document.getElementById('monitor-table');
    monitoredWebsites.forEach(site => {
        const row = document.createElement('tr');
        row.className = 'border-t hover:bg-gray-50';
        
        const statusClass = site.status === 'up' ? 'status-up' : 
                          site.status === 'down' ? 'status-down' : 'status-pending';
        
        row.innerHTML = `
            <td class="px-4 py-3">${site.url}</td>
            <td class="px-4 py-3"><span class="${statusClass}">${site.status}</span></td>
            <td class="px-4 py-3">${new Date(site.lastChecked).toLocaleString()}</td>
        `;
        monitorTable.appendChild(row);
    });

    // Form submission for adding new website to monitor
    const monitorForm = document.getElementById('monitor-form');
    monitorForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const urlInput = this.querySelector('input[type="url"]');
        const url = urlInput.value.trim();
        
        if (url) {
            // In a real app, this would call your API
            alert(`Starting to monitor: ${url}\n(Would call API in real implementation)`);
            urlInput.value = '';
        }
    });

    // Responsive adjustments
    function handleResize() {
        // Could add responsive behaviors here
    }
    
    window.addEventListener('resize', handleResize);
    handleResize();
});