How to modify this code so it uses data.csv and not the sample: // Application State
let appState = {
  rawData: [],
  filteredData: [],
  currentPage: 1,
  itemsPerPage: 50,
  totalPages: 0,
  activeFilters: {
    search: '',
    consultancy: '',
    tags: new Set(),
    sort: 'high-to-low'
  },
  currentView: 'upload', // 'upload', 'explorer', 'detail'
  currentDetailItem: null
};

// Sample data for demonstration
const sampleData = [
  {
    "Name": "European Tech Alliance",
    "Acronym": "ETA",
    "Website URL": "https://eurotech-alliance.eu",
    "Goals": "Promoting digital innovation and technology adoption across European Union member states through policy advocacy and industry collaboration.",
    "EU legislative proposals/policies": "Actively involved in shaping the Digital Services Act, AI Act, and Data Governance Act. Provides expert consultation on emerging technology regulations and standards.",
    "Number of EP accredited Person": "12",
    "Field of interest": "Digital Policy,Artificial Intelligence,Data Protection,Innovation",
    "AI Prediction": "87",
    "Annual cost for register activity or total budget": "€2,500,000",
    "Have a consultancy": "Yes",
    "Name of consultancy": "TechPolicy Consulting Group"
  },
  {
    "Name": "Green Energy Coalition",
    "Acronym": "GEC",
    "Website URL": "https://green-energy-coalition.org",
    "Goals": "Advancing renewable energy adoption and sustainable practices throughout Europe while supporting climate neutrality goals by 2050.",
    "EU legislative proposals/policies": "Leading advocate for the European Green Deal implementation, Renewable Energy Directive updates, and carbon border adjustment mechanisms.",
    "Number of EP accredited Person": "8",
    "Field of interest": "Climate Change,Renewable Energy,Environmental Policy,Sustainability",
    "AI Prediction": "92",
    "Annual cost for register activity or total budget": "€1,800,000",
    "Have a consultancy": "No",
    "Name of consultancy": ""
  },
  {
    "Name": "Healthcare Innovation Network",
    "Acronym": "HIN",
    "Website URL": "https://healthcare-innovation.eu",
    "Goals": "Improving healthcare delivery through digital transformation, medical device innovation, and cross-border healthcare coordination.",
    "EU legislative proposals/policies": "Contributing to Medical Device Regulation implementation, European Health Data Space development, and pharmaceutical strategy initiatives.",
    "Number of EP accredited Person": "15",
    "Field of interest": "Healthcare,Digital Health,Medical Devices,Pharmaceuticals",
    "AI Prediction": "78",
    "Annual cost for register activity or total budget": "€3,200,000",
    "Have a consultancy": "Yes",
    "Name of consultancy": "HealthTech Advisory Services"
  },
  {
    "Name": "Financial Services Forum",
    "Acronym": "FSF",
    "Website URL": "https://financial-services-forum.eu",
    "Goals": "Ensuring stable and innovative financial markets while protecting consumer interests and promoting financial inclusion across the EU.",
    "EU legislative proposals/policies": "Engaged in MiCA regulation development, Digital Finance Strategy, and Banking Union completion discussions.",
    "Number of EP accredited Person": "20",
    "Field of interest": "Financial Services,Digital Currency,Banking,Consumer Protection",
    "AI Prediction": "85",
    "Annual cost for register activity or total budget": "€4,100,000",
    "Have a consultancy": "Yes",
    "Name of consultancy": "FinTech Policy Solutions"
  },
  {
    "Name": "Agricultural Sustainability Network",
    "Acronym": "ASN",
    "Website URL": "https://agri-sustainability.eu",
    "Goals": "Supporting sustainable agriculture practices, food security, and rural development while adapting to climate change challenges.",
    "EU legislative proposals/policies": "Active in Common Agricultural Policy reform, Farm to Fork Strategy implementation, and sustainable agriculture transition support.",
    "Number of EP accredited Person": "6",
    "Field of interest": "Agriculture,Food Security,Rural Development,Climate Adaptation",
    "AI Prediction": "74",
    "Annual cost for register activity or total budget": "€1,200,000",
    "Have a consultancy": "No",
    "Name of consultancy": ""
  }
];

