"use client";
import Footer from "@comp/Footer/page";
import BeautySection from "@comp/LandingPage/BeautySection/page";
import BetweenSexualSection from "@comp/LandingPage/BetweenSexualSection/page";
import BrandsLogoSection from "@comp/LandingPage/BrandsLogoSection/page";
import HeroSection from "@comp/LandingPage/HeroSection/page";
import HomeSection from "@comp/LandingPage/HomeSection/page";
import SurpriseSection from "@comp/LandingPage/SurpriseSection/page";
import Navbar from "@comp/Navbar/page";
import AppContext from "@ctx/AppContext";
import Head from "next/head";
import { useContext, useEffect, useState } from "react";

export default function Page() {
  const CTX = useContext(AppContext);

  const specialOfferData = CTX.state.specialOfferData;
  const cosmeticData = CTX.state.cosmeticData;
  const HomeCosmeticData = CTX.state.HomeCosmeticData;

  useEffect(() => {
    CTX.fetchSpecialOffer();
    CTX.fetchCosmetic();
    CTX.fetchHomeCosmetic();
  }, []);
  return (
    <>
      <Head>
        <title>My new cool app</title>
      </Head>
      <div className="bg-header">
        <Navbar theme={0} />
        <HeroSection />
      </div>

      <SurpriseSection data={specialOfferData?.products} />

      <BetweenSexualSection />
      <BrandsLogoSection />

      <BeautySection data={cosmeticData?.products} />
      <HomeSection data={HomeCosmeticData?.products} />
      <Footer />
    </>
  );
}
