// App root + Tweaks
const { useState: useStateApp, useEffect: useEffectApp } = React;

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

function App() {
  const initialRoute = window.__BYTESGLUE_SHOWCASE_ROUTE || 'home';
  const [route, setRoute] = useStateApp(initialRoute);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply accent live
  useEffectApp(() => {
    document.documentElement.style.setProperty('--cta', t.accent);
  }, [t.accent]);

  const go = (r) => setRoute(r);

  let page = null;
  switch (route) {
    case 'home':       page = <Home />; break;
    case 'products':   page = <ProductsHub />; break;
    case 'product':    page = <ProductBusinessCards />; break;
    case 'portfolio':  page = <Portfolio />; break;
    case 'quote':      page = <Quote />; break;
    case 'upload':     page = <Upload />; break;
    case 'contact':    page = <Contact />; break;
    default:           page = <Home />;
  }

  return (
    <RouterCtx.Provider value={{ route, go }}>
      <ScrollTopOnRoute route={route} />
      <Nav />
      {page}
      <Footer />
      <MobiBar />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent color" />
        <TweakColor
          label="Primary CTA"
          value={t.accent}
          options={['#F5511E', '#EC008C', '#00AEEF', '#0E1320']}
          onChange={(v) => setTweak('accent', v)}
        />
        <div style={{fontSize: 10, color: 'rgba(41,38,27,0.5)', marginTop: 6, lineHeight: 1.4}}>
          Drives the Get-a-Quote button, price chips, focus accents and section underlines across the site.
        </div>
      </TweaksPanel>
    </RouterCtx.Provider>
  );
}

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