const GS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": 1,
  "slideSec": 5.5,
  "nav": "Black pill",
  "grain": true,
  "cursor": true
}/*EDITMODE-END*/;
const gsUseTweaks = window.useTweaks || ((d) => [d, () => {}]);

function App() {
  const [t, setTweak] = gsUseTweaks(GS_DEFAULTS);
  window.GS_T = t;
  const TP = window.TweaksPanel;
  const [page, setPage] = React.useState('home');
  const [pf, setPf] = React.useState(null);
  const nav = (p, opts) => { setPage(p); setPf(opts || null); const s = document.getElementById('scroll'); if (s) s.scrollTop = 0; };
  return (
    <div id="scroll" style={{ height: '100%', overflowY: 'auto', background: 'var(--surface-page)' }}>
      <SiteHeader page={page} onNav={nav} />
      {page === 'home' && <HomeScreen onNav={nav} />}
      {page === 'work' && <WorkScreen onNav={nav} />}
      {page === 'portfolio' && <PortfolioScreen key={JSON.stringify(pf)} onNav={nav} initial={pf} />}
      {page === 'case' && <CaseScreen onNav={nav} />}
      {page === 'services' && <ServicesScreen onNav={nav} />}
      {page === 'contact' && <ContactScreen />}
      <SiteFooter onNav={nav} />
      {t.cursor && <PfGoldCursor />}
      {t.grain && <PfGrain />}
      {TP && (
        <TP>
          <TweakSection label="Hero" />
          <TweakSlider label="Headline size" value={t.headline} min={0.7} max={1.4} step={0.05} unit="×" onChange={(v) => setTweak('headline', v)} />
          <TweakSlider label="Slide speed" value={t.slideSec} min={3} max={10} step={0.5} unit="s" onChange={(v) => setTweak('slideSec', v)} />
          <TweakSection label="Navigation" />
          <TweakRadio label="Bar style" value={t.nav} options={['Black pill', 'Glass only']} onChange={(v) => setTweak('nav', v)} />
          <TweakSection label="Effects" />
          <TweakToggle label="Film grain" value={t.grain} onChange={(v) => setTweak('grain', v)} />
          <TweakToggle label="Gold cursor" value={t.cursor} onChange={(v) => setTweak('cursor', v)} />
        </TP>
      )}
    </div>
  );
}
window.App = App;
const mount = document.getElementById('root');
if (mount) ReactDOM.createRoot(mount).render(<App />);