<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Sustainable Hotel Search AmicusTravel</title>


<!-- Bootstrap and AmicusTravel styles -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/flaticon.css">
<link rel="stylesheet" href="css/ionicons.min.css">
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<!-- Chart.js (optional, already available if you want graphs later) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

<style>
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/s/poppins/v24/pxiGyp8kv8JHgFVrLPTucXtAKPY.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* Only keep custom styles for map, cards, and layout, not navbar */
:root{
  --accent:#0ea5a4; --muted:#64748b; --bg:#f6f9fb; --card:#fff;
  --radius:12px;
}
body{margin:0;background:var(--bg);color:#0f172a}
.container{max-width:1200px;margin:20px auto;padding:18px}
.layout{display:grid;grid-template-columns:350px 1fr;gap:16px}
@media(max-width:980px){.layout{grid-template-columns:1fr}}
.card{background:var(--card);border-radius:var(--radius);padding:14px;box-shadow:0 8px 24px rgba(12,18,31,0.06)}
.input,select,textarea{width:100%;padding:8px;border:1px solid #e6edf3;border-radius:8px;margin-bottom:8px}
.btn{background:var(--accent);color:white;padding:10px 12px;border-radius:10px;border:none;cursor:pointer}
.btn.ghost{background:#eef2f2;color:#0f172a}
.spinner{display:none;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.spinner::before{content:"";width:14px;height:14px;border:2px solid #cbd5e1;border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite}
.spinner.is-visible{display:inline-flex}
@keyframes spin{to{transform:rotate(360deg)}}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.hotel-card{border-radius:8px;padding:12px;background:#fff;margin-bottom:10px;box-shadow:0 2px 8px rgba(2,6,23,0.04);border:1px solid #e6edf3;cursor:pointer;transition:all 0.2s ease}
.hotel-card:hover{box-shadow:0 4px 12px rgba(2,6,23,0.1);border-color:var(--accent)}
.small{font-size:13px;color:var(--muted)}
.map-wrap{height:520px;border-radius:10px;overflow:hidden}
#map{width:100%;height:520px}
.leaflet-container{width:100%;height:100%}
.leaflet-container img,
.leaflet-container .leaflet-tile{max-width:none !important}
.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.flex{display:flex;gap:8px;align-items:center}
.badge{padding:6px 8px;border-radius:999px;background:#eef2f2;color:#0f766e;font-weight:600;font-size:12px}
/* Leaflet tooltip styling */
.leaflet-tooltip {
  background-color: var(--accent);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
}
@media(max-width:520px){
  .map-wrap{height:350px}
}
</style>
<style>
/* Ensure navbar font matches amicustravel-landing */
.ftco_navbar, .navbar-nav .nav-link {
  font-family: 'Poppins', Arial, sans-serif !important;
}
.navbar-brand {
  font-family: 'Poppins', Arial, sans-serif !important;
  font-weight: 100 !important;
}
</style>
</head>
<body>


    <section class="ftco-section" style="padding-top: 144px;">
      <div class="container">
        <div class="row">
          <div class="col-lg-8 mx-auto">
            <div class="ftco-services-2">
              <div class="services mb-4 text-center">
                <h1 class="mb-4 mt-3">Sustainable Hotel Search</h1>
                <p>Find eco-friendly hotels worldwide. Use the filters to discover sustainable, LEED-certified, and low-carbon stays that match your travel values.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <div class="layout">
      <!-- LEFT: Filters + submission -->
      <div>
        <section class="card">
          <div style="font-weight:700;margin-bottom:8px">Search Filters</div>
          <div class="filter-row">
            <select id="regionFilter" class="input">
              <option value="">Region (All)</option>
              <option value="US">United States</option>
              <option value="North America">North America</option>
              <option value="EU">Europe</option>
              <option value="Asia">Asia</option>
              <option value="Middle East">Middle East</option>
              <option value="Africa">Africa</option>
              <option value="South America">South America</option>
              <option value="Latin America">Latin America</option>
            </select>

            <select id="co2Filter" class="input">
              <option value="">Estimated Carbon Impact</option>
              <option value="Ultra-Low">Ultra-Low</option>
              <option value="Low">Low</option>
              <option value="Medium">Medium</option>
              <option value="Carbon Neutral">Carbon Neutral</option>
            </select>
          </div>

          <div class="filter-row">
            <select id="certFilter" class="input">
              <option value="">Certification</option>
              <option>LEED Platinum</option>
              <option>LEED Gold</option>
              <option>EarthCheck</option>
              <option>Green Globe</option>
              <option>Green Key</option>
              <option>Renewable Energy</option>
              <option>Solar Power</option>
            </select>
            <select id="starFilter" class="input">
              <option value="">Star Rating</option>
              <option value="5">***** 5-star</option>
              <option value="4">**** 4-star</option>
              <option value="3">*** 3-star</option>
              <option value="2">** 2-star</option>
              <option value="1">* 1-star</option>
            </select>
          </div>

          <div class="filter-row">
            <select id="citySelect" class="input">
              <option value="">Select a city</option>
            </select>
          </div>

          <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
            <button id="searchBtn" class="btn">Search</button>
            <button id="clearBtn" class="btn ghost">Clear</button>
            <span id="searchSpinner" class="spinner" aria-live="polite">Searching...</span>
          </div>
        </section>
      </div>

      <!-- RIGHT: Results + Map -->
      <div>
        <section class="card">
          <div class="results-header">
            <div>
              <div style="font-weight:700">Search Results</div>
              <div class="small">Click a card to view details. Booking opens the provider in a new tab (no payments collected here).</div>
            </div>
            <div class="flex">
              <div class="badge">Dataset: Server search + local submissions</div>
            </div>
          </div>
          <div id="resultsSummary" class="small" style="margin-bottom:8px"></div>

          <div id="resultsList" style="max-height:420px;overflow-y:auto;margin-bottom:16px;border:1px solid #e6edf3;border-radius:8px;padding:8px">
            <!-- Search results cards display here with scrolling enabled - shows ~4-5 cards before scrolling -->
          </div>
          <div id="resultsPager" class="small" style="display:flex;gap:8px;flex-wrap:wrap;justify-content:center"></div>
        </section>

        <section class="card" style="margin-top:12px">
          <div style="font-weight:700;margin-bottom:8px">Map View</div>
          <div class="map-wrap card" id="map" style="padding:0"></div>
        </section>

        <section class="card" style="margin-top:12px">
          <div style="font-weight:700;margin-bottom:6px">Selected Hotel Details</div>
          <div id="selected" class="hotel-card small"></div>
        </section>
      </div>
    </div>

    <footer class="ftco-footer-section">
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center">
            <p>&copy; 2026 AmicuServices. All rights reserved.</p>
          </div>
        </div>
      </div>
    </footer>
  </div>

  <!-- Leaflet JS -->
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

  <script>
  // ---------- OpenStreetMap hotel search (client-side) ----------

  async function geocodeCity(destination) {
    const url = `https://nominatim.openstreetmap.org/search?format=json&limit=1&q=${encodeURIComponent(destination)}`;
    const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
    if(!res.ok) throw new Error(`Geocode failed: ${res.status}`);
    const data = await res.json();
    if(!Array.isArray(data) || data.length === 0) return null;
    return {
      lat: parseFloat(data[0].lat),
      lon: parseFloat(data[0].lon),
      countryCode: data[0].address?.country_code?.toUpperCase() || '',
      displayName: data[0].display_name || ''
    };
  }

  function extractCountry(displayName) {
    if(!displayName) return '';
    const parts = displayName.split(',').map(part => part.trim()).filter(Boolean);
    return parts.length > 0 ? parts[parts.length - 1] : '';
  }

  async function fetchLodgingFromOSM(query) {
    const overpassUrl = "https://overpass-api.de/api/interpreter";

    const overpassQuery = `
    [out:json][timeout:25];
    (
      node["tourism"~"hotel|hostel|guest_house|motel|apartment"](around:20000,${query.lat},${query.lon});
      way["tourism"~"hotel|hostel|guest_house|motel|apartment"](around:20000,${query.lat},${query.lon});
    );
    out tags center;
    `;

    const response = await fetch(overpassUrl, {
      method: "POST",
      body: overpassQuery
    });

    const data = await response.json();
    return data.elements || [];
  }

  async function fetchHotelsFromServer(destination) {
    if(!destination) return [];
    const geo = await geocodeCity(destination.trim());
    if(!geo || Number.isNaN(geo.lat) || Number.isNaN(geo.lon)) return [];
    const country = extractCountry(geo.displayName);
    const countryCode = geo.countryCode || '';
    const region = REGION_BY_COUNTRY[countryCode] || '';
    const elements = await fetchLodgingFromOSM(geo);
    return (elements || []).map((elem, index) => {
      const tags = elem.tags || {};
      const mapped = mapOsmToHotel(elem);
      if(!mapped) return null;
      const amenities = [
        tags.amenity,
        tags.tourism,
        tags['building:green'],
        tags.green,
        tags.sustainable,
        tags.energy
      ].filter(Boolean);
      return {
        ...mapped,
        id: mapped.id || `osm-${index}`,
        city: destination.trim(),
        country,
        region,
        description: tags.description || tags['addr:street'] || `Hotel in ${destination.trim()}`,
        amenities,
        osmTags: tags
      };
    }).filter(Boolean);
  }

  // ---------- App state ----------
  const majorCities = [
    { city: 'New York', country: 'United States', region: 'US', population: 8419600 },
    { city: 'Los Angeles', country: 'United States', region: 'US', population: 3980400 },
    { city: 'Chicago', country: 'United States', region: 'US', population: 2716000 },
    { city: 'Houston', country: 'United States', region: 'US', population: 2328000 },
    { city: 'Phoenix', country: 'United States', region: 'US', population: 1681000 },
    { city: 'Philadelphia', country: 'United States', region: 'US', population: 1584200 },
    { city: 'Dallas', country: 'United States', region: 'US', population: 1304000 },
    { city: 'San Antonio', country: 'United States', region: 'US', population: 1452000 },
    { city: 'San Francisco', country: 'United States', region: 'US', population: 873965 },
    { city: 'Seattle', country: 'United States', region: 'US', population: 749256 },
    { city: 'Portland', country: 'United States', region: 'US', population: 652503 },
    { city: 'Anchorage', country: 'United States', region: 'US', population: 291538 },

    { city: 'Vancouver', country: 'Canada', region: 'North America', population: 662248 },
    { city: 'Toronto', country: 'Canada', region: 'North America', population: 2794356 },
    { city: 'Montreal', country: 'Canada', region: 'North America', population: 1760000 },
    { city: 'Calgary', country: 'Canada', region: 'North America', population: 1239000 },
    { city: 'Ottawa', country: 'Canada', region: 'North America', population: 934000 },
    { city: 'Edmonton', country: 'Canada', region: 'North America', population: 981280 },
    { city: 'Winnipeg', country: 'Canada', region: 'North America', population: 749607 },
    { city: 'Quebec City', country: 'Canada', region: 'North America', population: 542298 },

    { city: 'London', country: 'United Kingdom', region: 'EU', population: 8982000 },
    { city: 'Paris', country: 'France', region: 'EU', population: 2161000 },
    { city: 'Berlin', country: 'Germany', region: 'EU', population: 3669000 },
    { city: 'Madrid', country: 'Spain', region: 'EU', population: 3223000 },
    { city: 'Rome', country: 'Italy', region: 'EU', population: 2873000 },
    { city: 'Barcelona', country: 'Spain', region: 'EU', population: 1620000 },

    { city: 'Tokyo', country: 'Japan', region: 'Asia', population: 13960000 },
    { city: 'Delhi', country: 'India', region: 'Asia', population: 16788000 },
    { city: 'Mumbai', country: 'India', region: 'Asia', population: 12478000 },
    { city: 'Shanghai', country: 'China', region: 'Asia', population: 24180000 },
    { city: 'Beijing', country: 'China', region: 'Asia', population: 21540000 },
    { city: 'Jakarta', country: 'Indonesia', region: 'Asia', population: 10770000 },
    { city: 'Manila', country: 'Philippines', region: 'Asia', population: 1780000 },
    { city: 'Seoul', country: 'South Korea', region: 'Asia', population: 9765000 },
    { city: 'Bangkok', country: 'Thailand', region: 'Asia', population: 10540000 },

    { city: 'Dubai', country: 'United Arab Emirates', region: 'Middle East', population: 3331000 },
    { city: 'Riyadh', country: 'Saudi Arabia', region: 'Middle East', population: 7677000 },
    { city: 'Tehran', country: 'Iran', region: 'Middle East', population: 8847000 },
    { city: 'Baghdad', country: 'Iraq', region: 'Middle East', population: 7181000 },
    { city: 'Jeddah', country: 'Saudi Arabia', region: 'Middle East', population: 3976000 },

    { city: 'Cairo', country: 'Egypt', region: 'Africa', population: 9905000 },
    { city: 'Lagos', country: 'Nigeria', region: 'Africa', population: 14860000 },
    { city: 'Kinshasa', country: 'DR Congo', region: 'Africa', population: 15060000 },
    { city: 'Johannesburg', country: 'South Africa', region: 'Africa', population: 5570000 },
    { city: 'Nairobi', country: 'Kenya', region: 'Africa', population: 4397000 },
    { city: 'Addis Ababa', country: 'Ethiopia', region: 'Africa', population: 5272000 },

    { city: 'Sao Paulo', country: 'Brazil', region: 'South America', population: 12330000 },
    { city: 'Rio de Janeiro', country: 'Brazil', region: 'South America', population: 6748000 },
    { city: 'Buenos Aires', country: 'Argentina', region: 'South America', population: 2891000 },
    { city: 'Lima', country: 'Peru', region: 'South America', population: 9675000 },
    { city: 'Bogota', country: 'Colombia', region: 'South America', population: 7744000 },
    { city: 'Santiago', country: 'Chile', region: 'South America', population: 5744000 },

    { city: 'Mexico City', country: 'Mexico', region: 'North America', population: 9209000 },
    { city: 'Guadalajara', country: 'Mexico', region: 'North America', population: 1495000 },
    { city: 'Monterrey', country: 'Mexico', region: 'North America', population: 1135000 },
    { city: 'Havana', country: 'Cuba', region: 'Latin America', population: 2132000 },
    { city: 'Santo Domingo', country: 'Dominican Republic', region: 'Latin America', population: 1042000 }
  ];
    const REGION_BY_COUNTRY = {
      US: 'US',
      CA: 'North America',
      MX: 'North America',
      FR: 'EU',
      DE: 'EU',
      IT: 'EU',
      ES: 'EU',
      GB: 'EU',
      IE: 'EU',
      PT: 'EU',
      NL: 'EU',
      BE: 'EU',
      JP: 'Asia',
      IN: 'Asia',
      CN: 'Asia',
      ID: 'Asia',
      PH: 'Asia',
      KR: 'Asia',
      TH: 'Asia',
      AE: 'Middle East',
      SA: 'Middle East',
      IR: 'Middle East',
      IQ: 'Middle East',
      EG: 'Africa',
      NG: 'Africa',
      CD: 'Africa',
      ZA: 'Africa',
      KE: 'Africa',
      ET: 'Africa',
      BR: 'South America',
      AR: 'South America',
      PE: 'South America',
      CO: 'South America',
      CL: 'South America',
      CU: 'Latin America',
      DO: 'Latin America'
    };

  let hotels = [];          // combined dataset (sample + local)
  let markers = {};         // map markers
  let map, markersLayer, tileLayer;
  const DEFAULT_MAP_CENTER = [20, 0];
  const DEFAULT_MAP_ZOOM = 2;
  let currentPage = 1;
  const pageSize = 10;
  let visibleHotels = [];

  // initialize
  async function init() {
    // Don't load hotels on init - only show results after search
    hotels = [];  // start with empty results

    initMap();
    populateCityOptions();
    renderResults([]);  // start with no results displayed
  }

  function populateCityOptions(){
    const select = document.getElementById('citySelect');
    if(!select) return;
    const region = document.getElementById('regionFilter').value;
    const filteredCities = majorCities.filter(c => {
      if(!region) return true;
      if(region === 'North America') return c.region === 'North America' || c.region === 'US';
      return c.region === region;
    });
    const options = ['<option value="">Select a city</option>']
      .concat(filteredCities.map(c => `<option value="${c.city}">${c.city}, ${c.country}</option>`));
    select.innerHTML = options.join('');
    select.value = '';
  }

  // initialize map
  function refreshMapSize(){
    if(!map) return;
    requestAnimationFrame(() => {
      map.invalidateSize();
      requestAnimationFrame(() => map.invalidateSize());
    });
  }

  function initMap(){
    const mapEl = document.getElementById('map');
    if(!mapEl) return;
    if(map) {
      refreshMapSize();
      return;
    }
    map = L.map(mapEl, {zoomControl:true}).setView(DEFAULT_MAP_CENTER, DEFAULT_MAP_ZOOM);
    tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19, attribution: '(c) OpenStreetMap'
    }).addTo(map);
    markersLayer = L.featureGroup().addTo(map);
    refreshMarkers();
    map.whenReady(() => {
      refreshMapSize();
      setTimeout(() => {
        map.invalidateSize();
      }, 300);
      window.dispatchEvent(new Event('resize'));
    });
    tileLayer.on('load', () => {
      refreshMapSize();
    });
    window.addEventListener('resize', refreshMapSize);
  }

  function resetMapTiles(){
    if(!map) return;
    if(tileLayer && typeof tileLayer.redraw === 'function') {
      tileLayer.redraw();
      return;
    }
    if(tileLayer) {
      map.removeLayer(tileLayer);
    }
    tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19, attribution: '(c) OpenStreetMap'
    }).addTo(map);
  }

  function ensureMapReady(){
    if(!map) {
      initMap();
    }
    refreshMapSize();
  }

  function resetMapView(){
    if(!map) return;
    if(typeof map.stop === 'function') {
      map.stop();
    }
    map.setView(DEFAULT_MAP_CENTER, DEFAULT_MAP_ZOOM);
    resetMapTiles();
    refreshMapSize();
    setTimeout(() => {
      resetMapTiles();
      refreshMapSize();
    }, 200);
  }

  function refreshMarkers(list = hotels){
    if(!map || !markersLayer) {
      console.warn('Map or markersLayer not initialized yet');
      return;
    }
    markersLayer.clearLayers();
    markers = {};
    const items = Array.isArray(list) ? list : [];
    items.forEach(h => {
      if(h.lat && h.lon){
        // Use default Leaflet markers (small blue pins)
        const m = L.marker([h.lat, h.lon]).addTo(markersLayer);
        m.bindPopup(`<strong>${h.name}</strong><br/><small>${h.country}</small>`);
        m.on('click', ()=> {
          console.log('Marker clicked for hotel id:', h.id);
          selectHotel(h.id);
        });
        m.bindTooltip(h.name, { permanent: false, direction: 'top' });
        markers[h.id] = m;
      } else {
        console.warn('Hotel missing coordinates:', h.name);
      }
    });
  }

  // render result cards
  function renderResults(list){
    const container = document.getElementById('resultsList');
    if(!list || list.length===0){
      container.innerHTML = '';
      const summary = document.getElementById('resultsSummary');
      if(summary) summary.textContent = '';
      visibleHotels = [];
      refreshMarkers([]);
      renderPagination(0);
      return;
    }
    const startIndex = (currentPage - 1) * pageSize;
    const pageItems = list.slice(startIndex, startIndex + pageSize);
    const namedItems = pageItems.filter(h => h && h.name && String(h.name).trim() !== '');
    visibleHotels = namedItems;
    container.innerHTML = namedItems.map(h => `
      <div class="hotel-card" data-id="${h.id}">
        <div style="display:flex;justify-content:space-between;align-items:center">
          <div style="font-weight:700">${h.name}</div>
          <div class="small">${h.region ? `${h.region} - ` : ''}${h.country || ''}</div>
        </div>
        <div class="badge" style="margin-top:8px">${sustainabilityBadge(h.sustainability_level)}</div>
        <div class="small" style="margin-top:8px">${h.notes || ''}</div>
        <div class="small" style="margin-top:6px">Estimated Carbon Impact: ${h.co2_rating || 'Medium'} | Stars: ${h.stars || 'N/A'} | ${h.certifications ? h.certifications.join(', ') : ''}</div>
        <div class="small">Why shown: ${(h.sustainability_signals || []).join(', ') || 'Public data indicators'}</div>
        <div class="small" style="margin-top:4px">Signals: ${(h.sustainability_signals || []).join(', ') || 'None'}</div>
        <div style="margin-top:8px;display:flex;justify-content:space-between;align-items:center">
          <a class="small" href="${getBookingUrl(h)}" target="_blank" rel="noopener" style="color:var(--accent);text-decoration:underline">Book / Details ></a>
          <div class="small">${h.country || ''}</div>
        </div>
      </div>
    `).join('');

    // attach click handlers
    container.querySelectorAll('.hotel-card').forEach(el => {
      el.addEventListener('click', () => {
        const id = el.getAttribute('data-id');
        selectHotel(id);
        // pan to marker if present
        const h = hotels.find(x => x.id===id);
        if(h && h.lat && h.lon) map.setView([h.lat, h.lon], 8);
        if(markers[id]) markers[id].openPopup();
      });
    });

    const summary = document.getElementById('resultsSummary');
    if(summary) summary.textContent = `Showing ${namedItems.length} of ${list.length} hotels`;

    refreshMarkers(namedItems);

    renderPagination(list.length);
    refreshMapSize();
  }

  function renderPagination(totalItems){
    const pager = document.getElementById('resultsPager');
    if(!pager) return;
    if(!totalItems || totalItems <= pageSize){
      pager.innerHTML = '';
      return;
    }

    const totalPages = Math.ceil(totalItems / pageSize);
    const buttons = [];
    const prevDisabled = currentPage === 1;
    const nextDisabled = currentPage === totalPages;
    buttons.push(`<button class="btn ghost" data-page="${currentPage - 1}" style="padding:6px 10px;" ${prevDisabled ? 'disabled' : ''}>Prev</button>`);
    for(let i = 1; i <= totalPages; i += 1){
      const isActive = i === currentPage;
      buttons.push(`<button class="btn ghost" data-page="${i}" style="padding:6px 10px;${isActive ? 'border:1px solid var(--accent);' : ''}">${i}</button>`);
    }
    buttons.push(`<button class="btn ghost" data-page="${currentPage + 1}" style="padding:6px 10px;" ${nextDisabled ? 'disabled' : ''}>Next</button>`);
    pager.innerHTML = buttons.join('');

    pager.querySelectorAll('button[data-page]').forEach(btn => {
      btn.addEventListener('click', () => {
        currentPage = parseInt(btn.getAttribute('data-page'), 10) || 1;
        if(currentPage < 1) currentPage = 1;
        if(currentPage > totalPages) currentPage = totalPages;
        renderResults(hotels);
      });
    });
  }

  function buildGoogleMapsUrl(hotel){
    const name = hotel.name || 'hotel';
    const city = hotel.city || hotel.country || '';
    return `https://www.google.com/maps/search/${encodeURIComponent(name)}+${encodeURIComponent(city)}`;
  }

  function getBookingUrl(hotel){
    return hotel.affiliate_url || hotel.booking_url || buildGoogleMapsUrl(hotel);
  }

  function deriveSustainabilityTags(hotel){
    const rawAmenities = hotel.amenities;
    const amenitiesList = Array.isArray(rawAmenities)
      ? rawAmenities
      : (typeof rawAmenities === 'string'
        ? rawAmenities.split(/[,;]+|\s{2,}/).map(item => item.trim()).filter(Boolean)
        : []);
    const text = [
      hotel.name,
      hotel.description,
      hotel.notes,
      hotel.website,
      amenitiesList.join(' ')
    ].join(' ').toLowerCase();

    const certifications = [];
    if(text.includes('leed platinum')) certifications.push('LEED Platinum');
    if(text.includes('leed gold')) certifications.push('LEED Gold');
    if(text.includes('leed')) certifications.push('LEED');
    if(text.includes('earthcheck')) certifications.push('EarthCheck');
    if(text.includes('green key')) certifications.push('Green Key');
    if(text.includes('green globe')) certifications.push('Green Globe');

    const hasSolar = text.includes('solar');
    const hasRenewable = text.includes('renewable') || text.includes('energy');
    if(hasSolar) certifications.push('Solar Power');
    if(hasRenewable) certifications.push('Renewable Energy');

    let co2Rating = 'Low';
    if(text.includes('carbon neutral') || text.includes('net zero')) {
      co2Rating = 'Carbon Neutral';
    } else if(text.includes('ultra-low') || text.includes('zero carbon')) {
      co2Rating = 'Ultra-Low';
    } else if(text.includes('low') || text.includes('eco') || text.includes('green') || text.includes('sustainable')) {
      co2Rating = 'Low';
    }

    return { certifications: Array.from(new Set(certifications)), co2Rating, amenitiesList };
  }

  function inferSustainability(osm) {
    let score = 0;
    const tags = osm.tags || {};
    const signals = [];

    // Renewable energy
    if (tags["generator:source"] === "solar" || tags["energy"] === "renewable") {
      score += 3;
      signals.push("Renewable energy");
    }

    // EV charging
    if (tags["amenity"] === "hotel" && tags["ev:charging"] === "yes") {
      score += 2;
      signals.push("EV charging available");
    }

    // Water efficiency
    if (tags["water:saving"] === "yes") {
      score += 1;
      signals.push("Water-saving systems");
    }

    // Eco keywords
    const ecoKeywords = ["eco", "green", "sustainable", "nature", "organic"];
    const textBlob = `${tags.name || ""} ${tags.description || ""}`.toLowerCase();
    if (ecoKeywords.some(k => textBlob.includes(k))) {
      score += 1;
      signals.push("Eco-focused branding");
    }

    // Smaller properties proxy
    if (tags.rooms && parseInt(tags.rooms, 10) <= 40) {
      score += 1;
      signals.push("Small-scale lodging");
    }

    return {
      score,
      level:
        score >= 5 ? "High" :
        score >= 3 ? "Medium" :
        score >= 1 ? "Low" : "Unknown",
      signals
    };
  }

  function buildSustainability(osmTags, textContext = "") {
    const inferred = inferSustainability({ tags: osmTags });
    const textDerived = deriveSustainabilityTags({
      name: textContext,
      description: textContext,
      amenities: []
    });

    if (
      inferred.signals.length === 1 &&
      inferred.signals.includes('Eco-focused branding')
    ) {
      inferred.score = Math.min(inferred.score, 1);
    }

    return {
      score: inferred.score,
      level: inferred.level,
      signals: inferred.signals,
      certifications: [
        ...new Set([
          ...textDerived.certifications,
          ...inferred.signals
        ])
      ],
      co2_rating:
        inferred.level === 'High' ? 'Ultra-Low' :
        inferred.level === 'Medium' ? 'Low' :
        inferred.level === 'Low' ? 'Medium' : 'Medium'
    };
  }

  function mapOsmToHotel(osm) {
    const sustainability = buildSustainability(
      osm.tags || {},
      `${osm.tags?.name || ''} ${osm.tags?.description || ''}`.trim()
    );

    return {
      id: osm.id,
      name: osm.tags?.name || "Unnamed lodging",
      lat: osm.lat || osm.center?.lat,
      lon: osm.lon || osm.center?.lon,
      type: osm.tags?.tourism,
      sustainability_score: sustainability.score,
      sustainability_level: sustainability.level,
      sustainability_signals: sustainability.signals,
      certifications: sustainability.certifications,
      co2_rating: sustainability.co2_rating,
      website: osm.tags?.website || null
    };
  }

  function filterSustainable(results, minLevel = "Medium") {
    const levels = { "Unknown": 0, "Low": 1, "Medium": 2, "High": 3 };

    return results.filter(h =>
      levels[h.sustainability_level] >= levels[minLevel]
    );
  }

  function sustainabilityBadge(level) {
    return level === 'High' ? '🌿 Strong indicators' :
      level === 'Medium' ? '🌱 Some indicators' :
      level === 'Low' ? '🟡 Limited indicators' :
      '⚪ Unknown';
  }

  function fitMapToMarkers(){
    if(!map || !markersLayer) return;
    if(typeof markersLayer.getBounds !== 'function') return;
    const bounds = markersLayer.getBounds();
    if(bounds && bounds.isValid()) {
      map.fitBounds(bounds, { padding: [40, 40] });
    }
  }

  // select hotel
  function selectHotel(id){
    console.log('selectHotel called with id:', id, 'Type:', typeof id);
    console.log('Available hotels:', hotels.map(h => ({ id: h.id, idType: typeof h.id, name: h.name, country: h.country })));
    
    // Try to find by id - handle both number and string comparisons
    let h = hotels.find(x => x.id === id);
    if(!h) {
      h = hotels.find(x => String(x.id) === String(id));
    }
    
    console.log('Found hotel:', h);
    if(!h) {
      console.warn('Hotel not found with id:', id);
      document.getElementById('selected').innerHTML = '<div class="small">No hotel found</div>';
      return;
    }
    
    const sel = document.getElementById('selected');
    const displayCountry = h.country || h.city || 'Unknown Location';
    const displayRegion = h.region || '';
    sel.innerHTML = `
      <div style="font-weight:700; font-size:16px">${h.name}</div>
      <div class="badge" style="margin-top:8px">${sustainabilityBadge(h.sustainability_level)}</div>
      <div class="small" style="margin-top:4px">${displayCountry}${displayRegion ? ` - ${displayRegion}` : ''}</div>
      <div style="margin-top:8px" class="small">${h.notes || h.description || 'Eco-friendly accommodation'}</div>
      <div style="margin-top:8px"><strong>Sustainability Signals:</strong> ${h.certifications && h.certifications.length > 0 ? h.certifications.join(', ') : 'LEED Certified'}</div>
      <div style="margin-top:8px"><strong>Estimated Carbon Impact:</strong> ${h.co2_rating || 'Medium'}</div>
      <div style="margin-top:12px"><button class="btn" id="bookBtn" data-url="${getBookingUrl(h)}" style="cursor:pointer; width:100%">Book / Learn More</button></div>
    `;
    
    // Attach handler to book button
    const bookBtn = document.getElementById('bookBtn');
    if(bookBtn) {
      bookBtn.addEventListener('click', () => {
        const url = bookBtn.getAttribute('data-url');
        if(url && url !== '#') {
          console.log('Opening URL:', url);
          window.open(url, '_blank');
        }
      });
    }
  }

  function setSearching(isSearching){
    const spinner = document.getElementById('searchSpinner');
    if(!spinner) return;
    spinner.classList.toggle('is-visible', isSearching);
  }

  // search logic
  document.getElementById('searchBtn').addEventListener('click', async () => {
    setSearching(true);
    const region = document.getElementById('regionFilter').value;
    const cert = document.getElementById('certFilter').value;
    const co2 = document.getElementById('co2Filter').value;
    const stars = document.getElementById('starFilter').value;
    const q = document.getElementById('citySelect').value.trim();

    console.log('Search clicked with query:', q);

    // Require a selected city to search
    if(q) {
      try {
        console.log('Searching OSM data for destination:', q);
        // Clear previous results before fetching new ones
        ensureMapReady();
        resetMapView();
        hotels = [];
        renderResults([]);
        if(markersLayer) {
          markersLayer.clearLayers();
        }

        // Try OpenStreetMap search first
        const serverHotels = await fetchHotelsFromServer(q);
        const dataSourceHotels = serverHotels;
        
        console.log('Filtered hotels:', dataSourceHotels);

        if(dataSourceHotels.length === 0) {
          alert('No hotels found for "' + q + '". Try a different destination.');
          return;
        }
        
        // Map hotels to the expected format
        const apiHotels = dataSourceHotels.map((h) => {
          const rawName = (h.name || '').trim();
          if(!rawName || rawName === 'Unnamed lodging') return null;
          const textContext = [
            h.name,
            h.description,
            h.notes,
            Array.isArray(h.amenities) ? h.amenities.join(' ') : ''
          ].filter(Boolean).join(' ');
          const sustainability = buildSustainability(h.osmTags || {}, textContext);
          const cityName = (h.city || '').trim();
          const matchedCity = majorCities.find(c => c.city.toLowerCase() === cityName.toLowerCase());
          const rawCountry = (h.country || '').trim();
          const resolvedCountry = (rawCountry && rawCountry.toLowerCase() !== cityName.toLowerCase())
            ? rawCountry
            : (matchedCity ? matchedCity.country : rawCountry);
          const resolvedRegion = h.region || (matchedCity ? matchedCity.region : '');
          const starsNum = (typeof h.stars === 'number') ? h.stars : parseInt(h.stars, 10);
          const starsDisplay = starsNum ? '*'.repeat(starsNum) + ` ${starsNum}-star` : 'Unrated';
          const co2Rating = h.co2_rating || sustainability.co2_rating;
          const certs = Array.isArray(h.certifications) && h.certifications.length > 0
            ? h.certifications
            : sustainability.certifications;
          const notes = h.notes || `Eco-friendly hotel \u2022 ${starsDisplay} \u2022 CO\u2082: ${co2Rating}`;
          return {
            id: h.id,
            name: rawName,
            city: h.city,
            country: resolvedCountry || h.country,
            region: resolvedRegion || 'Other',
            certifications: certs,
            co2_rating: co2Rating,
            stars: starsNum,
            notes,
            description: h.description || '',
            affiliate_url: h.affiliate_url || buildGoogleMapsUrl({ name: rawName, city: h.city, country: h.country }),
            lat: parseFloat(h.lat),
            lon: parseFloat(h.lon),
            amenities: Array.isArray(h.amenities) ? h.amenities : [],
            sustainability_score: sustainability.score,
            sustainability_signals: sustainability.signals,
            sustainability_level: sustainability.level
          };
        }).filter(Boolean);

        let sustainableHotels = filterSustainable(apiHotels, 'Medium');
        if(sustainableHotels.length === 0) {
          sustainableHotels = filterSustainable(apiHotels, 'Low');
        }
        if(sustainableHotels.length === 0) {
          sustainableHotels = filterSustainable(apiHotels, 'Unknown');
        }

        console.log('Mapped API hotels:', apiHotels);
        console.log('First hotel coords:', apiHotels[0]?.lat, apiHotels[0]?.lon);
        
        hotels = [...sustainableHotels];
        console.log('Total hotels after merge:', hotels.length);
        console.log('Hotels before country filter:', hotels.map(h => ({ name: h.name, country: h.country, region: h.region })));
        
        // Temporarily disabled: Filter out hotels without a valid country - for debugging
        // hotels = hotels.filter(h => h.country && h.country.trim() !== '');
        
        console.log('Hotels to display:', hotels.length);
        console.log('Hotels after country validation:', hotels.length);
        
        // Apply filters on client for OSM results
        let filteredResults = hotels;
        if(region || cert || co2 || stars) {
          filteredResults = hotels.filter(h => {
            if(region) {
              if(region === 'North America') {
                const country = (h.country || '').toLowerCase();
                const isNorthAmerica = h.region === 'North America' || h.region === 'US' ||
                  country.includes('usa') || country.includes('united states') || country.includes('canada') || country.includes('mexico');
                if(!isNorthAmerica) return false;
              } else if(h.region && h.region !== region) {
                return false;
              }
            }
            const matchesCo2 = co2 ? h.co2_rating === co2 : false;
            const matchesCert = cert ? (h.certifications || []).includes(cert) : false;
            const matchesStars = stars ? (h.stars && parseInt(h.stars, 10) === parseInt(stars, 10)) : false;
            return (!co2 || matchesCo2) && (!cert || matchesCert) && (!stars || matchesStars);
          });
        }
        
        filteredResults.sort((a, b) => b.sustainability_score - a.sustainability_score);

        currentPage = 1;
        renderResults(filteredResults);
        ensureMapReady();
        fitMapToMarkers();
        resetMapTiles();
        refreshMapSize();
        
        if(map && (!markersLayer || !markersLayer.getBounds().isValid())) {
          if(apiHotels.length > 0 && apiHotels[0].lat && apiHotels[0].lon) {
            console.log('Centering map on:', apiHotels[0].lat, apiHotels[0].lon);
            map.setView([apiHotels[0].lat, apiHotels[0].lon], 6);
          } else if(hotels.length > 0) {
            const firstHotel = hotels.find(h => h.lat && h.lon);
            if(firstHotel) {
              console.log('Centering map on first valid hotel:', firstHotel.lat, firstHotel.lon);
              map.setView([firstHotel.lat, firstHotel.lon], 6);
            }
          }
        }
      } catch(e) {
        console.error('API search failed:', e);
        alert('Could not search for destination. Error: ' + e.message);
      } finally {
        setSearching(false);
      }
      return;
    }

    alert('Please select a city to search.');
    setSearching(false);
    return;

  });

  document.getElementById('clearBtn').addEventListener('click', () => {
    document.getElementById('regionFilter').value='';
    document.getElementById('co2Filter').value='';
    document.getElementById('certFilter').value='';
    document.getElementById('starFilter').value='';
    document.getElementById('citySelect').value='';
    hotels = [];
    currentPage = 1;
    renderResults([]);
    const selected = document.getElementById('selected');
    if(selected) selected.innerHTML = '';
    resetMapView();
    ensureMapReady();
    if(map && typeof map.fitWorld === 'function') {
      map.fitWorld({ padding: [20, 20] });
    }
    refreshMapSize();
    setSearching(false);
  });

  document.getElementById('regionFilter').addEventListener('change', () => {
    populateCityOptions();
  });

  // refresh markers and dataset on load
  init();

  </script>
</body>
</html>