/* =========================================================
   Contact page entry — Fran Ruiz
   Mounts <Nav> + <ContactPage> + <Footer> + <ChatBot> with
   the same theme/lang/accent tweaks the rest of the site uses.
   ========================================================= */

const { useEffect: useEffectCA } = React;

const ContactApp = () => {
  // Shared tweaks (theme + lang + accent). The language is also persisted
  // to localStorage so it follows the user across pages.
  const CONTACT_DEFAULTS = /*EDITMODE-BEGIN*/{
    "theme": "light",
    "lang": "en",
    "accent": "#e8624a"
  }/*EDITMODE-END*/;
  const STORED_LANG_CT =
    typeof localStorage !== "undefined" && localStorage.getItem("fran-lang");
  const [tweaks, setTweak] = useTweaks(
    STORED_LANG_CT
      ? { ...CONTACT_DEFAULTS, lang: STORED_LANG_CT }
      : CONTACT_DEFAULTS
  );

  const lang = tweaks.lang;
  const t = T[lang] || T.en;

  // Apply theme / lang / accent to the document.
  useEffectCA(() => {
    const r = document.documentElement;
    r.setAttribute("data-theme", tweaks.theme);
    r.setAttribute("data-lang", tweaks.lang);
    r.style.setProperty("--accent", tweaks.accent);
  }, [tweaks]);

  // Minimal scroll-reveal fallback (same pattern as the other pages)
  // so any `.reveal` markup inside Nav/Footer animates in cleanly.
  useEffectCA(() => {
    document.documentElement.setAttribute("data-anim", "");
    const check = () => {
      const els = document.querySelectorAll(
        ".reveal:not(.in), .reveal-stagger:not(.in)"
      );
      els.forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight + 80 && r.bottom > -80) {
          el.classList.add("in");
        }
      });
    };
    check();
    requestAnimationFrame(check);
    setTimeout(check, 50);
    setTimeout(check, 200);
    window.addEventListener("scroll", check, { passive: true });
    window.addEventListener("resize", check);
    const id = setInterval(check, 400);
    const safety = setTimeout(() => {
      document
        .querySelectorAll(".reveal:not(.in), .reveal-stagger:not(.in)")
        .forEach((el) => el.classList.add("in"));
    }, 2500);
    return () => {
      window.removeEventListener("scroll", check);
      window.removeEventListener("resize", check);
      clearInterval(id);
      clearTimeout(safety);
    };
  }, []);

  const setLang = (v) => {
    setTweak("lang", v);
    try { localStorage.setItem("fran-lang", v); } catch (e) {}
  };
  const toggleTheme = () =>
    setTweak("theme", tweaks.theme === "dark" ? "light" : "dark");

  return (
    <div>
      <Nav
        lang={lang}
        setLang={setLang}
        theme={tweaks.theme}
        toggleTheme={toggleTheme}
        t={t}
      />

      <main>
        <ContactPage t={t} />
      </main>

      <Footer t={t} />

      <ChatBot lang={lang} />
    </div>
  );
};

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