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

  // Routing — hash-based so refresh keeps you on the same page.
  const [route, setRoute] = React.useState(() => parseHash());
  const [lang, setLang] = React.useState(t.defaultLang || "nl");

  React.useEffect(() => {
    const onHash = () => setRoute(parseHash());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const navigate = React.useCallback((r) => {
    if (r.kind === "home") location.hash = "";
    else if (r.kind === "about") location.hash = "#/about";
    else if (r.kind === "project") location.hash = `#/work/${r.slug}`;
    window.scrollTo({ top: 0, behavior: "instant" });
  }, []);
  const openProject = (slug) => navigate({ kind: "project", slug });

  // Theme variables
  const themes = {
    "warm-light":  { bg: "#FCEFDF", fg: "#0c0c0c", accent: "#FF442C" },
    "ivory":       { bg: "#f4efe6", fg: "#28231b", accent: "#FF442C" },
    "gallery":     { bg: "#ffffff", fg: "#0c0c0c", accent: "#FF442C" },
    "ink":         { bg: "#141210", fg: "#ece6da", accent: "#FF442C" }
  };
  const theme = themes[t.theme] || themes["warm-light"];
  const dark = t.theme === "ink";

  // Type pairings
  const fonts = {
    "editorial":   { display: "'Cormorant Garamond', 'Times New Roman', Georgia, serif", body: "'Inter Tight', 'Helvetica Neue', system-ui, sans-serif" },
    "modern":      { display: "'Inter Tight', 'Helvetica Neue', system-ui, sans-serif", body: "'Inter Tight', 'Helvetica Neue', system-ui, sans-serif" },
    "warm":        { display: "'Fraunces', Georgia, serif", body: "'Work Sans', system-ui, sans-serif" }
  };
  const font = fonts[t.typography] || fonts.editorial;

  React.useEffect(() => {
    document.documentElement.style.setProperty("--bg", theme.bg);
    document.documentElement.style.setProperty("--fg", theme.fg);
    document.documentElement.style.setProperty("--accent", theme.accent);
    document.documentElement.style.setProperty("--font-display", font.display);
    document.documentElement.style.setProperty("--font-body", font.body);
  }, [theme, font]);

  return (
    <div style={{
      minHeight: "100vh", background: theme.bg, color: theme.fg,
      fontFamily: font.body,
      transition: "background .3s ease, color .3s ease"
    }}>
      <Nav route={route} lang={lang} setLang={setLang} onNav={navigate} accent={theme.accent} dark={dark} />
      {route.kind === "home" && (
        <Home lang={lang} layout={t.homeLayout} accent={theme.accent} onOpen={openProject} />
      )}
      {route.kind === "about" && (
        <About lang={lang} accent={theme.accent} />
      )}
      {route.kind === "project" && (
        <ProjectPage slug={route.slug} lang={lang} accent={theme.accent}
          onOpen={openProject} onBack={() => navigate({ kind: "home" })} />
      )}
      <Footer dark={dark} />

      <TweaksPanel title="Atelier Tweaks">
        <TweakSection label="Theme" />
        <TweakSelect label="Palette" value={t.theme}
          options={[
            { value: "warm-light", label: "Warm light (default)" },
            { value: "ivory",      label: "Ivory & rust" },
            { value: "gallery",    label: "Gallery white" },
            { value: "ink",        label: "Ink (dark)" }
          ]}
          onChange={(v) => setTweak("theme", v)} />
        <TweakSection label="Typography" />
        <TweakRadio label="Pairing" value={t.typography}
          options={[
            { value: "editorial", label: "Editorial" },
            { value: "modern",    label: "Modern" },
            { value: "warm",      label: "Warm" }
          ]}
          onChange={(v) => setTweak("typography", v)} />
        <TweakSection label="Homepage" />
        <TweakSelect label="Layout" value={t.homeLayout}
          options={[
            { value: "list",       label: "Text list" },
            { value: "list-hover", label: "List + hover preview" },
            { value: "grid",       label: "Grid of thumbnails" }
          ]}
          onChange={(v) => setTweak("homeLayout", v)} />
        <TweakSection label="Language" />
        <TweakRadio label="Default" value={t.defaultLang}
          options={[{ value: "nl", label: "Nederlands" }, { value: "en", label: "English" }]}
          onChange={(v) => { setTweak("defaultLang", v); setLang(v); }} />
      </TweaksPanel>
    </div>
  );
}

function parseHash() {
  const h = (location.hash || "").replace(/^#/, "");
  if (!h || h === "/") return { kind: "home" };
  const m = h.match(/^\/work\/([^/]+)$/);
  if (m) return { kind: "project", slug: m[1] };
  if (h === "/about") return { kind: "about" };
  return { kind: "home" };
}

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