import React from 'react';
import { SellerProvider, useSeller } from './context/SellerContext';
import Header from './components/layout/Header';
import Footer from './components/layout/Footer';
import LandingPage from './components/pages/LandingPage';
import HowItWorksPage from './components/pages/HowItWorksPage';
import PricingPage from './components/pages/PricingPage';
import GrowBusinessPage from './components/pages/GrowBusinessPage';
import AboutPage from './components/pages/AboutPage';
import ContactPage from './components/pages/ContactPage';
import AuthForms from './components/pages/AuthForms';
import OnboardingWizard from './components/pages/OnboardingWizard';
import DashboardLayout from './components/dashboard/DashboardLayout';

function AppRouter() {
  const { currentPage } = useSeller();

  if (currentPage === 'dashboard') {
    return <DashboardLayout />;
  }

  if (currentPage === 'home') {
    return <LandingPage />;
  }

  return (
    <div className="is-flex is-flex-direction-column" style={{ minHeight: '100vh', backgroundColor: 'var(--trad-bg)' }}>
      <Header />
      <main className="is-flex-grow-1">
        {currentPage === 'how-it-works' && <HowItWorksPage />}
        {currentPage === 'pricing' && <PricingPage />}
        {currentPage === 'grow-business' && <GrowBusinessPage />}
        {currentPage === 'profile-completion' && <OnboardingWizard />}
        {currentPage === 'about' && <AboutPage />}
        {currentPage === 'contact' && <ContactPage />}
        {(currentPage === 'login' || currentPage === 'signup') && <AuthForms />}
      </main>
      <Footer />
    </div>
  );
}

export default function App() {
  return (
    <SellerProvider>
      <AppRouter />
    </SellerProvider>
  );
}