import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import Hero from './components/Hero';
import Manifesto from './components/Manifesto';
import CorePillars from './components/CorePillars';
import Foundations from './components/Foundations';
import ForYou from './components/ForYou';
import CallToAction from './components/CallToAction';
import MembershipOptions from './components/MembershipOptions';
import Referral from './components/referral';
import Footer from './components/Footer';

const Home = () => (
  <div className="App">
    <Hero />
    <Manifesto />
    <Foundations />
    <ForYou />
    <CallToAction />
  </div>
);

const MembershipPage = () => (
  <div className="App">
    <MembershipOptions />
    <Referral />
  </div>
);

function App() {
  return (
    <Router>
      <Header /> {/* Render Header here */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/membership" element={<MembershipPage />} />
      </Routes>
      <div className="mt-8 footer-separator" />
      <Footer />
    </Router>
  );
}

export default App;