// DOM Elements
let elements = {};

// Initialize Application
function init() {
  cacheElements();
  setupEventListeners();
  setupRouter();
  loadSampleData();
}

// Cache DOM elements
function cacheElements() {
  elements = {
    // Loading
    loadingOverlay: document.getElementById('loading-overlay'),
    progressFill: document.getElementById('progress-fill'),
    progressText: document.getElementById('progress-text'),
    
    // Upload Section
    uploadSection: document.getElementById('upload-section'),
    dropZone: document.getElementById('drop-zone'),
    fileInput: document.getElementById('file-input'),
    browseBtn: document.getElementById('browse-btn'),
    
    // Explorer Section
    explorerSection: document.getElementById('explorer-section'),
    uploadNewBtn: document.getElementById('upload-new-btn'),
    searchInput: document.getElementById('search-input'),
    consultancyFilter: document.getElementById('consultancy-filter'),
    sortSelect: document.getElementById('sort-select'),
    clearFiltersBtn: document.getElementById('clear-filters'),
    activeTagsContainer: document.getElementById('active-tags-container'),
    cardsContainer: document.getElementById('cards-container'),
    currentRange: document.getElementById('current-range'),
    totalCount: document.getElementById('total-count'),
    
    // Pagination
    paginationContainer: document.getElementById('pagination-container'),
    prevBtn: document.getElementById('prev-btn'),
    nextBtn: document.getElementById('next-btn'),
    pageNumbers: document.getElementById('page-numbers'),
    
    // Detail Section
    detailSection: document.getElementById('detail-section'),
    backBtn: document.getElementById('back-btn'),
    detailContent: document.getElementById('detail-content')
  };
}

// Setup Event Listeners
function setupEventListeners() {
  // File Upload
  elements.browseBtn.addEventListener('click', () => elements.fileInput.click());
  elements.fileInput.addEventListener('change', handleFileSelect);
  elements.dropZone.addEventListener('click', () => elements.fileInput.click());
  
  // Drag and Drop
  elements.dropZone.addEventListener('dragover', handleDragOver);
  elements.dropZone.addEventListener('dragleave', handleDragLeave);
  elements.dropZone.addEventListener('drop', handleFileDrop);
  
  // Navigation
  elements.uploadNewBtn.addEventListener('click', () => showView('upload'));
  elements.backBtn.addEventListener('click', () => showView('explorer'));
  
  // Filters and Search
  elements.searchInput.addEventListener('input', handleSearch);
  elements.consultancyFilter.addEventListener('change', handleConsultancyFilter);
  elements.sortSelect.addEventListener('change', handleSort);
  elements.clearFiltersBtn.addEventListener('click', clearAllFilters);
  
  // Pagination
  elements.prevBtn.addEventListener('click', () => changePage(appState.currentPage - 1));
  elements.nextBtn.addEventListener('click', () => changePage(appState.currentPage + 1));
}

// Router Setup
function setupRouter() {
  window.addEventListener('hashchange', handleRouteChange);
  handleRouteChange();
}

function handleRouteChange() {
  const hash = window.location.hash;
  if (hash.startsWith('#/detail/')) {
    const itemId = hash.replace('#/detail/', '');
    showDetailPage(parseInt(itemId));
  } else if (hash === '#/explorer') {
    showView('explorer');
  } else {
    showView('upload');
  }
}

// File Handling
function handleDragOver(e) {
  e.preventDefault();
  elements.dropZone.classList.add('drag-over');
}

function handleDragLeave(e) {
  e.preventDefault();
  elements.dropZone.classList.remove('drag-over');
}

function handleFileDrop(e) {
  e.preventDefault();
  elements.dropZone.classList.remove('drag-over');
  const files = e.dataTransfer.files;
  if (files.length > 0) {
    processFile(files[0]);
  }
}

