details.js

const phone = "212600000000"; // <-- بدّلها لرقمك (بدون +)

function getIdFromUrl() {
  const params = new URLSearchParams(window.location.search);
  return params.get("id");
}

function formatMoney(price, currency) {
  try {
    return new Intl.NumberFormat(undefined, { style: "currency", currency }).format(price);
  } catch {
    return `${price} ${currency || ""}`.trim();
  }
}

function setMainImage(url) {
  const main = document.getElementById("mainImg");
  main.style.backgroundImage = `url('${url}')`;
}

function renderThumbs(images) {
  const thumbs = document.getElementById("thumbs");
  thumbs.innerHTML = "";

  images.forEach((url, idx) => {
    const t = document.createElement("div");
    t.className = "details-thumb" + (idx === 0 ? " active" : "");
    t.style.backgroundImage = `url('${url}')`;
    t.addEventListener("click", () => {
      setMainImage(url);
      document.querySelectorAll(".details-thumb").forEach(x => x.classList.remove("active"));
      t.classList.add("active");
    });
    thumbs.appendChild(t);
  });
}

function renderSpecs(item) {
  const specs = document.getElementById("specs");
  const data = [
    ["Type", item.type],
    ["Status", item.status],
    ["City", item.city],
    ["District", item.district],
    ["Bedrooms", item.beds],
    ["Bathrooms", item.baths],
    ["Area", `${item.area_m2} m²`],
    ["ID", item.id],
  ];

  specs.innerHTML = data
    .map(([k, v]) => `
      <div class="spec">
        <div class="k">${k}</div>
        <div class="v">${v ?? "-"}</div>
      </div>
    `)
    .join("");
}

async function loadDetails() {
  const id = getIdFromUrl();
  if (!id) {
    document.getElementById("title").textContent = "Missing property id";
    return;
  }

  const res = await fetch("listings.json");
  const listings = await res.json();
  const item = listings.find(x => x.id === id);

  if (!item) {
    document.getElementById("title").textContent = "Property not found";
    return;
  }

  document.title = item.title + " • Details";
  document.getElementById("title").textContent = item.title;

  const img = item.images?.[0] || "";
  setMainImage(img);

  if (item.images && item.images.length) renderThumbs(item.images);

  document.getElementById("price").textContent = formatMoney(item.price, item.currency);
  document.getElementById("meta").textContent =
    `${item.city} • ${item.district} • ${item.beds} beds • ${item.baths} baths • ${item.area_m2}m²`;

  renderSpecs(item);

  const msg = encodeURIComponent(`Salam, bghit infos 3la: ${item.title} (${item.id})`);
  document.getElementById("waBtn").href = `https://wa.me/${phone}?text=${msg}`;
}

loadDetails().catch(console.error);