marmarislocal/public/widget.js

(function() {
  const currentScript = document.currentScript;
  if (!currentScript) return;

  const neighborhood = currentScript.getAttribute('data-neighborhood') || '';
  const theme = currentScript.getAttribute('data-theme') || 'light';
  
  // Extract base URL of the running script dynamically
  const scriptUrl = currentScript.src;
  const baseUrl = new URL(scriptUrl).origin;

  if (!neighborhood) {
    console.error('Marmaris Local Widget: data-neighborhood parameter is missing.');
    return;
  }

  // Create widget container element
  const container = document.createElement('div');
  container.className = 'marmaris-local-widget-wrapper';
  currentScript.parentNode.insertBefore(container, currentScript);

  // Inject CSS Styles
  const style = document.createElement('style');
  style.textContent = `
    .marmaris-local-widget-wrapper {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      border: 1px solid ${theme === 'dark' ? '#254449' : '#12323815'};
      background-color: ${theme === 'dark' ? '#123238' : '#FBFAF6'};
      color: ${theme === 'dark' ? '#FBFAF6' : '#123238'};
      border-radius: 16px;
      padding: 20px;
      box-sizing: border-box;
      max-width: 100%;
      margin: 15px 0;
      box-shadow: 0 4px 12px rgba(18, 50, 56, 0.04);
    }
    .marmaris-local-widget-header {
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .marmaris-local-widget-header h4 {
      margin: 0;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: -0.02em;
      text-transform: lowercase;
      color: ${theme === 'dark' ? '#FBFAF6' : '#123238'};
    }
    .marmaris-local-widget-header h4 span {
      color: #39C3C3;
    }
    .marmaris-local-widget-header .neighborhood-badge {
      font-size: 10px;
      font-weight: 700;
      font-family: monospace;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #D23B68;
      background-color: rgba(210, 59, 104, 0.06);
      padding: 3px 8px;
      border-radius: 99px;
      border: 1px solid rgba(210, 59, 104, 0.1);
    }
    .marmaris-local-widget-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      margin-bottom: 14px;
    }
    .marmaris-local-widget-card {
      display: flex;
      flex-direction: column;
      text-decoration: none;
      background: ${theme === 'dark' ? '#254449' : '#FFFFFF'};
      border: 1px solid ${theme === 'dark' ? '#ffffff10' : '#12323808'};
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.2s ease-in-out;
      box-sizing: border-box;
    }
    .marmaris-local-widget-card:hover {
      transform: translateY(-2px);
      border-color: rgba(57, 195, 195, 0.35);
      box-shadow: 0 4px 10px rgba(18, 50, 56, 0.06);
    }
    .marmaris-local-widget-card-image {
      aspect-ratio: 16 / 10;
      width: 100%;
      background: #12323810;
      position: relative;
      overflow: hidden;
    }
    .marmaris-local-widget-card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
    .marmaris-local-widget-card:hover .marmaris-local-widget-card-image img {
      transform: scale(1.03);
    }
    .marmaris-local-widget-card-content {
      padding: 12px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .marmaris-local-widget-card-category {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #D23B68;
      margin-bottom: 4px;
    }
    .marmaris-local-widget-card-title {
      font-size: 13px;
      font-weight: 700;
      color: ${theme === 'dark' ? '#FBFAF6' : '#123238'};
      margin: 0 0 6px 0;
      line-height: 1.25;
      text-transform: lowercase;
    }
    .marmaris-local-widget-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11px;
      font-family: monospace;
      color: ${theme === 'dark' ? '#FBFAF680' : '#12323865'};
      border-top: 1px dashed ${theme === 'dark' ? '#ffffff10' : '#12323808'};
      padding-top: 8px;
      margin-top: 8px;
    }
    .marmaris-local-widget-card-footer .stars {
      color: #FFB020;
      font-weight: bold;
    }
    .marmaris-local-widget-card-footer .price {
      color: ${theme === 'dark' ? '#FBFAF6' : '#123238'};
      font-weight: bold;
    }
    .marmaris-local-widget-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid ${theme === 'dark' ? '#ffffff10' : '#12323810'};
      padding-top: 12px;
      font-size: 10px;
      font-weight: 600;
      color: ${theme === 'dark' ? '#FBFAF650' : '#12323850'};
    }
    .marmaris-local-widget-footer a {
      color: inherit;
      text-decoration: underline;
      transition: color 0.15s;
    }
    .marmaris-local-widget-footer a:hover {
      color: #39C3C3;
    }
  `;
  document.head.appendChild(style);

  // Fetch nearby approved listings
  fetch(`${baseUrl}/api/widget/nearby?neighborhood=${encodeURIComponent(neighborhood)}`)
    .then(res => res.json())
    .then(data => {
      const listings = data.listings || [];
      
      if (listings.length === 0) {
        container.style.display = 'none';
        return;
      }

      // Render Header
      let html = `
        <div class="marmaris-local-widget-header">
          <h4>yakında <span>nerede yenir?</span></h4>
          <span class="neighborhood-badge">${neighborhood}</span>
        </div>
        <div class="marmaris-local-widget-grid">
      `;

      // Render Cards
      listings.slice(0, 3).forEach(item => {
        const itemUrl = `${baseUrl}/${item.categorySlug}/${item.slug}`;
        html += `
          <a href="${itemUrl}" target="_blank" class="marmaris-local-widget-card">
            <div class="marmaris-local-widget-card-image">
              <img src="${item.coverImage}" alt="${item.name}">
            </div>
            <div class="marmaris-local-widget-card-content">
              <div>
                <div class="marmaris-local-widget-card-category">${item.categoryName}</div>
                <h5 class="marmaris-local-widget-card-title">${item.name.toLowerCase()}</h5>
              </div>
              <div class="marmaris-local-widget-card-footer">
                <span class="price">${item.priceSymbols}</span>
                ${item.rating ? `<span class="stars">★ ${item.rating.toFixed(1)}</span>` : ''}
              </div>
            </div>
          </a>
        `;
      });

      // Render Footer Stamp (Mandatory visibility for search quality guidelines)
      html += `
        </div>
        <div class="marmaris-local-widget-footer">
          <span>yerel öneriler</span>
          <span>detaylar <a href="${baseUrl}" target="_blank">marmaris local</a>\\'de</span>
        </div>
      `;

      container.innerHTML = html;
    })
    .catch(err => {
      console.error('Marmaris Local Widget load error:', err);
      container.style.display = 'none';
    });
})();