// App — top-level router + tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "red",
  "density": "editorial",
  "heroMode": "slider",
  "showDisclosure": true
}/*EDITMODE-END*/;

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

  // Apply tweaks to body data attrs
  useEffect(() => {
    document.body.setAttribute("data-accent", tweaks.accent);
    document.body.setAttribute("data-density", tweaks.density);
  }, [tweaks.accent, tweaks.density]);

  // Scroll to top on route change
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "auto" });
  }, [route]);

  const go = useCallback((r) => setRoute(r), []);
  window.DI_NAV = { go };

  let current = "home";
  if (route.startsWith("project:")) current = "projects";
  else current = route;

  const T = window;

  return (
    <>
      {tweaks.showDisclosure && (
        <div className="disclosure">
          Prototype · additive redesign demo · photography rights and named-client trademarks pending confirmation per <code style={{ background: "rgba(0,0,0,0.05)", padding: "0 0.3em" }}>research/media-manifest.md</code>
        </div>
      )}

      <Nav current={current} onNav={go} />

      <main>
        {route === "home" && <Home onNav={go} tweaks={tweaks} />}
        {route === "projects" && <Projects onNav={go} />}
        {route === "in-house" && <InHouse onNav={go} />}
        {route === "contact" && <Contact onNav={go} />}
        {route.startsWith("project:") && <CaseStudy slug={route.split(":")[1]} onNav={go} />}
      </main>

      <Footer onNav={go} />

      <div className="mobile-cta">
        <button className="btn btn--ghost-light" onClick={() => go("projects")} style={{ borderColor: "rgba(255,255,255,0.3)" }}>Projects</button>
        <button className="btn btn--accent" onClick={() => go("contact")}>Start a project <Arrow /></button>
      </div>

      {/* Tweaks panel */}
      {T.TweaksPanel && (
        <T.TweaksPanel title="Tweaks">
          <T.TweakSection label="Accent" />
          <T.TweakRadio
            label="Brand accent"
            value={tweaks.accent}
            options={[
              { value: "red", label: "Red" },
              { value: "bronze", label: "Bronze" },
              { value: "ink", label: "Ink" },
            ]}
            onChange={(v) => setTweak("accent", v)}
          />

          <T.TweakSection label="Layout" />
          <T.TweakRadio
            label="Density"
            value={tweaks.density}
            options={[
              { value: "compact", label: "Compact" },
              { value: "editorial", label: "Editorial" },
              { value: "spacious", label: "Spacious" },
            ]}
            onChange={(v) => setTweak("density", v)}
          />

          <T.TweakSection label="Hero" />
          <T.TweakRadio
            label="Hero treatment"
            value={tweaks.heroMode}
            options={[
              { value: "slider", label: "Slider" },
              { value: "still", label: "Still" },
              { value: "video", label: "Video" },
            ]}
            onChange={(v) => setTweak("heroMode", v)}
          />

          <T.TweakSection label="Demo" />
          <T.TweakToggle
            label="Rights disclosure bar"
            value={tweaks.showDisclosure}
            onChange={(v) => setTweak("showDisclosure", v)}
          />
        </T.TweaksPanel>
      )}
    </>
  );
}

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