/* App: routing, theme + tweaks, mount. */
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mode": "Paper",
  "tiles": "Grid",
  "work": "Gallery",
  "accent": "#12A0BC"
}/*EDITMODE-END*/;

const ACCENT_MAP = { "#12A0BC": "", "#A84E32": "clay", "#6B7F6A": "sage" };
const SECTION_KEYS = ["how", "which", "who", "why", "what", "where", "when"];

function readHash() {
  const h = (window.location.hash || '').replace(/^#\/?/, '');
  return SECTION_KEYS.includes(h) ? h : 'home';
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = useStateApp(readHash());
  const dark = t.mode === 'Looking-glass';

  useReveal(view);

  // apply theme + accent to root
  useEffectApp(() => {
    const r = document.documentElement;
    if (dark) r.setAttribute('data-theme', 'dark'); else r.removeAttribute('data-theme');
    const acc = ACCENT_MAP[t.accent] || '';
    if (acc) r.setAttribute('data-accent', acc); else r.removeAttribute('data-accent');
  }, [dark, t.accent]);

  // hash routing
  useEffectApp(() => {
    const onHash = () => setView(readHash());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const navigate = (key) => {
    window.location.hash = key === 'home' ? '' : '/' + key;
    setView(key);
    window.scrollTo({ top: 0, behavior: 'auto' });
  };
  const back = () => navigate('home');
  const work = (t.work || 'Gallery').toLowerCase();
  const tiles = (t.tiles || 'Grid').toLowerCase();

  const section = () => {
    switch (view) {
      case 'how':   return <HowSection onBack={back} />;
      case 'which': return <WhichSection onBack={back} />;
      case 'who':   return <WhoSection onBack={back} />;
      case 'why':   return <WhySection onBack={back} />;
      case 'what':  return <WhatSection onBack={back} layout={work} />;
      case 'where': return <WhereSection onBack={back} />;
      case 'when':  return <WhenSection onBack={back} />;
      default:      return <Home tweaks={{ tiles }} onNavigate={navigate} />;
    }
  };

  return (
    <React.Fragment>
      <TopBar
        active={view === 'home' ? null : view}
        onNavigate={navigate}
        dark={dark}
        onToggleGlass={() => setTweak('mode', dark ? 'Paper' : 'Looking-glass')}
      />
      <main key={view}>{section()}</main>

      <TweaksPanel>
        <TweakSection label="Looking-glass" />
        <TweakRadio label="Mode" value={t.mode} options={['Paper', 'Looking-glass']}
          onChange={v => setTweak('mode', v)} />
        <TweakColor label="Accent" value={t.accent}
          options={['#12A0BC', '#A84E32', '#6B7F6A']}
          onChange={v => setTweak('accent', v)} />
        <TweakSection label="Home tiles" />
        <TweakRadio label="Layout" value={t.tiles} options={['Grid', 'Index', 'Mosaic']}
          onChange={v => setTweak('tiles', v)} />
        <TweakSection label="Portfolio grid" />
        <TweakRadio label="Layout" value={t.work} options={['Gallery', 'Index', 'Mosaic']}
          onChange={v => setTweak('work', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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