AOS.init({ once: true });

// —————— Dummy data (replace with whatever placeholder text/images you like) ——————
const data = [
  {
    property_name: "Sample Hillside Retreat",
    price: "$999,999",
    property_images: [
      dummyImageUrl,
      "https://img.freepik.com/free-photo/cityscape-wuxi_1127-3968.jpg?t=st=1752833466~exp=1752837066~hmac=d6a15271ba44cdcfc42e38754d2342f43b1bee897b098b09c502c80d0b1c0be2&w=1380",
      "https://img.freepik.com/free-photo/cityscape-wuxi_1127-3968.jpg?t=st=1752833466~exp=1752837066~hmac=d6a15271ba44cdcfc42e38754d2342f43b1bee897b098b09c502c80d0b1c0be2&w=1380",
      "https://img.freepik.com/free-photo/cityscape-wuxi_1127-3968.jpg?t=st=1752833466~exp=1752837066~hmac=d6a15271ba44cdcfc42e38754d2342f43b1bee897b098b09c502c80d0b1c0be2&w=1380",
    ],
    property_video_url: "https://www.youtube.com/embed/dQw4w9WgXcQ",
    description: "A beautiful retreat with modern amenities and scenic views.",
    address: {
      street: "123 Example St",
      area: "Sample Hillside",
      city: "Sample City",
      state_or_county: "State",
      zip_or_postal_code: "12345",
    },
    details: {
      property_id: "SAMPLE01",
      price: "$999,999",
      property_size: "2,500 Sq Ft",
      bedrooms: 3,
      bathroom: 2,
      garage: 1,
      garage_size: "200 Sq Ft",
      year_built: 2021,
      property_type: "Villa",
      property_status: "For Sale",
    },
    features: [
      "Air Conditioning",
      "Swimming Pool",
      "WiFi",
      "Gym",
      "Sauna",
      "Outdoor Shower",
    ],
  },
  // two more dummy entries for “Similar Listings”
  {
    property_name: "Cozy Sample Cottage",
    price: "$400,000",
    property_images: ["https://img.freepik.com/free-photo/cityscape-wuxi_1127-3968.jpg?t=st=1752833466~exp=1752837066~hmac=d6a15271ba44cdcfc42e38754d2342f43b1bee897b098b09c502c80d0b1c0be2&w=1380"],
    details: { bedrooms: 2, bathroom: 1 },
  },
  {
    property_name: "Modern Sample Apartment",
    price: "$550,000",
    property_images: ["https://img.freepik.com/free-photo/cityscape-wuxi_1127-3968.jpg?t=st=1752833466~exp=1752837066~hmac=d6a15271ba44cdcfc42e38754d2342f43b1bee897b098b09c502c80d0b1c0be2&w=1380"],
    details: { bedrooms: 2, bathroom: 2 },
  },
];

const property = data[0];

// —————— Gallery ——————
const mainImage = document.getElementById("mainImage");
const thumbnails = document.getElementById("thumbnails");
mainImage.src = property.property_images[0];
property.property_images.forEach((img, idx) => {
  const thumb = document.createElement("img");
  thumb.src = img;
  thumb.alt = `Thumbnail ${idx + 1}`;
  thumb.className =
    "w-24 h-14 object-cover rounded border-2 border-white shadow cursor-pointer";
  thumb.addEventListener("click", () => (mainImage.src = img));
  thumbnails.appendChild(thumb);
});

// —————— Quick Stats ——————
const stats = [
  { label: "Beds", value: property.details.bedrooms },
  { label: "Baths", value: property.details.bathroom },
  { label: "Size", value: property.details.property_size },
  { label: "Type", value: property.details.property_type },
  { label: "Built", value: property.details.year_built },
  { label: "Garage", value: property.details.garage + " Car" },
];
const statsContainer = document.getElementById("quick-stats");
stats.forEach((s) => {
  const li = document.createElement("li");
  li.innerHTML = `<span class="block font-semibold text-gray-800">${s.value}</span> ${s.label}`;
  statsContainer.appendChild(li);
});

// —————— Overview ——————
document.getElementById("propertyName").textContent = property.property_name;
document.getElementById("propertyPrice").textContent = property.price;
document.getElementById("propertyDesc").textContent = property.description;

// —————— Facts ——————
const factsContainer = document.getElementById("property-facts");
const facts = {
  "Property ID": property.details.property_id,
  Price: property.details.price,
  Size: property.details.property_size,
  Status: property.details.property_status,
  "Garage Size": property.details.garage_size,
};
Object.entries(facts).forEach(([key, val]) => {
  const div = document.createElement("div");
  div.innerHTML = `<span class="font-medium">${key}:</span> ${val}`;
  factsContainer.appendChild(div);
});

// —————— Location ——————
const addr = property.address;
document.getElementById(
  "propertyAddress"
).textContent = `${addr.street}, ${addr.area}, ${addr.city}, ${addr.state_or_county}, ${addr.zip_or_postal_code}`;

