const originalFeaturesData = [
  {icon:'shield-halved', color:'#0ff'},
  {icon:'user-secret', color:'#6efaff'},
  {icon:'envelope-open-text', color:'#91eaff'},
  {icon:'cloud', color:'#fd7cff'},
  {icon:'file-shield', color:'#fedd60'},
  {icon:'coins', color:'#41fdc2'},
  {icon:'eye-slash', color:'#a6fca8'},
  {icon:'users', color:'#dc9afd'},
];

const originalProductsData = [
  {color:'#0ff', data:[1,1,1,1,1,1,1,1]},
  {color:'#38bdf8', data:[1,1,0,0,0,0,0,1]},
  {color:'#8b5cf6', data:[1,1,0,0,0,0,0,0]},
];


let languageData = {};

async function fetchLanguageData(lang) {
    try {
        let response = await fetch(`/lang/${lang}/json/${lang}.json`);
        if (!response.ok) {
            console.error(`Failed to load language data for ${lang}: ${response.status}`);
            return null;
        }
        languageData = await response.json();
        return languageData;
    } catch (error) {
        console.error(`Error fetching language data for ${lang}:`, error);
        return null;
    }
}

function renderFeatures(data) {
  const container = document.getElementById('featuresContainer');
  container.innerHTML = '';

  data.features.forEach((feature, index) => {
    const featureRow = document.createElement('div');
    featureRow.className = 'feature-row grid grid-cols-4 gap-4 py-3 border-b border-gray-700/50';
    featureRow.id = `feature-${index}`;

    // Feature name
    const nameCell = document.createElement('div');
    nameCell.className = 'col-span-1 text-gray-300 text-right pr-4 flex items-center justify-end';
    const icon = originalFeaturesData[index].icon;
    const color = originalFeaturesData[index].color;
    nameCell.innerHTML = `<i class="fas fa-${icon} mr-2" style="color:${color}"></i>${feature.name}`;

    // BlackBox
    const bbCell = document.createElement('div');
    bbCell.className = 'col-span-1 text-center flex items-center justify-center';
    const bbData = originalProductsData[0].data[index];
    bbCell.innerHTML = bbData
      ? `<i class="fas fa-check-circle check-icon text-2xl text-cyan-400"></i>`
      : `<i class="fas fa-times-circle cross-icon text-xl text-gray-500"></i>`;


    // VPN Router
    const routerCell = document.createElement('div');
    routerCell.className = 'col-span-1 text-center flex items-center justify-center';
    const routerData = originalProductsData[1].data[index];
    routerCell.innerHTML = routerData
      ? `<i class="fas fa-check-circle check-icon text-xl text-blue-400 opacity-70"></i>`
      : `<i class="fas fa-times-circle cross-icon text-xl text-gray-500"></i>`;

    // VPN Service
    const vpnCell = document.createElement('div');
    vpnCell.className = 'col-span-1 text-center flex items-center justify-center';
    const vpnData = originalProductsData[2].data[index];
     vpnCell.innerHTML = vpnData
      ? `<i class="fas fa-check-circle check-icon text-xl text-purple-400 opacity-70"></i>`
      : `<i class="fas fa-times-circle cross-icon text-xl text-gray-500"></i>`;

    featureRow.appendChild(nameCell);
    featureRow.appendChild(bbCell);
    featureRow.appendChild(routerCell);
    featureRow.appendChild(vpnCell);
    container.appendChild(featureRow);
  });
}

function setupHoverEffects(data) {
  document.querySelectorAll('#featuresContainer > div').forEach((row, index) => {
    row.addEventListener('mouseenter', () => {
      // Update hint
      document.getElementById('dynCompareHint').innerHTML =
        `<i class="fas fa-lightbulb text-cyan-300"></i> <span class="font-semibold">${data.features[index].name}:</span> ${data.features[index].hint}`;
    });

    row.addEventListener('mouseleave', () => {
      // Clear hint
      document.getElementById('dynCompareHint').innerHTML = '';
    });
  });
}

document.addEventListener('DOMContentLoaded', async function() {
    const currentPath = window.location.pathname;
    const lang = currentPath.split('/')[1] || 'en'; // Get language from URL, default to 'en'

    const data = await fetchLanguageData(lang);
    if (data) {
        renderFeatures(data);
        setupHoverEffects(data);
    }
});