"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 CategoriesHero from "@comp/LandingPage/CategoriesHero/page";
import EyeSection from "@comp/LandingPage/EyeSection/page";
import HeroSection from "@comp/LandingPage/HeroSection/page";
import HomeSection from "@comp/LandingPage/HomeSection/page";
import SunCreamSection from "@comp/LandingPage/SunCreamSection/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 Image from "next/image";
import Link from "next/link";
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 eyeCosmeticData = CTX.state.eyeCosmeticData;
  const sunCreamData = CTX.state.sunCreamData;
  const hairCosmeticData = CTX.state.hairCosmeticData;

  useEffect(() => {
    CTX.fetchSpecialOffer();
    CTX.fetchCosmetic();
    CTX.fetchEyeCosmetic();
    CTX.fetchHairCosmetic();
    CTX.fetchSunCream();
  }, []);
  return (
    <>
      <Head>
        <title>My new cool app</title>
      </Head>
      <div className="h-fit">
        <Navbar />
        <HeroSection />
        <CategoriesHero />
      </div>

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

      <BetweenSexualSection />
      <SunCreamSection data={sunCreamData?.products} />
      <BrandsLogoSection />

      <BeautySection data={cosmeticData?.products} />
      <HomeSection data={hairCosmeticData?.products} />
      <EyeSection data={eyeCosmeticData?.products} />

      <Footer />
    </>
  );
}
