/* App root — page router with prefixed keys, light by default, i18n */

const AppShell = () => {
  const [page, setPage] = useState(() => {
    const hash = window.location.hash.replace('#', '');
    return hash || 'home';
  });
  const [langOpen, setLangOpen] = useState(false);

  useEffect(() => {
    window.location.hash = page;
    window.scrollTo({ top: 0 });
  }, [page]);

  // Default to LIGHT mode on first load
  useEffect(() => {
    if (!document.documentElement.hasAttribute('data-theme-init')) {
      document.documentElement.classList.remove('dark');
      document.documentElement.setAttribute('data-theme-init', '1');
    }
  }, []);

  const labels = {
    home: '01 Homepage',
    phones: '02 Phone Detail',
    compare: '03 Comparison',
    best: '04 Best Phones',
    brands: '05 Brands',
    news: '06 News',
    search: '07 Search',
  };

  // Parse the prefixed page key into (root, sub)
  const [root, sub] = page.includes('.') ? page.split('.') : [page, null];

  const renderPage = () => {
    switch (root) {
      case 'phones':  return <PhoneDetail setPage={setPage} />;
      case 'compare': return <ComparisonPage setPage={setPage} />;
      case 'best':    return <BestPhones setPage={setPage} initialCategory={sub || 'overall'} />;
      case 'brands':  return <Brands setPage={setPage} />;
      case 'brand':   return <BrandDetail slug={sub || 'apple'} setPage={setPage} />;
      case 'news':    return <News setPage={setPage} />;
      case 'search':  return <SearchResults setPage={setPage} />;
      case 'content': return <ContentPage kind={sub || 'about'} setPage={setPage} />;
      case 'list':    return <ListingPage kind={sub || 'all'} setPage={setPage} />;
      default:        return <Homepage setPage={setPage} />;
    }
  };

  // active nav highlight uses root
  const headerActive = root;

  return (
    <div className="min-h-screen bg-paper dark:bg-d-bg text-ink dark:text-white">
      <Header page={headerActive} setPage={setPage} onOpenLang={() => setLangOpen(true)} />
      <div data-screen-label={labels[root] || `99 ${page}`}>
        {renderPage()}
      </div>
      <Footer setPage={setPage} onOpenLang={() => setLangOpen(true)} />
      <StickyCTA onCompare={() => setPage('compare')} />
      <LangModal open={langOpen} onClose={() => setLangOpen(false)} />
    </div>
  );
};

const App = () => (
  <LangProvider>
    <AppShell />
  </LangProvider>
);

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