/* Hard4Tech — app shell: per-page render, language, tweaks (multi-page). */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "palette": ["#2fe1e6", "#6aa8ff", "#b08cff"],
  "headingFont": "Space Grotesk",
  "density": "regular",
  "fontSize": 16
}/*EDITMODE-END*/;

const PALETTES = [
  ["#2fe1e6", "#6aa8ff", "#b08cff"], // ITS cyan→violet (brand)
  ["#22c7e6", "#3b82f6", "#7c5cff"], // original brand
  ["#38bdf8", "#3b82f6", "#6366f1"], // electric blue
  ["#7c5cff", "#9d5cff", "#d65cff"], // violet
  ["#19c37d", "#10b6a6", "#0ea5e9"], // green
];

function hexToRgba(hex, a) {
  const h = hex.replace("#", "");
  const n = parseInt(h.length === 3 ? h.split("").map(x => x + x).join("") : h, 16);
  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
}

const ROUTES = {
  home: (p) => <HomePage {...p} />,
  services: (p) => <ServicesPage {...p} />,
  erp: (p) => <ErpPage {...p} />,
  solutions: (p) => <SolutionsPage {...p} />,
  partners: (p) => <PartnersPage {...p} />,
  about: (p) => <AboutPage {...p} />,
  contact: (p) => <ContactPage {...p} />,
};

const PAGE_FILES = {
  home: "index.html", services: "services.html", erp: "erp.html",
  solutions: "solutions.html", partners: "partners.html", about: "about.html", contact: "contact.html",
};

function loadTweaks() {
  try { return JSON.parse(localStorage.getItem("h4t_tweaks_v2") || "{}"); } catch (e) { return {}; }
}
const INITIAL_TWEAKS = Object.assign({}, TWEAK_DEFAULTS, loadTweaks());

function App() {
  const [t, setTweak] = useTweaks(INITIAL_TWEAKS);
  const [lang, setLang] = React.useState(() => localStorage.getItem("h4t_lang") || "en");
  const route = (window.PAGE && ROUTES[window.PAGE]) ? window.PAGE : "home";

  const data = window.SITE[lang];

  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("lang", lang);
    root.setAttribute("dir", data.dir);
    localStorage.setItem("h4t_lang", lang);
  }, [lang, data.dir]);

  // tweaks -> CSS variables + persist for cross-page consistency
  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-theme", t.theme);
    root.setAttribute("data-density", t.density);
    root.style.setProperty("--base-size", t.fontSize + "px");
    const [a, b, c] = t.palette || PALETTES[0];
    root.style.setProperty("--accent", a);
    root.style.setProperty("--accent-2", c);
    root.style.setProperty("--accent-soft", hexToRgba(a, 0.14));
    root.style.setProperty("--grad", `linear-gradient(100deg, ${a} 0%, ${b} 48%, ${c} 100%)`);
    const ar = t.headingFont === "Sora" ? "'Sora','IBM Plex Sans Arabic',sans-serif" : "'Space Grotesk','Tajawal',sans-serif";
    root.style.setProperty("--font-display", ar);
    try {
      localStorage.setItem("h4t_tweaks_v2", JSON.stringify({
        theme: t.theme, palette: t.palette, headingFont: t.headingFont, density: t.density, fontSize: t.fontSize,
      }));
    } catch (e) {}
  }, [t.theme, t.density, t.fontSize, t.palette, t.headingFont]);

  // navigate to a separate page (real page load)
  const go = React.useCallback((id) => {
    const file = PAGE_FILES[id] || "index.html";
    if (id === route) { window.scrollTo({ top: 0, behavior: "smooth" }); return; }
    window.location.href = file;
  }, [route]);

  const toggleLang = () => setLang((l) => (l === "en" ? "ar" : "en"));

  useReveal();

  React.useEffect(() => {
    const b = document.getElementById("boot");
    if (b) { b.classList.add("hide"); setTimeout(() => b.remove(), 500); }
  }, []);

  // page-transition: spinning logo overlay while navigating to another page
  React.useEffect(() => {
    const ov = document.createElement("div");
    ov.id = "leave";
    ov.innerHTML = '<div class="boot-spin"><img src="assets/mark.png" class="boot-mark" alt="" /></div>';
    document.body.appendChild(ov);
    const onClick = (e) => {
      if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
      const a = e.target.closest("a");
      if (!a || a.target === "_blank") return;
      const href = a.getAttribute("href") || "";
      if (/\.html(\?|#|$)/.test(href)) ov.classList.add("show");
    };
    document.addEventListener("click", onClick);
    window.addEventListener("pageshow", () => ov.classList.remove("show"));
    return () => document.removeEventListener("click", onClick);
  }, []);

  return (
    <React.Fragment>
      <div className="site-bg" aria-hidden="true" />
      {(t.theme === "vivid" || t.theme === "dark") && <AnimatedBG />}
      <Nav t={data} route={route} go={go} lang={lang} toggleLang={toggleLang} />
      <main id="main" key={route + lang}>
        {ROUTES[route]({ t: data, go })}
      </main>
      <Footer t={data} go={go} />

      <TweaksPanel>
        <TweakSection label={lang === "ar" ? "المظهر" : "Appearance"} />
        <TweakRadio label={lang === "ar" ? "الوضع" : "Theme"} value={t.theme}
          options={["vivid", "dark", "light"]} onChange={(v) => setTweak("theme", v)} />
        <TweakColor label={lang === "ar" ? "لون العلامة" : "Brand palette"} value={t.palette}
          options={PALETTES} onChange={(v) => setTweak("palette", v)} />
        <TweakSection label={lang === "ar" ? "الطباعة" : "Typography"} />
        <TweakRadio label={lang === "ar" ? "خط العناوين" : "Heading font"} value={t.headingFont}
          options={["Space Grotesk", "Sora"]} onChange={(v) => setTweak("headingFont", v)} />
        <TweakSlider label={lang === "ar" ? "حجم النص" : "Base size"} value={t.fontSize}
          min={14} max={19} step={1} unit="px" onChange={(v) => setTweak("fontSize", v)} />
        <TweakSection label={lang === "ar" ? "المساحات" : "Layout"} />
        <TweakRadio label={lang === "ar" ? "الكثافة" : "Density"} value={t.density}
          options={["compact", "regular", "comfy"]} onChange={(v) => setTweak("density", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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