script.js

// DOM Elements
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const inquiryBtns = document.querySelectorAll('.inquiry-btn');
const modal = document.getElementById('inquiryModal');
const closeModal = document.querySelector('.close-modal');
const inquiryForm = document.getElementById('inquiryForm');
const houseTypeInput = document.getElementById('houseType');
const contactForm = document.getElementById('contactForm');
const slider = document.querySelector('.slider');
const images = slider.querySelectorAll('img');

// Mobile Navigation
hamburger.addEventListener('click', () => {
    navLinks.classList.toggle('active');
    hamburger.innerHTML = navLinks.classList.contains('active') 
        ? '<i class="fas fa-times"></i>' 
        : '<i class="fas fa-bars"></i>';
});

// Close mobile menu when clicking outside
document.addEventListener('click', (e) => {
    if (!hamburger.contains(e.target) && !navLinks.contains(e.target)) {
        navLinks.classList.remove('active');
        hamburger.innerHTML = '<i class="fas fa-bars"></i>';
    }
});

// Image Slider
let currentImage = 0;
function changeSlide() {
    images[currentImage].style.opacity = 0;
    currentImage = (currentImage + 1) % images.length;
    images[currentImage].style.opacity = 1;
}

setInterval(changeSlide, 4000);

// Initialize Map
function initMap() {
    // Miritini, Mombasa coordinates
    const miritini = [-4.0333, 39.6333];
    
    const map = L.map('map').setView(miritini, 14);
    
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);
    
    // Add marker for CANA COURT
    const canaCourt = L.marker([-4.0333, 39.6333]).addTo(map);
    canaCourt.bindPopup('<b>CANA COURT</b><br>Premium Rental Apartments<br>Miritini, Mombasa');
    
    // Add some points of interest
    const points = [
        {name: "Moi International Airport", coords: [-4.0348, 39.5945], icon: "✈️"},
        {name: "SGR Station", coords: [-4.025, 39.618], icon: "🚆"},
        {name: "Miritini Market", coords: [-4.03, 39.64], icon: "🛒"},
        {name: "Local Park", coords: [-4.028, 39.628], icon: "🌳"}
    ];
    
    points.forEach(point => {
        L.marker(point.coords)
            .addTo(map)
            .bindPopup(`<b>${point.icon} ${point.name}</b>`);
    });
}

// Inquiry Modal
inquiryBtns.forEach(btn => {
    btn.addEventListener('click', () => {
        modal.style.display = 'flex';
        houseTypeInput.value = btn.dataset.house + ' Apartment';
    });
});

closeModal.addEventListener('click', () => {
    modal.style.display = 'none';
});

window.addEventListener('click', (e) => {
    if (e.target === modal) {
        modal.style.display = 'none';
    }
});

// Form Submissions
inquiryForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const anonymousId = document.getElementById('anonymousId').value;
    const message = document.getElementById('inquiryMessage').value;
    
    // In a real application, this would send data to a backend
    alert(`Thank you! Your inquiry for ${houseTypeInput.value} has been received. Admin will contact you soon.`);
    modal.style.display = 'none';
    inquiryForm.reset();
});

contactForm.addEventListener('submit', (e) => {
    e.preventDefault();
    alert('Message sent to admin! You will receive a response within 24 hours.');
    contactForm.reset();
});

// Smooth Scrolling
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 after clicking
            navLinks.classList.remove('active');
            hamburger.innerHTML = '<i class="fas fa-bars"></i>';
        }
    });
});

// Initialize map when page loads
document.addEventListener('DOMContentLoaded', initMap);

// Gallery lightbox functionality
const galleryItems = document.querySelectorAll('.gallery-item');
galleryItems.forEach(item => {
    item.addEventListener('click', () => {
        const imgSrc = item.querySelector('img').src;
        const lightbox = document.createElement('div');
        lightbox.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            cursor: pointer;
        `;
        
        const img = document.createElement('img');
        img.src = imgSrc;
        img.style.cssText = `
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
            border-radius: 10px;
        `;
        
        lightbox.appendChild(img);
        document.body.appendChild(lightbox);
        
        lightbox.addEventListener('click', () => {
            lightbox.remove();
        });
    });
});

// Animate elements on scroll
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
        }
    });
}, observerOptions);

// Observe animated elements
document.querySelectorAll('.property-card, .rules-card, .gallery-item').forEach(el => {
    el.style.opacity = '0';
    el.style.transform = 'translateY(20px)';
    el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
    observer.observe(el);
});