360° Virtual Tours

const normalizeProperty = (raw) => {
  const property = raw?.property || raw?.data?.property || raw;
  // ... other properties
  return {
    titulo: property?.titulo,
    descripcion: property?.descripcion,
    url_360: property?.url_360,  // 360° tour URL
    images,
    // ... other fields
  };
};

const populatePage = (data) => {
  const property = normalizeProperty(data);

  // ... other rendering code

  // Handle 360 tour button (main gallery)
  const btn360Container = $("#btn-360-container");
  const tour360 = $("#property-360");
  const tour360Btn = $("#property-360-btn");
  
  if (property.url_360) {
    if (btn360Container) {
      btn360Container.style.display = "flex";
      btn360Container.dataset.has360 = "true";
    }
    if (tour360) tour360.href = property.url_360;
    if (tour360Btn) {
      tour360Btn.href = property.url_360;
      tour360Btn.style.display = "inline-flex";
    }
  } else {
    if (btn360Container) {
      btn360Container.style.display = "none";
      btn360Container.dataset.has360 = "false";
    }
    if (tour360Btn) tour360Btn.style.display = "none";
  }

  // ... rest of rendering
};

const setActive = (index) => {
  galleryCurrentIndex = index;
  mainImage.src = resolvedImages[index];
  mainImage.alt = `Imagen ${index + 1}`;
  updateGalleryThumbHighlights();
  
  // Show 360 button only on first image
  const btn360Container = $("#btn-360-container");
  if (btn360Container && btn360Container.dataset.has360 === "true") {
    btn360Container.style.display = index === 0 ? "flex" : "none";
  }
};

<div class="relative aspect-[16/9] w-full rounded-xl overflow-hidden mb-4 group">
  <img id="gallery-main-image" alt="Imagen principal" class="w-full h-full object-cover" src=""/>
  <div id="btn-360-container" class="absolute inset-0 flex items-center justify-center pointer-events-none" style="display: none;">
    <a id="property-360" href="#" target="_blank" rel="noopener" class="btn-360 pointer-events-auto flex items-center gap-3 px-8 py-4 rounded-full text-slate-900 font-display font-extrabold text-lg uppercase tracking-widest transition-all duration-300 border-2 border-white/20">
      <span class="material-symbols-outlined text-3xl">360</span>
      Vista 360°
    </a>
  </div>
  <!-- Navigation arrows -->
  <!-- ... -->
</div>

<section class="bg-white dark:bg-slate-800 p-8 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-700">
  <h3 class="text-xl font-display font-bold mb-4 flex items-center gap-2">
    <span class="material-icons-outlined text-primary">description</span>
    Descripción
  </h3>
  <div class="text-slate-600 dark:text-slate-400 leading-relaxed text-sm">
    <p id="property-description">Sin descripción</p>
  </div>
  <a id="property-360-btn" href="#" target="_blank" rel="noopener" class="mt-6 flex items-center gap-2 px-5 py-2.5 rounded-full border-2 border-accent-teal text-slate-800 dark:text-accent-teal font-bold text-sm hover:bg-accent-teal hover:text-slate-900 transition-all" style="display: none;">
    <span class="material-symbols-outlined text-xl">view_in_ar</span>
    Explorar Tour Virtual
  </a>
</section>

.btn-360 {
  background: linear-gradient(135deg, #00f5d4 0%, #00d1b2 100%);
  box-shadow: 0 10px 25px -5px rgba(0, 245, 212, 0.4);
}
.btn-360:hover {
  box-shadow: 0 15px 30px -5px rgba(0, 245, 212, 0.6);
  transform: translateY(-2px);
}

{
  "property": {
    "titulo": "Apartamento Moderno",
    "url_360": "https://my.matterport.com/show/?m=XXXXXX"
  }
}

{
  "property": {
    "titulo": "Casa en Venta",
    "url_360": "https://kuula.co/share/XXXXXX"
  }
}

{
  "property": {
    "titulo": "Oficina Ejecutiva",
    "url_360": "https://tours.example.com/property/12345"
  }
}