// Root app for atouchmoment.com
const { useState, useEffect, useMemo, useRef } = React;

// Available accent palettes (Tweaks)
const ACCENTS = {
  coral:    { name: "Coral",    bg: "#fff4ec", bg2: "#fbe6d4", ink: "#1f1108", ink2: "#5a3a2c", accent: "#ff7a59", accent2: "#ffd9b8", accentInk: "#1f1108" },
  sunset:   { name: "Sunset",   bg: "#fbf3ec", bg2: "#f4e3d2", ink: "#2a1e1a", ink2: "#5e463e", accent: "#e8745c", accent2: "#f7c8a8", accentInk: "#1f1108" },
  crimson:  { name: "Crimson",  bg: "#fdf2ea", bg2: "#f6decc", ink: "#2a130e", ink2: "#5a2e22", accent: "#d94a3d", accent2: "#f4a672", accentInk: "#fff4ec" },
  terra:    { name: "Terra",    bg: "#f7efe6", bg2: "#ecd9c2", ink: "#3a2418", ink2: "#6b4630", accent: "#c9533a", accent2: "#e29c74", accentInk: "#fff4ec" },
  night:    { name: "Night",    bg: "#1c1410", bg2: "#2b1e17", ink: "#f5e6d8", ink2: "#c9b09e", accent: "#ff8866", accent2: "#3a261d", accentInk: "#1c1410" },
  twilight: { name: "Twilight", bg: "#0d0814", bg2: "#1a1028", ink: "#efe8f7", ink2: "#a89bb8", accent: "#c084fc", accent2: "#6d28d9", accentInk: "#0d0814" },
  nebula:   { name: "Nebula",   bg: "#08050f", bg2: "#120a22", ink: "#f5eefa", ink2: "#9b8cb5", accent: "#c084fc", accent2: "#7c3aed", accentInk: "#08050f" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "nebula"
}/*EDITMODE-END*/;

function applyTheme(name) {
  const a = ACCENTS[name] || ACCENTS.coral;
  const r = document.documentElement;
  const isDark = name === "night" || name === "twilight";
  // Briefly suppress transitions so var(--accent) changes don't get stuck on the
  // old color while a transition is interpolating.
  r.classList.add("theme-swapping");
  r.style.setProperty("--cream", a.bg);
  r.style.setProperty("--cream-2", a.bg2);
  r.style.setProperty("--ink", a.ink);
  r.style.setProperty("--ink-2", a.ink2);
  r.style.setProperty("--accent", a.accent);
  r.style.setProperty("--accent-2", a.accent2);
  r.style.setProperty("--accent-ink", a.accentInk);
  r.style.setProperty("--rule", isDark ? "rgba(255,255,255,0.10)" : "rgba(31,17,8,0.12)");
  r.setAttribute("data-theme", name);
  // Force a reflow, then re-enable transitions on the next frame.
  void r.offsetWidth;
  requestAnimationFrame(() => {
    requestAnimationFrame(() => r.classList.remove("theme-swapping"));
  });
}

function TopBar({ lang, setLang, vp, setVp, onMenu }) {
  const C = window.CONTENT[lang];
  const items = [
    ["about", C.nav.about],
    ["believe", C.nav.believe],
    ["products", C.nav.products],
    ["approach", C.nav.approach],
    ["contact", C.nav.contact],
  ];
  return (
    <header className="atm-top">
      <a href="#top" className="atm-top__brand">
        <span className="atm-top__dot" aria-hidden="true"></span>
        <span>a touch moment</span>
      </a>
      <nav className="atm-top__nav">
        {items.map(([id, label]) => (
          <a key={id} href={"#" + id}>{label}</a>
        ))}
      </nav>
    </header>
  );
}

// Mobile (iOS-ish) chrome
function MobileChrome({ children, lang, setLang }) {
  const C = window.CONTENT[lang];
  return (
    <div className="atm-mobile">
      <div className="atm-mobile__bezel">
        <div className="atm-mobile__notch" aria-hidden="true"></div>
        <div className="atm-mobile__status">
          <span>9:41</span>
          <span className="atm-mobile__status-right">
            <span>●●●●</span>
            <span>􀙇</span>
            <span>􀛨</span>
          </span>
        </div>
        <div className="atm-mobile__nav">
          <span className="atm-mobile__brand"><span className="atm-top__dot"></span> a touch moment</span>
        </div>
        <div className="atm-mobile__viewport">
          {children}
        </div>
        <div className="atm-mobile__home" aria-hidden="true"></div>
      </div>
    </div>
  );
}

function App() {
  const [lang, _setLang] = useState("en");
  const [vp, _setVp] = useState(() => {
    try { return localStorage.getItem("atm.vp") || "desktop"; } catch { return "desktop"; }
  });
  const tweakHooks = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : null;
  const tweaks = tweakHooks ? tweakHooks[0] : TWEAK_DEFAULTS;
  const setTweak = tweakHooks ? tweakHooks[1] : (() => {});

  useEffect(() => { applyTheme(tweaks.accent); }, [tweaks.accent]);

  function setLang(v) { _setLang(v); try { localStorage.setItem("atm.lang", v); } catch {} }
  function setVp(v) { _setVp(v); try { localStorage.setItem("atm.vp", v); } catch {} }

  // Smooth scroll on hash clicks (within viewport / window)
  useEffect(() => {
    function onClick(e) {
      const a = e.target.closest("a[href^='#']");
      if (!a) return;
      const id = a.getAttribute("href").slice(1);
      if (!id) return;
      const el = document.getElementById(id);
      if (!el) return;
      e.preventDefault();
      const scroller = el.closest(".atm-mobile__viewport") || window;
      if (scroller === window) {
        el.scrollIntoView({ behavior: "smooth", block: "start" });
      } else {
        const top = el.offsetTop - 0;
        scroller.scrollTo({ top, behavior: "smooth" });
      }
    }
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, [vp]);

  const t = window.CONTENT[lang];
  document.documentElement.lang = lang;

  const page = (
    <main className={"atm-root atm-root--" + vp + " atm-lang-" + lang}>
      <Hero t={t} />
      <About t={t} />
      <Believe t={t} />
      <Products t={t} />
      <Approach t={t} />
      <Contact t={t} />
      <Footer t={t} />
    </main>
  );

  return (
    <>
      {vp === "desktop" ? (
        <>
          <TopBar lang={lang} setLang={setLang} vp={vp} setVp={setVp} />
          {page}
        </>
      ) : (
        <>
          <TopBar lang={lang} setLang={setLang} vp={vp} setVp={setVp} />
          <MobileChrome lang={lang} setLang={setLang}>{page}</MobileChrome>
        </>
      )}

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Accent palette">
            <div className="atm-tweak-swatches">
              {Object.entries(ACCENTS).map(([k, v]) => (
                <button
                  key={k}
                  className={"atm-tweak-sw " + (tweaks.accent === k ? "is-active" : "")}
                  onClick={() => setTweak("accent", k)}
                  title={v.name}
                >
                  <span className="atm-tweak-sw__swatch" style={{
                    background: `linear-gradient(135deg, ${v.bg} 0 38%, ${v.accent2} 38% 70%, ${v.accent} 70% 100%)`,
                    borderColor: v.accent,
                  }}></span>
                  <span className="atm-tweak-sw__name">{v.name}</span>
                </button>
              ))}
            </div>
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
}

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