/* =========================================================================
   22 PATAGONIA SUSHI — app principal (carta premium · solo visualización)
   ========================================================================= */
const { useState, useEffect, useRef, useCallback } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headingFont": "Genjiro",
  "accent": "#B91C1C",
  "showEN": true
}/*EDITMODE-END*/;

const FONT_STACK = {
  "Genjiro": "'Genjiro', 'Shippori Mincho', serif",
  "Shippori Mincho": "'Shippori Mincho', serif",
  "Zen Old Mincho": "'Zen Old Mincho', serif",
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [scale, setScale] = useState(1);
  const [scrolled, setScrolled] = useState(false);
  const scrollRef = useRef(null);

  /* tweaks → CSS vars */
  useEffect(() => {
    const el = document.documentElement;
    el.style.setProperty("--red", t.accent);
    el.style.setProperty("--font-display", FONT_STACK[t.headingFont] || FONT_STACK["Genjiro"]);
  }, [t.accent, t.headingFont]);

  /* escalar el device al viewport */
  useEffect(() => {
    const fit = () => {
      const pad = 48;
      const s = Math.min((window.innerHeight - pad) / 874, (window.innerWidth - pad) / 402, 1.15);
      setScale(Math.max(0.4, s));
    };
    fit();
    window.addEventListener("resize", fit);
    return () => window.removeEventListener("resize", fit);
  }, []);

  /* topbar aparece tras pasar el hero */
  useEffect(() => {
    const sc = scrollRef.current;
    if (!sc) return;
    let raf = 0;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = 0;
        setScrolled(sc.scrollTop > 420);
      });
    };
    sc.addEventListener("scroll", onScroll, { passive: true });
    return () => sc.removeEventListener("scroll", onScroll);
  }, []);

  const goTo = useCallback((id) => {
    const sc = scrollRef.current;
    if (!sc) return;
    const h = sc.querySelector("#cat-" + id);
    if (!h) return;
    const scRect = sc.getBoundingClientRect();
    const top = h.getBoundingClientRect().top - scRect.top + sc.scrollTop - 92;
    sc.scrollTo({ top, behavior: "smooth" });
  }, []);

  const enClass = t.showEN ? "" : "no-en";

  return (
    <div className="stage">
      <div className="stage__bg"></div>
      <div className="stage__device" style={{ transform: `scale(${scale})` }}>
        <div className="full-screen">
          <div className={"screen " + enClass}>
            <TopBar solid={scrolled} />
            <div className="scroll" ref={scrollRef}>
              <Hero />
              <Explore cats={MENU} onPick={goTo} />
              <div className="menu__body">
                {MENU.map((c) => (
                  <section className="catsec" key={c.id}>
                    <SectionHeader cat={c} />
                    <div className="cards">
                      {c.items.map((i, idx) => (
                        <ProductCard key={i.id} item={i} index={idx} featured={c.featured} />
                      ))}
                    </div>
                  </section>
                ))}
                <footer className="menufoot">
                  <img className="menufoot__mark" src="assets/lantern-cream.png" alt="" />
                  <p className="menufoot__name">22 Patagonia Sushi</p>
                  <p className="menufoot__meta">{window.RESTAURANT.hours}</p>
                  <p className="menufoot__place">{window.RESTAURANT.city}</p>
                  <p className="menufoot__note">Carta de muestra · precios de ejemplo</p>
                </footer>
                <div className="menu__pad"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <TweaksPanel>
        <TweakSection label="Tipografía" />
        <TweakSelect label="Fuente títulos" value={t.headingFont}
          options={["Genjiro", "Shippori Mincho", "Zen Old Mincho"]}
          onChange={(v) => setTweak("headingFont", v)} />
        <TweakToggle label="Subtítulos en inglés" value={t.showEN}
          onChange={(v) => setTweak("showEN", v)} />
        <TweakSection label="Color" />
        <TweakColor label="Acento" value={t.accent}
          options={["#B91C1C", "#D9342B", "#9A1B1B", "#C2410C"]}
          onChange={(v) => setTweak("accent", v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);