/* Vito's Wings — App shell, top nav, footer */

function App() {
  const [screen, setScreen] = useState(() => {
    if (typeof window !== "undefined" && new URLSearchParams(window.location.search).get("admin") === "1") return "kitchen";
    return "home";
  });
  const [lang, setLang] = useState(() => localStorage.getItem("vw_lang") || "es");
  const [cart, setCart] = useState(() => {
    try { return JSON.parse(localStorage.getItem("vw_cart") || "[]"); } catch { return []; }
  });
  const [cartOpen, setCartOpen] = useState(false);
  const [activeItem, setActiveItem] = useState(null);
  const [mobileNav, setMobileNav] = useState(false);

  useEffect(() => { localStorage.setItem("vw_lang", lang); }, [lang]);
  useEffect(() => { localStorage.setItem("vw_cart", JSON.stringify(cart)); }, [cart]);

  function goto(s) {
    setScreen(s);
    setMobileNav(false);
    window.scrollTo({ top: 0, behavior: "instant" });
  }

  function openItem(it) { setActiveItem(it); }
  function closeItem() { setActiveItem(null); }
  function addToCart(line) {
    setCart(c => [...c, line]);
    setActiveItem(null);
    setCartOpen(true);
  }

  const cartCount = cart.reduce((s, l) => s + l.qty, 0);

  // Kitchen dashboard is a fullscreen takeover — no nav, no footer
  if (screen === "kitchen") {
    return <ScreenKitchen lang={lang} exit={() => { setScreen("home"); window.history.replaceState({}, "", window.location.pathname); }} />;
  }

  const navItems = [
    { id: "menu",     k: "nav_menu" },
    { id: "ai",       k: "nav_ai" },
    { id: "find",     k: "nav_find" },
    { id: "catering", k: "nav_catering" },
    { id: "loyalty",  k: "nav_loyalty" },
    { id: "account",  k: "nav_account" },
  ];

  return (
    <div style={{ background: "#F6F4EF", color: "#0A0A0A", minHeight: "100vh", fontFamily: "'DM Sans', sans-serif" }}>
      {/* ============ TOP NAV ============ */}
      <header style={{
        position: "sticky", top: 0, zIndex: 50,
        background: "#F6F4EF", borderBottom: "1px solid #0A0A0A",
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "14px 6vw", gap: 20 }}>
          <button onClick={() => goto("home")} style={{ appearance: "none", border: 0, background: "transparent", cursor: "pointer", display: "flex", alignItems: "center", gap: 10, padding: 0 }}>
            <img src="assets/vitos-icon.png" alt="Vito" style={{ height: 32 }} />
            <span style={{ fontFamily: "'Anton', sans-serif", fontSize: 22, letterSpacing: "0.08em" }}>VITO&rsquo;S WINGS</span>
          </button>

          <nav className="vw-desk-nav" style={{ display: "flex", gap: 22, fontSize: 12, letterSpacing: "0.16em", fontWeight: 600 }}>
            {navItems.map(n => (
              <button key={n.id} onClick={() => goto(n.id)} style={{
                appearance: "none", border: 0, background: "transparent", cursor: "pointer",
                color: screen === n.id ? "#E63426" : "#0A0A0A",
                fontFamily: "'DM Sans', sans-serif", fontSize: 12, letterSpacing: "0.16em", fontWeight: 700,
                padding: "4px 0", position: "relative",
              }}>
                {t(n.k, lang).toUpperCase()}
                {screen === n.id && <span style={{ position: "absolute", left: 0, right: 0, bottom: -3, height: 2, background: "#E63426" }} />}
              </button>
            ))}
          </nav>

          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{ display: "flex", gap: 6, fontSize: 12, letterSpacing: "0.1em", fontWeight: 700 }}>
              <button onClick={() => setLang("es")} style={{ appearance: "none", border: 0, background: "transparent", color: lang === "es" ? "#0A0A0A" : "rgba(10,10,10,0.4)", cursor: "pointer", fontFamily: "'DM Sans', sans-serif", fontWeight: 700, padding: 0 }}>ES</button>
              <span style={{ opacity: 0.3 }}>/</span>
              <button onClick={() => setLang("en")} style={{ appearance: "none", border: 0, background: "transparent", color: lang === "en" ? "#0A0A0A" : "rgba(10,10,10,0.4)", cursor: "pointer", fontFamily: "'DM Sans', sans-serif", fontWeight: 700, padding: 0 }}>EN</button>
            </div>
            <button onClick={() => setCartOpen(true)} style={{
              appearance: "none", background: "#0A0A0A", color: "#F6F4EF", border: 0,
              padding: "10px 16px", cursor: "pointer", fontFamily: "'Anton', sans-serif",
              letterSpacing: "0.14em", fontSize: 13, display: "flex", alignItems: "center", gap: 8,
              position: "relative",
            }}>
              <span>{t("view_cart", lang).toUpperCase()}</span>
              <span style={{
                background: "#E63426", color: "#F6F4EF",
                borderRadius: "50%", width: 22, height: 22, minWidth: 22,
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontSize: 12, fontFamily: "'DM Sans', sans-serif", fontWeight: 700,
              }}>{cartCount}</span>
            </button>
            <button onClick={() => setMobileNav(true)} className="vw-mobile-only" style={{
              appearance: "none", border: "1px solid #0A0A0A", background: "transparent",
              padding: 8, cursor: "pointer", display: "none",
            }} aria-label="Menu">☰</button>
          </div>
        </div>
      </header>

      {/* MOBILE NAV OVERLAY */}
      {mobileNav && (
        <div style={{
          position: "fixed", inset: 0, zIndex: 100, background: "#0A0A0A", color: "#F6F4EF",
          padding: "32px 6vw", display: "flex", flexDirection: "column", gap: 20,
          animation: "vwFade 0.2s",
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <span style={{ fontFamily: "'Anton', sans-serif", fontSize: 22, letterSpacing: "0.08em" }}>VITO&rsquo;S WINGS</span>
            <button onClick={() => setMobileNav(false)} style={{ appearance: "none", border: "1px solid #F6F4EF", background: "transparent", color: "#F6F4EF", width: 40, height: 40, cursor: "pointer", fontFamily: "'Anton', sans-serif" }}>✕</button>
          </div>
          {navItems.map(n => (
            <button key={n.id} onClick={() => goto(n.id)} style={{
              appearance: "none", border: 0, background: "transparent", color: "#F6F4EF",
              fontFamily: "'Anton', sans-serif", fontSize: 36, textAlign: "left",
              letterSpacing: "0.04em", padding: "8px 0", cursor: "pointer",
            }}>{t(n.k, lang).toUpperCase()}</button>
          ))}
        </div>
      )}

      {/* ============ SCREEN ROUTER ============ */}
      <main>
        {screen === "home"     && <ScreenHome     lang={lang} goto={goto} openItem={openItem} />}
        {screen === "menu"     && <ScreenMenu     lang={lang} openItem={openItem} />}
        {screen === "story"    && <ScreenStory    lang={lang} />}
        {screen === "mission"  && <ScreenMission  lang={lang} />}
        {screen === "ai"       && <ScreenAI       lang={lang} openItem={openItem} />}
        {screen === "find"     && <ScreenFind     lang={lang} />}
        {screen === "catering" && <ScreenCatering lang={lang} />}
        {screen === "loyalty"  && <ScreenLoyalty  lang={lang} />}
        {screen === "account"  && <ScreenAccount  lang={lang} goto={goto} />}
        {screen === "checkout" && <ScreenCheckout lang={lang} cart={cart} setCart={setCart} goto={goto} />}
      </main>

      {/* ============ FOOTER ============ */}
      <footer style={{ background: "#0A0A0A", color: "#F6F4EF", padding: "60px 6vw 20px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 36, paddingBottom: 40, borderBottom: "1px solid rgba(246,244,239,0.18)" }} className="vw-footer-grid">
          <div>
            <img src="assets/vitos-icon.png" alt="" style={{ height: 64, filter: "invert(1)" }} />
            <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 28, letterSpacing: "0.06em", marginTop: 8 }}>VITO&rsquo;S WINGS</div>
            <p style={{ fontSize: 13, opacity: 0.7, marginTop: 8, maxWidth: 320, lineHeight: 1.6 }}>
              {lang === "es" ? "Hechas a mano, bañadas con cariño, supervisadas por un pug en Plaza Macuelizo, Tegucigalpa." : "Handmade, lovingly sauced, supervised by a pug. Plaza Macuelizo, Tegucigalpa."}
            </p>
          </div>
          <FooterCol title={lang === "es" ? "MENÚ" : "MENU"}>
            <FooterLink onClick={() => goto("menu")}>{lang === "es" ? "Ver menú" : "View menu"}</FooterLink>
            <FooterLink onClick={() => goto("catering")}>{lang === "es" ? "Catering" : "Catering"}</FooterLink>
            <FooterLink onClick={() => goto("account")}>Vito&rsquo;s Club</FooterLink>
          </FooterCol>
          <FooterCol title={lang === "es" ? "VISITA" : "VISIT"}>
            <FooterLink onClick={() => goto("find")}>Plaza Macuelizo</FooterLink>
            <FooterLink onClick={() => goto("find")}>+504 9216-9788</FooterLink>
            <FooterLink href="https://instagram.com/vitoswings">@vitoswings</FooterLink>
          </FooterCol>
          <FooterCol title={lang === "es" ? "AI LAB" : "AI LAB"}>
            <FooterLink onClick={() => goto("ai")}>{t("ai_pair", lang)}</FooterLink>
            <FooterLink onClick={() => goto("ai")}>{t("ai_combo", lang)}</FooterLink>
            <FooterLink onClick={() => goto("ai")}>{t("ai_voice", lang)}</FooterLink>
          </FooterCol>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", padding: "20px 0 0", fontSize: 11, letterSpacing: "0.16em", color: "rgba(246,244,239,0.5)", textTransform: "uppercase" }}>
          <span>© 2026 Vito&rsquo;s Wings · Tegucigalpa, HN</span>
          <span>
            <button onClick={() => setScreen("kitchen")} style={{ appearance: "none", border: 0, background: "transparent", color: "rgba(246,244,239,0.5)", cursor: "pointer", textTransform: "uppercase", letterSpacing: "0.16em", fontSize: 11, padding: 0, marginRight: 16 }}>🔑 KITCHEN</button>
            {lang === "es" ? "Hecho con grasa y cariño" : "Made with grease and love"}
          </span>
        </div>
      </footer>

      {/* Item detail modal */}
      <ItemDetail item={activeItem} lang={lang} onClose={closeItem} onAdd={addToCart} />

      {/* Cart drawer */}
      <CartDrawer open={cartOpen} onClose={() => setCartOpen(false)} cart={cart} setCart={setCart} lang={lang} goto={goto} />
    </div>
  );
}

function FooterCol({ title, children }) {
  return (
    <div>
      <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 14, letterSpacing: "0.22em", color: "#E63426", marginBottom: 12, fontWeight: 700 }}>{title}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>{children}</div>
    </div>
  );
}

