/* ============================================================
   Main app — hash routing + Tweaks
   ============================================================ */

function parseHash() {
  const h = (window.location.hash || "#home").replace(/^#/, "");
  const [route, focus] = h.split("/");
  return { route: route || "home", focus: focus || null };
}

function App() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "mode": "paper",
    "accent": "ember",
    "density": "comfortable",
    "showTicker": true
  }/*EDITMODE-END*/;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const [{ route, focus }, setLoc] = useState(parseHash());
  const [ucFocus, setUcFocus] = useState(focus || "financial");

  // hash sync
  useEffect(() => {
    const onHash = () => {
      const parsed = parseHash();
      setLoc(parsed);
      if (parsed.route === "use-cases" && parsed.focus) setUcFocus(parsed.focus);
      window.scrollTo({ top: 0, behavior: "auto" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const go = (next, sub) => {
    const newHash = sub ? `#${next}/${sub}` : `#${next}`;
    if (next === "use-cases" && sub) setUcFocus(sub);
    if (window.location.hash !== newHash) {
      window.location.hash = newHash;
    } else {
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
  };

  // mode + accent on document
  useEffect(() => {
    document.documentElement.setAttribute("data-mode", t.mode);
    document.documentElement.setAttribute("data-accent", t.accent);
  }, [t.mode, t.accent]);

  const renderRoute = () => {
    switch (route) {
      case "use-cases":
        return <UseCases go={go} focus={ucFocus} setFocus={setUcFocus} />;
      case "how":
        return <HowItWorks go={go} />;
      case "philosophy":
        return <Philosophy go={go} />;
      case "contact":
        return <Contact go={go} />;
      default:
        return <Home go={go} />;
    }
  };

  return (
    <>
      <Nav route={route} go={go} />
      <main>{renderRoute()}</main>
      <Footer go={go} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Color mode">
          <TweakRadio
            value={t.mode}
            onChange={v => setTweak("mode", v)}
            options={[
              { value: "paper", label: "Paper" },
              { value: "deep", label: "Deep" },
              { value: "sage", label: "Sage" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Accent">
          <TweakRadio
            value={t.accent}
            onChange={v => setTweak("accent", v)}
            options={[
              { value: "ember", label: "Ember" },
              { value: "cobalt", label: "Cobalt" },
              { value: "verdant", label: "Verdant" },
              { value: "oxblood", label: "Oxblood" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Marquee ticker">
          <TweakToggle value={t.showTicker} onChange={v => setTweak("showTicker", v)} label="Show on home" />
        </TweakSection>
        <TweakSection title="Quick nav">
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
            {[
              { id: "home", label: "Home" },
              { id: "use-cases", label: "Use Cases" },
              { id: "how", label: "How" },
              { id: "philosophy", label: "Philosophy" },
              { id: "contact", label: "Contact" },
            ].map(b => (
              <TweakButton key={b.id} onClick={() => go(b.id)} label={b.label} />
            ))}
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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