{% extends 'base.html' %}
{% load static %}

{% block title %}Arriendos de Propiedades Exclusivas en Cartagena | Tu Espacio Elite{% endblock %}

{% block description %}Encuentra las mejores propiedades en arriendo en Cartagena. {{ property_count }} apartamentos y casas exclusivas disponibles. Amobladas y vacías. Selección rigurosa y única.{% endblock %}

{% block keywords %}arriendo cartagena, alquiler propiedades cartagena, apartamentos cartagena, casas arriendo, propiedades lujo cartagena, inmobiliaria cartagena{% endblock %}

{% block og_title %}{{ property_count }} Propiedades Exclusivas en Arriendo - Cartagena{% endblock %}

{% block og_description %}Descubre {{ property_count }} propiedades exclusivas disponibles para arriendo en Cartagena. Apartamentos y casas de lujo con selección rigurosa.{% endblock %}

{% block extra_head %}
<style>
    :root {
        --primary-color: #1a365d;
        --primary-hover: #2d5a87;
        --accent-color: #f59e0b;
        --success-color: #10b981;
        --bg-light: #f8fafc;
        --bg-white: #ffffff;
        --text-primary: #1e293b;
        --text-secondary: #64748b;
        --text-light: #94a3b8;
        --border-color: #e2e8f0;
        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        --radius-sm: 6px;
        --radius-md: 8px;
        --radius-lg: 12px;
        --radius-xl: 16px;
    }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        line-height: 1.6;
        color: var(--text-primary);
        background-color: var(--bg-light);
    }

    /* Hero Section */
    .hero-section {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
        color: white;
        padding: 4rem 0 2rem;
        position: relative;
        overflow: hidden;
    }

    .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="white" opacity="0.1"><path d="M0,50 Q250,0 500,50 T1000,50 L1000,100 L0,100 Z"/></svg>') repeat-x bottom;
        background-size: 100% 50px;
    }

    .hero-content {
        position: relative;
        z-index: 2;
        text-align: center;
        max-width: 800px;
        margin: 0 auto;
        padding: 0 1rem;
    }

    .hero-title {
        font-size: clamp(2rem, 5vw, 3.5rem);
        font-weight: 800;
        margin-bottom: 1rem;
        letter-spacing: -0.02em;
    }

    .hero-subtitle {
        font-size: clamp(1.1rem, 3vw, 1.3rem);
        opacity: 0.9;
        margin-bottom: 2rem;
        font-weight: 400;
    }

    .stats-container {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(12px);
        padding: 1rem 1.5rem;
        border-radius: 50px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        font-weight: 600;
        font-size: 1.1rem;
    }

    .stats-number {
        color: var(--accent-color);
        font-weight: 800;
        font-size: 1.2em;
    }

    /* Filters Section */
    .filters-section {
        background: var(--bg-white);
        border-bottom: 1px solid var(--border-color);
        padding: 1.5rem 0;
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: var(--shadow-sm);
    }

    .filters-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1rem;
    }

    .filters-grid {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 1rem;
        align-items: center;
    }

    .search-filters {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
        background: var(--bg-light);
        padding: 1rem;
        border-radius: var(--radius-lg);
        border: 1px solid var(--border-color);
    }

    .filter-group {
        position: relative;
    }

    .filter-label {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem;
    }

    .filter-select {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        background: var(--bg-white);
        color: var(--text-primary);
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.2s ease;
        appearance: none;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>');
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1rem;
        padding-right: 2.5rem;
    }

    .filter-select:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .price-filter {
        position: relative;
    }

    .price-input {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        background: var(--bg-white);
        color: var(--text-primary);
        font-size: 0.95rem;
    }

    .price-input:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .price-display {
        position: absolute;
        top: 50%;
        right: 1rem;
        transform: translateY(-50%);
        background: var(--accent-color);
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: var(--radius-sm);
        font-size: 0.75rem;
        font-weight: 600;
        pointer-events: none;
    }

    .filter-buttons {
        display: flex;
        gap: 0.75rem;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: var(--radius-md);
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        text-decoration: none;
        white-space: nowrap;
    }

    .btn-primary {
        background: var(--primary-color);
        color: white;
    }

    .btn-primary:hover {
        background: var(--primary-hover);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    .btn-secondary {
        background: var(--bg-white);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
    }

    .btn-secondary:hover {
        background: var(--bg-light);
        border-color: var(--primary-color);
    }

    .results-info {
        color: var(--text-secondary);
        font-size: 0.9rem;
        font-weight: 500;
    }

    /* Properties Section */
    .properties-section {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem 1rem;
    }

    .properties-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 1.5rem;
    }

    .property-card {
        background: var(--bg-white);
        border-radius: var(--radius-xl);
        overflow: hidden;
        box-shadow: var(--shadow-md);
        transition: all 0.3s ease;
        position: relative;
        height: auto;
    }

    .property-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-xl);
    }

    .property-image {
        height: 220px;
        background-size: cover;
        background-position: center;
        position: relative;
        overflow: hidden;
    }

    .property-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        background: var(--bg-white);
        color: var(--text-primary);
        padding: 0.4rem 0.8rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        box-shadow: var(--shadow-md);
        backdrop-filter: blur(8px);
    }

    .property-badge.furnished {
        background: var(--success-color);
        color: white;
    }

    .property-content {
        padding: 1.25rem;
    }

    .property-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .property-description {
        color: var(--text-secondary);
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 1rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .property-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
    }

    .property-price {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--text-primary);
    }

    .property-price .currency {
        font-size: 0.8em;
        color: var(--text-secondary);
        font-weight: 500;
    }

    .property-link {
        background: var(--primary-color);
        color: white;
        text-decoration: none;
        padding: 0.6rem 1.2rem;
        border-radius: var(--radius-md);
        font-size: 0.85rem;
        font-weight: 600;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }

    .property-link:hover {
        background: var(--primary-hover);
        transform: translateY(-1px);
        color: white;
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        grid-column: 1 / -1;
    }

    .empty-state-icon {
        width: 64px;
        height: 64px;
        background: var(--bg-light);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
        font-size: 1.5rem;
        color: var(--text-light);
    }

    .empty-state h3 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }

    .empty-state p {
        color: var(--text-secondary);
        font-size: 1rem;
    }

    /* Loading State */
    .loading {
        text-align: center;
        padding: 3rem;
        grid-column: 1 / -1;
    }

    .loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid var(--border-color);
        border-top: 3px solid var(--primary-color);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 0 auto 1rem;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .hero-section {
            padding: 2rem 0 1rem;
        }

        .filters-grid {
            grid-template-columns: 1fr;
            gap: 1rem;
        }

        .search-filters {
            grid-template-columns: 1fr;
            gap: 1rem;
        }

        .filter-buttons {
            justify-content: center;
        }

        .properties-grid {
            grid-template-columns: 1fr;
            gap: 1rem;
        }

        .property-image {
            height: 200px;
        }

        .btn {
            padding: 0.6rem 1rem;
            font-size: 0.85rem;
        }
        .filters-section {
            background: var(--bg-white);
            border-bottom: 1px solid var(--border-color);
            padding: 1.5rem 0;
            position: relative;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow-sm);
        }
    }

    @media (max-width: 480px) {
        .hero-title {
            font-size: 1.75rem;
        }

        .stats-container {
            padding: 0.75rem 1rem;
            font-size: 0.95rem;
        }

        .property-content {
            padding: 1rem;
        }

        .filter-buttons {
            flex-direction: column;
        }
    }

    /* Accessibility */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation: none !important;
            transition: none !important;
        }
    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Focus styles for accessibility */
    .btn:focus,
    .filter-select:focus,
    .price-input:focus,
    .property-link:focus {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }
