<section class="hero">
<h1><?= trad('Buy, sell, trade — anywhere in'); ?> 
<?= ucfirst(strtolower($_SESSION['COUNTRY']['nom_pays'] ?? "World")); ?>
</h1>

<p><?= trad('Mondialisa connects buyers and sellers in 200+ countries.'); ?></p>

<div class="search-card">
<form action="index.php" method="get">
<input type="hidden" name="p" value="find" />

<div class="search-row">
  <input type="text" name="q"
         placeholder="What are you looking for ?" />

  <input type="text" id="location" name="location"
         placeholder="Location (city...)"
         autocomplete="off" />

  <div id="suggestions" class="suggestions"></div>

  <button type="submit">🔎 <?= trad('Search'); ?></button>
</div>

<div class="cats">
<?php
$cats = [
 'immobilier'=>'🏠 Real Estate',
 'vehicule'=>'🚗 Vehicles',
 'emploi'=>'👔 Jobs',
 'market'=>'🛍️ Market',
 'b2b'=>'💼 B2B',
 'ecole'=>'🎓 School & Training',
 'rencontre'=>'💞 Dating',
 'loisir'=>'🎨 Leisure',
 'voyage'=>'✈️ Travel',
 'sante'=>'🩺 Health',
 'autre'=>'✨ Others'
];
foreach ($cats as $k=>$v):
?>
<label>
<input type="radio" name="cat" value="<?= $k ?>" hidden>
<div class="cat"><?= trad($v) ?></div>
</label>
<?php endforeach; ?>
</div>

</form>
</div>
</section>
<style>
  .hero {
  position: relative;
  background: url('img/default-ad.webp') center/cover no-repeat;
  color: #1115e0ff;
  text-align: center;
  padding: 60px 20px;
}

.search-row {
  position: relative;
  display: flex;
  gap: 8px;
}

.suggestions {
  position: absolute;
  top: 45px;
  left: 0;
  width: calc(100% - 120px);
  background: #fff;
  border: 1px solid #615d5dff;
  border-radius: 6px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 999;
  display: none;
}

.suggestion-item {
  padding: 10px;
   color: #36363aff;
  cursor: pointer;
  font-size: 0.95rem;
}

.suggestion-item:hover {
  background: #0077ff;
  color: white;
}

.cats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 15px;
}

.cat {
  background: #c8cae9ff;
  border-radius: 12px;
  padding: 10px 20px;
  transition: 0.3s;
}

.cat:hover,
.cats input[type="radio"]:checked + .cat {
  background: #0077ff;
  color: white;
}

  </style>
  <script>
const locationInput = document.getElementById('location');
const suggestionBox = document.getElementById('suggestions');
let controller = null;

locationInput.addEventListener('input', function () {
  const q = this.value.trim();

  if (q.length < 2) {
    suggestionBox.style.display = 'none';
    suggestionBox.innerHTML = '';
    return;
  }

  if (controller) controller.abort();
  controller = new AbortController();

  fetch('ajax_cities.php?q=' + encodeURIComponent(q), {
    signal: controller.signal
  })
  .then(r => r.json())
  .then(data => {
    suggestionBox.innerHTML = '';

    if (!data.length) {
      suggestionBox.style.display = 'none';
      return;
    }

    data.forEach(city => {
      const div = document.createElement('div');
      div.className = 'suggestion-item';
      div.textContent = city.name + ' (' + city.country + ')';
      div.onclick = () => {
        locationInput.value = city.name;
        suggestionBox.style.display = 'none';
      };
      suggestionBox.appendChild(div);
    });

    suggestionBox.style.display = 'block';
  })
  .catch(()=>{});
});

document.addEventListener('click', e => {
  if (!suggestionBox.contains(e.target) && e.target !== locationInput) {
    suggestionBox.style.display = 'none';
  }
});
</script>
