const TABS = [
  { label: 'Dashboard',   href: '/',            icon: 'layout-dashboard' },
  { label: 'Work Orders', href: '/work-orders',  icon: 'clipboard-list'  },
  { label: 'People',      href: '/registry/people', icon: 'users'        },
  { label: 'Reports',     href: '/reports',      icon: 'bar-chart-2'     },
];

class AppMobileNav extends HTMLElement {
  connectedCallback() {
    this.#render();
    window.addEventListener('hashchange', () => this.#render());
  }

  #render() {
    const path = decodeURIComponent(location.hash.slice(1)) || '/';
    this.innerHTML = `
      <style>
        app-mobile-nav a {
          flex: 1; display: flex; flex-direction: column; align-items: center;
          justify-content: center; gap: .2rem; text-decoration: none;
          color: var(--text-muted); font-size: .65rem; font-weight: 500;
          padding: .4rem; position: relative; transition: color .15s;
        }
        app-mobile-nav a.active { color: var(--teal); }
        app-mobile-nav a.active::after {
          content: ''; position: absolute; bottom: 0; left: 25%; right: 25%;
          height: 2px; background: var(--teal); border-radius: 1px;
        }
        app-mobile-nav a i { width: 20px; height: 20px; }
      </style>
      ${TABS.map(t => {
        const active = t.href === '/' ? path === '/' : path.startsWith(t.href);
        return `<a href="#${t.href}" class="${active ? 'active' : ''}">
          <i data-lucide="${t.icon}"></i>
          <span>${t.label}</span>
        </a>`;
      }).join('')}`;
    if (window.lucide) lucide.createIcons({ root: this });
  }
}
customElements.define('app-mobile-nav', AppMobileNav);