/* 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() {
  const [page, setPage] = useStateA('home');
  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); };
  }, []);

  // Apply orange shade as CSS vars
  useEffectA(() => {
    const o = ORANGE_OPTIONS[t.orangeShade] || ORANGE_OPTIONS.signal;
    document.documentElement.style.setProperty('--orange', o.o);
    document.documentElement.style.setProperty('--orange-soft', o.s);
    document.documentElement.style.setProperty('--orange-deep', o.d);
  }, [t.orangeShade]);

  // Density
  useEffectA(() => {
    document.documentElement.style.setProperty('--bg', t.density === 'pure' ? '#000000' : '#0a0908');
    document.documentElement.style.setProperty('--bg-2', t.density === 'pure' ? '#0a0a0a' : '#121110');
  }, [t.density]);

  // 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/>);