import React, { useState, useEffect } from 'react';
import Navbar from './components/Navbar';
import Hero from './components/Hero';
import Features from './components/Features';
import HowItWorks from './components/HowItWorks';
import CallToAction from './components/CallToAction';
import Footer from './components/Footer';
import PrivacyPolicy from './components/PrivacyPolicy';

const App: React.FC = () => {
  const [currentPage, setCurrentPage] = useState<'home' | 'privacy'>('home');

  useEffect(() => {
    const handleHashChange = () => {
      const hash = window.location.hash;
      if (hash === '#privacy') {
        setCurrentPage('privacy');
      } else {
        setCurrentPage('home');
      }
    };

    // Initial check
    handleHashChange();

    // Listen for hash changes
    window.addEventListener('hashchange', handleHashChange);
    return () => window.removeEventListener('hashchange', handleHashChange);
  }, []);

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

  const navigateToPrivacy = (e?: React.MouseEvent) => {
    e?.preventDefault();
    window.location.hash = 'privacy';
  };

  const navigateToHome = (e?: React.MouseEvent) => {
    e?.preventDefault();
    window.location.hash = '';
    // If hash is empty, it might not trigger hashchange if it was already empty? 
    // Actually assigning '' to hash usually removes the hash or makes it '#'.
    // Better to explicitly set history or just ensure state updates if the listener fires.
    // If we rely on the listener, updating hash is enough.
  };

  return (
    <div className="bg-background-dark text-text-light font-sans min-h-screen selection:bg-primary selection:text-background-dark">
      <Navbar onLogoClick={navigateToHome} />
      <main>
        {currentPage === 'home' ? (
          <>
            <Hero />
            <Features />
            <HowItWorks />
            <CallToAction />
          </>
        ) : (
          <PrivacyPolicy onBack={navigateToHome} />
        )}
      </main>
      <Footer onPrivacyClick={navigateToPrivacy} />
    </div>
  );
};

export default App;