script.js

// Sample property data
const properties = [
    {
        id: 1,
        title: "Modern 3-Bedroom Duplex in Jos",
        location: "Jos",
        type: "House",
        price: 15000000,
        status: "For Sale",
        image: "https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
        description: "Beautiful modern duplex with 3 bedrooms, 2 bathrooms, spacious living room, and a well-maintained garden. Located in a prime residential area in Jos.",
        bedrooms: 3,
        bathrooms: 2,
        parking: 2,
        area: "150 sqm",
        featured: true
    },
    {
        id: 2,
        title: "Commercial Land in Abuja",
        location: "Abuja",
        type: "Land",
        price: 25000000,
        status: "For Sale",
        image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
        description: "Prime commercial land measuring 500 sqm in the heart of Abuja. Perfect for office building, shopping complex, or mixed-use development.",
        bedrooms: 0,
        bathrooms: 0,
        parking: 0,
        area: "500 sqm",
        featured: true
    },
    {
        id: 3,
        title: "Shop Space in Jos Market",
        location: "Jos",
        type: "Shop",
        price: 5000000,
        status: "For Rent",
        image: "https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
        description: "Strategically located shop space in busy Jos market area. High foot traffic, excellent for retail business.",
        bedrooms: 0,
        bathrooms: 1,
        parking: 0,
        area: "50 sqm",
        featured: false
    },
    {
        id: 4,
        title: "Luxury 4-Bedroom Villa in Abuja",
        location: "Abuja",
        type: "House",
        price: 45000000,
        status: "For Sale",
        image: "https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
        description: "Luxurious 4-bedroom villa with swimming pool, garden, and modern amenities. Located in exclusive Abuja neighborhood.",
        bedrooms: 4,
        bathrooms: 3,
        parking: 3,
        area: "300 sqm",
        featured: true
    },
    {
        id: 5,
        title: "Residential Plot in Jos",
        location: "Jos",
        type: "Land",
        price: 3000000,
        status: "For Sale",
        image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
        description: "Residential plot in developing area of Jos. Good investment opportunity with potential for appreciation.",
        bedrooms: 0,
        bathrooms: 0,
        parking: 0,
        area: "400 sqm",
        featured: false
    },
    {
        id: 6,
        title: "Office Space in Abuja",
        location: "Abuja",
        type: "Shop",
        price: 8000000,
        status: "For Rent",
        image: "https://images.unsplash.com/photo-1497366216546-2785a32c8def?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
        description: "Modern office space in commercial district of Abuja. Fully furnished with high-speed internet and parking facilities.",
        bedrooms: 0,
        bathrooms: 2,
        parking: 5,
        area: "100 sqm",
        featured: false
    },
    {
        id: 7,
        title: "2-Bedroom Apartment in Jos",
        location: "Jos",
        type: "House",
        price: 8000000,
        status: "For Sale",
        image: "https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
        description: "Cozy 2-bedroom apartment in quiet neighborhood of Jos. Close to schools, hospitals, and shopping centers.",
        bedrooms: 2,
        bathrooms: 1,
        parking: 1,
        area: "80 sqm",
        featured: false
    },
    {
        id: 8,
        title: "Restaurant Space in Abuja",
        location: "Abuja",
        type: "Shop",
        price: 12000000,
        status: "For Sale",
        image: "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
        description: "Fully equipped restaurant space in prime Abuja location. Includes kitchen equipment and dining area setup.",
        bedrooms: 0,
        bathrooms: 3,
        parking: 10,
        area: "150 sqm",
        featured: true
    },
    {
        id: 9,
        title: "5-Bedroom Mansion in Jos",
        location: "Jos",
        type: "House",
        price: 35000000,
        status: "For Sale",
        image: "https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
        description: "Spacious 5-bedroom mansion with large compound, swimming pool, and entertainment area. Perfect for large families.",
        bedrooms: 5,
        bathrooms: 4,
        parking: 4,
        area: "400 sqm",
        featured: false
    }
];

let filteredProperties = [...properties];
let currentImageIndex = 0;

// Initialize the page
document.addEventListener('DOMContentLoaded', function() {
    loadFeaturedProperties();
    loadProperties();
    setupContactForm();
    setupNavbarScroll();
});

// Load featured properties
function loadFeaturedProperties() {
    const featuredContainer = document.getElementById('featuredProperties');
    const featuredProps = properties.filter(p => p.featured);
    
    featuredContainer.innerHTML = featuredProps.map(property => createPropertyCard(property)).join('');
}

// Load all properties
function loadProperties() {
    const propertiesGrid = document.getElementById('propertiesGrid');
    propertiesGrid.innerHTML = filteredProperties.map(property => createPropertyCard(property)).join('');
}

