// App entry — routing + tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "tandoor",
  "density": "comfortable",
  "showFAB": true
}/*EDITMODE-END*/;

function App() {
  const [page, setPage] = React.useState(() => (location.hash || "#" + (window.__BYTESGLUE_SHOWCASE_ROUTE || "home")).slice(1));
  const [scrolled, setScrolled] = React.useState(false);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const onHash = () => setPage((location.hash || "#home").slice(1));
    window.addEventListener("hashchange", onHash);
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => { window.removeEventListener("hashchange", onHash); window.removeEventListener("scroll", onScroll); };
  }, []);

  const navTo = (p) => {
    location.hash = p;
    setPage(p);
    window.scrollTo({ top: 0, behavior: "auto" });
  };

  // accent-aware css var override
  React.useEffect(() => {
    const root = document.documentElement;
    const map = {
      tandoor: { tandoor: "#B33A1A", paprika: "#8A2A12" },
      saffron: { tandoor: "#C56A14", paprika: "#A14A0E" },
      pomegranate: { tandoor: "#922344", paprika: "#6F1A33" },
    };
    const v = map[tweaks.accent] || map.tandoor;
    root.style.setProperty("--tandoor", v.tandoor);
    root.style.setProperty("--paprika", v.paprika);
    root.setAttribute("data-density", tweaks.density);
  }, [tweaks.accent, tweaks.density]);

  const PageMap = {
    home: <HomePage setPage={navTo} />,
    story: <StoryPage setPage={navTo} />,
    menu: <MenuPage />,
    branches: <BranchesPage />,
    catering: <CateringPage setPage={navTo} />,
    "karachi-grill": <GrillPage />,
    order: <OrderPage setPage={navTo} />,
    press: <PressPage />,
  };

  return (
    <div className="kdr-app">
      <Nav page={page} setPage={navTo} scrolled={scrolled} />
      <div key={page} className="page-fade">{PageMap[page] || PageMap.home}</div>
      <Footer setPage={navTo} />
      {tweaks.showFAB && <WhatsAppFab />}
      <KdrTweaks tweaks={tweaks} setTweak={setTweak} />
    </div>
  );
}

function SslBanner() { return null; /* removed per request */ }

const ACCENT_HEX = { tandoor: "#B33A1A", saffron: "#C56A14", pomegranate: "#922344" };
function KdrTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand accent">
        <TweakColor
          label="Primary"
          value={ACCENT_HEX[tweaks.accent]}
          options={Object.values(ACCENT_HEX)}
          onChange={(hex) => {
            const key = Object.keys(ACCENT_HEX).find(k => ACCENT_HEX[k] === hex) || "tandoor";
            setTweak("accent", key);
          }}
        />
      </TweakSection>
      <TweakSection label="Density">
        <TweakRadio
          label="Density"
          value={tweaks.density}
          options={["comfortable", "compact"]}
          onChange={(v) => setTweak("density", v)}
        />
      </TweakSection>
      <TweakSection label="WhatsApp FAB">
        <TweakToggle label="Show floating action" value={tweaks.showFAB} onChange={(v) => setTweak("showFAB", v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

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