// Scenio landing · app shell: header (canon, the §6 lockup), hero, sections, footer, prototype control. Reads window.SCENIO_INIT { locale, mode, state, p, scroll, reduced, hideDevBar }.
const LOGO = '../../assets/logo/logo-mark.svg'; // the FINAL §6 mark (background and hard-coded colour removed; fill currentColor)
(() => {
if (!window.SCENIO_INIT) return; // host guard (C4-m10): the bundle carries this file too; it runs only on its host page, which sets window.SCENIO_INIT first
const NS = window.ScenioPaperCrimson_b9a328;
const REQUIRED = ['UHeader', 'UButton', 'UFormField', 'UInput', 'UInputNumber', 'USelectMenu', 'ScenioCallout', 'ScenioDate', 'ScenioLocationField', 'ScenioGuestField', 'UInputMenu', 'UCalendar', 'UPopover', 'UPageSection', 'UPageCard', 'UFooter', 'UFooterColumns', 'ScenioOfferCard', 'ScenioPromotedCard', 'ScenioTestimonialCard', 'ScenioScrollTimeline', 'UTabs', 'USwitch', 'UEmpty', 'UAlert', 'USkeleton', 'UCard', 'UBadge', 'UIcon', 'UTable'];
const missing = REQUIRED.filter((n) => !NS || !NS[n]);
if (missing.length) { document.getElementById('root').innerHTML = `<p style="padding:24px;font:14px/1.5 Inter,sans-serif;color:#69605C">The design-system bundle recompiles at the end of the turn — reload to see: ${missing.join(', ')}</p>`; throw new Error('bundle stale: ' + missing.join(', ')); }
const { UHeader } = NS;
const { Hero, Sections, Footer, DevBar } = window.ScenioLanding;
const { useState, useEffect, useRef } = React;
const init = window.SCENIO_INIT || {};

function App() {
  const [locale, setLocale] = useState(init.locale || 'pl');
  const [mode, setMode] = useState(init.mode || 'light');
  const [state, setState] = useState(init.state || 'ready');
  const [reduced, setReduced] = useState(init.reduced ?? (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches));
  const [transparent, setTransparent] = useState(true);
  const [mobile, setMobile] = useState(window.innerWidth <= 700);
  const [tablet, setTablet] = useState(init.compact ?? window.innerWidth < 1180);
  const [p, setP] = useState(0);
  const [section, setSection] = useState(null);
  const pRef = useRef(0);
  const t = window.SCENIO_I18N[locale];
  useEffect(() => { document.documentElement.classList.toggle('dark', mode === 'dark'); document.documentElement.lang = locale; document.documentElement.classList.toggle('reduced', !!reduced); if (LOGO) document.documentElement.style.setProperty('--logo-mark', `url(${LOGO})`); }, [mode, locale, reduced]);
  useEffect(() => { const r = () => { setMobile(window.innerWidth <= 700); if (init.compact == null) setTablet(window.innerWidth < 1180); }; window.addEventListener('resize', r); return () => window.removeEventListener('resize', r); }, []);
  useEffect(() => {
    const go = () => { if (init.p != null && window.__scenioHeroScrollTo) window.__scenioHeroScrollTo(init.p); else if (init.scroll) { const el = document.getElementById(init.scroll); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 78, behavior: 'instant' }); } };
    const id = setTimeout(go, 120); const id2 = setTimeout(go, 700); return () => { clearTimeout(id); clearTimeout(id2); };
  }, []);
  // which in-page section the reader is in — the matching nav item reads crimson (UNavigationMenu link-variant selected state)
  useEffect(() => {
    const span = (sel) => { const els = document.querySelectorAll(sel); if (!els.length) return null; let top = Infinity, bottom = -Infinity; els.forEach((el) => { const r = el.getBoundingClientRect(); top = Math.min(top, r.top); bottom = Math.max(bottom, r.bottom); }); return { top, bottom }; };
    let raf = null;
    const on = () => { if (raf) return; raf = requestAnimationFrame(() => { raf = null; const mid = window.innerHeight * .42; let cur = null; [['how', '#timeline, .sc-stl'], ['providers', '#providers']].forEach(([k, sel]) => { const b = span(sel); if (b && b.top <= mid && b.bottom > mid) cur = k; }); setSection((s) => (s === cur ? s : cur)); }); };
    const id = setTimeout(on, 200); window.addEventListener('scroll', on, { passive: true }); window.addEventListener('resize', on);
    return () => { clearTimeout(id); window.removeEventListener('scroll', on); window.removeEventListener('resize', on); if (raf) cancelAnimationFrame(raf); };
  }, []);
  const onProgress = (v, stuck) => { pRef.current = v; setTransparent(!!stuck); if (Math.abs(v - p) > .01 || v === 0 || v === 1) setP(v); };
  return (
    <div className="landing">
      <UHeader logo={LOGO || undefined} transparent={transparent} locale={locale} onLocale={setLocale} colorMode={mode} onColorMode={() => setMode((m) => (m === 'dark' ? 'light' : 'dark'))} items={[{ label: t.nav.home, to: '/', active: true }, { label: t.nav.discovery, to: '/discovery' }]} labels={{ login: t.header.login, register: t.header.register }} />
      <main>
        <Hero t={t} locale={locale} reduced={reduced} mobile={mobile} tablet={tablet} onProgress={onProgress} bound={init.callouts !== 'fallback'} />
        <Sections t={t} locale={locale} state={state} reduced={reduced} mobile={mobile} onRetry={() => setState('ready')} />
      </main>
      <Footer t={t} locale={locale} />
      {!init.hideDevBar && <DevBar t={t} state={state} setState={setState} reduced={!!reduced} setReduced={setReduced} p={p} />}
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
})();