// Frangos — Menu page
function MenuLightbox({ onClose }) {
  React.useEffect(() => {
    const fn = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", fn);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", fn);
      document.body.style.overflow = "";
    };
  }, [onClose]);
  return (
    <div className="lightbox" onClick={onClose} role="dialog" aria-modal="true" aria-label="Full menu">
      <button className="lightbox-close" aria-label="Close" onClick={(e) => { e.stopPropagation(); onClose(); }}>✕</button>
      <div className="lightbox-content" onClick={(e) => e.stopPropagation()}>
        <img src="unnamed.webp" alt="Frangos full menu card"></img>
      </div>
    </div>
  );
}

function MenuItemCard({ item, index }) {
  const { t, lang, addToCart } = useApp();
  const [heat, setHeat] = React.useState(2);
  const [justAdded, setJustAdded] = React.useState(false);
  const add = () => {
    addToCart(item.id, item.heat ? heat : null);
    setJustAdded(true);
    setTimeout(() => setJustAdded(false), 1100);
  };
  return (
    <Reveal delay={(index % 3) * 80} className="mi-card">
      {item.img ? (
        <div className="mi-img"><img src={item.img} alt={item.name[lang]} loading="lazy"></img></div>
      ) : (
        <div className="mi-img mi-img-ph" aria-hidden="true"><Flame size={30} color="rgba(245,239,232,.25)"></Flame></div>
      )}
      <div className="mi-body">
        <div className="mi-row">
          <h3 className="mi-name">{item.name[lang]}</h3>
          <span className="price">{dh(item.price)}</span>
        </div>
        <p className="mi-desc">{item.desc[lang]}</p>
        {item.heat ? <HeatPicker compact value={heat} onChange={setHeat}></HeatPicker> : null}
        <button className={"btn btn-sm mi-add " + (justAdded ? "btn-accent" : "btn-outline")} onClick={add}>
          {justAdded ? t.menu.added + " ✓" : t.menu.add}
        </button>
      </div>
    </Reveal>
  );
}

function MenuPage() {
  const { t } = useApp();
  const [cat, setCat] = React.useState("grill");
  const [menuImgOpen, setMenuImgOpen] = React.useState(false);
  const items = MENU.filter((m) => m.cat === cat);
  return (
    <main className="page" data-screen-label="Menu">
      <header className="page-head">
        <div className="kicker"><Flame size={13} color="var(--accent)"></Flame><span>{t.nav.menu}</span></div>
        <h1 className="display page-title">{t.menu.title}</h1>
        <p className="section-sub">{t.menu.sub}</p>
      </header>
      <button className="menu-card-banner" onClick={() => setMenuImgOpen(true)} aria-label={t.menu.menuCard.cta}>
        <img className="menu-card-bg" src="unnamed.webp" alt="" aria-hidden="true"></img>
        <div className="menu-card-overlay">
          <div className="kicker"><Flame size={12} color="var(--ember)"></Flame><span>{t.menu.menuCard.kicker}</span></div>
          <span className="btn btn-light btn-sm">{t.menu.menuCard.cta}</span>
        </div>
      </button>
      {menuImgOpen && <MenuLightbox onClose={() => setMenuImgOpen(false)}></MenuLightbox>}
      <div className="cat-tabs-wrap">
        <div className="cat-tabs" role="tablist">
          {CAT_ORDER.map((c) => (
            <button key={c} role="tab" aria-selected={cat === c} className={"cat-tab" + (cat === c ? " on" : "")} onClick={() => setCat(c)}>
              {t.menu.cats[c]}
            </button>
          ))}
        </div>
      </div>
      <div className="mi-grid" key={cat}>
        {items.map((item, i) => (
          <MenuItemCard key={item.id} item={item} index={i}></MenuItemCard>
        ))}
      </div>
    </main>
  );
}

Object.assign(window, { MenuPage });