import { ReactElement, useEffect } from 'react';
import basicstore from '@/stores/home';
import { SelectedPage } from '@/types/home';
import Home from '@/components/Home';
import Teams from '@/components/Teams';
import Tockenomics from '@/components/Tockenomics';
import BuyProps from '@/components/BuyProps';
import Resources from '@/components/Resources';
import Layout from '@/layout/PublicLayout';

export default function Index() {
  const { setSelected } = basicstore();

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY === 0) {
        setSelected(SelectedPage.Home);
      }
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <>
      <div className="bg-anim">
        <img src="img/bg-anim.gif" alt="" />
      </div>
      <Home setSelected={setSelected} />
      <Teams setSelected={setSelected} />
      <Tockenomics setSelected={setSelected} />
      <BuyProps setSelected={setSelected} />
      <Resources setSelected={setSelected} />
    </>
  );
}
Index.getLayout = function getLayout(page: ReactElement) {
  return <Layout>{page}</Layout>;
};