/* App shell — routes pages, listens for hash, provides Tweaks */

const { useState, useEffect, useMemo } = React;

const ACCENT_DEEP = {
  "#CC1B2B": "#A11521", // Tamak Red (default)
  "#D63E5F": "#A82E47", // Berry
  "#2A6FDB": "#1A52A8", // Cobalt
  "#2E7D5B": "#1F5C42", // Forest
};
const DISPLAY_FONTS = {
  bricolage:  "Bricolage Grotesque",
  instrument: "Instrument Serif",
  sans:       "Instrument Sans",
};

const App = () => {
  const [page, setPage] = useState("home");
  const [tweaks, setTweak] = window.useTweaks(window.__TWEAKS_DEFAULTS__);

  // Hash routing
  useEffect(() => {
    const apply = () => {
      const h = (window.location.hash || "#home").slice(1);
      if (h) setPage(h);
      window.scrollTo({ top: 0 });
    };
    apply();
    window.addEventListener("hashchange", apply);
    return () => window.removeEventListener("hashchange", apply);
  }, []);

  const go = (k) => { window.location.hash = "#" + k; };

  // Apply accent (resolve legacy "orange" string to default hex)
  useEffect(() => {
    let hex = tweaks.accent;
    if (!hex || !hex.startsWith("#")) hex = "#CC1B2B";
    document.documentElement.style.setProperty("--orange", hex);
    document.documentElement.style.setProperty("--orange-deep", ACCENT_DEEP[hex] || hex);
  }, [tweaks.accent]);

  // Apply theme
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme === "dark" ? "dark" : "light");
  }, [tweaks.theme]);

  // Apply display font
  useEffect(() => {
    const choice = DISPLAY_FONTS[tweaks.display] || DISPLAY_FONTS.bricolage;
    document.documentElement.style.setProperty("--f-display", `"${choice}", system-ui, sans-serif`);
  }, [tweaks.display]);

  const scope = page === "yadea" ? "yadea" : "tamak";

  const Page = useMemo(() => {
    if (page === "home") return <Home go={go} tweaks={tweaks} />;
    if (page === "logo") return <LogoShowcase go={go} />;
    if (page === "brands") {
      setTimeout(() => document.getElementById("brands")?.scrollIntoView({ behavior: "smooth", block: "start" }), 50);
      return <Home go={go} tweaks={tweaks} />;
    }
    if (page === "yadea") return <Yadea go={go} />;
    if (page === "b2b") return <B2B go={go} />;
    if (page === "contact") return <Contact go={go} />;
    if (page === "careers") return <Careers go={go} />;
    if (page.startsWith("brand-")) return <Brand go={go} brandKey={page.replace("brand-", "")} />;
    return <Home go={go} tweaks={tweaks} />;
  }, [page, tweaks]);

  return (
    <>
      <Nav current={page} go={go} scope={scope} />
      {Page}
      <Footer go={go} />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Theme">
          <window.TweakRadio
            label="Mode"
            value={tweaks.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[
              { value: "light", label: "Light" },
              { value: "dark",  label: "Dark"  },
            ]}
          />
        </window.TweakSection>

        <window.TweakSection label="Signature accent">
          <window.TweakColor
            label="Colour"
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={["#CC1B2B", "#D63E5F", "#2A6FDB", "#2E7D5B"]}
          />
        </window.TweakSection>

        <window.TweakSection label="Display font">
          <window.TweakRadio
            label="Family"
            value={tweaks.display}
            onChange={(v) => setTweak("display", v)}
            options={[
              { value: "bricolage",  label: "Bricolage" },
              { value: "instrument", label: "Editorial" },
              { value: "sans",       label: "Sans" },
            ]}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
};

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