/* App shell — top bar + route switching + footer */
const { useState: useAppState, useEffect: useAppEffect } = React;

const ROUTES = ['home','about','hostages','story','speaking','news'];
const SHOP_URL = 'https://naomigal.myshopify.com';
const COMMISSION_URL = 'https://naomigal.myshopify.com/products/get-drawn-custom-drawing-by-naomi';

function App() {
  const [route, setRoute] = useAppState(() => {
    const h = (window.location.hash || '').replace('#','');
    return ROUTES.includes(h) ? h : 'home';
  });
  const go = (r) => {
    if (r === 'shop') { window.open(window.NG_SHOP_URL || SHOP_URL, '_blank', 'noopener'); return; }
    if (r === 'commission') { window.open(window.NG_COMMISSION_URL || COMMISSION_URL, '_blank', 'noopener'); return; }
    setRoute(r); window.location.hash = r; window.scrollTo({top:0, behavior:'instant'});
  };
  useAppEffect(() => {
    const h = (window.location.hash || '').replace('#','');
    if (h && !ROUTES.includes(h)) { window.location.hash = 'home'; }
  }, []);
  useAppEffect(() => {
    const onHash = () => {
      const h = (window.location.hash || '').replace('#','');
      if (ROUTES.includes(h)) setRoute(h);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  return (
    <div style={{ minHeight:'100vh', display:'flex', flexDirection:'column' }}>
      <TopBar route={route} go={go}/>
      <div style={{ flex:1 }}>
        {route==='home'     && <HomePage go={go}/>}
        {route==='about'    && <AboutPage go={go}/>}
        {route==='hostages' && <HostagesPage go={go}/>}
        {route==='story'    && <StoryPage go={go}/>}
        {route==='speaking' && <SpeakingPage go={go}/>}
        {route==='news'     && <NewsPage go={go}/>}
      </div>
      <Footer go={go}/>
    </div>
  );
}

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