// ============================================================
// Aroos Damascus — Menu screen
// ============================================================

function MenuScreen({ setRoute }) {
  const { lang } = useLang();
  const [activeCat, setActiveCat] = useState("all");

  const scrollToCat = (id) => {
    setActiveCat(id);
    if (id === "all") {
      window.scrollTo({ top: 0, behavior: "smooth" });
      return;
    }
    const el = document.getElementById(`cat-${id}`);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  return (
    <>
      <section className="menu-hero container">
        <span className="eyebrow">{lang === "en" ? "Menu" : "القائمة"}</span>
        <h1 className="display" style={{ marginTop: 16 }}>
          {lang === "en" ? "On the table tonight." : "على الطاولة الليلة."}
          <span className="alt-locale">
            {lang === "en" ? "على الطاولة الليلة." : "On the table tonight."}
          </span>
        </h1>
        <p className="lede" style={{ marginTop: 24, maxWidth: "44ch", marginInline: "auto" }}>
          {lang === "en"
            ? "Real prices in dirhams. Real Arabic. ✦ marks a house signature."
            : "أسعار حقيقية بالدرهم. عربية حقيقية. علامة ✦ للأطباق المميّزة."}
        </p>

        <div className="menu-toc">
          <button className={activeCat === "all" ? "on" : ""} onClick={() => scrollToCat("all")}>
            {lang === "en" ? "All" : "الكل"}
          </button>
          {MENU.map((cat) => (
            <button
              key={cat.id}
              className={activeCat === cat.id ? "on" : ""}
              onClick={() => scrollToCat(cat.id)}
            >
              {pick(cat.title, lang)}
            </button>
          ))}
        </div>
      </section>

      <div className="container">
        {MENU.map((cat) => (
          <div key={cat.id} id={`cat-${cat.id}`} className="menu-category">
            <div className="menu-category-head">
              <TrayIcon className="tray" />
              <div>
                <h2 className="display">
                  {pick(cat.title, lang)}
                  <span className="ar">{pick(cat.title, lang === "en" ? "ar" : "en")}</span>
                </h2>
                <p className="blurb">{pick(cat.blurb, lang)}</p>
              </div>
            </div>

            <div className="dish-grid">
              {cat.items.map((item) => {
                const enName = item.en;
                const arName = item.ar;
                return (
                  <div className="dish-row" key={enName}>
                    <div>
                      <div className="dish-name">
                        <span className="en">{lang === "en" ? enName : arName}</span>
                        <span className="ar">{lang === "en" ? arName : enName}</span>
                        {item.star && <span className="star" title="Signature">✦</span>}
                        {item.family && (
                          <span className="family-tag">{lang === "en" ? "For the table" : "للطاولة"}</span>
                        )}
                      </div>
                      {item.desc && (
                        <p className="dish-desc">{pick(item.desc, lang)}</p>
                      )}
                    </div>
                    <div className="dish-price">
                      <span className="aed">AED</span>{item.price}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        ))}

        <p className="menu-disclaimer">
          {lang === "en"
            ? "Prices indicative — confirmed at the table. The complimentary basket of fresh vegetables, herbs, olives and pickles arrives before you order."
            : "الأسعار استرشادية — تُؤكَّد على الطاولة. سلّة الخضار والأعشاب والزيتون والمخلل تصل قبل الطلب."}
        </p>

        <BuildAFeastSection setRoute={setRoute} />

        <div style={{ marginBlock: 80, textAlign: "center" }}>
          <button className="btn primary lg" onClick={() => setRoute("reserve")}>
            {pick(COPY.cta.reserve, lang)} <ArrowRight />
          </button>
        </div>
      </div>
    </>
  );
}

window.MenuScreen = MenuScreen;