import React, { useState, useEffect } from 'react';
import { Navigation } from './components/Navigation';
import { Home } from './components/pages/Home';
import { Recent } from './components/pages/Recent';
import { Directors } from './components/pages/Directors';
import { About } from './components/pages/About';
import { Service } from './components/pages/Service';
import { Contact } from './components/pages/Contact';
import { Footer } from './components/Footer';

export type Page = 'home' | 'recent' | 'directors' | 'about' | 'service' | 'contact';

export default function App() {
  const [currentPage, setCurrentPage] = useState<Page>('home');
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [currentPage]);

  const renderPage = () => {
    switch (currentPage) {
      case 'home':
        return <Home />;
      case 'recent':
        return <Recent />;
      case 'directors':
        return <Directors />;
      case 'about':
        return <About />;
      case 'service':
        return <Service />;
      case 'contact':
        return <Contact />;
      default:
        return <Home />;
    }
  };

  return (
    <div className="min-h-screen bg-white">
      <Navigation 
        isScrolled={isScrolled} 
        currentPage={currentPage}
        setCurrentPage={setCurrentPage}
      />
      {renderPage()}
      <Footer setCurrentPage={setCurrentPage} />
    </div>
  );
}