// Create property card HTML
function createPropertyCard(property) {
    return `
        <div class="property-card group bg-luxury-dark/50 backdrop-blur-xl rounded-2xl overflow-hidden border border-luxury-gold/20 hover:border-luxury-gold/50 transition-all duration-300 hover:transform hover:scale-105">
            <div class="gallery-container h-64 relative overflow-hidden">
                <img src="${property.image}" alt="${property.title}" class="gallery-image w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                <div class="absolute top-4 right-4">
                    <span class="status-badge ${property.status === 'For Sale' ? 'bg-luxury-gold/20 text-luxury-gold border border-luxury-gold/50' : 'bg-luxury-silver/20 text-luxury-silver border border-luxury-silver/50'} px-3 py-1 rounded-full text-xs font-semibold">
                        ${property.status}
                    </span>
                </div>
                <div class="absolute inset-0 bg-gradient-to-t from-luxury-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>
            <div class="p-6">
                <h3 class="text-xl font-playfair font-semibold text-luxury-light mb-3 group-hover:text-luxury-gold transition-colors duration-300">${property.title}</h3>
                <div class="flex items-center text-luxury-light/70 mb-4">
                    <i class="fas fa-map-marker-alt mr-2 text-luxury-gold"></i>
                    <span>${property.location}</span>
                    <span class="mx-2">•</span>
                    <span>${property.type}</span>
                </div>
                <div class="flex items-center justify-between mb-6">
                    <div class="price-tag bg-luxury-gold/20 border border-luxury-gold/50 text-luxury-gold px-4 py-2 rounded-full">
                        ₦${property.price.toLocaleString()}
                    </div>
                    <div class="text-sm text-luxury-light/60">
                        ${property.area}
                    </div>
                </div>
                <div class="flex items-center text-sm text-luxury-light/60 mb-6">
                    ${property.bedrooms > 0 ? `<span class="mr-4"><i class="fas fa-bed mr-1 text-luxury-gold"></i> ${property.bedrooms} Beds</span>` : ''}
                    ${property.bathrooms > 0 ? `<span class="mr-4"><i class="fas fa-bath mr-1 text-luxury-gold"></i> ${property.bathrooms} Baths</span>` : ''}
                    ${property.parking > 0 ? `<span><i class="fas fa-car mr-1 text-luxury-gold"></i> ${property.parking} Parking</span>` : ''}
                </div>
                <button onclick="showPropertyDetails(${property.id})" class="w-full bg-gradient-to-r from-luxury-gold to-luxury-silver text-luxury-black py-3 rounded-xl font-semibold hover:from-luxury-silver hover:to-luxury-gold transition-all duration-300 transform hover:scale-105">
                    View Details
                </button>
            </div>
        </div>
    `;
}

// Show property details modal
function showPropertyDetails(propertyId) {
    const property = properties.find(p => p.id === propertyId);
    if (!property) return;

    const modal = document.getElementById('propertyModal');
    const modalTitle = document.getElementById('modalTitle');
    const modalContent = document.getElementById('modalContent');

    modalTitle.textContent = property.title;
    modalContent.innerHTML = `
        <div class="space-y-6">
            <!-- Image Gallery -->
            <div class="relative h-64 md:h-96 rounded-lg overflow-hidden">
                <img id="modalImage" src="${property.image}" alt="${property.title}" class="w-full h-full object-cover">
                <button onclick="changeImage(-1)" class="gallery-nav gallery-prev">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button onclick="changeImage(1)" class="gallery-nav gallery-next">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>

            <!-- Property Info -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h4 class="font-semibold text-lg mb-3">Property Details</h4>
                    <ul class="feature-list">
                        <li><strong>Location:</strong> ${property.location}</li>
                        <li><strong>Type:</strong> ${property.type}</li>
                        <li><strong>Status:</strong> ${property.status}</li>
                        <li><strong>Area:</strong> ${property.area}</li>
                        ${property.bedrooms > 0 ? `<li><strong>Bedrooms:</strong> ${property.bedrooms}</li>` : ''}
                        ${property.bathrooms > 0 ? `<li><strong>Bathrooms:</strong> ${property.bathrooms}</li>` : ''}
                        ${property.parking > 0 ? `<li><strong>Parking:</strong> ${property.parking}</li>` : ''}
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold text-lg mb-3">Price Information</h4>
                    <div class="price-tag text-2xl mb-4">
                        ₦${property.price.toLocaleString()}
                    </div>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <p class="text-sm text-gray-600 mb-2">This property is ${property.status.toLowerCase()}.</p>
                        <p class="text-sm text-gray-600">Contact us for more information or to schedule a viewing.</p>
                    </div>
                </div>
            </div>

            <!-- Description -->
            <div>
                <h4 class="font-semibold text-lg mb-3">Description</h4>
                <p class="text-gray-600">${property.description}</p>
            </div>

            <!-- Contact Buttons -->
            <div class="flex flex-col sm:flex-row gap-4">
                <a href="https://wa.me/2348161329241?text=Hello,%20I'm%20interested%20in%20${encodeURIComponent(property.title)}" 
                   target="_blank" 
                   class="flex-1 bg-green-500 text-white py-3 rounded-lg font-semibold hover:bg-green-600 transition duration-300 text-center btn-hover">
                    <i class="fab fa-whatsapp mr-2"></i> Contact via WhatsApp
                </a>
                <a href="tel:08161329241" 
                   class="flex-1 bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition duration-300 text-center btn-hover">
                    <i class="fas fa-phone mr-2"></i> Call Agent
                </a>
            </div>
        </div>
    `;

    modal.classList.remove('hidden');
    currentImageIndex = 0;
}

