/* eslint-disable */
// Phone navigation mirrors the five Chairside destinations in the sidebar.
(function () {
  const { useEffect, useState } = React;

  const TABS = [
    { id: "home", label: "Home", href: "index.html" },
    { id: "learn", label: "Learn", href: "Chairside.html#view=home" },
    { id: "practice", label: "Practice", href: "Chairside-Roles.html#view=practice" },
    { id: "progress", label: "Progress", href: "Chairside-My-Practice.html" },
    { id: "add-ons", label: "Add-ons", href: "index.html#add-ons" },
  ];

  function NavIcon({ id, color }) {
    const common = { stroke: color, strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" };
    return (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        {id === "home" && <><path d="M3 11.5 12 4l9 7.5" {...common} /><path d="M5.5 10.5V20h13v-9.5M9.5 20v-6h5v6" {...common} /></>}
        {id === "learn" && <><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H11a2 2 0 0 1 2 2v16a2.5 2.5 0 0 0-2.5-2.5H4z" {...common} /><path d="M20 5.5A2.5 2.5 0 0 0 17.5 3H13v18a2.5 2.5 0 0 1 2.5-2.5H20z" {...common} /></>}
        {id === "practice" && <><path d="M21 12a8 8 0 0 1-8 8H6l-3 2 1-4.5A8 8 0 1 1 21 12Z" {...common} /><path d="M8 12h.01M12 12h.01M16 12h.01" {...common} /></>}
        {id === "progress" && <><path d="M4 19V9M10 19V5M16 19v-7M22 19H2" {...common} /></>}
        {id === "add-ons" && <><rect x="3" y="3" width="7" height="7" rx="1" {...common} /><rect x="14" y="3" width="7" height="7" rx="1" {...common} /><rect x="3" y="14" width="7" height="7" rx="1" {...common} /><path d="M17.5 14v7M14 17.5h7" {...common} /></>}
      </svg>
    );
  }

  function detectCurrentTab() {
    if (typeof window === "undefined") return null;
    const path = window.location.pathname.toLowerCase();
    const hash = window.location.hash.toLowerCase();
    if (path.includes("chairside-my-practice")) return "progress";
    if (path.includes("chairside-roles")) return "practice";
    if (path.endsWith("chairside.html")) return "learn";
    if (path === "/" || path.endsWith("index.html")) return hash.includes("add-ons") ? "add-ons" : "home";
    return null;
  }

  function BottomTabBar() {
    const [currentTab, setCurrentTab] = useState(detectCurrentTab);

    useEffect(() => {
      const sync = () => setCurrentTab(detectCurrentTab());
      window.addEventListener("popstate", sync);
      window.addEventListener("hashchange", sync);
      return () => {
        window.removeEventListener("popstate", sync);
        window.removeEventListener("hashchange", sync);
      };
    }, []);

    return (
      <nav className="bottom-tab-bar" aria-label="Primary" style={{
        position: "fixed", bottom: 0, left: 0, right: 0,
        zIndex: "var(--z-sticky, 100)",
        background: "var(--color-bg, #0E0D0B)",
        borderTop: "1px solid var(--color-hairline, rgba(201,166,90,0.3))",
        paddingBottom: "max(var(--space-2, 8px), env(safe-area-inset-bottom))",
        paddingTop: "var(--space-2, 8px)",
      }}>
        <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", alignItems: "stretch" }}>
          {TABS.map((tab) => {
            const active = currentTab === tab.id;
            const color = active ? "var(--color-gold, #C9A65A)" : "var(--color-text-muted, rgba(232,220,192,0.6))";
            return (
              <li key={tab.id} style={{ flex: 1, minWidth: 0 }}>
                <a href={tab.href} aria-current={active ? "page" : undefined} style={{
                  minHeight: "var(--touch-target-comfortable, 48px)",
                  padding: "var(--space-1, 4px) 2px",
                  display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2,
                  color, fontFamily: "var(--font-ui, system-ui, sans-serif)", fontSize: 10, letterSpacing: 0,
                  textDecoration: "none", whiteSpace: "nowrap",
                }}>
                  <NavIcon id={tab.id} color={color} />
                  <span>{tab.label}</span>
                </a>
              </li>
            );
          })}
        </ul>
      </nav>
    );
  }

  const styleEl = document.createElement("style");
  styleEl.textContent = `
    .bottom-tab-bar { display: block; }
    @media (min-width: 640px) { .bottom-tab-bar { display: none; } }
    @media (max-width: 639px) {
      body { padding-bottom: calc(var(--touch-target-comfortable, 48px) + var(--space-6, 24px) + env(safe-area-inset-bottom)); }
    }
  `;
  document.head.appendChild(styleEl);

  const container = document.createElement("div");
  container.id = "praxia-bottom-tab-bar";
  document.body.appendChild(container);
  ReactDOM.createRoot(container).render(React.createElement(BottomTabBar));
  window.BottomTabBar = BottomTabBar;
})();