window.GDD = window.GDD || {};

const GDD = window.GDD;
const { useState, useEffect } = React;

const NAV_SECTIONS = [
  {
    title: 'Documentation',
    items: [
      { id: 'overview', icon: '◈', label: 'Overview' },
      { id: 'architecture', icon: '⬡', label: 'Architecture' },
      { id: 'techstack', icon: '⟐', label: 'Tech Stack' },
      { id: 'backend', icon: '⊞', label: 'Backend Model' },
      { id: 'agents',   icon: '⏣', label: 'Agent Lifecycle' },
      { id: 'gameplay', icon: '◉', label: 'Gameplay Loop' },
      { id: 'ships', icon: '◇', label: 'Ships & Fitting' },
      { id: 'economy', icon: '⇄', label: 'Economy & Industry' },
      { id: 'social', icon: '✧', label: 'Progression & Social' },
      { id: 'ship-ai', icon: '◈', label: 'Ship AI — Zora' },
      { id: 'roadmap', icon: '⊞', label: 'Roadmap' },
      { id: 'risks', icon: '◬', label: 'Risks & Questions' },
      { id: 'demo-gallery', icon: '◈', label: 'Demo Gallery' },
    ]
  },
  {
    title: 'Interactive Demos',
    items: [
      { id: 'demo-starmap', icon: '✦', label: 'Star Map' },
      { id: 'demo-movement', icon: '→', label: 'Ship Movement' },
      { id: 'demo-combat', icon: '✸', label: 'Combat System' },
      { id: 'demo-market', icon: '⇄', label: 'Market' },
      { id: 'demo-fitting', icon: '⊞', label: 'Ship Fitting' },
      { id: 'demo-refining', icon: '⚗', label: 'Refining & MFG' },
      { id: 'demo-progression', icon: '▲', label: 'Skill Progression' },
      { id: 'demo-bounty', icon: '✸', label: 'Bounty & Kill Feed' },
      { id: 'demo-gamehud', icon: '◉', label: 'Game HUD' },
      { id: 'demo-chat', icon: '💬', label: 'Chat & Comms' },
      { id: 'demo-zora', icon: '🤖', label: 'Zora Tier 0' },
      { id: 'demo-galaxy', icon: '🌌', label: 'Galaxy Gen' },
    ]
  }
];

function Sidebar({ collapsed, currentPage, onNavigate, onToggle }) {
  const [hoveredItem, setHoveredItem] = useState(null);

  return (
    <aside className={`sidebar${collapsed ? ' collapsed' : ''}`}>
      <div className="sidebar-header">
        <div className="sidebar-logo">
          GDD<span className="logo-dot">::</span>DOCS
        </div>
      </div>
      <nav className="sidebar-nav">
        {NAV_SECTIONS.map((section, si) => (
          <div key={si}>
            <div className="nav-section-title">{section.title}</div>
            {section.items.map((item) => (
              <a
                key={item.id}
                className={`nav-item${currentPage === item.id ? ' active' : ''}`}
                href={`#${item.id}`}
                onClick={(e) => { e.preventDefault(); onNavigate(item.id); }}
                onMouseEnter={() => setHoveredItem(item.id)}
                onMouseLeave={() => setHoveredItem(null)}
              >
                <span className="nav-icon">{item.icon}</span>
                <span className="nav-label">{item.label}</span>

              </a>
            ))}
          </div>
        ))}
      </nav>
    </aside>
  );
}

GDD.Sidebar = Sidebar;