// Close modal
function closeModal() {
    const modal = document.getElementById('propertyModal');
    modal.classList.add('hidden');
}

// Change image in gallery (placeholder function)
function changeImage(direction) {
    // In a real implementation, you would have multiple images per property
    // For now, we'll just show the same image
    currentImageIndex += direction;
    // Implementation would go here for multiple images
}

// Apply filters
function applyFilters() {
    const locationFilter = document.getElementById('locationFilter').value;
    const typeFilter = document.getElementById('typeFilter').value;
    const priceFilter = document.getElementById('priceFilter').value;

    filteredProperties = properties.filter(property => {
        let matchesLocation = !locationFilter || property.location === locationFilter;
        let matchesType = !typeFilter || property.type === typeFilter;
        let matchesPrice = !priceFilter || property.price <= parseInt(priceFilter);

        return matchesLocation && matchesType && matchesPrice;
    });

    loadProperties();
}

// Clear filters
function clearFilters() {
    document.getElementById('locationFilter').value = '';
    document.getElementById('typeFilter').value = '';
    document.getElementById('priceFilter').value = '';
    
    filteredProperties = [...properties];
    loadProperties();
}

// Setup contact form
function setupContactForm() {
    const form = document.getElementById('contactForm');
    const formMessage = document.getElementById('formMessage');

    form.addEventListener('submit', function(e) {
        e.preventDefault();

        const name = document.getElementById('name').value.trim();
        const phone = document.getElementById('phone').value.trim();
        const message = document.getElementById('message').value.trim();

        // Basic validation
        if (!name || !phone || !message) {
            showMessage('Please fill in all fields.', 'error');
            return;
        }

        // Phone validation (basic)
        if (!/^[\d\s\-\+\(\)]+$/.test(phone) || phone.length < 10) {
            showMessage('Please enter a valid phone number.', 'error');
            return;
        }

        // Simulate form submission
        showMessage('Thank you for your message! We will contact you soon.', 'success');
        form.reset();
    });
}

// Show form message
function showMessage(message, type) {
    const formMessage = document.getElementById('formMessage');
    formMessage.textContent = message;
    formMessage.className = `mt-4 p-4 rounded-lg ${type === 'success' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`;
    formMessage.classList.remove('hidden');

    // Hide message after 5 seconds
    setTimeout(() => {
        formMessage.classList.add('hidden');
    }, 5000);
}

// Setup navbar scroll effect
function setupNavbarScroll() {
    const navbar = document.querySelector('nav');
    
    window.addEventListener('scroll', function() {
        if (window.scrollY > 50) {
            navbar.classList.add('navbar-scrolled');
        } else {
            navbar.classList.remove('navbar-scrolled');
        }
    });
}

// Close modal when clicking outside
document.addEventListener('click', function(event) {
    const modal = document.getElementById('propertyModal');
    if (event.target === modal) {
        closeModal();
    }
});

// Keyboard navigation for modal
document.addEventListener('keydown', function(event) {
    const modal = document.getElementById('propertyModal');
    if (!modal.classList.contains('hidden')) {
        if (event.key === 'Escape') {
            closeModal();
        }
    }
});

// Smooth scroll for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
            
            // Close mobile menu if open
            const mobileMenu = document.querySelector('[x-show="mobileMenuOpen"]');
            if (mobileMenu) {
                const alpineData = document.querySelector('[x-data]');
                if (alpineData && alpineData._x_dataStack) {
                    alpineData._x_dataStack[0].mobileMenuOpen = false;
                }
            }
        }
    });
});

// Mobile menu close when clicking on a link
document.querySelectorAll('.md\\:hidden a').forEach(link => {
    link.addEventListener('click', function() {
        // Close Alpine.js mobile menu
        setTimeout(() => {
            const mobileMenuButton = document.querySelector('button[@click="mobileMenuOpen = !mobileMenuOpen"]');
            if (mobileMenuButton) {
                mobileMenuButton.click();
            }
        }, 100);
    });
});

// Add loading animation for images
document.addEventListener('DOMContentLoaded', function() {
    const images = document.querySelectorAll('img');
    images.forEach(img => {
        img.addEventListener('load', function() {
            this.classList.add('loaded');
        });
    });
});

// Initialize page animations
function initializeAnimations() {
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-fade-in');
            }
        });
    }, observerOptions);

    // Observe elements for animation
    document.querySelectorAll('.property-card, .bg-white.rounded-lg').forEach(el => {
        observer.observe(el);
    });
}

// Call animations initialization
initializeAnimations();