// —————— Features ——————
const featureImages = {
  "Gymnasium & Spa": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-9nfkO2yI0lvKCl7Any15roC9jEeLKX.png&w=1920&q=75",
  "24*7 Security": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-Ol6oQuDeqEhzwyzfhzccWv2FCD44G4.png&w=320&q=75",
  "Premium Lifts": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-zsKq5p4J7E4KR9vkfrUbguTQRrlpj2.png&w=1920&q=75",
  "CCTV Surveillance": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-74phE0rsFJmY4aKzmdUvRKmJA6g5qh.png&w=1920&q=75",
  "Club House": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-plZhLyp90is2n1c2ITq2ctEi9xptnN.png&w=1920&q=75",
  "Mivan Construction": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-2yMisNpt0ZmQzJ5pYzAndqBGAYkfX3.png&w=1920&q=75",
  "Jogging Track": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-PlAC2aGjB0ug6NOw7ygDhsthkUTCQf.png&w=1920&q=75",
  "Rain water Harvesting": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-inOTwhUDmvqczVKngUTWNFGFlijuuW.png&w=1920&q=75",
  "Power Backup": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-IvbgeSvAiNMAXA18AcC7azkFwnT1tJ.png&w=1920&q=75",
  "24*7 Water Supply": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-WlsBsv5aOMu1Oi7rXAIHXYHGNSxMpb.png&w=1920&q=75",
  "Swimming Area": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-a7Qf2mhjWfBqXCLELPt5nDl9abLexo.png&w=1920&q=75",
  "Kid’s Play Area": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-pC8JYVWBiVup8KLut2FAWF2wkiFiO1.png&w=1920&q=75",
  "Yoga Area": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-spb3uhz3h6K3kGJmdOjQk8YmbPG4u2.png&w=1920&q=75",
  "Barbeque Area": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-BAUryvk7UP19qEFwXfAb7K4K4g7cGD.png&w=1920&q=75",
  "Co-working Space": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-lRbpg8oTjmaqBgWDr4lfslf9vaE6u9.png&w=1920&q=75",
  "Gated Secured Homes": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-pRP1oHkLZ62PuUfEw6hFy89q0jtW1D.png&w=1920&q=75",
  "Basket Ball Court": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-FE96U2EqvCUOinHwWHgi4KWnZB8cVX.png&w=1920&q=75",
  "Badminton Court": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-8VE8ERPz4yLSAu2vC1I5JyWYT5Jpb8.png&w=1920&q=75",
  "Table Tennis": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-q4Z6lntCoBJx9Cb7yxBRWIuIICwJXz.png&w=1920&q=75",
  "Tennis Court": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-vTpKjUtDJpYw6Cf6NVhYO2R4Hkf2hi.png&w=1920&q=75",
  "Restaurant & Bar": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-hRETElBXDrcXOu32Vv4OnRgHpWQZj3.png&w=1920&q=75",
  "Meditation Area": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-S524q7roYEGQWbVIWrdw3sOow08S8h.png&w=1920&q=75",
  "Spacious Stilt Parking": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-VIqCIvrb6BPM7qPvjaVtf9HbOZ5tfy.png&w=1920&q=75",
  "Multipurpose Hall": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-HY3PHb2c7mv0M9dAZxTCVtdsBKnKWY.png&w=1920&q=75",
  "Fire Protection": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-kp322YLwT8QiEpBaqVJOg1rOOvw7Tm.png&w=1920&q=75",
  Library: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-SKuCQpYircIfGJMWJtbDuNLim16vmo.png&w=1920&q=75",
  "Mini Theatre": "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-FhiwQkj637pAu5NJHPzohktWSdgiVS.png&w=1920&q=75",
};

// Selecting the features list container
const featList = document.getElementById("featuresList");

// Loop through the featureImages object and create the list items
for (const feature in featureImages) {
  const li = document.createElement("li");
  li.className = "flex flex-col items-center"; // Add flexbox classes for alignment

  const imgSrc = featureImages[feature]; // Get the image URL

  // Set the HTML for each feature with the image and the name
  li.innerHTML = `<img src="${imgSrc}" class="mx-auto mb-1 size-12 md:size-14 lg:size-16 object-contain" alt="Icon" /><span class="text-sm md:text-base">${feature}</span>`;
  featList.appendChild(li); // Append each li to the feature list
}

// —————— Cost Breakdown ——————
document.getElementById("costPrice").textContent = property.price;

// —————— Video Embed ——————
document.getElementById("propertyVideo").src = property.property_video_url;

// —————— Similar Listings ——————
const similarContainer = document.getElementById("similarListings");
data.slice(1).forEach((prop) => {
  const card = document.createElement("div");
  card.className = "bg-gray-50 rounded-lg overflow-hidden shadow";
  card.innerHTML = `
    <img src="${prop.property_images[0]}" alt="${prop.property_name}" class="w-full h-36 object-cover" />
    <div class="p-4">
      <h3 class="font-semibold">${prop.property_name}</h3>
      <p class="text-sm text-gray-600">${prop.price} · ${prop.details.bedrooms} bed · ${prop.details.bathroom} bath</p>
    </div>
  `;
  similarContainer.appendChild(card);
});
