"use client";
import { testApi } from "@/api/test.api";
import About from "@/ui/components/a-propos/about";
import WhoAreWe from "@/ui/components/a-propos/who-are-we";
import WhyUs from "@/ui/components/a-propos/why-us";
import LastCourse from "@/ui/components/formation/formation-recente";
import HeroBanner from "@/ui/components/hero-banner";
import StepRegister from "@/ui/components/inscription/step-inscription";
import MiniCardHeader from "@/ui/components/card/card-header";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import Image from "next/image";
import { useEffect, useState } from "react";
import { HoverEffect } from "@/ui/components/card/carde-hover-effect";

export default function Home() {
  const proudly = [
    {
      icon: <FontAwesomeIcon className="h-10 w-10" icon={"cog"} />,
      titre: "Beginner",
      description:
        "Lorem ipsum dolor sit vitae doloremque similique. Iusto, rem molestiae",
    },
    {
      icon: <FontAwesomeIcon className="h-10 w-10" icon={"palette"} />,
      titre: "Inermediaire",
      description:
        "Lorem ipsum dolor sit vitae doloremque similique. Iusto, rem molestiae",
    },
    {
      icon: <FontAwesomeIcon className="h-10 w-10" icon={"coffee"} />,
      titre: "Avancé",
      description:
        "Lorem ipsum dolor sit vitae doloremque similique. Iusto, rem molestiae",
    },
    {
      icon: <FontAwesomeIcon className="h-10 w-10" icon={"star"} />,
      titre: "Expert",
      description:
        "Lorem ipsum dolor sit vitae doloremque similique. Iusto, rem molestiae",
    },
  ];
  const [data, setData] = useState("");
  useEffect(() => {
    testApi.apitest().then((r) => {
      setData(r.data);
      console.log(data);
    });
  }, []);
const projects = [
  {
    title: "La formation professionnelle continue",
    description: "Amélioration des compétences du salarié",
    link: "#",
  },
  {
    title: "La formation professionnelle pour l’apprentissage",
    description: "nécessaire à l’exercice d’une activité professionnelle",
    link: "#",
  },
  {
    title: "La formation qualifiante",
    description:
      "par des modules « à la carte » pour développer des compétences, renforcer des savoir-faire et se construire un parcours personnalisé.",
    link: "#",
  },
  {
    title: "La formation certifiante ",
    description:
      "qui permet d’obtenir une certification officielle : diplômes, titres professionnels et certificat de qualification professionnell",
    link: "#",
  },
  {
    title: "Les formations métiers",
    description:
      "",
    link: "#",
  },
]
  return (
    
    <main>
      <HeroBanner />
      {/* main content */}
      <div className="">
        <div className="-mt-28 container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 justify-center">
          <MiniCardHeader title="Réactivité" iconName={"napa2-LBWC7DK.png"} />
          <MiniCardHeader
            title="Adaptabilité"
            iconName={"kenapa2-LBWC7DK.png"}
          />
          <MiniCardHeader
            title="Professionnalisme"
            iconName={"Medali-LBWC7DK.png"}
          />
          <MiniCardHeader title="Efficacité" iconName={"napa-LBWC7DK.png"} />
        </div>

        {/* section about */}
        <About />
        {/* Qui somme nous */}
        <WhoAreWe />
        {/* section pourquoi choisir promillys academy */}
        <WhyUs />
        {/* section etapes d'inscription */}
        <StepRegister />
        
        <div className="max-w-5xl mx-auto px-8 my-8">
          <h1 className="text-text_title mx-auto">Nos Offres</h1>
          <HoverEffect items={projects} />
        </div>
        {/* section formations */}

        {/* <LastCourse /> */}
      </div>
    </main>
  );
}