main.js

// Initialisation de la carte Leaflet et de la calculette

document.addEventListener("DOMContentLoaded", function() {

    // --- Initialisation de la Carte Leaflet (Page Découverte) ---
    const mapElement = document.getElementById("map-discovery");
    if (mapElement) {
        initDiscoveryMap();
    }

    // --- Initialisation de la Calculette (Page Analyse & Blog) ---
    const calculatorElement = document.querySelector(".calculator-container");
    if (calculatorElement) {
        initCalculator(); // Assurez-vous que cette fonction existe dans calculette.js
    }

    // --- Autres initialisations globales (ex: navigation mobile, etc.) ---
    // ... (à ajouter si nécessaire)

});

// --- Fonctions pour la Carte Leaflet (Page Découverte) ---
let discoveryMap;
let heatLayer;
let markers = [];
let polygons = {};

// Données des quartiers (à adapter/compléter)
const quartiersData = {
    gueliz: { lat: 31.6300, lng: -8.0089, name: "Guéliz", prix: 15000, desc: "Quartier moderne et animé.", color: "#ff7800" },
    hivernage: { lat: 31.6210, lng: -8.0090, name: "Hivernage", prix: 25000, desc: "Quartier résidentiel haut de gamme.", color: "#e4007c" },
    medina: { lat: 31.6258, lng: -7.9890, name: "Médina", prix: 12000, desc: "Centre historique authentique.", color: "#f7a600" },
    palmeraie: { lat: 31.6700, lng: -7.9800, name: "Palmeraie", prix: 18000, desc: "Oasis de luxe et de tranquillité.", color: "#4caf50" },
    agdal: { lat: 31.6070, lng: -7.9980, name: "Agdal", prix: 16000, desc: "Quartier résidentiel moderne.", color: "#2196f3" },
    targa: { lat: 31.6450, lng: -8.0600, name: "Targa", prix: 14000, desc: "Zone résidentielle en développement.", color: "#9c27b0" },
    amerchich: { lat: 31.6500, lng: -7.9700, name: "Amerchich", prix: 10000, desc: "Quartier populaire en transformation.", color: "#795548" },
    daoudiate: { lat: 31.6480, lng: -7.9950, name: "Daoudiate", prix: 11000, desc: "Secteur résidentiel abordable.", color: "#607d8b" }
};

// Fonction pour déterminer la couleur du marqueur en fonction du prix
function getMarkerColor(prix) {
    if (prix < 12000) return "green"; // Vert pour bas prix
    if (prix < 18000) return "orange"; // Orange pour prix moyen
    return "red"; // Rouge pour prix élevé
}

function initDiscoveryMap() {
    discoveryMap = L.map("map-discovery").setView([31.6295, -7.9811], 13); // Centre sur Marrakech

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(discoveryMap);

    // Création des marqueurs et popups
    const heatData = [];
    for (const key in quartiersData) {
        const quartier = quartiersData[key];
        const markerColor = getMarkerColor(quartier.prix);
        const icon = L.divIcon({
            className: `custom-div-icon ${markerColor}-marker`,
            html: `<div style='background-color:${markerColor};' class='marker-pin'></div><b>${quartier.name}</b>`,
            iconSize: [120, 42],
            iconAnchor: [10, 42],
            popupAnchor: [0, -35]
        });

        const marker = L.marker([quartier.lat, quartier.lng], { icon: icon })
            .addTo(discoveryMap)
            .bindPopup(`<b>${quartier.name}</b><br>${quartier.desc}<br>Prix moyen: ${quartier.prix} DH/m²`);
        markers.push(marker);
        heatData.push([quartier.lat, quartier.lng, quartier.prix / 25000]); // Normalisation pour l'intensité
    }

    // Initialisation de la couche de chaleur (heatmap)
    heatLayer = L.heatLayer(heatData, {
        radius: 35,
        blur: 20,
        maxZoom: 15,
        gradient: {0.4: "blue", 0.6: "lime", 1: "red"}
    }); // Ne pas l'ajouter à la carte initialement

    // Gestion du bouton pour afficher/masquer la heatmap
    const toggleButton = document.getElementById("toggle-heatmap-discovery");
    if (toggleButton) {
        toggleButton.addEventListener("click", () => {
            if (discoveryMap.hasLayer(heatLayer)) {
                discoveryMap.removeLayer(heatLayer);
            } else {
                heatLayer.addTo(discoveryMap);
            }
        });
    }
}

// --- Fonctions pour la Calculette (déléguées à calculette.js) ---
// Assurez-vous que calculette.js contient la fonction initCalculator()
// et qu'elle gère les éléments avec les IDs définis dans analyse-blog.html