// ─────────── Main App + routing + tweaks ───────────

const { useState: u_useState, useEffect: u_useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "ember",
  "fontPair": "oswald-manrope",
  "heroStyle": "full",
  "density": "regular",
  "radius": "sharp",
  "anim": "regular",
  "dark": true
}/*EDITMODE-END*/;

const PALETTES = {
  ember: { accent: "oklch(0.74 0.13 78)", name: "Ember Gold", swatch: ["#d4a64a","#0f0e0c","#a89880"] },
  steel: { accent: "oklch(0.66 0.13 235)", name: "Steel Blue", swatch: ["#3b82c4","#0f1925","#9aacc2"] },
  rust:  { accent: "oklch(0.62 0.16 50)",  name: "Rust",       swatch: ["#c2410c","#1a1411","#a08070"] },
  lime:  { accent: "oklch(0.78 0.18 130)", name: "Hi-Vis",     swatch: ["#bef264","#0a0f06","#8ea072"] },
};
const FONT_PAIRS = {
  "oswald-manrope":   { display: "Oswald", body: "Manrope", name: "Oswald + Manrope" },
  "anton-dmsans":     { display: "Anton", body: "DM Sans", name: "Anton + DM Sans" },
  "bebas-ibm":        { display: "Bebas Neue", body: "IBM Plex Sans", name: "Bebas + IBM Plex" },
  "saira-archivo":    { display: "Saira Condensed", body: "Archivo", name: "Saira Cond. + Archivo" },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = u_useState(() => {
    const h = window.location.hash.replace("#/", "");
    return h && ["home", "about", "products", "projects", "contact", "quote"].includes(h) ? h : "home";
  });
  const [lang, setLang] = u_useState("tr");

  // hash sync
  u_useEffect(() => {
    window.location.hash = route === "home" ? "#/" : `#/${route}`;
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [route]);
  u_useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.replace("#/", "");
      if (["home", "about", "products", "projects", "contact", "quote"].includes(h)) setRoute(h);
      else if (h === "" || h === "/") setRoute("home");
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  // i18n globals
  window.__T = window.__I18N[lang];
  window.__LANG = lang;

  // dark/light + density + radius + anim
  const themeAttr = t.dark ? "dark" : "light";

  // dynamic font via Google Fonts load
  u_useEffect(() => {
    const pair = FONT_PAIRS[t.fontPair];
    if (!pair) return;
    const families = `${encodeURIComponent(pair.display)}:wght@400;500;600;700&family=${encodeURIComponent(pair.body)}:wght@300;400;500;600;700`;
    const id = "dyn-font";
    let link = document.getElementById(id);
    if (!link) {
      link = document.createElement("link");
      link.rel = "stylesheet";
      link.id = id;
      document.head.appendChild(link);
    }
    link.href = `https://fonts.googleapis.com/css2?family=${families}&display=swap`;
    document.documentElement.style.setProperty("--font-display", `"${pair.display}", sans-serif`);
    document.documentElement.style.setProperty("--font-body", `"${pair.body}", system-ui, sans-serif`);
  }, [t.fontPair]);

  // dynamic accent
  u_useEffect(() => {
    document.documentElement.style.setProperty("--accent", PALETTES[t.palette].accent);
  }, [t.palette]);

  return (
    <div
      data-theme={themeAttr}
      data-density={t.density}
      data-radius={t.radius}
      data-anim={t.anim}
    >
      <div className="grain" />
      <Header route={route} setRoute={setRoute} lang={lang} setLang={setLang} />

      <main>
        {route === "home" && <HomePage heroStyle={t.heroStyle} setRoute={setRoute} />}
        {route === "about" && <AboutPage setRoute={setRoute} />}
        {route === "products" && <ProductsPage setRoute={setRoute} />}
        {route === "projects" && <ProjectsPage setRoute={setRoute} />}
        {route === "contact" && <ContactPage setRoute={setRoute} />}
        {route === "quote" && <QuotePage setRoute={setRoute} />}
      </main>

      <Footer setRoute={setRoute} />

      <TweaksPanel>
        <TweakSection label="Renk · Color" />
        <TweakColor
          label="Palet"
          value={PALETTES[t.palette].swatch}
          options={Object.values(PALETTES).map((p) => p.swatch)}
          onChange={(v) => {
            const key = Object.keys(PALETTES).find(
              (k) => PALETTES[k].swatch[0] === v[0]
            );
            if (key) setTweak("palette", key);
          }}
        />
        <TweakToggle label="Karanlık · Dark" value={t.dark} onChange={(v) => setTweak("dark", v)} />

        <TweakSection label="Tipografi · Type" />
        <TweakSelect
          label="Font çifti"
          value={t.fontPair}
          options={Object.entries(FONT_PAIRS).map(([k, v]) => ({ value: k, label: v.name }))}
          onChange={(v) => setTweak("fontPair", v)}
        />

        <TweakSection label="Düzen · Layout" />
        <TweakRadio
          label="Yoğunluk"
          value={t.density}
          options={["compact", "regular", "comfy"]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakRadio
          label="Köşe"
          value={t.radius}
          options={["sharp", "soft", "round"]}
          onChange={(v) => setTweak("radius", v)}
        />
        <TweakRadio
          label="Animasyon"
          value={t.anim}
          options={["low", "regular", "high"]}
          onChange={(v) => setTweak("anim", v)}
        />

        <TweakSection label="Hero · Açılış" />
        <TweakSelect
          label="Hero stili"
          value={t.heroStyle}
          options={[
            { value: "full", label: "Full-bleed foto" },
            { value: "split", label: "Bölünmüş" },
            { value: "editorial", label: "Editöryel" },
          ]}
          onChange={(v) => setTweak("heroStyle", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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