function handleFileSelect(e) {
  const file = e.target.files[0];
  if (file) {
    processFile(file);
  }
}

function processFile(file) {
  if (!file.name.toLowerCase().endsWith('.csv')) {
    alert('Please select a CSV file.');
    return;
  }
  
  if (file.size > 50 * 1024 * 1024) { // 50MB
    if (!confirm('This file is quite large. Processing may take some time. Continue?')) {
      return;
    }
  }
  
  showLoading(true);
  parseCSVFile(file);
}

function parseCSVFile(file) {
  const reader = new FileReader();
  reader.onload = function(e) {
    const text = e.target.result;
    const lines = text.split('\n').filter(line => line.trim());
    
    if (lines.length < 2) {
      showError('CSV file appears to be empty or invalid.');
      return;
    }
    
    // Parse CSV with progress simulation
    const headers = parseCSVLine(lines[0]);
    const data = [];
    const totalLines = lines.length - 1;
    
    // Simulate progressive parsing for large files
    let processed = 0;
    const batchSize = 1000;
    
    function processBatch() {
      const endIndex = Math.min(processed + batchSize, totalLines);
      
      for (let i = processed + 1; i <= endIndex; i++) {
        if (i < lines.length) {
          const values = parseCSVLine(lines[i]);
          const record = {};
          headers.forEach((header, index) => {
            record[header] = values[index] || '';
          });
          data.push(record);
        }
      }
      
      processed = endIndex;
      const progress = (processed / totalLines) * 100;
      updateProgress(progress);
      
      if (processed < totalLines) {
        setTimeout(processBatch, 10); // Allow UI to update
      } else {
        finishProcessing(data);
      }
    }
    
    processBatch();
  };
  
  reader.onerror = function() {
    showError('Error reading file.');
  };
  
  reader.readAsText(file);
}

function parseCSVLine(line) {
  const result = [];
  let current = '';
  let inQuotes = false;
  
  for (let i = 0; i < line.length; i++) {
    const char = line[i];
    
    if (char === '"') {
      inQuotes = !inQuotes;
    } else if (char === ',' && !inQuotes) {
      result.push(current.trim());
      current = '';
    } else {
      current += char;
    }
  }
  
  result.push(current.trim());
  return result.map(field => field.replace(/^"(.*)"$/, '$1'));
}

function finishProcessing(data) {
  appState.rawData = data;
  applyFilters();
  showLoading(false);
  showView('explorer');
  window.location.hash = '#/explorer';
}

function loadSampleData() {
  // Pre-load sample data for demonstration without showing loading
  appState.rawData = [...sampleData];
  applyFilters();
  
  // Show explorer view if there's sample data and no hash route
  if (!window.location.hash || window.location.hash === '#/') {
    showView('explorer');
    window.location.hash = '#/explorer';
  }
}

// Loading States
function showLoading(show) {
  elements.loadingOverlay.classList.toggle('hidden', !show);
  if (!show) {
    elements.progressFill.style.width = '0%';
    elements.progressText.textContent = '0%';
  }
}

function updateProgress(percent) {
  elements.progressFill.style.width = percent + '%';
  elements.progressText.textContent = Math.round(percent) + '%';
}

function showError(message) {
  showLoading(false);
  alert(message); // In production, use a proper modal
}

// View Management
function showView(view) {
  appState.currentView = view;
  
  elements.uploadSection.classList.toggle('hidden', view !== 'upload');
  elements.explorerSection.classList.toggle('hidden', view !== 'explorer');
  elements.detailSection.classList.toggle('hidden', view !== 'detail');
  
  if (view === 'explorer') {
    renderCurrentPage();
  }
}

// Filtering and Search
function handleSearch(e) {
  appState.activeFilters.search = e.target.value.toLowerCase().trim();
  applyFilters();
}

function handleConsultancyFilter(e) {
  appState.activeFilters.consultancy = e.target.value;
  applyFilters();
}

