/* App entry */
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "split",
  "orangeShade": "signal",
  "viewMode": "desktop",
  "density": "comfy"
}/*EDITMODE-END*/;

function App() {
  // Phase 13P: every top-nav URL serves the rich React experience.
  // Vercel rewrites /programs/, /about/, /testimonials/, /contact/, /free-guide/
  // to /index.html so this React bundle runs at every URL — we just pick which
  // page to render based on the path. Viktor's photo lives in AboutPage, the
  // Kit form lives in FreeGuidePage, the Formspree form lives in ContactPage —
  // all rendered here, no need for static duplicates.
  const initialPage = (() => {
    if (typeof window === 'undefined') return 'home';
    const path = window.location.pathname.replace(/\/$/, '');
    const map = {
      '/programs':     'programs',
      '/about':        'about',
      '/testimonials': 'testimonials',
      '/contact':      'contact',
      '/free-guide':   'free-guide'
    };
    return map[path] || 'home';
  })();
  const [page, setPage] = useStateA(initialPage);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Real-device viewport detection — the `viewMode` tweak is a *preview* toggle
  // (lets you see the mobile layout while on desktop), but when the actual
  // viewport is phone-sized we MUST use mobile layout regardless, or the desktop
  // grid blows out of the screen.
  const [realMobile, setRealMobile] = useStateA(() => typeof window !== 'undefined' && window.innerWidth < 760);
  useEffectA(() => {
    const mq = window.matchMedia('(max-width: 759px)');
    const handler = (e) => setRealMobile(e.matches);
    if (mq.addEventListener) mq.addEventListener('change', handler); else mq.addListener(handler);
    return () => { if (mq.removeEventListener) mq.removeEventListener('change', handler); else mq.removeListener(handler); };
  }, []);

  // NOTE (Phase 13h fix): the Tweaks-panel orange/density inline-style overrides
  // were removed because they beat the .light-mode CSS class on specificity and
  // kept the React home page dark even after the user toggled to light mode.
  // The CSS variables in :root + html.light-mode now own theme color cleanly.
  // If the dev Tweaks panel is ever re-opened to A/B-test palette shades, those
  // controls become no-ops — acceptable since the panel is dev-only.

  // Effective mobile flag — true when either the preview toggle is set OR the real viewport is phone-sized.
  const mobile = t.viewMode === 'mobile' || realMobile;
  // Render the decorative phone-frame chrome ONLY in desktop-preview-mobile mode.
  // On a real phone we render the page directly (no nested frame).
  const showPhoneFrame = t.viewMode === 'mobile' && !realMobile;

  // Listen for cross-component goto events (cookie banner → privacy link, etc.)
  useEffectA(() => {
    const onGoto = (e) => { if (e.detail) setPage(e.detail); };
    window.addEventListener('vz-goto', onGoto);
    return () => window.removeEventListener('vz-goto', onGoto);
  }, []);

  // Scroll page to top when changing routes
  useEffectA(() => {
    const scroller = showPhoneFrame ? document.querySelector('.phone-screen') : window;
    if (scroller && scroller.scrollTo) scroller.scrollTo({top:0, behavior:'instant'});
  }, [page, showPhoneFrame]);

  const pageEl = (
    <>
      <Nav page={page} setPage={setPage} mobile={mobile}/>
      {page === 'home' && <HomePage setPage={setPage} tweaks={t} mobile={mobile}/>}
      {page === 'programs' && <ProgramsPage setPage={setPage} mobile={mobile}/>}
      {page === 'about' && <AboutPage setPage={setPage} mobile={mobile}/>}
      {page === 'testimonials' && <TestimonialsPage setPage={setPage} mobile={mobile}/>}
      {page === 'contact' && <ContactPage setPage={setPage} mobile={mobile}/>}
      {page === 'free-guide' && <FreeGuidePage setPage={setPage} mobile={mobile}/>}
      {page === 'privacy' && <PrivacyPage setPage={setPage} mobile={mobile}/>}
      {page === 'terms' && <TermsPage setPage={setPage} mobile={mobile}/>}
      <Footer setPage={setPage} page={page} mobile={mobile}/>
    </>
  );

  return (
    <>
      {showPhoneFrame ? (
        <div className="shell-mobile">
          <div className="phone-frame">
            <div className="phone-notch"></div>
            <div className="phone-screen">{pageEl}</div>
          </div>
        </div>
      ) : (
        <div className="shell-desktop">{pageEl}</div>
      )}
      <CookieBanner/>
      <TweaksPanel title="Tweaks">
        <TweakSection title="View">
          <TweakRadio label="Frame" value={t.viewMode} onChange={v=>setTweak('viewMode', v)} options={[
            {value:'desktop', label:'Desktop'},
            {value:'mobile', label:'Mobile'},
          ]}/>
        </TweakSection>
        <TweakSection title="Hero variant">
          <TweakSelect label="Layout" value={t.heroVariant} onChange={v=>setTweak('heroVariant', v)} options={[
            {value:'split', label:'Split — portrait card (default)'},
            {value:'fullbleed', label:'Full-bleed — photo behind'},
            {value:'editorial', label:'Editorial — two-up + serif'},
          ]}/>
        </TweakSection>
        <TweakSection title="Orange shade">
          <TweakColor label="Accent" value={t.orangeShade} onChange={v=>setTweak('orangeShade', v)} options={[
            {value:'signal', color:'#e5532a'},
            {value:'rust', color:'#c64a23'},
            {value:'blood', color:'#d63916'},
            {value:'amber', color:'#ef7a2e'},
          ]}/>
        </TweakSection>
        <TweakSection title="Background">
          <TweakRadio label="Density" value={t.density} onChange={v=>setTweak('density', v)} options={[
            {value:'comfy', label:'Warm-dark'},
            {value:'pure', label:'Pure black'},
          ]}/>
        </TweakSection>
        <TweakSection title="Jump to page">
          <TweakSelect label="Route" value={page} onChange={v=>setPage(v)} options={[
            {value:'home', label:'Home'},
            {value:'programs', label:'Programs'},
            {value:'about', label:'About'},
            {value:'testimonials', label:'Testimonials'},
            {value:'contact', label:'Contact'},
          ]}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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