// app.jsx — Jano Payment landing page root
const { useState: useAppState, useEffect: useAppEffect, useRef: useAppRef } = React;

const ACCENTS = {
  "#2F6BFF": { bright: "#5A8CFF", deep: "#1E54E0", soft: "#EAF1FF", glow: "rgba(47,107,255,0.35)" },
  "#1488E0": { bright: "#48A6F0", deep: "#0E6CB8", soft: "#E6F3FC", glow: "rgba(20,136,224,0.35)" },
  "#4F46E5": { bright: "#7B73F0", deep: "#3C34C2", soft: "#ECEBFD", glow: "rgba(79,70,229,0.35)" },
  "#0E9C8A": { bright: "#3BBFAD", deep: "#0A7C6E", soft: "#E3F6F3", glow: "rgba(14,156,138,0.32)" },
};

function getInitialLang() {
  try { const s = localStorage.getItem("janoLang"); if (s && window.I18N[s]) return s; } catch (e) {}
  return "ko";
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2F6BFF",
  "headline": "Next Generation of Payments",
  "flowStyle": "row",
  "reveal": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useAppState(getInitialLang);
  const [active, setActive] = useAppState("top");
  const feeRef = useAppRef(null);

  // Set the live language bundle BEFORE children render
  window.JANO = window.I18N[lang] || window.I18N.en;

  const setLangPersist = (code) => {
    setLang(code);
    try { localStorage.setItem("janoLang", code); } catch (e) {}
  };

  // Document direction + lang
  useAppEffect(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
  }, [lang]);

  // Accent color → CSS vars
  useAppEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS["#2F6BFF"];
    const root = document.documentElement;
    root.style.setProperty("--cobalt", t.accent);
    root.style.setProperty("--cobalt-bright", a.bright);
    root.style.setProperty("--cobalt-deep", a.deep);
    root.style.setProperty("--cobalt-soft", a.soft);
    root.style.setProperty("--cobalt-glow", a.glow);
  }, [t.accent]);

  const goTo = (id) => {
    setActive(id);
    if (id === "top") { window.scrollTo({ top: 0, behavior: "smooth" }); return; }
    const el = document.getElementById(id);
    if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 70; window.scrollTo({ top: y, behavior: "smooth" }); }
  };
  const getStarted = () => goTo("contact");

  // Scroll reveal + fee bar fill + active section tracking
  useAppEffect(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const fillFees = (scope) => {
      (scope || document).querySelectorAll(".fee-fill").forEach((fl) => { fl.style.width = (fl.dataset.pct || 0) + "%"; });
    };
    const els = Array.from(document.querySelectorAll(".reveal"));
    if (!t.reveal || reduce) {
      els.forEach((e) => e.classList.add("in"));
      fillFees();
    } else {
      const io = new IntersectionObserver((entries) => {
        entries.forEach((en) => {
          if (en.isIntersecting) {
            en.target.classList.add("in");
            if (en.target.querySelector && en.target.querySelector(".fee-fill")) fillFees(en.target);
            io.unobserve(en.target);
          }
        });
      }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
      els.forEach((e) => { if (!e.classList.contains("in")) io.observe(e); });
      if (feeRef.current && feeRef.current.classList.contains("in")) fillFees(feeRef.current);
      var cleanup = () => io.disconnect();
    }

    const sections = ["about", "services", "how", "markets", "global", "contact"];
    const heroWhale = document.querySelector(".hero-whale-stage");
    const onScroll = () => {
      const y = window.scrollY + 120;
      let cur = "top";
      sections.forEach((id) => { const el = document.getElementById(id); if (el && el.offsetTop <= y) cur = id; });
      setActive(cur);
      if (heroWhale) {
        const vh = window.innerHeight || 800;
        const f = Math.max(0, 1 - window.scrollY / (vh * 0.7));
        heroWhale.style.opacity = (0.3 * f).toFixed(3);
      }
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => { if (cleanup) cleanup(); window.removeEventListener("scroll", onScroll); };
  }, [t.reveal, t.flowStyle]);

  const hl = window.HEADLINES[t.headline] || window.HEADLINES["Next Generation of Payments"];
  const headline = hl[lang] || hl.en;

  return (
    <>
      <Nav active={active} onNav={goTo} onGetStarted={getStarted} lang={lang} onSetLang={setLangPersist} />
      <Hero headline={headline} onGetStarted={getStarted} onSeeHow={() => goTo("how")} />
      <StatBand />
      <Purpose onGo={goTo} />
      <Services />
      <HowItWorks flowStyle={t.flowStyle} feeRef={feeRef} />
      <WhyJano onGetStarted={getStarted} />
      <Markets />
      <GlobalPresence />
      <Contact />
      <Footer onNav={goTo} />

      <TweaksPanel>
        <TweakSection label="Brand accent" />
        <TweakColor label="Accent color" value={t.accent}
          options={["#2F6BFF", "#1488E0", "#4F46E5", "#0E9C8A"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Hero" />
        <TweakSelect label="Headline" value={t.headline}
          options={Object.keys(window.HEADLINES)}
          onChange={(v) => setTweak("headline", v)} />
        <TweakSection label="How it works" />
        <TweakRadio label="Diagram layout" value={t.flowStyle}
          options={["row", "stacked"]}
          onChange={(v) => setTweak("flowStyle", v)} />
        <TweakSection label="Motion" />
        <TweakToggle label="Scroll reveal" value={t.reveal}
          onChange={(v) => setTweak("reveal", v)} />
      </TweaksPanel>
    </>
  );
}

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