const sections = {
  drive: 'drive/drive.html',
  tasks: 'tasks/tasks.html',
  mail: 'mail/mail.html',
  dashboard: 'dashboard/dashboard.html',
  editor: 'editor/editor.html',
  player: 'player/player.html',
  paper: 'paper/paper.html',
  settings: 'settings/settings.html',
  tables: 'tablesv2/tables.html',
  news: 'news/news.html'
};

async function loadSectionHTML(path) {
  const response = await fetch(path);
  if (!response.ok) throw new Error('Failed to load section');
  return await response.text();
}

async function switchSection(section) {
  const mainContent = document.getElementById('main-content');
  
  try {
    const html = await loadSectionHTML(sections[section]);
    mainContent.innerHTML = html;
    window.history.pushState({}, '', `#${section}`);
    Alpine.initTree(mainContent);
  } catch (err) {
    console.error('Error loading section:', err);
    mainContent.innerHTML = `<div class="error">Failed to load ${section} section</div>`;
  }
}

// Handle initial load based on URL hash
window.addEventListener('DOMContentLoaded', () => {
  const initialSection = window.location.hash.substring(1) || 'drive';
  switchSection(initialSection);
});

// Handle browser back/forward navigation
window.addEventListener('popstate', () => {
  const section = window.location.hash.substring(1) || 'drive';
  switchSection(section);
});