/* fungames — App shell, router, Tweaks panel */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "rust",
  "headingFont": "Inter",
  "monoFont": "Space Grotesk",
  "density": "comfortable",
  "showLog": true,
  "page": "home"
}/*EDITMODE-END*/;

function App() {
  const [tweaks] = React.useState(TWEAK_DEFAULTS);
  const setTweak = () => {};
  const [page, setPage] = React.useState({ name: 'home', params: {} });

  // Apply accent
  React.useEffect(() => {
    document.documentElement.setAttribute('data-accent', tweaks.accent);
    const map = {
      rust:   { v: '#B8450C', d: '#7F2A00', s: '#FFE7DF' },
      indigo: { v: '#1E3A5F', d: '#102540', s: '#DBE4ED' },
      moss:   { v: '#4F6B4A', d: '#354A31', s: '#D8E0D2' },
      ochre:  { v: '#B8853C', d: '#8A6322', s: '#F0E2C7' },
    };
    const c = map[tweaks.accent] || map.rust;
    document.documentElement.style.setProperty('--rust', c.v);
    document.documentElement.style.setProperty('--rust-deep', c.d);
    document.documentElement.style.setProperty('--rust-soft', c.s);
  }, [tweaks.accent]);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--font-display', `'${tweaks.headingFont}', system-ui, sans-serif`);
    document.documentElement.style.setProperty('--font-body', `'${tweaks.headingFont}', system-ui, sans-serif`);
    document.documentElement.style.setProperty('--font-mono', `'${tweaks.monoFont}', monospace`);
  }, [tweaks.headingFont, tweaks.monoFont]);

  React.useEffect(() => {
    const sec = tweaks.density === 'compact' ? '52px 0' : tweaks.density === 'roomy' ? '96px 0' : '72px 0';
    document.documentElement.style.setProperty('--section-pad', sec);
    document.documentElement.style.setProperty('--gutter', tweaks.density === 'compact' ? '24px' : '32px');
  }, [tweaks.density]);

  // Wire navigation globals + hash router
  React.useEffect(() => {
    const parseHash = () => {
      const h = (location.hash || '#home').slice(1);
      const [name, id] = h.split('/');
      const map = {
        'home': { name: 'home' },
        'catalogue': { name: 'catalogue' },
        'engagement': { name: 'engagement' },
        'news': { name: 'news' },
        'about': { name: 'about' },
        'contact': { name: 'contact' },
        'game': { name: 'game-detail', params: { id: id || 'diffuser' } },
        'article': { name: 'news-article', params: { id: id || NEWS[0].id } },
      };
      return map[name] || { name: 'home' };
    };
    const sync = () => {
      const next = parseHash();
      setPage({ name: next.name, params: next.params || {} });
      window.scrollTo({ top: 0, behavior: 'instant' });
    };
    window.fgNavigate = (name, params={}) => {
      const hash = name === 'game-detail' ? `#game/${params.id||''}`
                : name === 'news-article' ? `#article/${params.id||''}`
                : `#${name}`;
      if (location.hash !== hash) location.hash = hash;
      else { setPage({ name, params }); window.scrollTo({ top: 0, behavior: 'instant' }); }
    };
    window.fgNavigateGame = (id) => window.fgNavigate('game-detail', { id });
    window.fgNavigateNews = (id) => window.fgNavigate('news-article', { id });
    window.addEventListener('hashchange', sync);
    sync();
    return () => window.removeEventListener('hashchange', sync);
  }, []);

  // Determine active nav
  const navMap = {
    'home': 'home',
    'catalogue': 'catalogue',
    'game-detail': 'catalogue',
    'engagement': 'engagement',
    'news': 'news',
    'news-article': 'news',
    'about': 'about',
    'contact': 'contact',
  };
  const activeNav = navMap[page.name];

  let content;
  switch (page.name) {
    case 'catalogue':    content = <CataloguePage />; break;
    case 'game-detail':  content = <GameDetailPage id={page.params.id} />; break;
    case 'engagement':   content = <EngagementPage />; break;
    case 'news':         content = <NewsPage />; break;
    case 'news-article': content = <NewsArticlePage id={page.params.id} />; break;
    case 'about':        content = <AboutPage />; break;
    case 'contact':      content = <ContactPage />; break;
    default:             content = <HomePage />;
  }

  return (
    <React.Fragment>
      <Nav active={activeNav} />
      {content}
      <Footer />
    </React.Fragment>
  );
}

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