</style>
{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="hero-section" role="banner">
    <div class="hero-content">
        <h1 class="hero-title">Encuentra tu Hogar Perfecto</h1>
        <p class="hero-subtitle">Propiedades exclusivas para rentar en Cartagena</p>
        <div class="stats-container">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
            </svg>
            <span class="stats-number">{{ property_count }}</span>
            propiedades disponibles
        </div>
    </div>
</section>

<!-- Filters Section -->
<section class="filters-section" role="search" aria-label="Filtros de búsqueda">
    <div class="filters-container">
        <div class="filters-grid">
            <div class="search-filters">
                <!-- Location Filter -->
                <div class="filter-group">
                    <label class="filter-label" for="location-filter">Ubicación</label>
                    <select id="location-filter" class="filter-select" aria-label="Filtrar por ubicación">
                        <option value="">Todas las ubicaciones</option>
                        {% for location in locations %}
                        <option value="{{ location.location_name }}">{{ location.location_name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <!-- Furniture Filter -->
                <div class="filter-group">
                    <label class="filter-label" for="furniture-filter">Amoblado</label>
                    <select id="furniture-filter" class="filter-select" aria-label="Filtrar por amoblado">
                        <option value="">Todas las propiedades</option>
                        <option value="True">Amobladas</option>
                        <option value="False">Vacías</option>
                    </select>
                </div>

                <!-- Price Filter -->
                <div class="filter-group">
                    <label class="filter-label" for="price-filter">Precio máximo</label>
                    <div class="price-filter">
                        <input type="range" 
                               id="price-filter" 
                               class="price-input"
                               min="{{ precio_minimo }}" 
                               max="{{ precio_maximo }}" 
                               value="{{ precio_maximo }}"
                               aria-label="Precio máximo">
                        <div id="price-display" class="price-display">{{ precio_maximo }}</div>
                    </div>
                </div>
            </div>

            <div class="filter-buttons">
                <button id="clear-filters" class="btn btn-secondary" type="button">
                    <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                    </svg>
                    Limpiar
                </button>
            </div>

            <div class="results-info">
                <span id="results-count">{{ property_count }}</span> propiedades encontradas
            </div>
        </div>
    </div>
</section>

<!-- Properties Section -->
<section class="properties-section" role="main">
    <div id="properties-grid" class="properties-grid">
        {% for property in properties %}
        <article class="property-card property-item" 
                data-price="{{ property.price }}" 
                data-furniture="{{ property.is_furnished }}"
                data-location="{{ property.location.location_name|default:'Sin ubicación' }}"
                itemscope itemtype="https://schema.org/Residence">
            
            <div class="property-image" 
                {% if property.main_image %}style="background-image: url('{{ property.main_image.url }}');"{% endif %}
                role="img"
                aria-label="{% if property.main_image %}Imagen de {{ property.property_name }}{% else %}Imagen no disponible{% endif %}">
                {% if property.is_furnished %}
                <div class="property-badge furnished">Amoblada</div>
                {% else %}
                <div class="property-badge">No Amoblada</div>
                {% endif %}
            </div>
            
            <div class="property-content">
                <h2 class="property-title" itemprop="name">{{ property.property_name }}</h2>
                <p class="property-description" itemprop="description">{{ property.description }}</p>
                <div class="row">
                    <div class="col-3">
                        <i class="fas fa-bed stat-icon"></i>
                        {{ property.bedrooms }}
                    </div>
                    <div class="col-3">
                        <i class="fas fa-bath stat-icon"></i>
                        {{ property.bathrooms }}
                    </div>
                    <div class="col-4">
                        <i class="fas fa-ruler-combined stat-icon"></i>
                        {{ property.area }} m²
                    </div>
                </div>
                <br>
                <div class="property-footer">
                    <div class="property-price" itemprop="price">
                        <span class="price-amount precio-formatear">{{ property.price }}</span>
                        <span class="currency">COP</span>
                    </div>
                    <a href="{{ property.get_url }}" 
                       class="property-link"
                       aria-label="Ver detalles de {{ property.property_name }}">
                        Ver detalles
                        <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"/>
                        </svg>
                    </a>
                </div>
            </div>
        </article>
        {% empty %}
        <div class="empty-state">
            <div class="empty-state-icon">
                <svg width="32" height="32" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
                </svg>
            </div>
            <h3>No se encontraron propiedades</h3>
            <p>Intenta ajustar tus filtros para ver más opciones</p>
        </div>
        {% endfor %}
    </div>
</section>

<!-- Scripts -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize elements
    const locationFilter = document.getElementById('location-filter');
    const furnitureFilter = document.getElementById('furniture-filter');
    const priceFilter = document.getElementById('price-filter');
    const priceDisplay = document.getElementById('price-display');
    const clearFiltersBtn = document.getElementById('clear-filters');
    const resultsCount = document.getElementById('results-count');
    const propertyItems = document.querySelectorAll('.property-item');
    const propertiesGrid = document.getElementById('properties-grid');

    // Currency formatter
    function formatCurrency(value) {
        return new Intl.NumberFormat('es-CO', {
            style: 'currency',
            currency: 'COP',
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        }).format(value);
    }

    // Format price display
    function formatPriceDisplay(value) {
        return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    }

    // Update price display
    function updatePriceDisplay() {
        const value = parseInt(priceFilter.value);
        priceDisplay.textContent = formatPriceDisplay(value);
    }

    // Filter properties
    function filterProperties() {
        const selectedLocation = locationFilter.value;
        const selectedFurniture = furnitureFilter.value;
        const selectedPrice = parseInt(priceFilter.value);
        
        let visibleCount = 0;

        propertyItems.forEach(function(item) {
            const itemPrice = parseInt(item.dataset.price);
            const itemFurniture = item.dataset.furniture;
            const itemLocation = item.dataset.location;
            
            let isVisible = true;

            // Location filter
            if (selectedLocation && itemLocation !== selectedLocation) {
                isVisible = false;
            }

            // Furniture filter
            if (selectedFurniture && itemFurniture !== selectedFurniture) {
                isVisible = false;
            }

            // Price filter
            if (itemPrice > selectedPrice) {
                isVisible = false;
            }

            // Show/hide item
            if (isVisible) {
                item.style.display = 'block';
                item.style.animation = 'fadeIn 0.3s ease-in-out';
                visibleCount++;
            } else {
                item.style.display = 'none';
            }
        });

        // Update results count
        resultsCount.textContent = visibleCount;

        // Show empty state if no results
        const existingEmptyState = document.querySelector('.empty-state-dynamic');
        if (existingEmptyState) {
            existingEmptyState.remove();
        }

        if (visibleCount === 0 && propertyItems.length > 0) {
            const emptyState = document.createElement('div');
            emptyState.className = 'empty-state empty-state-dynamic';
            emptyState.innerHTML = `
                <div class="empty-state-icon">
                    <svg width="32" height="32" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <h3>No se encontraron propiedades</h3>
                <p>Intenta ajustar tus filtros para ver más opciones</p>
            `;
            propertiesGrid.appendChild(emptyState);
        }
    }

    // Clear all filters
    function clearFilters() {
        locationFilter.value = '';
        furnitureFilter.value = '';
        priceFilter.value = priceFilter.max;
        updatePriceDisplay();
        filterProperties();
    }

    // Initialize price display
    updatePriceDisplay();

    // Event listeners
    if (priceFilter) {
        priceFilter.addEventListener('input', function() {
            updatePriceDisplay();
            filterProperties();
        });
    }

    if (locationFilter) {
        locationFilter.addEventListener('change', filterProperties);
    }

    if (furnitureFilter) {
        furnitureFilter.addEventListener('change', filterProperties);
    }

    if (clearFiltersBtn) {
        clearFiltersBtn.addEventListener('click', clearFilters);
    }

    // Format all price displays
    document.querySelectorAll('.precio-formatear').forEach(function(element) {
        const price = parseFloat(element.textContent);
        if (!isNaN(price)) {
            element.textContent = formatPriceDisplay(price);
        }
    });

    // Add smooth transitions
    const style = document.createElement('style');
    style.textContent = `
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .property-item {
            transition: all 0.3s ease;
        }
    `;
    document.head.appendChild(style);

    // Lazy loading for images
    if ('IntersectionObserver' in window) {
        const imageObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.style.opacity = '1';
                    imageObserver.unobserve(img);
                }
            });
        });

        document.querySelectorAll('.property-image').forEach(img => {
            img.style.opacity = '0.8';
            img.style.transition = 'opacity 0.5s ease';
            imageObserver.observe(img);
        });
    }

    // Smooth scroll to top when filters change
    let filterTimeout;
    function smoothFilterChange() {
        clearTimeout(filterTimeout);
        filterTimeout = setTimeout(() => {
            const firstVisible = document.querySelector('.property-item[style*="display: block"], .property-item:not([style*="display: none"])');
            if (firstVisible && window.scrollY > 300) {
                window.scrollTo({
                    top: document.querySelector('.properties-section').offsetTop - 100,
                    behavior: 'smooth'
                });
            }
        }, 300);
    }

    // Add smooth scroll to filter changes
    [locationFilter, furnitureFilter].forEach(filter => {
        if (filter) {
            filter.addEventListener('change', smoothFilterChange);
        }
    });

    // Keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        // Ctrl/Cmd + K to focus location filter
        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
            e.preventDefault();
            locationFilter.focus();
        }
        
        // Escape to clear filters
        if (e.key === 'Escape') {
            clearFilters();
        }
    });

    // Add loading states to property links
    document.querySelectorAll('.property-link').forEach(link => {
        link.addEventListener('click', function(e) {
            const originalText = this.innerHTML;
            this.innerHTML = `
                <div class="loading-spinner" style="width: 16px; height: 16px; margin-right: 0.5rem;"></div>
                Cargando...
            `;
            
            // Reset after a delay if still on page
            setTimeout(() => {
                if (this.innerHTML.includes('Cargando')) {
                    this.innerHTML = originalText;
                }
            }, 3000);
        });
    });

    // Performance optimization: Debounce price filter
    let priceFilterTimeout;
    priceFilter.addEventListener('input', function() {
        clearTimeout(priceFilterTimeout);
        priceFilterTimeout = setTimeout(() => {
            filterProperties();
            smoothFilterChange();
        }, 150);
    });

    // Initial filter on page load if URL params exist
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('location')) {
        locationFilter.value = urlParams.get('location');
    }
    if (urlParams.get('furniture')) {
        furnitureFilter.value = urlParams.get('furniture');
    }
    if (urlParams.get('maxPrice')) {
        priceFilter.value = urlParams.get('maxPrice');
        updatePriceDisplay();
    }
    
    // Apply initial filters if any
    if (urlParams.toString()) {
        filterProperties();
    }

    // Add animation classes for better UX
    const animationCSS = `
        .property-card {
            animation: slideInUp 0.6s ease-out;
            animation-fill-mode: both;
        }
        
        .property-card:nth-child(1) { animation-delay: 0.1s; }
        .property-card:nth-child(2) { animation-delay: 0.2s; }
        .property-card:nth-child(3) { animation-delay: 0.3s; }
        .property-card:nth-child(4) { animation-delay: 0.4s; }
        .property-card:nth-child(5) { animation-delay: 0.5s; }
        .property-card:nth-child(6) { animation-delay: 0.6s; }
        
        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .filters-section {
            animation: slideInDown 0.5s ease-out;
        }
        
        @keyframes slideInDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    `;
    
    const animationStyle = document.createElement('style');
    animationStyle.textContent = animationCSS;
    document.head.appendChild(animationStyle);
});

// Add global smooth scrolling
document.documentElement.style.scrollBehavior = 'smooth';

// Service Worker for caching (optional)
if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        // Register service worker if available
        // navigator.serviceWorker.register('/sw.js');
    });
}
</script>
{% endblock %}