// App: routing + tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": true,
  "theme": "dark"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState("home");

  // apply theme + accent tweaks
  React.useEffect(()=>{
    document.body.classList.toggle("light", tweaks.theme === "light");
    document.body.classList.toggle("no-accent", !tweaks.accent);
  }, [tweaks]);

  // intercept route clicks
  React.useEffect(()=>{
    const handler = (e)=>{
      const a = e.target.closest("[data-route]");
      if (!a) return;
      // Skip the dropdown trigger — its own handler manages open/close.
      if (a.getAttribute("data-prevent-route") === "1") return;
      e.preventDefault();
      const r = a.getAttribute("data-route");
      const fam = a.getAttribute("data-fam");
      // If a specific product family is targeted, write it to the URL hash
      // BEFORE switching route — ProductDetailApp reads the hash on mount.
      if (fam) {
        if (window.location.hash !== "#" + fam) {
          window.location.hash = fam;
        }
      }
      setRoute(r);
      window.scrollTo({top:0, behavior:"instant"});
    };
    document.addEventListener("click", handler);
    return ()=> document.removeEventListener("click", handler);
  }, []);

  // active nav state
  React.useEffect(()=>{
    document.querySelectorAll(".navlink").forEach(a=>{
      a.classList.toggle("active", a.getAttribute("data-route") === route);
    });
  }, [route]);

  const Page = {
    home: window.SiteHome,
    oplossingen: window.SiteOplossingen,
    situaties: window.SiteSituaties,
    "situatie-1": window.SiteSituatie1,
    "situatie-2": window.SiteSituatie2,
    "situatie-3": window.SiteSituatie3,
    "situatie-4": window.SiteSituatie4,
    producten: window.SiteProducten,
    control: window.SiteControl,
    over: window.SiteOver,
    contact: window.SiteContact,
  }[route] || window.SiteHome;

  const { TweaksPanel, TweakSection, TweakToggle, TweakRadio } = window;

  return (
    <>
      <Page/>
      <TweaksPanel title="Tweaks">
        <TweakSection title="Theme">
          <TweakRadio label="Canvas" value={tweaks.theme}
            options={[{label:"Dark",value:"dark"},{label:"Light",value:"light"}]}
            onChange={v=>setTweak("theme", v)}/>
          <TweakToggle label="Power Orange accent" value={tweaks.accent}
            onChange={v=>setTweak("accent", v)}/>
        </TweakSection>
        <TweakSection title="Navigate">
          <TweakRadio label="Pagina" value={route}
            options={[
              {label:"Home",value:"home"},
              {label:"Oplossingen",value:"oplossingen"},
              {label:"Situaties",value:"situaties"},
              {label:"Producten",value:"producten"},
              {label:"Control",value:"control"},
              {label:"Over",value:"over"},
              {label:"Contact",value:"contact"},
            ]}
            onChange={v=>setRoute(v)}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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