(function() {
  'use strict';
  let swiperInstances = {};
  function loadSwiper() {
    return new Promise((resolve) => {
      // Check if Swiper is already loaded
      if (window.Swiper) {
        resolve();
        return;
      }

      // Load Swiper CSS
      const swiperCSS = document.createElement('link');
      swiperCSS.rel = 'stylesheet';
      swiperCSS.href = 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css';
      document.head.appendChild(swiperCSS);

      // Load Swiper JS
      const swiperJS = document.createElement('script');
      swiperJS.src = 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js';
      swiperJS.onload = () => resolve();
      document.head.appendChild(swiperJS);
    });
  }
  // Widget configuration
  const WIDGET_CONFIG = {
    apiBase: window.API_BASE || '/api',
    propertyId: window.PROPERTY_ID,
    theme: 'light'
  };

  // Widget state
  let widgetData = {
    property: null,
    unitPlans: [],
    selectedPlan: null,
    filters: {
      bedrooms: 'all',
      priceRange: 'all',
      sortBy: 'price'
    }
  };

  // Utility functions
  function createElement(tag, className, innerHTML) {
    const element = document.createElement(tag);
    if (className) element.className = className;
    if (innerHTML) element.innerHTML = innerHTML;
    return element;
  }

  function formatPrice(price) {
    if (!price) return 'Contact for pricing';
    return `$${price.toLocaleString()}`;
  }

  function formatPriceRange(min, max) {
    if (!min && !max) return 'Contact for pricing';
    if (min && max && min !== max) return `${formatPrice(min)} - ${formatPrice(max)}`;
    return `Starting at ${formatPrice(min || max)}`;
  }

  // API functions
  async function fetchPropertyData() {
    try {
        let propertyIdToFetch = WIDGET_CONFIG.propertyId; // Start with the existing config ID as a fallback

        // 1. Try to resolve the slug first to potentially get a new propertyId
        if (window.PROPERTY_SLUG) {
            console.log(window.PROPERTY_SLUG);
            const resolveResponse = await fetch(`${WIDGET_CONFIG.apiBase}/widget/resolve-slug/${window.PROPERTY_SLUG}`);

            if (!resolveResponse.ok) {
                // Log the error but continue to try the fallback propertyId
                console.warn('Failed to resolve property slug, falling back to WIDGET_CONFIG.propertyId.');
            } else {
                const resolveData = await resolveResponse.json();
                console.log(resolveData, "eh");
                // Assuming the propertyId is directly in the resolved data object (e.g., resolveData.propertyId)
                // You might need to adjust 'propertyId' based on the actual structure of the response
                if (resolveData && resolveData.propertyId) {
                    propertyIdToFetch = resolveData.propertyId; 
                    console.log('Resolved new propertyId:', propertyIdToFetch);
                } else {
                    console.warn('Resolved data is missing propertyId, falling back to WIDGET_CONFIG.propertyId.');
                }
            }
        }
        
        // Ensure we have an ID before making the main property fetch
        if (!propertyIdToFetch) {
            throw new Error('No property ID available for fetching data.');
        }

        // 2. Fetch the property data using the obtained or fallback propertyId
        const propertyResponse = await fetch(`${WIDGET_CONFIG.apiBase}/widget/property/${propertyIdToFetch}`);

        if (!propertyResponse.ok) {
            throw new Error('Failed to fetch final property data');
        }

        return await propertyResponse.json();

    } catch (error) {
        console.error('Error fetching property data:', error);
        return null;
    }
}

  async function trackApplicationClick(planId) {
    try {
      await fetch(`${WIDGET_CONFIG.apiBase}/widget/track-application`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          property_id: WIDGET_CONFIG.propertyId,
          plan_id: planId,
          referral_source: 'widget'
        })
      });
    } catch (error) {
      console.error('Error tracking application click:', error);
    }
  }

 function renderPropertyHeader(property) { 
    const header = createElement('div', 'property-header');
    
    // Banner (if enabled)
    if (property.banner_enabled && property.banner_text) {
        const banner = createElement('div', 'property-banner');
        banner.style.backgroundColor = property.banner_background_color || '#28a745';
        banner.style.color = property.banner_text_color || '#ffffff';
        banner.innerHTML = `<p>${property.banner_text}</p>`;
        header.appendChild(banner);
    }

    // Property info
    const info = createElement('div', 'property-info');
    info.innerHTML = `
        <div class="property-hero">
            <div class="property-title-section">
                ${property.property_logo ? `<img src="${property.property_logo}" alt="${property.property_name}" class="property-logo">` : ''}
                <div class="title-content">
                    <h1 class="property-name">${property.property_name}</h1>
                    <div class="property-address">
                        <svg class="location-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                            <circle cx="12" cy="10" r="3"></circle>
                        </svg>
                        <span>${property.property_address}, ${property.property_city}, ${property.property_state} ${property.property_zip}</span>
                    </div>
                </div>
            </div>
            
            <div class="property-contact">
                ${property.property_phone ? `
                <div class="contact-item">
                    <svg class="contact-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                    </svg>
                    <span>${property.property_phone}</span>
                </div>
                ` : ''}
                ${property.property_email ? `
                <div class="contact-item">
                    <svg class="contact-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                        <polyline points="22,6 12,13 2,6"></polyline>
                    </svg>
                    <span>${property.property_email}</span>
                </div>
                ` : ''}
                ${property.property_website ? `
                <div class="contact-item">
                    <svg class="contact-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="10"></circle>
                        <line x1="2" y1="12" x2="22" y2="12"></line>
                        <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
                    </svg>
                    <a href="${property.property_website}" target="_blank" rel="noopener">Visit Website</a>
                </div>
                ` : ''}
                ${property.default_application_url ? `
                <div class="contact-item">
                    <svg class="contact-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M9 11l3 3L22 4"></path>
                        <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"></path>
                    </svg>
                    <a href="${property.default_application_url}" target="_blank" rel="noopener">Apply Now</a>
                </div>
                ` : ''}
                ${property.pay_rent_link ? `
                <div class="contact-item">
                    <svg class="contact-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="2" y="5" width="20" height="14" rx="2"></rect>
                        <line x1="2" y1="10" x2="22" y2="10"></line>
                    </svg>
                    <a href="${property.pay_rent_link}" target="_blank" rel="noopener">Pay Rent</a>
                </div>
                ` : ''}
            </div>
        </div>
        
        ${property.property_description ? `
        <div class="property-description">
            <p>${property.property_description}</p>
        </div>
        ` : ''}
    `;
    header.appendChild(info);

    // Add Property Gallery Section
    if (property.images && property.images.length > 0) {
        const gallerySection = createElement('div', 'property-gallery-section');
        const galleryHTML = `
            <div class="property-gallery-header">
                <h2>Property Gallery</h2>
                <span class="gallery-count">${property.images.length} Photo${property.images.length > 1 ? 's' : ''}</span>
            </div>
            <div class="swiper property-gallery-swiper">
                <div class="swiper-wrapper">
                    ${property.images.map(image => `
                        <div class="swiper-slide">
                            <img src="https://unitsmedia.goldcrestmgmt.com/${image.image_key}" 
                                alt="${image.media_title || property.property_name}" 
                                class="property-gallery-image">
                        </div>
                    `).join('')}
                </div>
                <div class="swiper-button-next property-gallery-next"></div>
                <div class="swiper-button-prev property-gallery-prev"></div>
                <div class="swiper-pagination property-gallery-pagination"></div>
            </div>
            ${property.images.length > 1 ? `
                <div class="swiper property-gallery-thumbs">
                    <div class="swiper-wrapper">
                        ${property.images.map(image => `
                            <div class="swiper-slide">
                                <img src="https://unitsmedia.goldcrestmgmt.com/${image.image_key}" 
                                    alt="${image.media_title || property.property_name}" 
                                    class="property-gallery-thumb">
                            </div>
                        `).join('')}
                    </div>
                </div>
            ` : ''}
        `;
        
        gallerySection.innerHTML = galleryHTML;
        header.appendChild(gallerySection);
        
        setTimeout(() => initPropertyGallery(property.images.length), 100);
    }

    // Add Property Amenities Section
    if (property.property_amenities && property.property_amenities.length > 0) {
        const amenitiesSection = createElement('div', 'property-amenities-section');
        amenitiesSection.innerHTML = `
            <div class="property-amenities-header">
                <h2>Property Amenities</h2>
            </div>
            <div class="property-amenities-grid">
                ${property.property_amenities.map(amenity => `
                    <div class="property-amenity-item">
                        <svg class="property-amenity-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="20,6 9,17 4,12"></polyline>
                        </svg>
                        <span>${amenity}</span>
                    </div>
                `).join('')}
            </div>
        `;
        header.appendChild(amenitiesSection);
    }
    
    return header;
}

  function renderFilters() {
    const filters = createElement('div', 'widget-filters');
    
    filters.innerHTML = `
      <div class="filter-group">
        <label for="bedrooms-filter">Bedrooms:</label>
        <select id="bedrooms-filter">
          <option value="all">All</option>
          <option value="0">Studio</option>
          <option value="1">1 Bedroom</option>
          <option value="2">2 Bedrooms</option>
          <option value="3">3 Bedrooms</option>
          <option value="4">4+ Bedrooms</option>
        </select>
      </div>
      
      <div class="filter-group">
        <label for="sort-filter">Sort by:</label>
        <select id="sort-filter">
          <option value="price">Price (Low to High)</option>
          <option value="price-desc">Price (High to Low)</option>
          <option value="bedrooms">Bedrooms</option>
          <option value="sqft">Square Feet</option>
        </select>
      </div>
    `;

    // Add event listeners
    filters.querySelector('#bedrooms-filter').addEventListener('change', (e) => {
      widgetData.filters.bedrooms = e.target.value;
      renderUnitPlans();
    });

    filters.querySelector('#sort-filter').addEventListener('change', (e) => {
      widgetData.filters.sortBy = e.target.value;
      renderUnitPlans();
    });

    return filters;
  }

  function renderUnitPlan(plan) {
    const planElement = createElement('div', 'unit-plan');
    
    const primaryImage = plan.media.find(m => m.is_featured) || plan.media[0];

    planElement.innerHTML = `
      <div class="plan-image">
        ${primaryImage ? `<img onclick="showPlanDetails('${plan.plan_id}')" src="https://unitsmedia.goldcrestmgmt.com/${primaryImage.image_key}" alt="${plan.plan_name}">` : '<div class="no-image">Image Coming Soon</div>'}
      </div>
      <div class="plan-details">
        <div class="plan-header">
          <h3>${plan.plan_name}</h3>
          <div class="plan-price">
            $${plan.base_rent_new}
          </div>
        </div>
        <div class="plan-specs">
          <span class="bedrooms">${plan.bedrooms === 0 ? 'Studio' : `${plan.bedrooms} Bed`}</span>
          <span class="bathrooms">${plan.bathrooms} Bath</span>
          ${plan.square_feet_new ? `<span class="sqft">${plan.square_feet_new} sq ft</span>` : ''}
        </div>
        ${plan.availability ? 
          `<div class="availability">${plan.availability}</div>` : 
          '<div class="availability unavailable">Contact for availability</div>'
        }
        ${plan.availability_notes ? `<div class="availability-notes">${plan.availability_notes}</div>` : ''}
        <div class="plan-actions">
          <button class="btn-details" onclick="showPlanDetails('${plan.plan_id}')">View Details</button>
          <button class="btn-apply" onclick="applyNow('${plan.plan_id}')">Apply Now</button>
          <button class="btn-apply" onclick="payRent('${plan.plan_id}')">Pay Rent</button>
        </div>
      </div>
    `;

    return planElement;
  }

  function renderUnitPlans() {
    const container = document.querySelector('.unit-plans-container');
    if (!container) return;

    // Filter and sort unit plans
    let filteredPlans = [...widgetData.unitPlans];

    // Filter by bedrooms
    if (widgetData.filters.bedrooms !== 'all') {
      const bedroomCount = parseInt(widgetData.filters.bedrooms);
      filteredPlans = filteredPlans.filter(plan => {
        if (bedroomCount === 4) return plan.bedrooms >= 4;
        return plan.bedrooms === bedroomCount;
      });
    }

    // Sort plans
    filteredPlans.sort((a, b) => {
      switch (widgetData.filters.sortBy) {
        case 'price':
          const priceA = a.rent_range_min || a.base_rent_new || 0;
          const priceB = b.rent_range_min || b.base_rent_new || 0;
          return priceA - priceB;
        case 'price-desc':
          const priceDescA = a.rent_range_max || a.base_rent_new || 0;
          const priceDescB = b.rent_range_max || b.base_rent_new || 0;
          return priceDescB - priceDescA;
        case 'bedrooms':
          return a.bedrooms - b.bedrooms;
        case 'sqft':
          // Handle both numeric and range values for sorting
          const getSqFtValue = (sqft) => {
            if (!sqft) return 0;
            // If it's a range, use the minimum value for sorting
            if (sqft.includes('-')) {
              return parseInt(sqft.split('-')[0]);
            }
            return parseInt(sqft) || 0;
          };
          return getSqFtValue(b.square_feet_new) - getSqFtValue(a.square_feet_new);
        default:
          return 0;
      }
    });

    // Clear and render
    container.innerHTML = '';
    filteredPlans.forEach(plan => {
      container.appendChild(renderUnitPlan(plan));
    });

    if (filteredPlans.length === 0) {
      container.innerHTML = '<div class="no-results">No units match your criteria.</div>';
    }
  }

  async function renderGalleryModal(plan) {
    // Load Swiper if not already loaded
    await loadSwiper();

    const modalId = `gallery-modal-${plan.plan_id}`;
    const modal = createElement('div', 'plan-modal');
    modal.innerHTML = `
      <div class="modal-content">
        <div class="modal-header">
          <h2>Images - ${plan.plan_name}</h2>
          <button class="modal-close" onclick="closePlanModal()">&times;</button>
        </div>
        <div class="modal-body">
          ${plan.media.length > 0 ? `
            <div class="swiper gallery-swiper-${plan.plan_id}">
              <div class="swiper-wrapper">
                ${plan.media.map(media => `
                  <div class="swiper-slide">
                    <img src="https://unitsmedia.goldcrestmgmt.com/${media.image_key}" 
                         alt="${media.media_title || plan.plan_name}" 
                         class="gallery-image-swiper">
                  </div>
                `).join('')}
              </div>
              <!-- Navigation buttons -->
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
              <!-- Pagination -->
              <div class="swiper-pagination"></div>
            </div>
            
            ${plan.media.length > 1 ? `
              <!-- Thumbnails -->
              <div class="swiper gallery-thumbs-${plan.plan_id}">
                <div class="swiper-wrapper">
                  ${plan.media.map(media => `
                    <div class="swiper-slide">
                      <img src="https://unitsmedia.goldcrestmgmt.com/${media.image_key}" 
                           alt="${media.media_title || plan.plan_name}" 
                           class="gallery-thumb-image">
                    </div>
                  `).join('')}
                </div>
              </div>
            ` : ''}
          ` : '<div class="no-images">Image Coming Soon</div>'}
        </div>
      </div>
    `;

    document.body.appendChild(modal);
    
    // Initialize Swiper after modal is added to DOM
    if (plan.media.length > 0) {
      setTimeout(() => {
        // Initialize thumbnail swiper if more than 1 image
        let galleryThumbs = null;
        if (plan.media.length > 1) {
          galleryThumbs = new Swiper(`.gallery-thumbs-${plan.plan_id}`, {
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesProgress: true,
            breakpoints: {
              320: {
                slidesPerView: 3,
              },
              640: {
                slidesPerView: 4,
              },
              768: {
                slidesPerView: 5,
              }
            }
          });
          swiperInstances[`thumbs-${plan.plan_id}`] = galleryThumbs;
        }

        // Initialize main swiper
        const gallerySwiper = new Swiper(`.gallery-swiper-${plan.plan_id}`, {
          spaceBetween: 10,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          thumbs: galleryThumbs ? {
            swiper: galleryThumbs,
          } : null,
          loop: plan.media.length > 1,
          keyboard: {
            enabled: true,
          }
        });
        swiperInstances[`main-${plan.plan_id}`] = gallerySwiper;
      }, 100);
    }
    
    // Close modal when clicking outside
    modal.addEventListener('click', (e) => {
      if (e.target === modal) {
        closePlanModal();
      }
    });
  }

  async function renderPlanModal(plan) {
    await loadSwiper();

    const modal = createElement('div', 'plan-modal');
    modal.innerHTML = `
      <div class="modal-content modal-content-enhanced">
        <div class="modal-header-enhanced">
          <div class="modal-title-section">
            <h2 class="modal-title">${plan.plan_name}</h2>
            <div class="modal-subtitle">
              ${plan.bedrooms === 0 ? 'Studio' : `${plan.bedrooms} Bedroom${plan.bedrooms > 1 ? 's' : ''}`} • 
              ${plan.bathrooms} Bath${plan.bathrooms > 1 ? 's' : ''}${plan.square_feet_new ? ` • ${plan.square_feet_new} sq ft` : ''}
            </div>
          </div>
          <div class="modal-header-actions">
            <button class="btn-apply-header" onclick="applyNow('${plan.plan_id}')">
              <svg class="btn-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M9 11l3 3L22 4"></path>
                <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"></path>
              </svg>
              Apply Now
            </button>
            <button class="btn-apply-header" onclick="payRent('${plan.plan_id}')">
              <svg class="btn-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M9 11l3 3L22 4"></path>
                <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"></path>
              </svg>
              Pay Rent
            </button>
            <button class="modal-close-enhanced" onclick="closePlanModal()">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
              </svg>
            </button>
          </div>
        </div>
        
        <div class="modal-body-enhanced">
          <div class="modal-gallery-section">
            ${plan.media.length > 0 ? `
              <div class="swiper detail-swiper-${plan.plan_id}">
                <div class="swiper-wrapper">
                  ${plan.media.map(media => `
                    <div class="swiper-slide">
                      <img src="https://unitsmedia.goldcrestmgmt.com/${media.image_key}"
                           alt="${media.media_title || plan.plan_name}"
                           class="detail-image-enhanced"
                           onclick="openLightbox(this.src)">
                    </div>
                  `).join('')}
                </div>
                <div class="swiper-button-next swiper-nav-enhanced"></div>
                <div class="swiper-button-prev swiper-nav-enhanced"></div>
                <div class="swiper-pagination swiper-pagination-enhanced"></div>
              </div>

              ${plan.media.length > 1 ? `
                <div class="swiper detail-thumbs-${plan.plan_id}">
                  <div class="swiper-wrapper">
                    ${plan.media.map(media => `
                      <div class="swiper-slide">
                        <img src="https://unitsmedia.goldcrestmgmt.com/${media.image_key}"
                             alt="${media.media_title || plan.plan_name}"
                             class="detail-thumb-image">
                      </div>
                    `).join('')}
                  </div>
                </div>
              ` : ''}
            ` : '<div class="no-images-enhanced">Image Coming Soon</div>'}
          </div>
          
          <div class="modal-content-section">
            <div class="plan-details-grid">
              <div class="detail-card">
                <h3 class="detail-card-title">Pricing</h3>
                <div class="detail-card-content">
                  <div class="price-display">
                    $${plan.base_rent_new}
                  </div>
                  ${plan.deposit_amount ? `<div class="detail-item"><span class="detail-label">Deposit:</span> <span class="detail-value">${formatPrice(plan.deposit_amount)}</span></div>` : ''}
                  ${plan.application_fee ? `<div class="detail-item"><span class="detail-label">Application Fee:</span> <span class="detail-value">${formatPrice(plan.application_fee)}</span></div>` : ''}
                </div>
              </div>
              
              <div class="detail-card">
                <h3 class="detail-card-title">Availability</h3>
                <div class="detail-card-content">
                  <div class="availability-display ${plan.availability ? 'available' : 'unavailable'}">
                    ${plan.availability ? 
                      `${plan.availability}` : 
                      'Contact for availability'
                    }
                  </div>
                  ${plan.availability_notes ? `<div class="availability-notes">${plan.availability_notes}</div>` : ''}
                </div>
              </div>
            </div>
            
            ${plan.description ? `
              <div class="detail-card description-card">
                <h3 class="detail-card-title">Description</h3>
                <div class="detail-card-content">
                  <p class="plan-description-text">${plan.description}</p>
                </div>
              </div>
            ` : ''}
            
            ${plan.amenities && plan.amenities.length > 0 ? `
              <div class="detail-card">
                <h3 class="detail-card-title">Amenities</h3>
                <div class="detail-card-content">
                  <div class="amenities-grid">
                    ${plan.amenities.map(amenity => `
                      <div class="amenity-item">
                        <svg class="amenity-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                          <polyline points="20,6 9,17 4,12"></polyline>
                        </svg>
                        <span>${amenity}</span>
                      </div>
                    `).join('')}
                  </div>
                </div>
              </div>
            ` : ''}
            
            ${plan.appliances && plan.appliances.length > 0 ? `
              <div class="detail-card">
                <h3 class="detail-card-title">Appliances</h3>
                <div class="detail-card-content">
                  <div class="amenities-grid">
                    ${plan.appliances.map(appliance => `
                      <div class="amenity-item">
                        <svg class="amenity-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                          <polyline points="20,6 9,17 4,12"></polyline>
                        </svg>
                        <span>${appliance}</span>
                      </div>
                    `).join('')}
                  </div>
                </div>
              </div>
            ` : ''}
          </div>
        </div>
        
      </div>
    `;

    document.body.appendChild(modal);

    if (plan.media.length > 0) {
      setTimeout(() => {
        // Initialize thumbnail swiper if more than 1 image
        let detailThumbs = null;
        if (plan.media.length > 1) {
          detailThumbs = new Swiper(`.detail-thumbs-${plan.plan_id}`, {
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesProgress: true,
            breakpoints: {
              320: { slidesPerView: 3 },
              640: { slidesPerView: 4 },
              768: { slidesPerView: 5 },
              1024: { slidesPerView: 6 }
            }
          });
          swiperInstances[`detail-thumbs-${plan.plan_id}`] = detailThumbs;
        }

        const detailSwiper = new Swiper(`.detail-swiper-${plan.plan_id}`, {
          spaceBetween: 0,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            dynamicBullets: true,
          },
          thumbs: detailThumbs ? {
            swiper: detailThumbs,
          } : null,
          loop: plan.media.length > 1,
          keyboard: {
            enabled: true,
          },
          effect: 'fade',
          fadeEffect: {
            crossFade: true
          }
        });
        swiperInstances[`detail-main-${plan.plan_id}`] = detailSwiper;
      }, 100);
    }
    
    // Close modal when clicking outside
    modal.addEventListener('click', (e) => {
      if (e.target === modal) {
        closePlanModal();
      }
    });
  }

  // Global functions (attached to window for onclick handlers)
  window.showPlanDetails = function(planId) {
    const plan = widgetData.unitPlans.find(p => p.plan_id === planId);
    if (plan) {
      renderPlanModal(plan);
    }
  };
  window.showGallery = function(planId) {
    const plan = widgetData.unitPlans.find(p => p.plan_id === planId);
    if (plan) {
      renderGalleryModal(plan);
    }
  };

  window.closePlanModal = function() {
    const modal = document.querySelector('.plan-modal');
    if (modal) {
      // Destroy Swiper instances to prevent memory leaks
      Object.keys(swiperInstances).forEach(key => {
        if (swiperInstances[key]) {
          swiperInstances[key].destroy();
          delete swiperInstances[key];
        }
      });
      modal.remove();
    }
  };

  window.openLightbox = function(imageSrc) {
    let lightbox = document.querySelector('.image-lightbox');
    if (!lightbox) {
      lightbox = document.createElement('div');
      lightbox.className = 'image-lightbox';
      lightbox.innerHTML = '<button class="image-lightbox-close">&times;</button><img src="" alt="Full size image">';
      lightbox.addEventListener('click', function(e) {
        if (e.target === lightbox || e.target.classList.contains('image-lightbox-close')) {
          lightbox.classList.remove('active');
        }
      });
      document.body.appendChild(lightbox);
    }
    lightbox.querySelector('img').src = imageSrc;
    lightbox.classList.add('active');
  };

  window.applyNow = function(planId) {
    const plan = widgetData.unitPlans.find(p => p.plan_id === planId);
    if (plan && widgetData.property) {
      // Track the application click
      trackApplicationClick(planId);
      
      // Redirect to application URL
      const applicationUrl = widgetData.property.default_application_url;
      if (applicationUrl) {
        window.open(applicationUrl, '_blank');
      } else {
        alert('Please contact the property for application information.');
      }
    
      const payRent = widgetData.property.pay_rent_link;
      if (payRent) {
        window.open(payRent, '_blank');
      } else {
        alert('Please contact the property for application information.');
      }
    }
  };

  window.payRent = function(planId) {
    const plan = widgetData.unitPlans.find(p => p.plan_id === planId);
    if (plan && widgetData.property) {
      // Track the application click
      trackApplicationClick(planId);
    
      const payRent = widgetData.property.pay_rent_link;
      if (payRent) {
        window.open(payRent, '_blank');
      } else {
        alert('Please contact the property for application information.');
      }
    }
  };
  // Widget styles
  function injectStyles() {
    const primaryColor = widgetData.property?.widget_primary_color || '#007bff';
    const secondaryColor = widgetData.property?.widget_secondary_color || '#6c757d';
    const fontFamily = widgetData.property?.widget_font_family || 'Arial, sans-serif';
    
    const styles = `
      <style>
      .property-amenities-section {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  
  .property-amenities-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid ${primaryColor};
  }
  
  .property-amenities-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: ${primaryColor};
    margin: 0;
  }
  
  .property-amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
  }
  
  .property-amenity-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
  }
  
  .property-amenity-item:hover {
    background: #f1f5f9;
    border-color: ${primaryColor};
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  
  .property-amenity-icon {
    color: #10b981;
    flex-shrink: 0;
  }
  
  .property-amenity-item span {
    font-size: 0.9375rem;
    color: #1f2937;
    font-weight: 500;
  }
  
  @media (max-width: 768px) {
    .property-amenities-section {
      padding: 1rem;
    }
    
    .property-amenities-grid {
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }
  }
        /* Swiper Styles */
      .swiper {
        width: 100%;
        height: 400px;
      }
      
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #f8f8f8;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .gallery-image-swiper,
      .detail-image-swiper {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      
      /* Thumbnail Gallery - using attribute selector for dynamic classes */
      [class*="gallery-thumbs-"] {
        height: 80px;
        box-sizing: border-box;
        padding: 10px 0;
      }
      
      [class*="gallery-thumbs-"] .swiper-slide {
        opacity: 0.6;
        cursor: pointer;
        border: 2px solid transparent;
        transition: opacity 0.3s, border-color 0.3s;
      }
      
      [class*="gallery-thumbs-"] .swiper-slide-thumb-active {
        opacity: 1;
        border-color: ${primaryColor};
      }
      
      .gallery-thumb-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      /* Swiper Navigation - Custom Clean Arrows */
      .swiper-button-next,
      .swiper-button-prev {
        background: rgba(255, 255, 255, 0.95);
        width: 44px;
        height: 44px;
        border-radius: 8px;
        margin-top: -22px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        transition: all 0.2s ease;
        border: 1px solid rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .swiper-button-next:hover,
      .swiper-button-prev:hover {
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        transform: translateY(-1px);
      }
      
      /* Hide default Swiper arrows */
      .swiper-button-next:after,
      .swiper-button-prev:after {
        display: none;
      }
      
      /* Custom SVG arrows */
      .swiper-button-next::before,
      .swiper-button-prev::before {
        content: '';
        width: 16px;
        height: 16px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }
      
      .swiper-button-next::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23333'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
      }
      
      .swiper-button-prev::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23333'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E");
      }
      
      .swiper-button-next {
        right: 12px;
      }
      
      .swiper-button-prev {
        left: 12px;
      }
      
      /* Swiper Pagination */
      .swiper-pagination-bullet {
        background: rgba(255, 255, 255, 0.8);
        opacity: 1;
        width: 10px;
        height: 10px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        transition: all 0.2s ease;
      }
      
      .swiper-pagination-bullet-active {
        background: ${primaryColor};
        border-color: rgba(0, 0, 0, 0.3);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
        transform: scale(1.2);
      }
      
      /* Modal adjustments for Swiper */
      .modal-content-large {
        max-width: 900px;
      }
      
      .no-images {
        padding: 40px;
        text-align: center;
        color: #999;
        background: #f8f8f8;
        border-radius: 4px;
      }
        .property-availability-widget {
          font-family: ${fontFamily};
          max-width: 1200px;
          margin: 0 auto;
          padding: 20px;
          background: #fff;
        }
        
        .property-banner {
          padding: 10px 20px;
          text-align: center;
          margin-bottom: 20px;
          border-radius: 5px;
        }
        
        .property-banner p {
          margin: 0;
          font-weight: bold;
        }
        
        .property-header {
          margin-bottom: 40px;
          background: white;
          border-radius: 12px;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
          overflow: hidden;
        }
        
        .property-hero {
          background: linear-gradient(135deg, ${primaryColor} 0%, ${secondaryColor} 100%);
          padding: 2rem;
          color: white;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: 2rem;
        }
        
        .property-title-section {
          display: flex;
          align-items: flex-start;
          gap: 1rem;
          flex: 1;
        }
        
        .property-logo {
          max-height: 60px;
          width: auto;
          border-radius: 8px;
          background: rgba(255, 255, 255, 0.1);
          padding: 0.5rem;
        }
        
        .title-content {
          flex: 1;
        }
        
        .property-name {
          font-size: 2rem;
          font-weight: 700;
          margin: 0 0 0.5rem 0;
          color: white;
          line-height: 1.2;
        }
        
        .property-address {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          color: rgba(255, 255, 255, 0.9);
          font-size: 1rem;
          margin-bottom: 0.5rem;
        }
        
        .location-icon {
          width: 18px;
          height: 18px;
          flex-shrink: 0;
        }
        
        .property-contact {
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
          min-width: 200px;
        }
        
        .contact-item {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          color: rgba(255, 255, 255, 0.9);
          font-size: 0.875rem;
          padding: 0.5rem 0.75rem;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 6px;
          transition: background-color 0.2s;
        }
        
        .contact-item:hover {
          background: rgba(255, 255, 255, 0.2);
        }
        
        .contact-icon {
          width: 16px;
          height: 16px;
          flex-shrink: 0;
        }
        
        .contact-item a {
          color: inherit;
          text-decoration: none;
        }
        
        .contact-item a:hover {
          text-decoration: underline;
        }
        
        .property-description {
          padding: 1.5rem 2rem;
          background: #f8f9fa;
          border-top: 1px solid #e9ecef;
        }
        
        .property-description p {
          margin: 0;
          color: #495057;
          font-size: 1rem;
          line-height: 1.6;
        }
        
        .widget-filters {
          display: flex;
          gap: 20px;
          margin-bottom: 30px;
          padding: 20px;
          background: #f8f9fa;
          border-radius: 8px;
        }
        
        .filter-group {
          display: flex;
          flex-direction: column;
          gap: 5px;
        }
        
        .filter-group label {
          font-weight: bold;
          color: #333;
        }
        
        .filter-group select {
          padding: 8px 12px;
          border: 1px solid #ddd;
          border-radius: 4px;
          background: white;
        }
        
        .unit-plans-container {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
          gap: 20px;
        }
        
        .unit-plan {
          border: 1px solid #ddd;
          border-radius: 8px;
          overflow: hidden;
          background: white;
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
          transition: transform 0.2s;
          display: flex;
          flex-direction: column;
        }
        
        .unit-plan:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        
        .plan-image {
          height: 200px;
          overflow: hidden;
          background: #f5f5f5;
        }

        .plan-image img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
        
        .no-image {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f0f0f0;
          color: #666;
        }
        
        .plan-details {
          padding: 20px;
          display: flex;
          flex-direction: column;
          flex: 1;
        }
        
        .plan-header {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          margin-bottom: 10px;
          gap: 12px;
        }
        
        .plan-details h3 {
          margin: 0;
          color: ${primaryColor};
          flex: 1;
          min-width: 0;
        }
        
        .plan-specs {
          display: flex;
          gap: 15px;
          margin-bottom: 10px;
          font-size: 14px;
          color: #666;
        }
        
        .plan-price {
          font-size: 20px;
          font-weight: bold;
          color: ${primaryColor};
          white-space: nowrap;
          flex-shrink: 0;
        }
        
        .availability {
          font-size: 14px;
          margin-bottom: 5px;
        }
        
        .availability.unavailable {
          color: #dc3545;
        }
        
        .availability-notes {
          font-size: 12px;
          color: #666;
          margin-bottom: 15px;
        }
        
        .plan-actions {
          display: flex;
          gap: 10px;
          margin-top: auto;
          padding-top: 15px;
          border-top: 1px solid #eee;
        }
        
        .btn-details, .btn-apply {
          padding: 8px 16px;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          font-size: 14px;
          transition: background-color 0.2s;
        }
        
        .btn-details {
          background: ${secondaryColor};
          color: white;
        }
        
        .btn-details:hover {
          background: #5a6268;
        }
        
        .btn-apply {
          background: ${primaryColor};
          color: white;
        }
        
        .btn-apply:hover {
          background: #0056b3;
        }
        
        .plan-modal {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,0.6);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1000;
          backdrop-filter: blur(4px);
        }
        
        .modal-content {
          background: white;
          border-radius: 16px;
          max-width: 800px;
          max-height: 90vh;
          overflow-y: auto;
          width: 90%;
          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }
        
        .modal-content-enhanced {
          max-width: 1200px;
          width: 95%;
          max-height: 95vh;
          display: flex;
          flex-direction: column;
        }
        
        .modal-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px;
          border-bottom: 1px solid #e5e7eb;
        }
        
        .modal-header-enhanced {
          padding: 24px 32px;
          border-bottom: 1px solid #e5e7eb;
          background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
          border-radius: 16px 16px 0 0;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 24px;
        }
        
        .modal-header-actions {
          display: flex;
          align-items: center;
          gap: 12px;
        }
        
        .btn-apply-header {
          background: linear-gradient(135deg, ${widgetData.property?.widget_primary_color || '#007bff'} 0%, #0056b3 100%);
          color: white;
          border: none;
          padding: 12px 20px;
          border-radius: 10px;
          font-size: 0.875rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
          display: flex;
          align-items: center;
          gap: 8px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .btn-apply-header:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        
        .modal-title-section {
          flex: 1;
        }
        
        .modal-title {
          font-size: 1.875rem;
          font-weight: 700;
          color: #1f2937;
          margin: 0 0 8px 0;
          line-height: 1.2;
        }
        
        .modal-subtitle {
          font-size: 1rem;
          color: #6b7280;
          font-weight: 500;
        }
        
        .modal-header h2 {
          margin: 0;
          color: ${widgetData.property?.widget_primary_color || '#007bff'};
        }
        
        .modal-close {
          background: none;
          border: none;
          font-size: 24px;
          cursor: pointer;
          color: #666;
          padding: 8px;
          border-radius: 8px;
          transition: all 0.2s ease;
        }
        
        .modal-close:hover {
          background: #f3f4f6;
          color: #374151;
        }
        
        .modal-close-enhanced {
          background: #f3f4f6;
          border: none;
          width: 40px;
          height: 40px;
          border-radius: 10px;
          cursor: pointer;
          color: #6b7280;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;
        }
        
        .modal-close-enhanced:hover {
          background: #e5e7eb;
          color: #374151;
          transform: scale(1.05);
        }
        
        .modal-body {
          padding: 20px;
        }
        
        .modal-body-enhanced {
          display: flex;
          flex: 1;
          overflow: hidden;
          min-height: 0;
        }
        
        .modal-gallery-section {
          flex: 0 0 50%;
          max-width: 50%;
          padding: 32px 24px 32px 32px;
          border-right: 1px solid #e5e7eb;
          overflow: hidden;
        }
        
        .modal-content-section {
          flex: 1;
          min-width: 0;
          padding: 32px;
          overflow-y: auto;
          overflow-x: hidden;
          word-wrap: break-word;
          overflow-wrap: break-word;
        }
        
        .detail-image-enhanced {
          width: 100%;
          height: 400px;
          object-fit: contain;
          border-radius: 12px;
          cursor: pointer;
        }

        /* Fix for detail swiper container */
        [class*="detail-swiper-"] {
          width: 100%;
          height: 400px;
          border-radius: 12px;
          overflow: hidden;
          background: #f5f5f5;
        }
        
        [class*="detail-thumbs-"] {
          height: 80px;
          margin-top: 16px;
        }
        
        [class*="detail-thumbs-"] .swiper-slide {
          opacity: 0.6;
          cursor: pointer;
          border: 2px solid transparent;
          transition: opacity 0.3s, border-color 0.3s;
        }
        
        [class*="detail-thumbs-"] .swiper-slide-thumb-active {
          opacity: 1;
          border-color: ${primaryColor};
        }
        
        
        .detail-thumb-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .swiper-nav-enhanced {
          background: rgba(255, 255, 255, 0.9);
          color: #374151;
          width: 44px;
          height: 44px;
          border-radius: 50%;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
          transition: all 0.2s ease;
        }
        
        .swiper-nav-enhanced:hover {
          background: white;
          transform: scale(1.1);
        }
        
        .swiper-nav-enhanced:after {
          font-size: 18px;
          font-weight: 600;
        }
        
        .swiper-pagination-enhanced {
          bottom: 16px;
        }
        
        .swiper-pagination-enhanced .swiper-pagination-bullet {
          width: 12px;
          height: 12px;
          background: rgba(255, 255, 255, 0.7);
          opacity: 1;
          transition: all 0.2s ease;
        }
        
        .swiper-pagination-enhanced .swiper-pagination-bullet-active {
          background: white;
          transform: scale(1.2);
        }
        
        .no-images-enhanced {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 400px;
          background: #f9fafb;
          border-radius: 12px;
          color: #6b7280;
          font-size: 1.125rem;
          font-weight: 500;
        }

        .image-lightbox {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.9);
          z-index: 100000;
          align-items: center;
          justify-content: center;
          cursor: zoom-out;
        }

        .image-lightbox.active {
          display: flex;
        }

        .image-lightbox img {
          max-width: 90%;
          max-height: 90%;
          object-fit: contain;
          border-radius: 8px;
        }

        .image-lightbox-close {
          position: absolute;
          top: 20px;
          right: 20px;
          color: white;
          font-size: 32px;
          cursor: pointer;
          background: rgba(0,0,0,0.5);
          border: none;
          width: 44px;
          height: 44px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          line-height: 1;
        }

        .image-lightbox-close:hover {
          background: rgba(0,0,0,0.8);
        }

        .plan-details-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 24px;
          margin-bottom: 32px;
        }
        
        .detail-card {
          background: #f8fafc;
          border-radius: 12px;
          padding: 24px;
          border: 1px solid #e2e8f0;
        }
        
        .detail-card-title {
          font-size: 1.125rem;
          font-weight: 600;
          color: #1f2937;
          margin: 0 0 16px 0;
        }
        
        .detail-card-content {
          color: #4b5563;
        }
        
        .price-display {
          font-size: 1.25rem;
          font-weight: 600;
          color: #1f2937;
          margin-bottom: 16px;
        }
        
        .detail-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 0;
          border-bottom: 1px solid #e5e7eb;
        }
        
        .detail-item:last-child {
          border-bottom: none;
          padding-bottom: 0;
        }
        
        .detail-label {
          font-weight: 500;
          color: #6b7280;
        }
        
        .detail-value {
          font-weight: 600;
          color: #1f2937;
        }
        
        .availability-display {
          font-size: 1rem;
          font-weight: 600;
          padding: 12px 16px;
          border-radius: 8px;
          text-align: center;
          margin-bottom: 12px;
          word-wrap: break-word;
          overflow-wrap: break-word;
          white-space: normal;
          line-height: 1.4;
          min-height: 48px;
          display: flex;
          align-items: center;
          justify-content: center;
          hyphens: auto;
          -webkit-hyphens: auto;
          -ms-hyphens: auto;
        }
        
        .availability-display.available {
          background: #e8f5e8;
          color: #2d5a2d;
        }
        
        .availability-display.unavailable {
          background: #fee2e2;
          color: #991b1b;
        }
        
        .availability-notes {
          font-size: 0.875rem;
          color: #6b7280;
          font-style: italic;
        }
        
        .description-card {
          grid-column: 1 / -1;
          margin-bottom: 24px;
        }
        
        .plan-description-text {
          font-size: 1rem;
          line-height: 1.6;
          color: #4b5563;
          margin: 0;
          word-wrap: break-word;
          overflow-wrap: break-word;
        }
        
        .amenities-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 12px;
        }
        
        .amenity-item {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 0;
        }
        
        .amenity-icon {
          color: #10b981;
          flex-shrink: 0;
        }
        
        .modal-footer-enhanced {
          padding: 24px 32px;
          border-top: 1px solid #e5e7eb;
          background: #f8fafc;
          border-radius: 0 0 16px 16px;
          display: flex;
          justify-content: center;
        }
        
        .btn-apply-enhanced {
          background: linear-gradient(135deg, ${widgetData.property?.widget_primary_color || '#007bff'} 0%, #0056b3 100%);
          color: white;
          border: none;
          padding: 16px 32px;
          border-radius: 12px;
          font-size: 1.125rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
          display: flex;
          align-items: center;
          gap: 8px;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        
        .btn-apply-enhanced:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        
        .btn-icon {
          flex-shrink: 0;
        }
        
        .plan-gallery {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 10px;
          margin-bottom: 20px;
        }
        
        .gallery-image {
          width: 100%;
          height: 150px;
          object-fit: cover;
          border-radius: 4px;
        }
        
        .plan-specs-detailed {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 10px;
          margin-bottom: 20px;
        }
        
        .spec-item {
          padding: 10px;
          background: #f8f9fa;
          border-radius: 4px;
        }
        
        .plan-amenities, .plan-appliances {
          margin-bottom: 20px;
        }
        
        .plan-amenities h4, .plan-appliances h4 {
          margin-bottom: 10px;
          color: ${widgetData.property?.widget_primary_color || '#007bff'};
        }
        
        .plan-amenities ul, .plan-appliances ul {
          list-style: none;
          padding: 0;
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 5px;
        }
        
        .plan-amenities li, .plan-appliances li {
          padding: 5px 0;
          border-bottom: 1px solid #eee;
        }
        
        .btn-apply-large {
          background: ${widgetData.property?.widget_primary_color || '#007bff'};
          color: white;
          border: none;
          padding: 12px 30px;
          border-radius: 4px;
          font-size: 16px;
          cursor: pointer;
          transition: background-color 0.2s;
        }
        
        .btn-apply-large:hover {
          background: #0056b3;
        }
        
        .no-results {
          text-align: center;
          padding: 40px;
          color: #666;
          font-size: 18px;
        }
        
        .loading {
          text-align: center;
          padding: 40px;
          font-size: 18px;
          color: #666;
        }
        
        .error {
          text-align: center;
          padding: 40px;
          color: #dc3545;
          font-size: 18px;
        }
        
        @media (max-width: 768px) {
          .property-availability-widget {
            padding: 10px;
          }
          
          .widget-filters {
            flex-direction: column;
            gap: 15px;
          }
          
          .unit-plans-container {
            grid-template-columns: 1fr;
          }
          
          .plan-actions {
            flex-direction: column;
          }
          
          .modal-content {
            width: 95%;
            margin: 10px;
            max-height: 95vh;
            overflow-y: auto;
          }
          
          .modal-content-enhanced {
            width: 95%;
            max-height: 95vh;
            margin: 10px;
          }
          
          .modal-body-enhanced {
            flex-direction: column;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
          }
          
          .modal-gallery-section {
            flex: none;
            max-width: 100%;
            border-right: none;
            border-bottom: 1px solid #e5e7eb;
            padding: 16px;
          }
          
          .modal-content-section {
            flex: none;
            max-width: 100%;
            padding: 16px;
            overflow-y: visible;
          }
          
          .plan-details-grid {
            grid-template-columns: 1fr;
            gap: 16px;
          }
          
          .plan-specs-detailed {
            grid-template-columns: 1fr;
          }
          
          .property-hero {
            flex-direction: column;
            gap: 1.5rem;
          }
          
          .property-contact {
            min-width: auto;
            width: 100%;
          }
          
          .modal-header-enhanced {
            padding: 16px;
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
          }
          
          .modal-header-actions {
            width: 100%;
            justify-content: space-between;
          }
          
          .modal-title {
            font-size: 1.5rem;
          }
          
          .modal-subtitle {
            font-size: 0.875rem;
          }
          
          .detail-image-enhanced {
            height: 250px;
          }
          
          [class*="detail-swiper-"] {
            height: 250px;
          }
          
          .amenities-grid {
            grid-template-columns: 1fr;
          }
        }
        .property-gallery-section {
    background: white;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  
  .property-gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid ${primaryColor};
  }
  
  .property-gallery-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: ${primaryColor};
    margin: 0;
  }
  
  .gallery-count {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
  }
  
  .property-gallery-swiper {
    width: 100%;
    max-width: 800px;
    height: 450px;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto 1rem;
    background: #f5f5f5;
    position: relative;
  }

  .property-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
  }

  .property-gallery-thumbs {
    max-width: 800px;
    height: 90px;
    margin: 10px auto 0;
    overflow: hidden;
  }

  .property-gallery-thumbs .swiper-slide {
    opacity: 0.6;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 80px;
  }

  .property-gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border-color: ${primaryColor};
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }

  .property-gallery-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Custom navigation buttons for property gallery */
  .property-gallery-next,
  .property-gallery-prev {
    background: rgba(255, 255, 255, 0.95) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

  .property-gallery-next:hover,
  .property-gallery-prev:hover {
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }

  .property-gallery-next::after,
  .property-gallery-prev::after {
    font-size: 18px !important;
    font-weight: 700;
    color: #333;
  }

  .property-gallery-pagination {
    bottom: 12px !important;
  }

  .property-gallery-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.7);
    opacity: 1;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
  }

  .property-gallery-pagination .swiper-pagination-bullet-active {
    background: ${primaryColor};
    border-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.2);
  }

  @media (max-width: 768px) {
    .property-gallery-section {
      padding: 1rem;
      margin-bottom: 1.5rem;
    }

    .property-gallery-swiper {
      height: 280px;
    }

    .property-gallery-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }

    .property-gallery-thumbs {
      height: 60px;
    }

    .property-gallery-thumbs .swiper-slide {
      border-radius: 6px;
      height: 55px;
    }
  }
      </style>
    `;
    
    document.head.insertAdjacentHTML('beforeend', styles);
  }

  async function initPropertyGallery(imageCount) {
  await loadSwiper();
  
  // Initialize thumbnail swiper if more than 1 image
  let propertyThumbs = null;
  if (imageCount > 1) {
    propertyThumbs = new Swiper('.property-gallery-thumbs', {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
      breakpoints: {
        320: { slidesPerView: 2 },
        480: { slidesPerView: 3 },
        640: { slidesPerView: 4 },
        768: { slidesPerView: 5 },
        1024: { slidesPerView: 6 }
      }
    });
    swiperInstances['property-thumbs'] = propertyThumbs;
  }

  // Initialize main property gallery swiper
  const galleryConfig = {
    spaceBetween: 0,
    navigation: {
      nextEl: '.property-gallery-next',
      prevEl: '.property-gallery-prev',
    },
    pagination: {
      el: '.property-gallery-pagination',
      clickable: true,
      dynamicBullets: true,
    },
    loop: imageCount > 1,
    keyboard: {
      enabled: true,
    },
    autoplay: imageCount > 1 ? {
      delay: 5000,
      disableOnInteraction: false,
    } : false,
    effect: 'fade',
    fadeEffect: {
      crossFade: true
    }
  };

  if (propertyThumbs) {
    galleryConfig.thumbs = { swiper: propertyThumbs };
  }

  const propertyGallery = new Swiper('.property-gallery-swiper', galleryConfig);
  
  swiperInstances['property-main'] = propertyGallery;
}

  // Initialize widget
  async function initWidget() {
    const container = document.getElementById('widget-container');
    if (!container) {
      console.error('Widget container not found');
      return;
    }

    // Show loading
    container.innerHTML = '<div class="loading">Loading property information...</div>';

    // Fetch data
    const data = await fetchPropertyData();
    if (!data) {
      container.innerHTML = '<div class="error">Failed to load property information. Please try again later.</div>';
      return;
    }

    widgetData.property = data.property;
    widgetData.unitPlans = data.unitPlans;
    widgetData.property.images = data.images;    

  // Inject styles (including property gallery styles)
  injectStyles();


    // Render widget
    const widget = createElement('div', 'property-availability-widget');
    
    // Property header
    widget.appendChild(renderPropertyHeader(widgetData.property));
    
    // Filters
    widget.appendChild(renderFilters());
    
    // Unit plans container
    const unitPlansContainer = createElement('div', 'unit-plans-container');
    widget.appendChild(unitPlansContainer);
    
    // Replace container content
    container.innerHTML = '';
    container.appendChild(widget);
    
    // Initial render of unit plans
    renderUnitPlans();
  }

  // Start the widget when DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initWidget);
  } else {
    initWidget();
  }

})();