/* OTHER BURGER — app root */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "green",
  "headline": "NO BAD BURGERS",
  "glow": 100,
  "motion": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const r = document.documentElement;
    r.setAttribute("data-accent", t.accent === "violet" ? "violet" : "green");
    r.setAttribute("data-motion", t.motion ? "on" : "off");
    const g = (t.glow ?? 100) / 100;
    const limeGlow = `rgba(211,224,82,${(0.40 * g).toFixed(3)})`;
    const violetGlow = `rgba(160,121,245,${(0.45 * g).toFixed(3)})`;
    r.style.setProperty("--accent-glow", t.accent === "violet" ? violetGlow : limeGlow);
  }, [t.accent, t.glow, t.motion]);

  // reveal-on-scroll
  useEffect(() => {
    const obs = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); obs.unobserve(e.target); } });
    }, { rootMargin: "0px 0px -8% 0px", threshold: 0.08 });
    const run = () => document.querySelectorAll(".reveal:not(.in)").forEach((el) => obs.observe(el));
    run();
    const id = setTimeout(run, 120);
    return () => { clearTimeout(id); obs.disconnect(); };
  });

  // safety pass for any lucide placeholders
  useEffect(() => { if (window.lucide) window.lucide.createIcons(); });

  return (
    <>
      <Nav />
      <main>
        <Hero headline={t.headline} />
        <Marquee />
        <Story />
        <Menu data={window.OB_MENU} />
        <OrderCTA />
      </main>
      <Footer />
      <OrderFab />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Cor de destaque" />
        <TweakColor label="Accent" value={t.accent === "violet" ? "#7b52d6" : "#d3e052"}
          options={["#d3e052", "#7b52d6"]}
          onChange={(v) => setTweak("accent", v === "#7b52d6" ? "violet" : "green")} />
        <TweakSection label="Hero" />
        <TweakText label="Título" value={t.headline} onChange={(v) => setTweak("headline", v)} />
        <TweakSection label="Atmosfera" />
        <TweakSlider label="Brilho neon" value={t.glow} min={0} max={180} unit="%" onChange={(v) => setTweak("glow", v)} />
        <TweakToggle label="Animações" value={t.motion} onChange={(v) => setTweak("motion", v)} />
      </TweaksPanel>
    </>
  );
}

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