function handleSort(e) {
  appState.activeFilters.sort = e.target.value;
  applyFilters();
}

function handleTagClick(tag) {
  if (appState.activeFilters.tags.has(tag)) {
    appState.activeFilters.tags.delete(tag);
  } else {
    appState.activeFilters.tags.add(tag);
  }
  applyFilters();
  updateActiveTagsDisplay();
}

function removeTagFilter(tag) {
  appState.activeFilters.tags.delete(tag);
  applyFilters();
  updateActiveTagsDisplay();
}

function clearAllFilters() {
  appState.activeFilters = {
    search: '',
    consultancy: '',
    tags: new Set(),
    sort: 'high-to-low'
  };
  
  elements.searchInput.value = '';
  elements.consultancyFilter.value = '';
  elements.sortSelect.value = 'high-to-low';
  
  applyFilters();
  updateActiveTagsDisplay();
}

function applyFilters() {
  let filtered = [...appState.rawData];
  
  // Apply search filter
  if (appState.activeFilters.search) {
    filtered = filtered.filter(item => {
      const searchableText = Object.values(item).join(' ').toLowerCase();
      return searchableText.includes(appState.activeFilters.search);
    });
  }
  
  // Apply consultancy filter
  if (appState.activeFilters.consultancy) {
    filtered = filtered.filter(item => 
      item['Have a consultancy'] === appState.activeFilters.consultancy
    );
  }
  
  // Apply tag filters
  if (appState.activeFilters.tags.size > 0) {
    filtered = filtered.filter(item => {
      const itemTags = (item['Field of interest'] || '').toLowerCase().split(',').map(tag => tag.trim());
      return Array.from(appState.activeFilters.tags).every(filterTag => 
        itemTags.some(itemTag => itemTag.includes(filterTag.toLowerCase()))
      );
    });
  }
  
  // Apply sorting
  filtered.sort((a, b) => {
    const scoreA = parseInt(a['AI Prediction']) || 0;
    const scoreB = parseInt(b['AI Prediction']) || 0;
    
    if (appState.activeFilters.sort === 'high-to-low') {
      return scoreB - scoreA;
    } else {
      return scoreA - scoreB;
    }
  });
  
  appState.filteredData = filtered;
  appState.totalPages = Math.ceil(filtered.length / appState.itemsPerPage);
  appState.currentPage = 1;
  
  updateUI();
}

function updateUI() {
  updateCounts();
  updatePagination();
  renderCurrentPage();
}

// Rendering
function renderCurrentPage() {
  const startIndex = (appState.currentPage - 1) * appState.itemsPerPage;
  const endIndex = startIndex + appState.itemsPerPage;
  const pageData = appState.filteredData.slice(startIndex, endIndex);
  
  elements.cardsContainer.innerHTML = '';
  
  if (pageData.length === 0) {
    elements.cardsContainer.innerHTML = `
      <div class="empty-state">
        <div class="empty-state-icon">📭</div>
        <h3>No results found</h3>
        <p>Try adjusting your search or filter criteria</p>
      </div>
    `;
    return;
  }
  
  pageData.forEach((item, index) => {
    const card = createCard(item, startIndex + index);
    elements.cardsContainer.appendChild(card);
  });
}

