---
const { currentPath = '/' } = Astro.props;

const navItems = [
  { path: '/glv-dashboard-demo/', label: '📈 Hiệu Suất SEO', id: 'seo-perf' },
  { path: '/glv-dashboard-demo/geo-lab', label: '🤖 AI Search & GEO Lab', id: 'geo-lab' },
  { path: '/glv-dashboard-demo/market-intent', label: '🗺️ Thị Trường & Từ Khóa', id: 'market-intent' }
];

function isItemActive(itemPath, current) {
  if (current === '/' && itemPath.includes('index.html') && !itemPath.includes('geo') && !itemPath.includes('market')) return true;
  if (current.includes('geo-lab') && itemPath.includes('geo-lab')) return true;
  if (current.includes('market-intent') && itemPath.includes('market-intent')) return true;
  return false;
}
---

<nav class="global-nav">
  <div class="nav-container">
    {navItems.map((item) => {
      const active = isItemActive(item.path, currentPath);
      return (
        <a 
          href={item.path} 
          class={`nav-item ${active ? 'active' : ''}`}
          id={`nav-${item.id}`}
        >
          {item.label}
        </a>
      );
    })}
  </div>
</nav>