// App shell: route state, language state, and the chrome every page sits in.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#3568C4",
  "fonts": "Bricolage + Onest",
  "darkMode": false,
  "hero": "Gradient",
  "bgTint": 2,
  "shadows": "Soft",
  "premium": "Gold",
  "lang": "RO"
}/*EDITMODE-END*/;

const SHOW_TWEAKS = new URLSearchParams(location.search).has('tweaks');

function pageBackground(T) {
  return T.isDark
    ? `radial-gradient(1200px 600px at 15% -5%, color-mix(in oklab, ${T.accent} 16%, transparent) 0%, transparent 60%), radial-gradient(1000px 700px at 95% 30%, color-mix(in oklab, ${T.accent} 10%, transparent) 0%, transparent 55%), linear-gradient(180deg, ${T.bg} 0%, ${T.tint(5, '#0d1317')} 55%, ${T.bg} 100%)`
    : `radial-gradient(1200px 600px at 15% -5%, color-mix(in oklab, ${T.accent} 14%, transparent) 0%, transparent 60%), radial-gradient(1000px 700px at 95% 30%, color-mix(in oklab, ${T.accent} 9%, transparent) 0%, transparent 55%), radial-gradient(900px 600px at 10% 85%, color-mix(in oklab, ${T.accent} 8%, transparent) 0%, transparent 55%), linear-gradient(180deg, ${T.bg} 0%, ${T.tint(6, '#fff')} 55%, ${T.bg} 100%)`;
}

function CurrentPage({ page, doc, T, nav, lang }) {
  switch (page) {
    case 'features': return <FeaturesPage T={T} nav={nav} />;
    case 'pricing': return <PricingPage T={T} nav={nav} />;
    case 'contact': return <ContactPage T={T} nav={nav} lang={lang} />;
    case 'legal': return <LegalPage T={T} doc={doc} setDoc={(d) => nav('legal', d)} />;
    default: return <HomePage T={T} nav={nav} />;
  }
}

function App() {
  const [tw, setTweak] = useTweaks({ ...TWEAK_DEFAULTS, lang: langFromQuery() || TWEAK_DEFAULTS.lang });
  const [langFading, setLangFading] = React.useState(false);
  const [route, setRoute] = React.useState(routeFromPath);
  const lang = tw.lang || 'EN';
  const T = tw.darkMode ? makeDarkTheme(tw) : makeTheme(tw);

  const nav = (page, doc) => {
    setRoute({ page, doc: doc || 'terms' });
    history.pushState({}, '', pathForRoute(page, doc));
    window.scrollTo(0, 0);
  };

  const setLang = (next) => {
    if (next === lang) return;
    switchLanguage(() => setTweak('lang', next), setLangFading);
  };

  // Back/forward move between the real URLs, so the page has to follow them.
  React.useEffect(() => {
    const onPop = () => setRoute(routeFromPath());
    window.addEventListener('popstate', onPop);
    return () => window.removeEventListener('popstate', onPop);
  }, []);

  // Theme knobs the shared primitives read off the window.
  window.__radScale = 1;
  window.__shadowMode = tw.shadows || 'Soft';
  window.__denScale = 1;
  window.__icScale = 1;
  window.__icSizeScale = 1;
  window.__icWellScale = 1;
  window.__iconStroke = false;
  window.__siteLang = lang;

  React.useLayoutEffect(() => { window.HBApplyLang && window.HBApplyLang(lang); });
  React.useEffect(() => { window.HBWatchLang && window.HBWatchLang(); }, []);
  React.useEffect(() => { applyRouteMeta(route.page, route.doc, lang); }, [route.page, route.doc, lang]);

  // Cards fade in as they scroll into view; anything already on screen starts visible.
  React.useEffect(() => {
    const els = Array.from(document.querySelectorAll('.hb-card, [data-reveal]'));
    els.forEach((el) => el.classList.add('hb-reveal'));
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); } });
    }, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 });
    els.forEach((el) => { if (el.getBoundingClientRect().top < window.innerHeight) el.classList.add('is-in'); else io.observe(el); });
    return () => io.disconnect();
  }, [route.page, route.doc]);

  if (route.embedded) {
    return <LegalEmbed T={T} doc={route.doc} />;
  }

  return (
    <React.Fragment>
      <div className="hb-langfade" style={{
        opacity: langFading ? 0.75 : 1,
        filter: langFading ? 'blur(8px)' : 'blur(0px)',
        minHeight: '100vh', display: 'flex', flexDirection: 'column',
        fontFamily: T.bf, background: pageBackground(T),
      }}>
        <SiteNav T={T} page={route.page} nav={nav} lang={lang} setLang={setLang} />
        <main style={{ flex: 1 }}>
          <CurrentPage page={route.page} doc={route.doc} T={T} nav={nav} lang={lang} />
        </main>
        <SiteFooter T={T} nav={nav} />
      </div>
      <MakerBubble T={T} />
      <DownloadBubble T={T} />
      {SHOW_TWEAKS && <SiteTweaks tw={tw} setTweak={setTweak} setLang={setLang} />}
    </React.Fragment>
  );
}

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