function createCard(item, index) {
  const card = document.createElement('div');
  card.className = 'data-card fade-in';
  card.addEventListener('click', () => showDetailPage(index));
  
  const tags = (item['Field of interest'] || '').split(',').map(tag => tag.trim()).filter(tag => tag);
  const predictionScore = parseInt(item['AI Prediction']) || 0;
  const predictionPercentage = predictionScore;
  
  let predictionClass = 'prediction-low';
  if (predictionScore >= 80) predictionClass = 'prediction-high';
  else if (predictionScore >= 60) predictionClass = 'prediction-medium';
  
  const hasConsultancy = item['Have a consultancy'] === 'Yes';
  
  card.innerHTML = `
    <div class="card-header">
      <h3 class="card-title">${escapeHtml(item.Name || 'Unnamed Organization')}</h3>
      ${item.Acronym ? `<div class="card-acronym">${escapeHtml(item.Acronym)}</div>` : ''}
    </div>
    
    <div class="card-body">
      ${hasConsultancy ? '<div class="consultancy-badge">Has Consultancy</div>' : ''}
      
      <div class="card-tags">
        ${tags.map(tag => `
          <span class="tag" onclick="event.stopPropagation(); handleTagClick('${escapeHtml(tag)}')">${escapeHtml(tag)}</span>
        `).join('')}
      </div>
      
      <div class="prediction-container">
        <div class="prediction-label">
          <span>AI Prediction</span>
          <span class="prediction-score">${predictionScore}/100</span>
        </div>
        <div class="prediction-bar">
          <div class="prediction-fill ${predictionClass}" style="width: ${predictionPercentage}%"></div>
        </div>
      </div>
    </div>
  `;
  
  return card;
}

// Detail Page
function showDetailPage(index) {
  const item = appState.filteredData[index];
  if (!item) return;
  
  appState.currentDetailItem = item;
  window.location.hash = `#/detail/${index}`;
  showView('detail');
  renderDetailPage(item);
}

function renderDetailPage(item) {
  const tags = (item['Field of interest'] || '').split(',').map(tag => tag.trim()).filter(tag => tag);
  const predictionScore = parseInt(item['AI Prediction']) || 0;
  
  let predictionClass = 'prediction-low';
  if (predictionScore >= 80) predictionClass = 'prediction-high';
  else if (predictionScore >= 60) predictionClass = 'prediction-medium';
  
  elements.detailContent.innerHTML = `
    <div class="detail-header">
      <h1 class="detail-title">${escapeHtml(item.Name || 'Unnamed Organization')}</h1>
      ${item.Acronym ? `<div class="detail-acronym">${escapeHtml(item.Acronym)}</div>` : ''}
      ${item['Website URL'] ? `
        <a href="${escapeHtml(item['Website URL'])}" target="_blank" class="detail-website">
          🌐 Visit Website
        </a>
      ` : ''}
    </div>
    
    <div class="detail-sections">
      <div class="detail-section-card">
        <h2 class="section-title">📋 Basic Information</h2>
        <div class="section-content">
          ${item.Goals ? `
            <div class="detail-field">
              <div class="field-label">Goals</div>
              <div class="field-value">${escapeHtml(item.Goals)}</div>
            </div>
          ` : ''}
          
          ${item['EU legislative proposals/policies'] ? `
            <div class="detail-field">
              <div class="field-label">EU Legislative Proposals/Policies</div>
              <div class="field-value">${escapeHtml(item['EU legislative proposals/policies'])}</div>
            </div>
          ` : ''}
        </div>
      </div>
      
      <div class="detail-section-card">
        <h2 class="section-title">📊 Statistics & Classification</h2>
        <div class="section-content">
          ${item['Number of EP accredited Person'] ? `
            <div class="detail-field">
              <div class="field-label">Number of EP Accredited Persons</div>
              <div class="field-value">${escapeHtml(item['Number of EP accredited Person'])}</div>
            </div>
          ` : ''}
          
          <div class="detail-field">
            <div class="field-label">AI Prediction Score</div>
            <div class="score-display">
              <div class="score-number">${predictionScore}/100</div>
              <div class="score-bar">
                <div class="score-fill ${predictionClass}" style="width: ${predictionScore}%"></div>
              </div>
            </div>
          </div>
          
          ${tags.length > 0 ? `
            <div class="detail-field">
              <div class="field-label">Field of Interest</div>
              <div class="detail-tags">
                ${tags.map(tag => `<span class="detail-tag">${escapeHtml(tag)}</span>`).join('')}
              </div>
            </div>
          ` : ''}
          
          ${item['Annual cost for register activity or total budget'] ? `
            <div class="detail-field">
              <div class="field-label">Annual Cost/Total Budget</div>
              <div class="field-value">${escapeHtml(item['Annual cost for register activity or total budget'])}</div>
            </div>
          ` : ''}
        </div>
      </div>
      
      <div class="detail-section-card">
        <h2 class="section-title">🏢 Consultancy Information</h2>
        <div class="section-content">
          <div class="detail-field">
            <div class="field-label">Has Consultancy</div>
            <div class="field-value">
              <span class="status ${item['Have a consultancy'] === 'Yes' ? 'status--success' : 'status--info'}">
                ${item['Have a consultancy'] || 'No'}
              </span>
            </div>
          </div>
          
          ${item['Name of consultancy'] ? `
            <div class="detail-field">
              <div class="field-label">Consultancy Name</div>
              <div class="field-value">${escapeHtml(item['Name of consultancy'])}</div>
            </div>
          ` : ''}
        </div>
      </div>
    </div>
  `;
}

