/* ============================================================
   Veranda Bouwer — App shell, routing & tweaks
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#A31621",
  "base": "#16243A",
  "headFont": "Schibsted Grotesk",
  "radius": 16,
  "cream": "#FAF7F2"
}/*EDITMODE-END*/;

const HEAD_FONTS = {
  "Schibsted Grotesk": "'Schibsted Grotesk', sans-serif",
  "Plus Jakarta Sans": "'Plus Jakarta Sans', sans-serif",
  "Manrope": "'Manrope', sans-serif",
  "DM Serif Display": "'DM Serif Display', Georgia, serif",
};

function shade(hex, amt) {
  // amt < 0 darker, > 0 lighter
  let c = hex.replace("#", "");
  if (c.length === 3) c = c.split("").map((x) => x + x).join("");
  const n = parseInt(c, 16);
  let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  const f = (v) => Math.max(0, Math.min(255, Math.round(v + amt * 255)));
  r = f(r); g = f(g); b = f(b);
  return "#" + [r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("");
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = useState(() => {
    const h = (location.hash || "").replace("#", "");
    return ["home", "projects", "contact"].includes(h) ? h : "home";
  });

  // apply tweak tokens
  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--red", t.accent);
    r.setProperty("--red-600", shade(t.accent, 0.06));
    r.setProperty("--red-700", shade(t.accent, -0.07));
    r.setProperty("--navy", t.base);
    r.setProperty("--navy-800", shade(t.base, 0.06));
    r.setProperty("--navy-900", shade(t.base, -0.05));
    r.setProperty("--cream", t.cream);
    r.setProperty("--cream-2", shade(t.cream, -0.03));
    r.setProperty("--radius", t.radius + "px");
    r.setProperty("--radius-lg", (t.radius + 10) + "px");
    r.setProperty("--radius-sm", Math.max(6, t.radius - 6) + "px");
    r.setProperty("--font-head", HEAD_FONTS[t.headFont] || HEAD_FONTS["Schibsted Grotesk"]);
  }, [t]);

  const go = (k) => {
    setPage(k);
    history.replaceState(null, "", "#" + k);
    window.scrollTo({ top: 0, behavior: "auto" });
  };

  useEffect(() => {
    const onHash = () => {
      const h = (location.hash || "").replace("#", "");
      if (["home", "projects", "contact"].includes(h)) setPage(h);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  useScrollFX(page);
  useCountUp(page);

  return (
    <React.Fragment>
      <div id="scrollbar" className="scroll-progress"></div>
      <Navbar page={page} go={go} />
      {page === "home" && <Home go={go} />}
      {page === "projects" && <Projects go={go} />}
      {page === "contact" && <Contact go={go} />}
      <Footer go={go} />

      <TweaksPanel>
        <TweakSection label="Merkkleuren" />
        <TweakColor label="Accent (rood)" value={t.accent}
          options={["#A31621", "#C0392B", "#D7263D", "#8B0000"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakColor label="Basis (donkerblauw)" value={t.base}
          options={["#16243A", "#102A43", "#1B2A41", "#0F2235"]}
          onChange={(v) => setTweak("base", v)} />
        <TweakColor label="Achtergrond" value={t.cream}
          options={["#FAF7F2", "#FFFFFF", "#F4F2EE", "#F3F5F6"]}
          onChange={(v) => setTweak("cream", v)} />
        <TweakSection label="Typografie & vorm" />
        <TweakSelect label="Koptekst font" value={t.headFont}
          options={Object.keys(HEAD_FONTS)}
          onChange={(v) => setTweak("headFont", v)} />
        <TweakSlider label="Hoekrondingen" value={t.radius} min={0} max={26} step={2} unit="px"
          onChange={(v) => setTweak("radius", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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