import React, { useState } from 'react';
import { LandingPage } from './LandingPage';
import { TourDetailPage } from './TourDetailPage';
import { ExploreMap } from './ExploreMap';
import { SignupPage } from './SignupPage';

const App = () => {
  type View = 'landing' | 'explore' | 'detail' | 'signup';
  const [view, setView] = useState<View>('landing');

  return (
    <div className="app-container">
      {view === 'landing' && (
        <LandingPage 
          onContinue={() => setView('explore')} 
          onGoToSignup={() => setView('signup')} 
        />
      )}

      {view === 'signup' && (
        <SignupPage 
          onBack={() => setView('landing')} 
          onSuccess={() => setView('landing')} 
        />
      )}
      
      {view === 'explore' && (
        <ExploreMap onBack={() => setView('landing')} />
      )}

      {view === 'detail' && (
        <TourDetailPage />
      )}
    </div>
  );
};

export default App;