// App.jsx — router
const { useState: useAppState, useEffect: useAppEffect } = React;

function App() {
  const pageRoutes = {
    home: '/',
    'For Brands': '/for-brands/',
    'For Marketers': '/for-marketers/',
    'For Sports': '/for-sports/',
    'Zenko Apps': '/zenko-apps/',
    'For Platforms': '/for-platforms/',
    'How It Works': '/how-it-works/',
    'Why Zenko?': '/why-zenko/',
    Causes: '/causes/',
    '$ZENKO': '/zenko-token/',
    Blog: '/blog/',
    Insights: '/insights/',
    'Growth & Acquisition': '/insights/growth-acquisition/',
    'Loyalty & Retention': '/insights/loyalty-retention/',
    'Sport & Community': '/insights/sport-community/',
    'AI & Agentic Commerce': '/insights/ai-agentic-commerce/',
    About: '/about/',
    Contact: '/contact/',
    Privacy: '/privacy/',
    'Zenko Move Terms': '/zenko-move-terms/',
  };
  const routePages = Object.fromEntries(Object.entries(pageRoutes).map(([page, path]) => [path.replace(/\/$/, '') || '/', page]));

  const pathToPage = () => {
    const cleanPath = window.location.pathname.replace(/\/$/, '') || '/';
    const match = cleanPath.match(/^\/blog\/([^/]+)$/);
    if (match) return { type: 'BlogPost', slug: decodeURIComponent(match[1]) };
    const insightMatch = cleanPath.match(/^\/insights\/([^/]+)$/);
    if (insightMatch && (window.ZENKO_INSIGHTS || []).some(item => item.slug === insightMatch[1])) {
      return { type: 'InsightArticle', slug: decodeURIComponent(insightMatch[1]) };
    }
    return routePages[cleanPath] || 'home';
  };
  const [page, setAppPage] = useAppState(pathToPage);

  useAppEffect(() => {
    const onPopState = () => setAppPage(pathToPage());
    window.addEventListener('popstate', onPopState);
    return () => window.removeEventListener('popstate', onPopState);
  }, []);

  function navigate(p) {
    setAppPage(p);
    const nextPath = typeof p === 'object' && p.type === 'BlogPost'
      ? `/blog/${p.slug}/`
      : typeof p === 'object' && p.type === 'InsightArticle'
      ? `/insights/${p.slug}/`
      : pageRoutes[p] || '/';
    if (window.location.pathname !== nextPath) window.history.pushState({}, '', nextPath);
    window.scrollTo({ top: 0, behavior: 'instant' });
  }

  const renderPage = () => {
    if (typeof page === 'object' && page.type === 'BlogPost') {
      return <BlogPostPage slug={page.slug} onNavigate={navigate} />;
    }
    if (typeof page === 'object' && page.type === 'InsightArticle') {
      return <InsightArticlePage slug={page.slug} onNavigate={navigate} />;
    }
    switch(page) {
      case 'For Brands':    return <ForBrandsPage onNavigate={navigate} />;
      case 'For Marketers': return <ForMarketersPage onNavigate={navigate} />;
      case 'For Sports':    return <ForSportsPage onNavigate={navigate} />;
      case 'Zenko Apps':    return <ZenkoAppsPage onNavigate={navigate} />;
      case 'For Platforms': return <ForPlatformsPage onNavigate={navigate} />;
      case 'How It Works':  return <HowItWorksPage onNavigate={navigate} />;
      case 'Why Zenko?':    return <WhyZenkoPage onNavigate={navigate} />;
      case 'Causes':        return <CausesPage onNavigate={navigate} />;
      case '$ZENKO':        return <TokenPage onNavigate={navigate} />;
      case 'Blog':          return <BlogPage onNavigate={navigate} />;
      case 'Insights':      return <InsightsPage category="All Insights" onNavigate={navigate} />;
      case 'Growth & Acquisition': return <InsightsPage category="Growth & Acquisition" onNavigate={navigate} />;
      case 'Loyalty & Retention': return <InsightsPage category="Loyalty & Retention" onNavigate={navigate} />;
      case 'Sport & Community': return <InsightsPage category="Sport & Community" onNavigate={navigate} />;
      case 'AI & Agentic Commerce': return <InsightsPage category="AI & Agentic Commerce" onNavigate={navigate} />;
      case 'About':         return <AboutPage onNavigate={navigate} />;
      case 'Contact':       return <ContactPage onNavigate={navigate} />;
      case 'Privacy':       return <LegalPage slug="privacy" onNavigate={navigate} />;
      case 'Zenko Move Terms': return <LegalPage slug="zenko-move-terms" onNavigate={navigate} />;
      default:              return <HomePage onNavigate={navigate} />;
    }
  };

  return (
    <div>
      <Nav activePage={typeof page === 'object' ? (page.type === 'InsightArticle' ? 'Insights' : 'Blog') : page} onNavigate={navigate} />
      <main>{renderPage()}</main>
      <Band />
      <Footer onNavigate={navigate} />
    </div>
  );
}

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