// data.tsx — types + menu loader
type Category = { id: string; label: string };
type MenuItem = {
  id: string;
  cat: string;
  name: string;
  jp: string;
  desc: string;
  price: number;
  badge?: string;
  image?: string;
};
type Special = {
  id: string;
  name: string;
  desc: string;
  price: number;
  image?: string;
  tag: string;
  days: string;
};
type MenuData = {
  currency: string;
  currencySymbol: string;
  categories: Category[];
  items: MenuItem[];
  specials: Special[];
};

declare global {
  interface Window {
    MENU_DATA: MenuData | null;
    useMenu: () => MenuData | null;
    HomePage: React.FC<{ goTo: (tab: string) => void }>;
    MenuPage: React.FC;
    BookPage: React.FC;
    PickupPage: React.FC;
  }
}

window.MENU_DATA = null;

// Hook: load menu.json once, share state across pages
const useMenu = (): MenuData | null => {
  const [data, setData] = React.useState<MenuData | null>(window.MENU_DATA);
  React.useEffect(() => {
    if (window.MENU_DATA) {
      setData(window.MENU_DATA);
      return;
    }
    fetch('menu.json')
      .then((r) => r.json() as Promise<MenuData>)
      .then((d) => {
        window.MENU_DATA = d;
        setData(d);
      })
      .catch((err) => console.error('Failed to load menu.json', err));
  }, []);
  return data;
};

window.useMenu = useMenu;