// Host this on GitHub Pages or use raw.githubusercontent.com
(function() {
  // Configuration
  const WEBRING_DATA_URL = 'https://raw.githubusercontent.com/YOUR_USERNAME/YOUR_REPO/main/webring.json';
  const WEBRING_HOME = 'https://YOUR_USERNAME.github.io/YOUR_REPO/'; // Optional directory
  
  // Create widget
  const widget = document.createElement('div');
  widget.className = 'webring-widget';
  widget.innerHTML = `
    <style>
      .webring-widget {
        border: 1px solid #ccc;
        padding: 1rem;
        margin: 1rem 0;
        font-family: sans-serif;
        font-size: 14px;
      }
      .webring-links {
        display: flex;
        gap: 1rem;
        margin-top: 0.5rem;
      }
    </style>
    <strong>🌐 Webring Member</strong>
    <div class="webring-links">
      <span id="webring-prev">Loading...</span>
      <a href="#" id="webring-index">Index</a>
      <span id="webring-next">...</span>
    </div>
  `;
  
  // Find current site and insert navigation
  fetch(WEBRING_DATA_URL)
    .then(response => response.json())
    .then(data => {
      const currentUrl = window.location.origin + window.location.pathname;
      const sites = data.sites;
      
      // Find current site index
      let currentIndex = -1;
      for (let i = 0; i < sites.length; i++) {
        if (sites[i].url.includes(window.location.hostname) || 
            currentUrl.includes(sites[i].url.replace(/https?:\/\//, ''))) {
          currentIndex = i;
          break;
        }
      }
      
      if (currentIndex !== -1) {
        const prevIndex = (currentIndex - 1 + sites.length) % sites.length;
        const nextIndex = (currentIndex + 1) % sites.length;
        
        document.getElementById('webring-prev').innerHTML = 
          `<a href="${sites[prevIndex].url}">← ${sites[prevIndex].name}</a>`;
        
        document.getElementById('webring-index').href = 
          WEBRING_HOME || data.homepage || '#';
        
        document.getElementById('webring-next').innerHTML = 
          `<a href="${sites[nextIndex].url}">${sites[nextIndex].name} →</a>`;
      } else {
        widget.innerHTML = `<p>Join our webring!</p>`;
      }
    })
    .catch(err => {
      widget.innerHTML = `<p>Webring temporarily unavailable</p>`;
    });
  
  // Insert widget
  const target = document.querySelector('[data-webring]') || document.body;
  target.appendChild(widget);
})();