document.addEventListener('DOMContentLoaded', () => {
    // Initialize search functionality
    const demoListings = [
        {title:"Studio Amsterdam Centrum €1200", city:"Amsterdam", price:1200, beds:1, img:"https://static.photos/apartment/640x360/1"},
        {title:"2-Bed Rotterdam €1450", city:"Rotterdam", price:1450, beds:2, img:"https://static.photos/apartment/640x360/2"},
        {title:"Appartamento Utrecht €1390", city:"Utrecht", price:1390, beds:2, img:"https://static.photos/apartment/640x360/3"}
    ];

    document.getElementById('searchForm').addEventListener('submit', async e => {
        e.preventDefault();
        const city = document.getElementById('city').value;
        const maxPrice = document.getElementById('maxPrice').value;
        const bedrooms = document.getElementById('bedrooms').value.match(/\d+/)[0];
        
        showLoading();
        await new Promise(r => setTimeout(r, 1500)); // Simulate API delay
        
        renderResults(demoListings.filter(h => 
            h.city.toLowerCase().includes(city.toLowerCase()) && 
            h.price <= maxPrice && 
            h.beds <= parseInt(bedrooms)
        ));
        updateTimestamp();
    });

    function renderResults(houses) {
        const container = document.getElementById('resultsContainer');
        container.innerHTML = houses.map(h => `
            <div class="bg-white/10 backdrop-blur-xl rounded-2xl p-6 border border-purple-500/30 hover:border-purple-400 hover:scale-105 transition-all group">
                <img src="${h.img}" class="w-full h-48 object-cover rounded-xl mb-4 group-hover:scale-105 transition">
                <h3 class="text-xl font-bold mb-2">${h.title}</h3>
                <div class="flex justify-between text-lg font-semibold text-purple-400">
                    <span>€${h.price}/mo</span>
                    <span>${h.beds} 🛏️</span>
                </div>
                <a href="#" class="mt-4 block bg-gradient-to-r from-purple-600 to-pink-600 text-white py-2 px-4 rounded-xl text-center hover:scale-105 transition">Vedi Dettagli</a>
            </div>
        `).join('') || '<div class="col-span-full text-center py-16 text-gray-400"><i data-feather="home" class="w-16 h-16 mx-auto mb-4"></i><p>Nessun risultato. Prova altri filtri!</p></div>';
        feather.replace();
    }

    function showLoading() {
        document.getElementById('resultsContainer').innerHTML = '<div class="col-span-full text-center py-16"><div class="animate-spin w-12 h-12 border-4 border-purple-500 border-t-transparent rounded-full mx-auto mb-4"></div><p>🔍 Cercando su Pararius...</p></div>';
    }

    function updateTimestamp() {
        document.getElementById('lastUpdate').textContent = `Ultimo update: ${new Date().toLocaleString('it-IT')} (ogni 60min)`;
    }

    // Auto-update every 60min
    setInterval(() => {
        if (document.visibilityState === 'visible') {
            document.getElementById('searchForm').dispatchEvent(new Event('submit'));
        }
    }, 3600000);

    updateTimestamp();

    // Add interactive hover effects
    const cards = document.querySelectorAll('div[class*="bg-gradient"]');
cards.forEach(card => {
        card.addEventListener('mouseenter', () => {
            card.style.transform = 'translateY(-5px)';
            card.style.boxShadow = '0 20px 25px -5px rgba(0, 0, 0, 0.3)';
        });
        
        card.addEventListener('mouseleave', () => {
            card.style.transform = 'translateY(0)';
            card.style.boxShadow = 'none';
        });
    });

    // Add floating animation to hero section
    const hero = document.querySelector('section:first-of-type');
    if (hero) {
        hero.classList.add('animate-float');
    }

    // Add particles background
const canvas = document.createElement('canvas');
    canvas.style.position = 'fixed';
    canvas.style.top = '0';
    canvas.style.left = '0';
    canvas.style.width = '100vw';
    canvas.style.height = '100vh';
    canvas.style.pointerEvents = 'none';
    canvas.style.zIndex = '-1';
    document.body.appendChild(canvas);

    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const particles = [];
    const particleCount = 50;

    for (let i = 0; i < particleCount; i++) {
        particles.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            size: Math.random() * 3 + 1,
            speedX: Math.random() * 1 - 0.5,
            speedY: Math.random() * 1 - 0.5,
            color: `rgba(159, 122, 234, ${Math.random() * 0.5})`
        });
    }

    function animateParticles() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        particles.forEach(particle => {
            ctx.beginPath();
            ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
            ctx.fillStyle = particle.color;
            ctx.fill();

            particle.x += particle.speedX;
            particle.y += particle.speedY;

            if (particle.x < 0 || particle.x > canvas.width) particle.speedX *= -1;
            if (particle.y < 0 || particle.y > canvas.height) particle.speedY *= -1;
        });

        requestAnimationFrame(animateParticles);
    }

    animateParticles();

    window.addEventListener('resize', () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    });
});