/* ═══════════════════════════════════════════════════════
   ZONE IQ — Complete Application Logic
   Free APIs: Nominatim, Overpass, OpenAQ, Leaflet/OSM
   ═══════════════════════════════════════════════════════ */

(function () {
  'use strict';

  // ─── STATE ───────────────────────────────────────────
  const state = {
    location: null,       // { lat, lon, name, type }
    radius: 3,            // km
    amenities: {},        // counts per category
    scores: {},           // component scores
    overallScore: 0,
    charts: {},
    map: null,
    mapMarkers: [],
    radiusCircle: null,
    aqi: null,
    debounceTimer: null,
  };

  // ─── CONFIG ──────────────────────────────────────────
  const NOMINATIM_URL = 'https://nominatim.openstreetmap.org';
  const OVERPASS_URL  = 'https://overpass-api.de/api/interpreter';
  const OPENAQ_URL    = 'https://api.openaq.io/v2/measurements';

  // Category definitions
  const CATEGORIES = [
    { key: 'school',           label: 'Schools',         icon: '🏫', color: '#3b82f6', osm: 'amenity=school' },
    { key: 'college',          label: 'Colleges',        icon: '🎓', color: '#6366f1', osm: 'amenity=college' },
    { key: 'university',       label: 'Universities',    icon: '🏛️', color: '#8b5cf6', osm: 'amenity=university' },
    { key: 'hospital',         label: 'Hospitals',       icon: '🏥', color: '#ef4444', osm: 'amenity=hospital' },
    { key: 'pharmacy',         label: 'Pharmacies',      icon: '💊', color: '#f43f5e', osm: 'amenity=pharmacy' },
    { key: 'restaurant',       label: 'Restaurants',     icon: '🍽️', color: '#f59e0b', osm: 'amenity=restaurant' },
    { key: 'bank',             label: 'Banks',           icon: '🏦', color: '#10b981', osm: 'amenity=bank' },
    { key: 'bus_stop',         label: 'Bus Stops',       icon: '🚌', color: '#8b5cf6', osm: 'highway=bus_stop' },
    { key: 'subway_station',   label: 'Metro Stations',  icon: '🚇', color: '#6366f1', osm: 'station=subway' },
    { key: 'railway_station',  label: 'Rail Stations',   icon: '🚆', color: '#a855f7', osm: 'railway=station' },
    { key: 'park',             label: 'Parks',           icon: '🌳', color: '#06b6d4', osm: 'leisure=park' },
    { key: 'supermarket',      label: 'Supermarkets',    icon: '🛒', color: '#84cc16', osm: 'shop=supermarket' },
  ];

  const LIVABILITY_METRICS = [
    { key: 'education',   label: 'Education Access',    keys: ['school','college','university'], max: 10, color: '#3b82f6' },
    { key: 'healthcare',  label: 'Healthcare Access',   keys: ['hospital','pharmacy'],          max: 8,  color: '#ef4444' },
    { key: 'convenience', label: 'Convenience Access',  keys: ['supermarket','restaurant','bank'], max: 12, color: '#f59e0b' },
    { key: 'parks',       label: 'Parks & Nature',      keys: ['park'],                         max: 6,  color: '#10b981' },
    { key: 'transit',     label: 'Transit Access',      keys: ['bus_stop','subway_station','railway_station'], max: 10, color: '#8b5cf6' },
  ];

  // ─── UTILITIES ───────────────────────────────────────

  const $ = id => document.getElementById(id);
  const sleep = ms => new Promise(r => setTimeout(r, ms));

  function showToast(msg, type = 'info') {
    const toast = $('toast');
    const icon  = $('toast-icon');
    const msgEl = $('toast-msg');

    const configs = {
      success: { bg: 'rgba(16,185,129,0.15)', border: 'rgba(16,185,129,0.3)', color: '#10b981', svg: '<path d="M20 6L9 17l-5-5"/>'},
      error:   { bg: 'rgba(244,63,94,0.15)',  border: 'rgba(244,63,94,0.3)',  color: '#f43f5e', svg: '<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>'},
      info:    { bg: 'rgba(59,130,246,0.15)', border: 'rgba(59,130,246,0.3)', color: '#3b82f6', svg: '<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>'},
    };
    const c = configs[type] || configs.info;

    toast.style.background = c.bg;
    toast.style.borderColor = c.border;
    icon.style.background = c.bg;
    icon.style.color = c.color;
    icon.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="${c.color}" stroke-width="2.5" stroke-linecap="round">${c.svg}</svg>`;
    msgEl.textContent = msg;

    toast.classList.remove('hidden');
    toast.style.opacity = '1';

    setTimeout(() => {
      toast.style.opacity = '0';
      setTimeout(() => toast.classList.add('hidden'), 300);
    }, 3500);
  }

  function setLoadingMsg(title, msg) {
    $('loading-title').textContent = title;
    $('loading-msg').textContent   = msg;
  }

  function showLoading(show) {
    $('loading-overlay').classList.toggle('hidden', !show);
  }

  function setStatus(text, color = '#10b981') {
    $('status-text').textContent = text;
    $('status-dot').style.background = color;
  }

  function animateValue(el, from, to, duration = 1000) {
    if (!el) return;
    const start = performance.now();
    const update = now => {
      const t = Math.min((now - start) / duration, 1);
      const ease = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
      el.textContent = Math.round(from + (to - from) * ease);
      if (t < 1) requestAnimationFrame(update);
    };
    requestAnimationFrame(update);
  }

  // Cache helpers
  function cacheGet(key) {
    try {
      const item = localStorage.getItem('ziq_' + key);
      if (!item) return null;
      const { data, ts } = JSON.parse(item);
      if (Date.now() - ts > 15 * 60 * 1000) { localStorage.removeItem('ziq_' + key); return null; }
      return data;
    } catch { return null; }
  }

  function cacheSet(key, data) {
    try { localStorage.setItem('ziq_' + key, JSON.stringify({ data, ts: Date.now() })); } catch {}
  }

  // ─── NOMINATIM GEOCODING ─────────────────────────────

  async function geocode(query) {
    const ckey = 'geo_' + query.toLowerCase().replace(/\s+/g, '_');
    const cached = cacheGet(ckey);
    if (cached) return cached;

    const url = `${NOMINATIM_URL}/search?q=${encodeURIComponent(query)}&countrycodes=in&format=json&addressdetails=1&limit=5`;
    const res  = await fetch(url, { headers: { 'Accept-Language': 'en' } });
    if (!res.ok) throw new Error('Geocoding failed');
    const data = await res.json();
    cacheSet(ckey, data);
    return data;
  }

  async function getSuggestions(query) {
    if (query.length < 3) return [];
    try {
      const url = `${NOMINATIM_URL}/search?q=${encodeURIComponent(query + ' India')}&format=json&limit=5&addressdetails=1`;
      const res  = await fetch(url, { headers: { 'Accept-Language': 'en' } });
      return await res.json();
    } catch { return []; }
  }

  // ─── OVERPASS API ─────────────────────────────────────

  function buildOverpassQuery(lat, lon, radiusMeters) {
    const queries = CATEGORIES.map(cat => {
      const [k, v] = cat.osm.split('=');
      return `
      node["${k}"="${v}"](around:${radiusMeters},${lat},${lon});
      way["${k}"="${v}"](around:${radiusMeters},${lat},${lon});`;
    }).join('');

    return `
[out:json][timeout:30];
(
  ${queries}
);
out center;`;
  }

  async function fetchAmenities(lat, lon, radiusKm) {
    const radiusM = radiusKm * 1000;
    const ckey = `amenities_${lat.toFixed(3)}_${lon.toFixed(3)}_${radiusKm}`;
    const cached = cacheGet(ckey);
    if (cached) return cached;

    const query = buildOverpassQuery(lat, lon, radiusM);
    const res   = await fetch(OVERPASS_URL, {
      method: 'POST',
      body: 'data=' + encodeURIComponent(query),
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    });
    if (!res.ok) throw new Error('Overpass API error');
    const data = await res.json();
    cacheSet(ckey, data);
    return data;
  }

  function parseAmenities(overpassData) {
    const counts = {};
    CATEGORIES.forEach(c => { counts[c.key] = []; });

    (overpassData.elements || []).forEach(el => {
      const tags = el.tags || {};
      CATEGORIES.forEach(cat => {
        const [k, v] = cat.osm.split('=');
        if (tags[k] === v) {
          const center = el.center || el;
          counts[cat.key].push({
            lat: center.lat,
            lon: center.lon,
            name: tags.name || cat.label.replace(/s$/, ''),
            tags,
          });
        }
      });
    });

    return counts;
  }

  // ─── OPENAQ AIR QUALITY ───────────────────────────────

  async function fetchAirQuality(lat, lon) {
    const ckey = `aqi_${lat.toFixed(2)}_${lon.toFixed(2)}`;
    const cached = cacheGet(ckey);
    if (cached) return cached;

    try {
      const url = `${OPENAQ_URL}?coordinates=${lat},${lon}&radius=50000&limit=100&parameters[]=pm25&parameters[]=pm10&parameters[]=no2&parameters[]=so2&order_by=datetime&sort=desc`;
      const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
      if (!res.ok) return null;
      const data = await res.json();
      if (!data.results || data.results.length === 0) return null;
      cacheSet(ckey, data.results);
      return data.results;
    } catch {
      return null;
    }
  }

  function parseAQI(results) {
    if (!results || results.length === 0) return null;

    const latest = {};
    results.forEach(r => {
      if (!latest[r.parameter] || new Date(r.date.utc) > new Date(latest[r.parameter].date.utc)) {
        latest[r.parameter] = r;
      }
    });

    const pm25 = latest.pm25?.value ?? null;
    const pm10 = latest.pm10?.value ?? null;
    const no2  = latest.no2?.value ?? null;
    const so2  = latest.so2?.value ?? null;

    // Calculate AQI from PM2.5 (standard US EPA formula simplified)
    let aqi = null;
    if (pm25 !== null) {
      if (pm25 <= 12.0)       aqi = Math.round((50/12) * pm25);
      else if (pm25 <= 35.4)  aqi = Math.round(50 + ((100-50)/(35.4-12)) * (pm25 - 12));
      else if (pm25 <= 55.4)  aqi = Math.round(100 + ((150-100)/(55.4-35.4)) * (pm25 - 35.4));
      else if (pm25 <= 150.4) aqi = Math.round(150 + ((200-150)/(150.4-55.4)) * (pm25 - 55.4));
      else if (pm25 <= 250.4) aqi = Math.round(200 + ((300-200)/(250.4-150.4)) * (pm25 - 150.4));
      else                    aqi = Math.round(300 + ((400-300)/(350.4-250.4)) * (pm25 - 250.4));
    }

    return { aqi, pm25, pm10, no2, so2, source: 'OpenAQ' };
  }

  function aqiCategory(aqi) {
    if (aqi === null) return { label: 'Unknown', color: '#6b7280', bg: 'rgba(107,114,128,0.1)', score: 60 };
    if (aqi <= 50)   return { label: 'Excellent',  color: '#10b981', bg: 'rgba(16,185,129,0.1)',  score: 95 };
    if (aqi <= 100)  return { label: 'Good',       color: '#84cc16', bg: 'rgba(132,204,22,0.1)',  score: 80 };
    if (aqi <= 150)  return { label: 'Moderate',   color: '#f59e0b', bg: 'rgba(245,158,11,0.1)',  score: 60 };
    if (aqi <= 200)  return { label: 'Poor',       color: '#f97316', bg: 'rgba(249,115,22,0.1)',  score: 40 };
    if (aqi <= 300)  return { label: 'Very Poor',  color: '#ef4444', bg: 'rgba(239,68,68,0.1)',   score: 20 };
    return                 { label: 'Hazardous',   color: '#991b1b', bg: 'rgba(153,27,27,0.1)',   score: 5  };
  }

  // ─── SCORE CALCULATORS ────────────────────────────────

  function calcConnectivityScore(counts) {
    const weights = {
      school: 3, college: 4, university: 5,
      hospital: 5, pharmacy: 2,
      restaurant: 1, bank: 2,
      bus_stop: 2, subway_station: 8, railway_station: 6,
      park: 3, supermarket: 2,
    };

    let raw = 0;
    let maxRaw = 0;

    CATEGORIES.forEach(cat => {
      const w  = weights[cat.key] || 1;
      const n  = (counts[cat.key] || []).length;
      const cap = cat.key === 'bus_stop' ? 20 : 10; // cap to prevent outlier inflation
      raw    += Math.min(n, cap) * w;
      maxRaw += cap * w;
    });

    return Math.min(100, Math.round((raw / maxRaw) * 100));
  }

  function calcLivabilityScore(counts) {
    const scores = {};
    LIVABILITY_METRICS.forEach(m => {
      const total = m.keys.reduce((s, k) => s + (counts[k] || []).length, 0);
      scores[m.key] = Math.min(100, Math.round((Math.min(total, m.max) / m.max) * 100));
    });
    const avg = Object.values(scores).reduce((a, b) => a + b, 0) / LIVABILITY_METRICS.length;
    return { overall: Math.round(avg), breakdown: scores };
  }

  function calcInfrastructureScore(counts, locName) {
    // Derived from OSM data + name-based heuristics
    const name = (locName || '').toLowerCase();

    const hasMetro    = (counts.subway_station || []).length > 0;
    const hasRail     = (counts.railway_station || []).length > 0;
    const hasBus      = (counts.bus_stop || []).length >= 3;

    // Heuristic: IT hubs
    const itKeywords  = ['gachibowli','madhapur','hitec','whitefield','koramangala','hinjewadi','cybercity','electronic','salcette','nanakramguda','kokapet','financial district'];
    const isITHub     = itKeywords.some(k => name.includes(k));

    // Airport proximity (city-level heuristic)
    const airportCities = ['hyderabad','bangalore','bengaluru','mumbai','delhi','chennai','pune','kolkata','ahmedabad'];
    const nearAirport   = airportCities.some(c => name.includes(c));

    // Highway access (approximation from bus density)
    const busCount    = (counts.bus_stop || []).length;
    const highwayScore = Math.min(100, busCount * 5);
    const metroScore   = hasMetro ? 90 : (hasRail ? 60 : 20);
    const railScore    = hasRail  ? 85 : 30;
    const airportScore = nearAirport ? 70 : 35;
    const itScore      = isITHub ? 90 : 40;

    const overall = Math.round((highwayScore * 0.2 + metroScore * 0.3 + railScore * 0.15 + airportScore * 0.1 + itScore * 0.25));

    return {
      overall,
      breakdown: {
        'Highway Access':    { score: highwayScore, icon: '🛣️' },
        'Metro Access':      { score: metroScore,   icon: '🚇' },
        'Rail Access':       { score: railScore,    icon: '🚆' },
        'Airport Proximity': { score: airportScore, icon: '✈️' },
        'IT Hub Proximity':  { score: itScore,      icon: '💻' },
      }
    };
  }

  function calcRiskScore(counts, aqiData, locName) {
    const name   = (locName || '').toLowerCase();
    const busCount = (counts.bus_stop || []).length;
    const restCount = (counts.restaurant || []).length;

    // Traffic Risk: high bus count + many restaurants = traffic
    const trafficRaw = Math.min(100, (busCount * 4 + restCount * 2));
    const trafficRisk = trafficRaw > 70 ? 'High' : trafficRaw > 40 ? 'Medium' : 'Low';

    // Pollution Risk: from AQI
    const aqi = aqiData?.aqi ?? null;
    const pollutionRisk = aqi === null ? 'Medium' : aqi > 150 ? 'High' : aqi > 100 ? 'Medium' : 'Low';

    // Flood Risk: coastal/low-lying heuristic
    const floodKeywords = ['visakhapatnam','vizag','mumbai','kolkata','chennai','kochi','surat','coastal','delta','low'];
    const floodRisk = floodKeywords.some(k => name.includes(k)) ? 'Medium' : 'Low';

    // Overcrowding Risk: high density of amenities
    const totalAmenities = CATEGORIES.reduce((s, c) => s + (counts[c.key] || []).length, 0);
    const overcrowdingRisk = totalAmenities > 150 ? 'High' : totalAmenities > 80 ? 'Medium' : 'Low';

    const riskToScore = { Low: 90, Medium: 60, High: 25 };
    const avg = (riskToScore[trafficRisk] + riskToScore[pollutionRisk] + riskToScore[floodRisk] + riskToScore[overcrowdingRisk]) / 4;

    return {
      overall: Math.round(avg),
      items: [
        { label: 'Traffic Risk',      risk: trafficRisk,      icon: '🚦' },
        { label: 'Pollution Risk',    risk: pollutionRisk,    icon: '🏭' },
        { label: 'Flood Risk',        risk: floodRisk,        icon: '🌊' },
        { label: 'Overcrowding Risk', risk: overcrowdingRisk, icon: '👥' },
      ]
    };
  }

  function calcOverallScore(scores) {
    const { connectivity, livability, environment, infrastructure, risk } = scores;
    return Math.round(
      connectivity  * 0.30 +
      livability    * 0.25 +
      environment   * 0.15 +
      infrastructure* 0.20 +
      risk          * 0.10
    );
  }

  function scoreGrade(score) {
    if (score >= 85) return { grade: 'A+', label: 'Exceptional',  color: '#10b981' };
    if (score >= 75) return { grade: 'A',  label: 'Excellent',    color: '#84cc16' };
    if (score >= 65) return { grade: 'B+', label: 'Very Good',    color: '#3b82f6' };
    if (score >= 55) return { grade: 'B',  label: 'Good',         color: '#6366f1' };
    if (score >= 45) return { grade: 'C+', label: 'Average',      color: '#f59e0b' };
    if (score >= 35) return { grade: 'C',  label: 'Below Avg',    color: '#f97316' };
    return                 { grade: 'D',  label: 'Poor',          color: '#ef4444' };
  }

  // ─── AI INSIGHTS GENERATOR ────────────────────────────

  function generateInsights(locName, counts, scores, aqiData, riskData) {
    const name  = locName.split(',')[0].trim();
    const total = CATEGORIES.reduce((s, c) => s + (counts[c.key] || []).length, 0);
    const g     = scoreGrade(scores.overall);

    const schools   = (counts.school || []).length + (counts.college || []).length + (counts.university || []).length;
    const hospitals = (counts.hospital || []).length + (counts.pharmacy || []).length;
    const transit   = (counts.bus_stop || []).length + (counts.subway_station || []).length + (counts.railway_station || []).length;
    const parks     = (counts.park || []).length;

    const aqiInfo = aqiData ? aqiCategory(aqiData.aqi) : null;

    // Summary
    const summary = `${name} scores ${scores.overall}/100 on the Zone IQ Index, earning a grade of ${g.grade} — ${g.label}. The area has ${total} mapped amenities within the selected radius, with particularly ${scores.connectivity >= 65 ? 'strong' : 'moderate'} connectivity (${scores.connectivity}/100) and ${scores.livability >= 65 ? 'excellent' : 'developing'} livability (${scores.livability}/100). ${aqiInfo ? `Air quality is rated ${aqiInfo.label}.` : 'Air quality data was unavailable for this location.'}`;

    // Strengths
    const strengths = [];
    if (scores.connectivity >= 65) strengths.push(`Strong connectivity with ${total} nearby amenities`);
    if (schools >= 5)              strengths.push(`Good educational infrastructure (${schools} institutions)`);
    if (hospitals >= 3)            strengths.push(`Adequate healthcare access (${hospitals} facilities)`);
    if (transit >= 5)              strengths.push(`Well-connected transit network (${transit} stops)`);
    if (parks >= 3)                strengths.push(`Green spaces available (${parks} parks)`);
    if (scores.infrastructure >= 70) strengths.push('Strong infrastructure & IT hub proximity');
    if (scores.environment >= 70)  strengths.push('Favorable environmental conditions');
    if (strengths.length === 0) strengths.push('Developing area with growth potential');

    // Weaknesses
    const weaknesses = [];
    if (scores.connectivity < 50) weaknesses.push('Limited nearby amenities');
    if (schools < 3)              weaknesses.push('Limited educational institutions nearby');
    if (hospitals < 2)            weaknesses.push('Healthcare access needs improvement');
    if (transit < 3)              weaknesses.push('Public transit connectivity is limited');
    if (parks < 2)                weaknesses.push('Limited green spaces and parks');
    if (scores.environment < 50)  weaknesses.push('Air quality concerns in the area');
    const highRisks = (riskData?.items || []).filter(r => r.risk === 'High');
    if (highRisks.length > 0) weaknesses.push(`High ${highRisks.map(r => r.label.toLowerCase()).join(' & ')}`);
    if (weaknesses.length === 0) weaknesses.push('No major weaknesses identified');

    // Best For
    const bestFor = [];
    if (scores.livability >= 65 && schools >= 3)   bestFor.push('Families');
    if (scores.infrastructure >= 65)               bestFor.push('Working Professionals');
    if (scores.connectivity >= 60)                 bestFor.push('Investors');
    if (schools >= 4 && scores.connectivity >= 55) bestFor.push('Students');
    if (scores.overall >= 70)                      bestFor.push('Retirees');
    if (bestFor.length === 0) bestFor.push('General Residents');

    // Investment Potential
    let investPotential, investText;
    if (scores.overall >= 75) {
      investPotential = 'High';
      investText = `${name} shows strong investment potential. High connectivity, good infrastructure, and solid livability scores make this a prime location for residential and commercial real estate investment. Expect above-average appreciation.`;
    } else if (scores.overall >= 55) {
      investPotential = 'Moderate';
      investText = `${name} presents moderate investment opportunity. The area has solid fundamentals with room for growth. Infrastructure development and improving amenities make this a reasonable medium-term investment.`;
    } else {
      investPotential = 'Developing';
      investText = `${name} is in a developing phase. Current scores indicate limited infrastructure but potential for growth. Early-stage investors may benefit from lower entry points, though risks are higher.`;
    }

    return { summary, strengths, weaknesses, bestFor, investPotential, investText, grade: g };
  }

  // ─── MAP MANAGEMENT ──────────────────────────────────

  function initMap(lat, lon) {
    if (!state.map) {
      state.map = L.map('map', { zoomControl: true, scrollWheelZoom: true }).setView([lat, lon], 14);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>',
        maxZoom: 19,
      }).addTo(state.map);
    } else {
      state.map.setView([lat, lon], 14);
    }
  }

  function clearMapMarkers() {
    state.mapMarkers.forEach(m => state.map.removeLayer(m));
    state.mapMarkers = [];
    if (state.radiusCircle) { state.map.removeLayer(state.radiusCircle); state.radiusCircle = null; }
  }

  function createColorIcon(color, emoji) {
    return L.divIcon({
      className: '',
      html: `<div style="width:28px;height:28px;border-radius:50%;background:${color};display:flex;align-items:center;justify-content:center;font-size:13px;border:2px solid rgba(255,255,255,0.3);box-shadow:0 2px 8px rgba(0,0,0,0.4);">${emoji}</div>`,
      iconSize: [28, 28],
      iconAnchor: [14, 14],
    });
  }

  function plotMapMarkers(lat, lon, counts, radiusKm) {
    clearMapMarkers();

    // Radius circle
    state.radiusCircle = L.circle([lat, lon], {
      radius: radiusKm * 1000,
      color: 'rgba(59,130,246,0.6)',
      fillColor: 'rgba(59,130,246,0.05)',
      fillOpacity: 1,
      weight: 1.5,
      dashArray: '6 4',
    }).addTo(state.map);

    // Center marker
    const centerMarker = L.marker([lat, lon], {
      icon: L.divIcon({
        className: '',
        html: `<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:16px;border:3px solid white;box-shadow:0 4px 16px rgba(59,130,246,0.5);">📍</div>`,
        iconSize: [36, 36],
        iconAnchor: [18, 18],
      })
    }).addTo(state.map);
    centerMarker.bindPopup(`<strong>${state.location?.name || 'Selected Location'}</strong><br><small style="color:#6b7280;">${lat.toFixed(4)}, ${lon.toFixed(4)}</small>`);
    state.mapMarkers.push(centerMarker);

    // Amenity markers (cap per category to avoid overload)
    const CAP = 12;
    CATEGORIES.forEach(cat => {
      const items = (counts[cat.key] || []).slice(0, CAP);
      items.forEach(item => {
        if (!item.lat || !item.lon) return;
        const marker = L.marker([item.lat, item.lon], { icon: createColorIcon(cat.color, cat.icon) })
          .addTo(state.map);
        marker.bindPopup(`
          <div style="min-width:140px;">
            <div style="font-size:14px; font-weight:600; margin-bottom:4px;">${cat.icon} ${item.name || cat.label}</div>
            <div style="font-size:11px; color:#93c5fd; text-transform:uppercase; letter-spacing:0.06em;">${cat.label}</div>
            ${item.tags?.['addr:street'] ? `<div style="font-size:11px; margin-top:4px; color:#9ca3af;">${item.tags['addr:street']}</div>` : ''}
          </div>
        `);
        state.mapMarkers.push(marker);
      });
    });
  }

  // ─── CHART MANAGEMENT ────────────────────────────────

  function destroyChart(key) {
    if (state.charts[key]) { state.charts[key].destroy(); delete state.charts[key]; }
  }

  function buildGaugeChart(score) {
    destroyChart('gauge');
    const g = scoreGrade(score);
    const ctx = document.getElementById('gauge-chart')?.getContext('2d');
    if (!ctx) return;

    state.charts.gauge = new Chart(ctx, {
      type: 'doughnut',
      data: {
        datasets: [{
          data: [score, 100 - score],
          backgroundColor: [g.color, '#1a2340'],
          borderWidth: 0,
          circumference: 270,
          rotation: 225,
        }]
      },
      options: {
        responsive: false,
        cutout: '78%',
        plugins: { legend: { display: false }, tooltip: { enabled: false } },
        animation: { duration: 1500, easing: 'easeInOutQuart' },
      }
    });

    $('gauge-score').textContent = score;
    $('gauge-grade').textContent = g.grade + ' · ' + g.label;
    $('gauge-grade').style.color = g.color;
  }

  function buildRadarChart(scores) {
    destroyChart('radar');
    const ctx = document.getElementById('radar-chart')?.getContext('2d');
    if (!ctx) return;

    state.charts.radar = new Chart(ctx, {
      type: 'radar',
      data: {
        labels: ['Connectivity', 'Livability', 'Environment', 'Infrastructure', 'Risk'],
        datasets: [{
          label: state.location?.name || 'Zone IQ',
          data: [
            scores.connectivity,
            scores.livability,
            scores.environment,
            scores.infrastructure,
            scores.risk,
          ],
          borderColor: 'rgba(59,130,246,0.9)',
          backgroundColor: 'rgba(59,130,246,0.12)',
          pointBackgroundColor: '#3b82f6',
          pointBorderColor: '#fff',
          pointRadius: 4,
          borderWidth: 2,
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          r: {
            min: 0, max: 100,
            ticks: { display: false, stepSize: 25 },
            grid: { color: 'rgba(30,45,74,0.6)' },
            angleLines: { color: 'rgba(30,45,74,0.6)' },
            pointLabels: { color: '#6b7280', font: { size: 11, family: 'DM Sans' } },
          }
        },
        plugins: { legend: { display: false } },
        animation: { duration: 1200 },
      }
    });
  }

  function buildBarChart(scores) {
    destroyChart('bar');
    const ctx = document.getElementById('bar-chart')?.getContext('2d');
    if (!ctx) return;

    state.charts.bar = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Connectivity', 'Livability', 'Environment', 'Infrastructure', 'Risk Score'],
        datasets: [{
          data: [scores.connectivity, scores.livability, scores.environment, scores.infrastructure, scores.risk],
          backgroundColor: [
            'rgba(59,130,246,0.7)',
            'rgba(16,185,129,0.7)',
            'rgba(245,158,11,0.7)',
            'rgba(139,92,246,0.7)',
            'rgba(244,63,94,0.7)',
          ],
          borderColor: [
            'rgba(59,130,246,1)',
            'rgba(16,185,129,1)',
            'rgba(245,158,11,1)',
            'rgba(139,92,246,1)',
            'rgba(244,63,94,1)',
          ],
          borderWidth: 1.5,
          borderRadius: 6,
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          x: {
            grid: { color: 'rgba(30,45,74,0.4)' },
            ticks: { color: '#6b7280', font: { size: 11, family: 'DM Sans' } },
          },
          y: {
            min: 0, max: 100,
            grid: { color: 'rgba(30,45,74,0.4)' },
            ticks: { color: '#6b7280', font: { size: 11, family: 'DM Sans' }, stepSize: 25 },
          },
        },
        plugins: { legend: { display: false } },
        animation: { duration: 1000 },
      }
    });
  }

  // ─── UI RENDERERS ─────────────────────────────────────

  function renderLocationHeader(loc, score) {
    $('loc-name').textContent = loc.name;
    $('loc-lat').textContent  = loc.lat.toFixed(4);
    $('loc-lon').textContent  = loc.lon.toFixed(4);
    $('loc-type').textContent = loc.type || 'Location';

    const g = scoreGrade(score);
    animateValue($('header-score'), 0, score, 1200);
    $('header-grade').textContent   = g.grade;
    $('header-grade').style.background = `linear-gradient(135deg, ${g.color}, ${g.color}99)`;
  }

  function renderScorePanel(scores) {
    const animate = (id, val) => {
      const el = $(id);
      if (el) animateValue(el, 0, val, 1000);
    };

    animate('score-connectivity',   scores.connectivity);
    animate('score-livability',     scores.livability);
    animate('score-environment',    scores.environment);
    animate('score-infrastructure', scores.infrastructure);
    animate('score-risk',           scores.risk);

    setTimeout(() => {
      const set = (barId, val) => {
        const el = $(barId);
        if (el) el.style.width = val + '%';
      };
      set('bar-connectivity',   scores.connectivity);
      set('bar-livability',     scores.livability);
      set('bar-environment',    scores.environment);
      set('bar-infrastructure', scores.infrastructure);
      set('bar-risk',           scores.risk);
    }, 200);
  }

  function renderConnectivity(counts, score) {
    $('connectivity-score-display').textContent = score;
    const grid = $('connectivity-grid');
    grid.innerHTML = '';

    CATEGORIES.forEach(cat => {
      const n = (counts[cat.key] || []).length;
      const pct = Math.min(100, Math.round((n / 15) * 100));

      grid.innerHTML += `
        <div class="glass-light p-3 flex flex-col gap-1.5">
          <div class="flex items-center justify-between">
            <span class="text-lg">${cat.icon}</span>
            <span class="font-display font-bold text-base" style="color:#e2e8f0;">${n}</span>
          </div>
          <div class="text-xs font-medium" style="color:#6b7280;">${cat.label}</div>
          <div class="progress-bar" style="height:4px;">
            <div class="progress-fill" style="width:${pct}%; background:${cat.color}; height:4px; transition:width 1.2s ease;"></div>
          </div>
        </div>
      `;
    });
  }

  function renderLivability(counts, livData) {
    $('livability-score-display').textContent = livData.overall;
    const container = $('livability-bars');
    container.innerHTML = '';

    LIVABILITY_METRICS.forEach(m => {
      const val = livData.breakdown[m.key] ?? 0;
      container.innerHTML += `
        <div>
          <div class="flex items-center justify-between mb-1.5">
            <span class="text-sm font-medium" style="color:#e2e8f0;">${m.label}</span>
            <span class="text-xs font-bold" style="color:${m.color};">${val}/100</span>
          </div>
          <div class="progress-bar">
            <div class="progress-fill" style="width:${val}%; background: linear-gradient(90deg, ${m.color}, ${m.color}99); transition:width 1.2s ease;"></div>
          </div>
        </div>
      `;
    });
  }

  function renderEnvironment(aqiData, envScore) {
    const container = $('env-content');
    const aqiBadge  = $('aqi-badge');

    if (!aqiData) {
      aqiBadge.textContent = 'Unavailable';
      aqiBadge.style.background = 'rgba(107,114,128,0.1)';
      aqiBadge.style.color = '#6b7280';

      container.innerHTML = `
        <div class="glass-light p-4 text-center mb-4">
          <div class="text-3xl mb-2">🌫️</div>
          <div class="text-sm font-semibold mb-1" style="color:#6b7280;">Air Quality Data Unavailable</div>
          <div class="text-xs" style="color:#4a5568;">No OpenAQ monitoring stations found within 50km. Using estimated score based on location heuristics.</div>
        </div>
        <div class="glass-light p-3">
          <div class="flex justify-between items-center">
            <span class="text-sm" style="color:#6b7280;">Estimated Score</span>
            <span class="font-display font-bold text-xl" style="color:#f59e0b;">${envScore}</span>
          </div>
        </div>
      `;
      return;
    }

    const cat = aqiCategory(aqiData.aqi);
    aqiBadge.textContent = cat.label;
    aqiBadge.style.background = cat.bg;
    aqiBadge.style.color = cat.color;

    const fmt = val => val !== null ? val.toFixed(1) : '—';

    container.innerHTML = `
      <div class="glass-light p-4 mb-4 flex items-center gap-4">
        <div class="text-center">
          <div class="font-display text-5xl font-bold leading-none" style="color:${cat.color};">${aqiData.aqi ?? '—'}</div>
          <div class="text-xs mt-1 font-semibold" style="color:${cat.color}; text-transform:uppercase; letter-spacing:0.06em;">AQI</div>
        </div>
        <div class="flex-1">
          <div class="text-sm font-semibold mb-2" style="color:#e2e8f0;">${cat.label}</div>
          <div class="progress-bar"><div class="progress-fill" style="width:${Math.min(100,(aqiData.aqi/300)*100)}%; background:${cat.color};"></div></div>
          <div class="text-xs mt-1" style="color:#6b7280;">Source: ${aqiData.source}</div>
        </div>
      </div>

      <div class="grid grid-cols-2 gap-3">
        ${[
          { label: 'PM2.5', val: fmt(aqiData.pm25), unit: 'μg/m³', color: '#f59e0b' },
          { label: 'PM10',  val: fmt(aqiData.pm10),  unit: 'μg/m³', color: '#f97316' },
          { label: 'NO₂',   val: fmt(aqiData.no2),   unit: 'μg/m³', color: '#8b5cf6' },
          { label: 'SO₂',   val: fmt(aqiData.so2),   unit: 'μg/m³', color: '#ef4444' },
        ].map(p => `
          <div class="glass-light p-3">
            <div class="text-xs mb-1" style="color:#6b7280;">${p.label}</div>
            <div class="font-display font-bold text-lg" style="color:${p.color};">${p.val} <span class="text-xs font-normal" style="color:#6b7280;">${p.val !== '—' ? p.unit : ''}</span></div>
          </div>
        `).join('')}
      </div>
    `;
  }

  function renderInfrastructure(infraData) {
    $('infra-score-display').textContent = infraData.overall;
    const container = $('infra-content');
    container.innerHTML = '';

    Object.entries(infraData.breakdown).forEach(([label, data]) => {
      const col = data.score >= 70 ? '#10b981' : data.score >= 45 ? '#f59e0b' : '#f43f5e';
      container.innerHTML += `
        <div class="glass-light p-3 flex items-center gap-3">
          <span class="text-xl">${data.icon}</span>
          <div class="flex-1">
            <div class="flex justify-between mb-1.5">
              <span class="text-sm font-medium" style="color:#e2e8f0;">${label}</span>
              <span class="text-xs font-bold" style="color:${col};">${data.score}/100</span>
            </div>
            <div class="progress-bar">
              <div class="progress-fill" style="width:${data.score}%; background:${col}; transition:width 1.2s ease;"></div>
            </div>
          </div>
        </div>
      `;
    });
  }

  function renderRisk(riskData) {
    const container = $('risk-content');
    container.innerHTML = '';

    riskData.items.forEach(item => {
      const cls = item.risk === 'High' ? 'risk-high' : item.risk === 'Medium' ? 'risk-medium' : 'risk-low';
      const dot = item.risk === 'High' ? '#f43f5e' : item.risk === 'Medium' ? '#f59e0b' : '#10b981';
      container.innerHTML += `
        <div class="glass-light p-4 flex flex-col gap-2">
          <div class="flex items-center justify-between">
            <span class="text-2xl">${item.icon}</span>
            <span class="cat-badge ${cls}">${item.risk}</span>
          </div>
          <div class="text-sm font-medium" style="color:#e2e8f0;">${item.label}</div>
          <div class="flex items-center gap-1.5">
            <div class="w-2 h-2 rounded-full" style="background:${dot};"></div>
            <div class="text-xs" style="color:#6b7280;">${item.risk === 'High' ? 'Significant concern' : item.risk === 'Medium' ? 'Moderate concern' : 'Minimal concern'}</div>
          </div>
        </div>
      `;
    });
  }

  function renderAIInsights(insights) {
    // Main cards
    const container = $('ai-insights-content');
    container.innerHTML = '';

    const cards = [
      {
        title: 'Strengths',
        icon: '✅',
        color: '#10b981',
        content: insights.strengths.map(s => `<li class="flex gap-2 items-start"><span style="color:#10b981; margin-top:2px;">•</span><span>${s}</span></li>`).join(''),
      },
      {
        title: 'Weaknesses',
        icon: '⚠️',
        color: '#f59e0b',
        content: insights.weaknesses.map(w => `<li class="flex gap-2 items-start"><span style="color:#f59e0b; margin-top:2px;">•</span><span>${w}</span></li>`).join(''),
      },
      {
        title: 'Best For',
        icon: '🎯',
        color: '#3b82f6',
        content: insights.bestFor.map(b => `<li class="flex gap-2 items-start"><span style="color:#3b82f6; margin-top:2px;">→</span><span class="font-medium">${b}</span></li>`).join(''),
      },
      {
        title: `Grade: ${insights.grade.grade}`,
        icon: '🏆',
        color: insights.grade.color,
        content: `<div class="text-center py-2"><div class="font-display text-6xl font-bold mb-2" style="color:${insights.grade.color};">${insights.grade.grade}</div><div class="text-sm" style="color:#6b7280;">${insights.grade.label}</div></div>`,
      },
    ];

    cards.forEach(card => {
      container.innerHTML += `
        <div class="glass-light p-4 flex flex-col gap-3">
          <div class="flex items-center gap-2">
            <span class="text-lg">${card.icon}</span>
            <span class="font-display font-semibold text-sm" style="color:${card.color};">${card.title}</span>
          </div>
          <ul class="space-y-1.5 text-xs" style="color:#9ca3af;">${card.content}</ul>
        </div>
      `;
    });

    // Summary
    $('ai-summary').innerHTML = `
      <div class="flex items-center gap-2 mb-3">
        <span class="text-base">📝</span>
        <span class="font-display font-semibold text-sm" style="color:#e2e8f0;">Location Summary</span>
      </div>
      <p class="text-sm leading-relaxed" style="color:#9ca3af;">${insights.summary}</p>
    `;

    // Best For tags
    $('ai-best-for').innerHTML = `
      <div class="flex items-center gap-2 mb-3">
        <span class="text-base">👥</span>
        <span class="font-display font-semibold text-sm" style="color:#e2e8f0;">Recommended For</span>
      </div>
      <div class="flex flex-wrap gap-2">
        ${insights.bestFor.map(b => `<span class="tag">${b}</span>`).join('')}
      </div>
    `;

    // Investment
    const potColor = insights.investPotential === 'High' ? '#10b981' : insights.investPotential === 'Moderate' ? '#f59e0b' : '#6b7280';
    $('ai-investment').innerHTML = `
      <div class="flex items-start gap-4">
        <div>
          <div class="text-xs mb-1 font-semibold" style="color:#6b7280; text-transform:uppercase; letter-spacing:0.06em;">Investment Potential</div>
          <div class="font-display text-2xl font-bold" style="color:${potColor};">${insights.investPotential}</div>
        </div>
        <div class="flex-1">
          <p class="text-sm leading-relaxed" style="color:#9ca3af;">${insights.investText}</p>
        </div>
      </div>
    `;
  }

  // ─── MAIN ANALYSIS PIPELINE ──────────────────────────

  async function analyze(lat, lon, locName, locType) {
    $('empty-state').classList.add('hidden');
    $('dashboard').classList.remove('hidden');

    showLoading(true);
    setStatus('Analyzing…', '#f59e0b');

    try {
      // Step 1: Geocode already done; just store
      state.location = { lat, lon, name: locName, type: locType };

      // Step 2: Init map
      setLoadingMsg('Setting up Map', 'Initializing interactive map…');
      initMap(lat, lon);

      // Step 3: Fetch amenities
      setLoadingMsg('Fetching Amenities', `Querying OSM for ${locName}…`);
      const overpassData = await fetchAmenities(lat, lon, state.radius);
      const counts = parseAmenities(overpassData);

      // Step 4: Fetch air quality
      setLoadingMsg('Checking Air Quality', 'Querying OpenAQ monitoring stations…');
      const aqiRaw  = await fetchAirQuality(lat, lon);
      const aqiData = parseAQI(aqiRaw);

      // Step 5: Calculate scores
      setLoadingMsg('Computing Scores', 'Running intelligence algorithms…');

      const connectScore = calcConnectivityScore(counts);
      const livData      = calcLivabilityScore(counts);
      const infraData    = calcInfrastructureScore(counts, locName);
      const riskData     = calcRiskScore(counts, aqiData, locName);
      const envScore     = aqiData ? aqiCategory(aqiData.aqi).score : getEstimatedEnvScore(locName);

      const scores = {
        connectivity:   connectScore,
        livability:     livData.overall,
        environment:    envScore,
        infrastructure: infraData.overall,
        risk:           riskData.overall,
      };

      const overall = calcOverallScore(scores);
      scores.overall = overall;
      state.scores   = scores;

      // Step 6: Render
      setLoadingMsg('Rendering Dashboard', 'Preparing visualizations…');

      renderLocationHeader(state.location, overall);
      renderScorePanel(scores);
      renderConnectivity(counts, connectScore);
      renderLivability(counts, livData);
      renderEnvironment(aqiData, envScore);
      renderInfrastructure(infraData);
      renderRisk(riskData);

      const insights = generateInsights(locName, counts, scores, aqiData, riskData);
      renderAIInsights(insights);

      plotMapMarkers(lat, lon, counts, state.radius);

      // Charts
      setTimeout(() => {
        buildGaugeChart(overall);
        buildRadarChart(scores);
        buildBarChart(scores);
      }, 100);

      showLoading(false);
      setStatus('Analysis Complete', '#10b981');
      showToast(`${locName.split(',')[0]} analyzed successfully`, 'success');

    } catch (err) {
      showLoading(false);
      setStatus('Error', '#f43f5e');
      console.error('Analysis error:', err);
      showToast('Analysis failed. Check connection and try again.', 'error');
    }
  }

  function getEstimatedEnvScore(locName) {
    const name = locName.toLowerCase();
    const greenCities  = ['hyderabad','bangalore','bengaluru','pune','chandigarh','mysore'];
    const pollutedCities = ['delhi','ghaziabad','kanpur','lucknow','agra','meerut','kolkata'];
    if (pollutedCities.some(c => name.includes(c))) return 35 + Math.floor(Math.random() * 15);
    if (greenCities.some(c => name.includes(c)))    return 55 + Math.floor(Math.random() * 20);
    return 45 + Math.floor(Math.random() * 20);
  }

  // ─── SEARCH HANDLING ─────────────────────────────────

  async function handleSearch(query) {
    if (!query.trim()) { showToast('Please enter a location to search', 'error'); return; }

    setStatus('Searching…', '#f59e0b');
    showLoading(true);
    setLoadingMsg('Geocoding Location', `Looking up "${query}"…`);

    try {
      const results = await geocode(query);
      if (!results || results.length === 0) {
        showLoading(false);
        setStatus('Not Found', '#f43f5e');
        showToast('Location not found. Try a more specific search.', 'error');
        return;
      }

      const top = results[0];
      const lat = parseFloat(top.lat);
      const lon = parseFloat(top.lon);
      const locName = top.display_name.split(',').slice(0, 3).join(',');
      const locType = top.type || top.class || 'Location';

      $('search-input').value = locName;
      hideSuggestions();
      showLoading(false);

      await analyze(lat, lon, locName, locType);

    } catch (err) {
      showLoading(false);
      setStatus('Error', '#f43f5e');
      showToast('Search failed. Please try again.', 'error');
    }
  }

  function hideSuggestions() {
    const sug = $('search-suggestions');
    sug.innerHTML = '';
    sug.classList.add('hidden');
  }

  function showSuggestions(results) {
    const sug = $('search-suggestions');
    if (!results.length) { hideSuggestions(); return; }

    sug.innerHTML = results.map((r, i) => {
      const name  = r.display_name.split(',').slice(0, 3).join(',');
      const extra = r.display_name.split(',').slice(3, 5).join(',');
      return `
        <div class="suggestion-item px-4 py-3 cursor-pointer transition-colors hover:bg-white/5 flex items-center gap-3" data-idx="${i}">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" flex-shrink="0">
            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
          </svg>
          <div>
            <div class="text-sm font-medium" style="color:#e2e8f0;">${name}</div>
            <div class="text-xs" style="color:#6b7280;">${extra}</div>
          </div>
        </div>
        ${i < results.length - 1 ? '<div style="height:1px; background:rgba(30,45,74,0.5); margin:0 12px;"></div>' : ''}
      `;
    }).join('');
    sug.classList.remove('hidden');

    sug.querySelectorAll('.suggestion-item').forEach(el => {
      el.addEventListener('click', () => {
        const r = results[parseInt(el.dataset.idx)];
        $('search-input').value = r.display_name.split(',').slice(0, 3).join(',');
        hideSuggestions();
        handleSearch($('search-input').value);
      });
    });
  }

  // ─── RADIUS SELECTOR ─────────────────────────────────

  function setupRadiusSelector() {
    document.querySelectorAll('.radius-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('.radius-btn').forEach(b => {
          b.style.background = 'rgba(26,35,64,0.8)';
          b.style.border     = '1px solid #1e2d4a';
          b.style.color      = '#6b7280';
          b.classList.remove('active-radius');
        });
        btn.style.background = 'rgba(59,130,246,0.2)';
        btn.style.border     = '1px solid rgba(59,130,246,0.4)';
        btn.style.color      = '#93c5fd';
        btn.classList.add('active-radius');

        const newRadius = parseInt(btn.dataset.radius);
        if (newRadius !== state.radius) {
          state.radius = newRadius;
          if (state.location) {
            analyze(state.location.lat, state.location.lon, state.location.name, state.location.type);
          }
        }
      });
    });
  }

  // ─── INIT ─────────────────────────────────────────────

  function init() {
    const searchInput = $('search-input');
    const searchBtn   = $('search-btn');

    // Debounced suggestions
    searchInput.addEventListener('input', () => {
      clearTimeout(state.debounceTimer);
      const q = searchInput.value.trim();
      if (q.length < 3) { hideSuggestions(); return; }
      state.debounceTimer = setTimeout(async () => {
        const results = await getSuggestions(q);
        showSuggestions(results);
      }, 350);
    });

    searchInput.addEventListener('keydown', e => {
      if (e.key === 'Enter') { hideSuggestions(); handleSearch(searchInput.value); }
      if (e.key === 'Escape') hideSuggestions();
    });

    searchBtn.addEventListener('click', () => handleSearch(searchInput.value));

    // Close suggestions on outside click
    document.addEventListener('click', e => {
      if (!e.target.closest('#search-suggestions') && !e.target.closest('#search-input')) {
        hideSuggestions();
      }
    });

    setupRadiusSelector();

    // Expose quickSearch for the hero buttons
    window.ZoneIQ = {
      quickSearch: (query) => {
        $('search-input').value = query;
        handleSearch(query);
      }
    };
  }

  document.addEventListener('DOMContentLoaded', init);

})();



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Zone IQ — Know Every Location Before You Invest</title>

  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- Leaflet -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

  <!-- Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap" rel="stylesheet" />

  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            display: ['Syne', 'sans-serif'],
            body: ['DM Sans', 'sans-serif'],
          },
          colors: {
            ink: '#0a0e1a',
            surface: '#0f1525',
            panel: '#141c30',
            card: '#1a2340',
            border: '#1e2d4a',
            accent: '#3b82f6',
            teal: '#06b6d4',
            amber: '#f59e0b',
            emerald: '#10b981',
            rose: '#f43f5e',
            violet: '#8b5cf6',
            muted: '#4a5568',
            sub: '#6b7280',
            bright: '#e2e8f0',
          },
        },
      },
    };
  </script>

  <style>
    * { box-sizing: border-box; }

    body {
      font-family: 'DM Sans', sans-serif;
      background: #0a0e1a;
      color: #e2e8f0;
      min-height: 100vh;
      overflow-x: hidden;
    }

    h1, h2, h3, h4, h5 { font-family: 'Syne', sans-serif; }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: #0f1525; }
    ::-webkit-scrollbar-thumb { background: #1e2d4a; border-radius: 10px; }

    /* Glassmorphism card */
    .glass {
      background: rgba(20, 28, 48, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(30, 45, 74, 0.8);
      border-radius: 16px;
    }

    .glass-light {
      background: rgba(26, 35, 64, 0.6);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(59, 130, 246, 0.15);
      border-radius: 12px;
    }

    /* Animated gradient background */
    .hero-bg {
      background: radial-gradient(ellipse at 20% 50%, rgba(59,130,246,0.08) 0%, transparent 60%),
                  radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.06) 0%, transparent 50%),
                  radial-gradient(ellipse at 60% 80%, rgba(6,182,212,0.05) 0%, transparent 50%),
                  #0a0e1a;
    }

    /* Map */
    #map {
      height: 420px;
      width: 100%;
      border-radius: 12px;
      z-index: 1;
    }

    .leaflet-popup-content-wrapper {
      background: #141c30;
      color: #e2e8f0;
      border: 1px solid #1e2d4a;
      border-radius: 10px;
      font-family: 'DM Sans', sans-serif;
    }
    .leaflet-popup-tip { background: #141c30; }

    /* Score gauge */
    .gauge-wrapper {
      position: relative;
      width: 200px;
      height: 200px;
      margin: 0 auto;
    }

    .gauge-canvas {
      width: 200px !important;
      height: 200px !important;
    }

    .gauge-label {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -42%);
      text-align: center;
    }

    /* Progress bar */
    .progress-bar {
      height: 6px;
      border-radius: 10px;
      background: #1e2d4a;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      border-radius: 10px;
      transition: width 1.2s cubic-bezier(.4,0,.2,1);
    }

    /* Score pill */
    .score-pill {
      display: inline-flex;
      align-items: center;
      padding: 2px 10px;
      border-radius: 99px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.03em;
    }

    /* Animated counter */
    .counter { transition: all 0.5s ease; }

    /* Skeleton loader */
    .skeleton {
      background: linear-gradient(90deg, #1a2340 25%, #1e2d4a 50%, #1a2340 75%);
      background-size: 200% 100%;
      animation: skeleton-wave 1.5s infinite;
      border-radius: 8px;
    }

    @keyframes skeleton-wave {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* Pulse dot */
    .pulse-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      animation: pulse-anim 2s infinite;
    }

    @keyframes pulse-anim {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.8); }
    }

    /* Section fade-in */
    .fade-in {
      animation: fadeUp 0.6s ease forwards;
      opacity: 0;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Category badge */
    .cat-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    /* Risk indicator */
    .risk-low { color: #10b981; background: rgba(16,185,129,0.1); }
    .risk-medium { color: #f59e0b; background: rgba(245,158,11,0.1); }
    .risk-high { color: #f43f5e; background: rgba(244,63,94,0.1); }

    /* Tag */
    .tag {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 99px;
      font-size: 12px;
      font-weight: 500;
      background: rgba(59,130,246,0.1);
      color: #93c5fd;
      border: 1px solid rgba(59,130,246,0.2);
    }

    /* Search input glow */
    #search-input:focus {
      outline: none;
      border-color: rgba(59,130,246,0.5);
      box-shadow: 0 0 0 3px rgba(59,130,246,0.1), 0 0 20px rgba(59,130,246,0.05);
    }

    /* Animated gradient border on active card */
    .active-glow {
      box-shadow: 0 0 0 1px rgba(59,130,246,0.3), 0 8px 32px rgba(59,130,246,0.08);
    }

    /* Grid dot pattern */
    .dot-grid {
      background-image: radial-gradient(circle, #1e2d4a 1px, transparent 1px);
      background-size: 28px 28px;
    }

    /* Divider */
    .divider {
      height: 1px;
      background: linear-gradient(to right, transparent, #1e2d4a, transparent);
    }

    /* Leaflet default icon fix */
    .leaflet-default-icon-path { image-path: 'https://unpkg.com/leaflet@1.9.4/dist/images/'; }

    /* Chart responsive */
    .chart-container { position: relative; }

    /* Tooltip */
    .tooltip-content {
      position: absolute;
      z-index: 50;
      padding: 6px 12px;
      background: #141c30;
      border: 1px solid #1e2d4a;
      border-radius: 8px;
      font-size: 12px;
      white-space: nowrap;
      pointer-events: none;
    }

    @media (max-width: 768px) {
      #map { height: 300px; }
      .gauge-wrapper { width: 160px; height: 160px; }
    }
  </style>
</head>

<body class="hero-bg min-h-screen">

  <!-- ───────────────────────────── HEADER ─────────────────────────────── -->
  <header class="sticky top-0 z-50" style="background: rgba(10,14,26,0.92); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(30,45,74,0.6);">
    <div class="max-w-screen-2xl mx-auto px-4 md:px-8 py-4 flex items-center justify-between gap-4">
      <div class="flex items-center gap-3">
        <div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #3b82f6, #8b5cf6);">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
          </svg>
        </div>
        <div>
          <div class="font-display font-800 text-lg leading-none" style="font-weight:800; letter-spacing:-0.02em;">Zone<span style="color:#3b82f6;">IQ</span></div>
          <div class="text-xs" style="color:#6b7280; font-size:10px; letter-spacing:0.06em; text-transform:uppercase;">Location Intelligence</div>
        </div>
      </div>

      <!-- Search Bar -->
      <div class="flex-1 max-w-xl relative">
        <div class="relative flex items-center">
          <svg class="absolute left-3.5 w-4 h-4" style="color:#6b7280;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
          </svg>
          <input
            id="search-input"
            type="text"
            placeholder="Search any location in India… e.g. Kokapet Hyderabad"
            class="w-full pl-10 pr-4 py-2.5 text-sm rounded-xl transition-all duration-200"
            style="background: rgba(26,35,64,0.8); border: 1px solid rgba(30,45,74,0.9); color: #e2e8f0; font-family: 'DM Sans', sans-serif;"
          />
          <button id="search-btn" class="absolute right-2 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all duration-150 hover:opacity-90 active:scale-95"
            style="background: linear-gradient(135deg, #3b82f6, #6366f1); color: white; font-family: 'Syne', sans-serif;">
            Analyze
          </button>
        </div>
        <!-- Suggestions -->
        <div id="search-suggestions" class="absolute top-full left-0 right-0 mt-1 rounded-xl overflow-hidden hidden z-50" style="background: #141c30; border: 1px solid #1e2d4a; box-shadow: 0 8px 32px rgba(0,0,0,0.4);">
        </div>
      </div>

      <!-- Status Badge -->
      <div class="hidden md:flex items-center gap-2">
        <div id="status-dot" class="pulse-dot" style="background:#10b981;"></div>
        <span id="status-text" class="text-xs" style="color:#6b7280;">Ready</span>
      </div>
    </div>
  </header>

  <!-- ───────────────────────────── HERO / EMPTY STATE ─────────────────────────────── -->
  <div id="empty-state" class="flex flex-col items-center justify-center min-h-[80vh] px-4 dot-grid">
    <div class="text-center max-w-xl fade-in">
      <div class="inline-flex items-center gap-2 mb-6 px-4 py-2 rounded-full" style="background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2);">
        <div class="w-1.5 h-1.5 rounded-full" style="background:#3b82f6;"></div>
        <span class="text-xs font-semibold" style="color:#93c5fd; letter-spacing:0.08em; text-transform:uppercase;">Location Intelligence Platform</span>
      </div>
      <h1 class="font-display text-5xl md:text-6xl font-bold mb-4 leading-none" style="letter-spacing:-0.03em;">
        Know Every Location<br /><span style="background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Before You Invest</span>
      </h1>
      <p class="text-base mb-8" style="color:#6b7280; line-height:1.7;">
        Enter any location in India to generate a complete intelligence report — connectivity, livability, environment, infrastructure, risk, and AI-powered insights.
      </p>
      <div class="flex flex-wrap gap-2 justify-center mb-8">
        <button onclick="window.ZoneIQ.quickSearch('Kokapet, Hyderabad')" class="tag cursor-pointer hover:bg-blue-500/20 transition-colors">Kokapet, Hyderabad</button>
        <button onclick="window.ZoneIQ.quickSearch('Gachibowli, Hyderabad')" class="tag cursor-pointer hover:bg-blue-500/20 transition-colors">Gachibowli, Hyderabad</button>
        <button onclick="window.ZoneIQ.quickSearch('Whitefield, Bangalore')" class="tag cursor-pointer hover:bg-blue-500/20 transition-colors">Whitefield, Bangalore</button>
        <button onclick="window.ZoneIQ.quickSearch('Madhapur, Hyderabad')" class="tag cursor-pointer hover:bg-blue-500/20 transition-colors">Madhapur, Hyderabad</button>
        <button onclick="window.ZoneIQ.quickSearch('Baner, Pune')" class="tag cursor-pointer hover:bg-blue-500/20 transition-colors">Baner, Pune</button>
        <button onclick="window.ZoneIQ.quickSearch('Visakhapatnam')" class="tag cursor-pointer hover:bg-blue-500/20 transition-colors">Visakhapatnam</button>
      </div>
      <div class="grid grid-cols-3 gap-4 max-w-sm mx-auto">
        <div class="glass-light p-3 text-center">
          <div class="text-2xl font-display font-bold" style="color:#3b82f6;">10+</div>
          <div class="text-xs mt-1" style="color:#6b7280;">Data Layers</div>
        </div>
        <div class="glass-light p-3 text-center">
          <div class="text-2xl font-display font-bold" style="color:#06b6d4;">Free</div>
          <div class="text-xs mt-1" style="color:#6b7280;">No API Keys</div>
        </div>
        <div class="glass-light p-3 text-center">
          <div class="text-2xl font-display font-bold" style="color:#10b981;">Live</div>
          <div class="text-xs mt-1" style="color:#6b7280;">Real OSM Data</div>
        </div>
      </div>
    </div>
  </div>

  <!-- ───────────────────────────── DASHBOARD ─────────────────────────────── -->
  <div id="dashboard" class="hidden max-w-screen-2xl mx-auto px-4 md:px-8 py-8 space-y-8">

    <!-- Location Header -->
    <div id="location-header" class="fade-in glass p-6 flex flex-col md:flex-row md:items-center gap-4 justify-between active-glow">
      <div class="flex items-start gap-4">
        <div class="w-12 h-12 rounded-2xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #3b82f6, #8b5cf6);">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round">
            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
          </svg>
        </div>
        <div>
          <h2 id="loc-name" class="font-display text-2xl font-bold" style="letter-spacing:-0.02em;">—</h2>
          <div class="flex flex-wrap gap-3 mt-1">
            <span class="text-sm" style="color:#6b7280;">Lat: <span id="loc-lat" class="font-semibold" style="color:#93c5fd;">—</span></span>
            <span class="text-sm" style="color:#6b7280;">Lon: <span id="loc-lon" class="font-semibold" style="color:#93c5fd;">—</span></span>
            <span id="loc-type" class="cat-badge" style="background:rgba(59,130,246,0.1); color:#93c5fd;">—</span>
          </div>
        </div>
      </div>
      <div class="flex items-center gap-3">
        <div class="text-right hidden md:block">
          <div class="text-xs mb-1" style="color:#6b7280; text-transform:uppercase; letter-spacing:0.06em;">Overall Zone IQ</div>
          <div id="header-score" class="font-display text-4xl font-bold" style="letter-spacing:-0.03em; background: linear-gradient(135deg, #3b82f6, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">—</div>
        </div>
        <div id="header-grade" class="w-16 h-16 rounded-2xl flex items-center justify-center font-display text-2xl font-bold" style="background: linear-gradient(135deg, #3b82f6, #6366f1); color: white;">—</div>
      </div>
    </div>

    <!-- ── Row 1: Map + Zone IQ Score ── -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

      <!-- Map (2/3) -->
      <div class="lg:col-span-2 glass p-4 fade-in" style="animation-delay:0.1s;">
        <div class="flex items-center justify-between mb-4">
          <div>
            <h3 class="font-display font-semibold text-base">Interactive Map</h3>
            <p class="text-xs mt-0.5" style="color:#6b7280;">Nearby amenities & infrastructure</p>
          </div>
          <!-- Radius selector -->
          <div class="flex items-center gap-1.5">
            <span class="text-xs" style="color:#6b7280;">Radius:</span>
            <div id="radius-selector" class="flex gap-1">
              <button data-radius="1" class="radius-btn px-2.5 py-1 text-xs rounded-lg font-semibold transition-all" style="background:rgba(26,35,64,0.8); border:1px solid #1e2d4a; color:#6b7280;">1km</button>
              <button data-radius="3" class="radius-btn px-2.5 py-1 text-xs rounded-lg font-semibold transition-all active-radius" style="background:rgba(59,130,246,0.2); border:1px solid rgba(59,130,246,0.4); color:#93c5fd;">3km</button>
              <button data-radius="5" class="radius-btn px-2.5 py-1 text-xs rounded-lg font-semibold transition-all" style="background:rgba(26,35,64,0.8); border:1px solid #1e2d4a; color:#6b7280;">5km</button>
              <button data-radius="10" class="radius-btn px-2.5 py-1 text-xs rounded-lg font-semibold transition-all" style="background:rgba(26,35,64,0.8); border:1px solid #1e2d4a; color:#6b7280;">10km</button>
            </div>
          </div>
        </div>

        <!-- Map legend -->
        <div class="flex flex-wrap gap-2 mb-3">
          <span class="flex items-center gap-1 text-xs" style="color:#6b7280;"><span class="w-2.5 h-2.5 rounded-full inline-block" style="background:#ef4444;"></span>Hospital</span>
          <span class="flex items-center gap-1 text-xs" style="color:#6b7280;"><span class="w-2.5 h-2.5 rounded-full inline-block" style="background:#3b82f6;"></span>School</span>
          <span class="flex items-center gap-1 text-xs" style="color:#6b7280;"><span class="w-2.5 h-2.5 rounded-full inline-block" style="background:#10b981;"></span>Bank</span>
          <span class="flex items-center gap-1 text-xs" style="color:#6b7280;"><span class="w-2.5 h-2.5 rounded-full inline-block" style="background:#f59e0b;"></span>Restaurant</span>
          <span class="flex items-center gap-1 text-xs" style="color:#6b7280;"><span class="w-2.5 h-2.5 rounded-full inline-block" style="background:#8b5cf6;"></span>Transit</span>
          <span class="flex items-center gap-1 text-xs" style="color:#6b7280;"><span class="w-2.5 h-2.5 rounded-full inline-block" style="background:#06b6d4;"></span>Park</span>
        </div>

        <div id="map"></div>
      </div>

      <!-- Zone IQ Score (1/3) -->
      <div class="glass p-6 flex flex-col items-center justify-between fade-in" style="animation-delay:0.15s;">
        <div class="text-center w-full">
          <div class="text-xs mb-1 font-semibold" style="color:#6b7280; text-transform:uppercase; letter-spacing:0.08em;">Zone IQ Score</div>
          <div class="divider my-3"></div>
        </div>

        <!-- Gauge -->
        <div class="gauge-wrapper my-4">
          <canvas id="gauge-chart" class="gauge-canvas"></canvas>
          <div class="gauge-label">
            <div id="gauge-score" class="font-display text-5xl font-bold leading-none" style="letter-spacing:-0.04em; color:#e2e8f0;">—</div>
            <div class="text-xs mt-1" style="color:#6b7280;">/ 100</div>
            <div id="gauge-grade" class="text-sm font-semibold mt-1" style="color:#3b82f6;">—</div>
          </div>
        </div>

        <div class="w-full space-y-3">
          <div class="text-xs mb-2 text-center font-semibold" style="color:#6b7280; text-transform:uppercase; letter-spacing:0.06em;">Score Breakdown</div>

          <div class="space-y-2.5 w-full">
            <div>
              <div class="flex justify-between text-xs mb-1"><span style="color:#6b7280;">Connectivity <span style="color:#6b7280; font-size:10px;">(30%)</span></span><span id="score-connectivity" style="color:#93c5fd;">—</span></div>
              <div class="progress-bar"><div id="bar-connectivity" class="progress-fill" style="width:0%; background: linear-gradient(90deg, #3b82f6, #06b6d4);"></div></div>
            </div>
            <div>
              <div class="flex justify-between text-xs mb-1"><span style="color:#6b7280;">Livability <span style="color:#6b7280; font-size:10px;">(25%)</span></span><span id="score-livability" style="color:#10b981;">—</span></div>
              <div class="progress-bar"><div id="bar-livability" class="progress-fill" style="width:0%; background: linear-gradient(90deg, #10b981, #06b6d4);"></div></div>
            </div>
            <div>
              <div class="flex justify-between text-xs mb-1"><span style="color:#6b7280;">Environment <span style="color:#6b7280; font-size:10px;">(15%)</span></span><span id="score-environment" style="color:#f59e0b;">—</span></div>
              <div class="progress-bar"><div id="bar-environment" class="progress-fill" style="width:0%; background: linear-gradient(90deg, #f59e0b, #f43f5e);"></div></div>
            </div>
            <div>
              <div class="flex justify-between text-xs mb-1"><span style="color:#6b7280;">Infrastructure <span style="color:#6b7280; font-size:10px;">(20%)</span></span><span id="score-infrastructure" style="color:#8b5cf6;">—</span></div>
              <div class="progress-bar"><div id="bar-infrastructure" class="progress-fill" style="width:0%; background: linear-gradient(90deg, #8b5cf6, #3b82f6);"></div></div>
            </div>
            <div>
              <div class="flex justify-between text-xs mb-1"><span style="color:#6b7280;">Risk <span style="color:#6b7280; font-size:10px;">(10%)</span></span><span id="score-risk" style="color:#f43f5e;">—</span></div>
              <div class="progress-bar"><div id="bar-risk" class="progress-fill" style="width:0%; background: linear-gradient(90deg, #f43f5e, #f59e0b);"></div></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ── Row 2: Connectivity + Livability ── -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

      <!-- Connectivity Intelligence -->
      <div class="glass p-6 fade-in" style="animation-delay:0.2s;">
        <div class="flex items-center justify-between mb-5">
          <div>
            <h3 class="font-display font-semibold text-base">Connectivity Intelligence</h3>
            <p class="text-xs mt-0.5" style="color:#6b7280;">Nearby amenities within selected radius</p>
          </div>
          <div class="text-right">
            <div class="text-xs" style="color:#6b7280;">Score</div>
            <div id="connectivity-score-display" class="font-display text-2xl font-bold" style="color:#3b82f6;">—</div>
          </div>
        </div>

        <div id="connectivity-grid" class="grid grid-cols-2 sm:grid-cols-3 gap-3">
          <!-- Populated by JS -->
          <div class="skeleton h-16"></div>
          <div class="skeleton h-16"></div>
          <div class="skeleton h-16"></div>
          <div class="skeleton h-16"></div>
          <div class="skeleton h-16"></div>
          <div class="skeleton h-16"></div>
        </div>
      </div>

      <!-- Livability Intelligence -->
      <div class="glass p-6 fade-in" style="animation-delay:0.25s;">
        <div class="flex items-center justify-between mb-5">
          <div>
            <h3 class="font-display font-semibold text-base">Livability Intelligence</h3>
            <p class="text-xs mt-0.5" style="color:#6b7280;">Quality of life metrics by category</p>
          </div>
          <div class="text-right">
            <div class="text-xs" style="color:#6b7280;">Score</div>
            <div id="livability-score-display" class="font-display text-2xl font-bold" style="color:#10b981;">—</div>
          </div>
        </div>

        <div id="livability-bars" class="space-y-4">
          <div class="skeleton h-8"></div>
          <div class="skeleton h-8"></div>
          <div class="skeleton h-8"></div>
          <div class="skeleton h-8"></div>
          <div class="skeleton h-8"></div>
        </div>
      </div>
    </div>

    <!-- ── Row 3: Environment + Infrastructure ── -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

      <!-- Environmental Intelligence -->
      <div class="glass p-6 fade-in" style="animation-delay:0.3s;">
        <div class="flex items-center justify-between mb-5">
          <div>
            <h3 class="font-display font-semibold text-base">Environmental Intelligence</h3>
            <p class="text-xs mt-0.5" style="color:#6b7280;">Air quality & pollution metrics</p>
          </div>
          <div id="aqi-badge" class="cat-badge" style="background:rgba(16,185,129,0.1); color:#10b981;">—</div>
        </div>

        <div id="env-content">
          <div class="skeleton h-32 mb-4"></div>
          <div class="skeleton h-6 mb-3"></div>
          <div class="skeleton h-6"></div>
        </div>
      </div>

      <!-- Infrastructure Intelligence -->
      <div class="glass p-6 fade-in" style="animation-delay:0.35s;">
        <div class="flex items-center justify-between mb-5">
          <div>
            <h3 class="font-display font-semibold text-base">Infrastructure Intelligence</h3>
            <p class="text-xs mt-0.5" style="color:#6b7280;">Access to critical infrastructure</p>
          </div>
          <div class="text-right">
            <div class="text-xs" style="color:#6b7280;">Score</div>
            <div id="infra-score-display" class="font-display text-2xl font-bold" style="color:#8b5cf6;">—</div>
          </div>
        </div>

        <div id="infra-content" class="space-y-4">
          <div class="skeleton h-10"></div>
          <div class="skeleton h-10"></div>
          <div class="skeleton h-10"></div>
          <div class="skeleton h-10"></div>
          <div class="skeleton h-10"></div>
        </div>
      </div>
    </div>

    <!-- ── Row 4: Risk + Charts ── -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

      <!-- Risk Intelligence -->
      <div class="glass p-6 fade-in" style="animation-delay:0.4s;">
        <div class="mb-5">
          <h3 class="font-display font-semibold text-base">Risk Intelligence</h3>
          <p class="text-xs mt-0.5" style="color:#6b7280;">Derived risk assessment for this location</p>
        </div>
        <div id="risk-content" class="grid grid-cols-2 gap-3">
          <div class="skeleton h-20"></div>
          <div class="skeleton h-20"></div>
          <div class="skeleton h-20"></div>
          <div class="skeleton h-20"></div>
        </div>
      </div>

      <!-- Radar Chart -->
      <div class="glass p-6 fade-in" style="animation-delay:0.45s;">
        <div class="mb-5">
          <h3 class="font-display font-semibold text-base">Category Comparison</h3>
          <p class="text-xs mt-0.5" style="color:#6b7280;">Radar analysis of all intelligence layers</p>
        </div>
        <div class="chart-container" style="height: 240px;">
          <canvas id="radar-chart"></canvas>
        </div>
      </div>
    </div>

    <!-- ── AI Insights ── -->
    <div class="glass p-6 fade-in" style="animation-delay:0.5s;">
      <div class="flex items-center gap-3 mb-6">
        <div class="w-8 h-8 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #8b5cf6, #3b82f6);">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round">
            <path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>
          </svg>
        </div>
        <div>
          <h3 class="font-display font-semibold text-base">AI-Powered Insights</h3>
          <p class="text-xs" style="color:#6b7280;">Automated intelligence analysis</p>
        </div>
      </div>

      <div id="ai-insights-content" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-5">
        <div class="skeleton h-36"></div>
        <div class="skeleton h-36"></div>
        <div class="skeleton h-36"></div>
        <div class="skeleton h-36"></div>
      </div>

      <!-- Summary + Best For -->
      <div class="mt-5 grid grid-cols-1 md:grid-cols-2 gap-5">
        <div id="ai-summary" class="glass-light p-4">
          <div class="skeleton h-24"></div>
        </div>
        <div id="ai-best-for" class="glass-light p-4">
          <div class="skeleton h-24"></div>
        </div>
      </div>

      <!-- Investment Potential -->
      <div id="ai-investment" class="mt-5 glass-light p-4">
        <div class="skeleton h-16"></div>
      </div>
    </div>

    <!-- ── Score Bar Chart ── -->
    <div class="glass p-6 fade-in" style="animation-delay:0.55s;">
      <div class="mb-5">
        <h3 class="font-display font-semibold text-base">Score Breakdown</h3>
        <p class="text-xs mt-0.5" style="color:#6b7280;">Weighted component scores</p>
      </div>
      <div class="chart-container" style="height: 220px;">
        <canvas id="bar-chart"></canvas>
      </div>
    </div>

    <!-- Footer -->
    <div class="text-center py-6 divider">
      <p class="text-xs mt-4" style="color:#4a5568;">Zone IQ — Built with OpenStreetMap, Overpass API & OpenAQ. Data is for informational purposes only.</p>
    </div>

  </div>

  <!-- ──────────── LOADING OVERLAY ──────────── -->
  <div id="loading-overlay" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background: rgba(10,14,26,0.8); backdrop-filter: blur(8px);">
    <div class="glass p-8 rounded-2xl text-center max-w-sm mx-4">
      <div class="relative w-16 h-16 mx-auto mb-4">
        <div class="absolute inset-0 rounded-full" style="border: 3px solid #1e2d4a;"></div>
        <div class="absolute inset-0 rounded-full animate-spin" style="border: 3px solid transparent; border-top-color: #3b82f6;"></div>
        <div class="absolute inset-2 rounded-full animate-spin" style="border: 2px solid transparent; border-top-color: #8b5cf6; animation-direction: reverse; animation-duration: 0.8s;"></div>
        <div class="absolute inset-4 rounded-full flex items-center justify-center" style="background: rgba(59,130,246,0.1);">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2.5" stroke-linecap="round">
            <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
          </svg>
        </div>
      </div>
      <div class="font-display font-semibold text-base mb-2" id="loading-title">Analyzing Location</div>
      <div class="text-sm" id="loading-msg" style="color:#6b7280;">Fetching location data…</div>
      <div class="mt-4 flex gap-1 justify-center">
        <div class="w-1.5 h-1.5 rounded-full animate-bounce" style="background:#3b82f6; animation-delay:0s;"></div>
        <div class="w-1.5 h-1.5 rounded-full animate-bounce" style="background:#8b5cf6; animation-delay:0.15s;"></div>
        <div class="w-1.5 h-1.5 rounded-full animate-bounce" style="background:#06b6d4; animation-delay:0.3s;"></div>
      </div>
    </div>
  </div>

  <!-- ──────────── TOAST ──────────── -->
  <div id="toast" class="hidden fixed bottom-6 right-6 z-50 glass px-4 py-3 rounded-xl flex items-center gap-3 max-w-xs" style="min-width:240px;">
    <div id="toast-icon" class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0"></div>
    <div id="toast-msg" class="text-sm"></div>
  </div>

  <script src="./script.js"></script>
</body>
</html>