/**
 * Multi-Page Portfolio Website for Prof. Dr. N. Thajuddin, Ph.D., D.Sc.
 * Former Pro-Vice Chancellor, Distinguished Microbiologist & Top 2% World Scientist
 */

import React, { useState } from 'react';
import Navbar, { PageId } from './components/Navbar';
import HomePage from './components/HomePage';
import ExpertisePillars from './components/ExpertisePillars';
import PublicationsSection from './components/PublicationsSection';
import GenBankExplorer from './components/GenBankExplorer';
import PatentsGrantsSection from './components/PatentsGrantsSection';
import GlobalNetworkSection from './components/GlobalNetworkSection';
import MentorshipSection from './components/MentorshipSection';
import AwardsPage from './components/AwardsPage';
import ContactPage from './components/ContactPage';
import ContactFooter from './components/ContactFooter';

export default function App() {
  const [activePage, setActivePage] = useState<PageId>('home');

  return (
    <div className="min-h-screen flex flex-col bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 selection:bg-emerald-500 selection:text-white w-full overflow-x-hidden">
      {/* Navigation Top Bar with Stylized Name Logo & Compact Submenus */}
      <Navbar
        activePage={activePage}
        setActivePage={setActivePage}
      />

      {/* Multi-Page Views Render Engine */}
      <main className="flex-1 w-full overflow-x-hidden">
        {activePage === 'home' && (
          <HomePage
            setActivePage={setActivePage}
          />
        )}

        {activePage === 'expertise' && (
          <div className="py-6">
            <ExpertisePillars />
          </div>
        )}

        {activePage === 'publications' && (
          <div className="space-y-6 py-6">
            <PublicationsSection />
            <GenBankExplorer />
          </div>
        )}

        {activePage === 'patents-grants' && (
          <div className="py-6">
            <PatentsGrantsSection />
          </div>
        )}

        {activePage === 'global-impact' && (
          <div className="space-y-6 py-6">
            <GlobalNetworkSection />
            <MentorshipSection />
          </div>
        )}

        {activePage === 'awards' && (
          <AwardsPage />
        )}

        {activePage === 'contact' && (
          <ContactPage />
        )}
      </main>

      {/* Quiet Academic Contact Footer */}
      <ContactFooter setActivePage={setActivePage} />
    </div>
  );
}