// Pagination
function changePage(page) {
  if (page < 1 || page > appState.totalPages) return;
  appState.currentPage = page;
  updatePagination();
  renderCurrentPage();
  
  // Scroll to top
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

function updatePagination() {
  elements.prevBtn.disabled = appState.currentPage <= 1;
  elements.nextBtn.disabled = appState.currentPage >= appState.totalPages;
  
  renderPageNumbers();
}

function renderPageNumbers() {
  elements.pageNumbers.innerHTML = '';
  
  if (appState.totalPages <= 1) return;
  
  const maxVisiblePages = 7;
  let startPage = Math.max(1, appState.currentPage - Math.floor(maxVisiblePages / 2));
  let endPage = Math.min(appState.totalPages, startPage + maxVisiblePages - 1);
  
  if (endPage - startPage < maxVisiblePages - 1) {
    startPage = Math.max(1, endPage - maxVisiblePages + 1);
  }
  
  if (startPage > 1) {
    addPageButton(1);
    if (startPage > 2) {
      elements.pageNumbers.appendChild(createEllipsis());
    }
  }
  
  for (let i = startPage; i <= endPage; i++) {
    addPageButton(i);
  }
  
  if (endPage < appState.totalPages) {
    if (endPage < appState.totalPages - 1) {
      elements.pageNumbers.appendChild(createEllipsis());
    }
    addPageButton(appState.totalPages);
  }
}

function addPageButton(page) {
  const button = document.createElement('button');
  button.className = `page-btn ${page === appState.currentPage ? 'active' : ''}`;
  button.textContent = page;
  button.addEventListener('click', () => changePage(page));
  elements.pageNumbers.appendChild(button);
}

function createEllipsis() {
  const span = document.createElement('span');
  span.textContent = '...';
  span.className = 'page-ellipsis';
  return span;
}

// UI Updates
function updateCounts() {
  const start = appState.filteredData.length === 0 ? 0 : (appState.currentPage - 1) * appState.itemsPerPage + 1;
  const end = Math.min(appState.currentPage * appState.itemsPerPage, appState.filteredData.length);
  
  elements.currentRange.textContent = appState.filteredData.length === 0 ? '0' : `${start}-${end}`;
  elements.totalCount.textContent = appState.filteredData.length;
}

function updateActiveTagsDisplay() {
  elements.activeTagsContainer.innerHTML = '';
  
  Array.from(appState.activeFilters.tags).forEach(tag => {
    const tagElement = document.createElement('span');
    tagElement.className = 'active-tag';
    tagElement.innerHTML = `
      ${escapeHtml(tag)}
      <button onclick="removeTagFilter('${escapeHtml(tag)}')" aria-label="Remove ${escapeHtml(tag)} filter">×</button>
    `;
    elements.activeTagsContainer.appendChild(tagElement);
  });
}

// Utility Functions
function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

// Global Functions (for onclick handlers)
window.handleTagClick = handleTagClick;
window.removeTagFilter = removeTagFilter;

// Initialize Application
document.addEventListener('DOMContentLoaded', init);