import {useEffect, useState} from 'react'; // 1. Import useEffect
import { useLocation } from 'react-router-dom'; // 2. Import useLocation
import Home from '../components/Home.jsx';
import Experiences from '../components/Experiences.jsx';
import Projects from '../components/Projects.jsx';
import Skills from '../components/Skills.jsx';
import Footer from '../components/Footer.jsx';

function HomePage() {
    const location = useLocation();

    useEffect(() => {
        if (location.hash) {
            const id = location.hash.replace('#', '');
            const element = document.getElementById(id);
            if (element) {
                setTimeout(() => {
                    element.scrollIntoView({ behavior: 'smooth' });
                }, 100);
            }
        }
    }, [location]);

    return (
        <div>
            <Home/>
            <Experiences/>
            <Projects/>
            <Skills/>
            <Footer/>
        </div>
    );
}
export default HomePage;