/* Franchise Kosovo — App router */
const { useState: useStateA, useEffect: useEffectA } = React;

function App() {
  const [route, setRoute] = useStateA({ view: 'home' });
  const [toast, setToast] = useStateA(null);

  const navigate = (r) => {
    setRoute(r);
    window.scrollTo({ top: 0, behavior: 'auto' });
  };
  const openFranchise = (f) => navigate({ view: 'detail', franchise: f });

  useEffectA(() => {
    if (toast) {
      const t = setTimeout(() => setToast(null), 3200);
      return () => clearTimeout(t);
    }
  }, [toast]);

  const showToast = (msg) => setToast(msg);

  let page;
  switch (route.view) {
    case 'directory':   page = <Directory openFranchise={openFranchise} />; break;
    case 'detail':      page = <Detail f={route.franchise} navigate={navigate} openFranchise={openFranchise} onInquire={() => navigate({ view: 'contact', prefill: route.franchise && route.franchise.industry })} />; break;
    case 'franchisors': page = <Franchisors navigate={navigate} />; break;
    case 'about':       page = <About navigate={navigate} />; break;
    case 'contact':     page = <Contact prefill={route.prefill} onSubmit={() => showToast('Inquiry sent — we’ll be in touch')} />; break;
    default:            page = <Home navigate={navigate} openFranchise={openFranchise} />;
  }

  return (
    <React.Fragment>
      <Header route={route} navigate={navigate} />
      {page}
      <Footer navigate={navigate} />
      <div className={`toast ${toast ? 'show' : ''}`}>
        <Icon name="check-circle" />{toast}
      </div>
    </React.Fragment>
  );
}

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