function FooterLink({ children, onClick, href }) {
  if (href) return <a href={href} target="_blank" rel="noopener" style={{ color: "#F6F4EF", textDecoration: "none", fontSize: 13, opacity: 0.85 }}>{children}</a>;
  return <button onClick={onClick} style={{ appearance: "none", border: 0, background: "transparent", color: "#F6F4EF", textAlign: "left", padding: 0, cursor: "pointer", fontFamily: "'DM Sans', sans-serif", fontSize: 13, opacity: 0.85 }}>{children}</button>;
}

/* ===== Precios EN VIVO desde el POS EmprendamosPOS ===== */
(function () {
  function norm(s){ return String(s==null?"":s).toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"").trim().replace(/\s+/g," "); }
  var ALIAS = { "ensalada caesar":"Caesar Salad","30 nuggets":"Nuggets 30 und","50 nuggets":"Nuggets 50 und","75 nuggets":"Nuggets 75 und","100 nuggets":"Nuggets 100 und","te lipton":"Lipton","7 up":"7up","cerveza nacional":"Nacional","jarra de sangria":"Jarra Sangria","copa de sangria":"Copa Sangria","cafe americano":"Cafe Americano","cheeseburger + papas":"Cheeseburger","natural":"Limonada","vito's especial":"Vito's Keto Especial" };
  function mount(){ ReactDOM.createRoot(document.getElementById("root")).render(<App />); }
  function applyLive(map){
    try {
      var nmap={}; Object.keys(map).forEach(function(k){ nmap[norm(k)] = map[k]; });
      function look(name){ if(name==null) return null; var n=norm(name); if(nmap[n]!=null) return nmap[n]; var a=ALIAS[n]; if(a!=null && nmap[norm(a)]!=null) return nmap[norm(a)]; return null; }
      (window.VW_MENU||[]).forEach(function(cat){ (cat.items||[]).forEach(function(it){
        if(it.price!=null){ var p=look(it.es); if(p!=null) it.price=p; }
        if(it.sizes){ it.sizes.forEach(function(s){ var p=look(it.es+" "+s.k+" und"); if(p==null) p=look(it.es+" "+s.k); if(p!=null) s.p=p; }); }
      }); });
    } catch(e){}
  }
  var done=false; function go(){ if(done) return; done=true; mount(); }
  try { fetch("https://app.emprendamospos.com/api/menu/vitoswings").then(function(r){return r.json();}).then(function(d){ if(d&&d.ok&&d.data) applyLive(d.data); }).catch(function(){}).finally(go); } catch(e){ go(); }
  setTimeout(go, 2500);
})();