import styles from './home-section-cards-header.module.scss';
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {
  faChalkboardUser,
  faGraduationCap, faGuitar,
  faLinesLeaning, faScrewdriverWrench,
  faTabletScreenButton
} from "@fortawesome/free-solid-svg-icons";

/* eslint-disable-next-line */
export interface HomeSectionCardsHeaderProps {}

export function HomeSectionCardsHeader(props: HomeSectionCardsHeaderProps) {
  return (
    <>
      <main className="container relative max-w-screen-xl mx-auto relative flex flex-col mb-10">
        <section className="relative max-w-6xl w-full mx-auto lg:h-[200px] sm:grid sm:grid-cols-3 sm:gap-4 sm:-top-10">
          <div className="block p-6 border rounded-lg shadow h-full my-2 mx-2 sm:my-0 sm:mx-0
          bg-white border-gray-200
          hover:bg-gray-100
          dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">a
          </div>
          <div className="block p-6 border rounded-lg shadow h-full my-2 mx-2 sm:my-0 sm:mx-0
          bg-white border-gray-200
          hover:bg-gray-100
          dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">b
          </div>
          <div className="blocks p-6 border rounded-lg shadow h-full my-2 mx-2 sm:my-0 sm:mx-0
          bg-white border-gray-200
          hover:bg-gray-100
          dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">c
          </div>
        </section>

        <section className="relative w-full">
          <h2 className="font-bold w-full text-center my-5 text-2xl mx-auto text-teal-800">MeCP fournit tout les outils nécessaire pour un apprentissage de qualité</h2>

          <div className="grid grid-cols-3 gap-2 md:gap-4 max-w-4xl mx-auto px-2 md:px-0">
            <div className="text-center flex flex-col transition scale-75
            text-gray-400
            hover:scale-100 hover:text-lime-600">
              <span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faTabletScreenButton} /></span>
              <span className="text-lg">Des formats adaptés</span>
            </div>
            <div className="text-center flex flex-col transition scale-75
            text-gray-400
            hover:scale-100 hover:text-violet-600">
              <span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faGraduationCap} /></span>
              <span className="text-lg">Une organisation pédagogique</span>
            </div>
            <div className="text-center flex flex-col transition scale-75
            text-gray-400
            hover:scale-100 hover:text-yellow-600">
              <span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faChalkboardUser} /></span>
              <span className="text-lg ">Un espace dédié à l'apprentissage</span>
            </div>
            <div className="text-center flex flex-col transition scale-75
            text-gray-400
            hover:scale-100 hover:text-orange-600">
              <span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faLinesLeaning} /></span>
              <span className="text-lg">Des contenus adaptés et motivants</span>
            </div>
            <div className="text-center flex flex-col transition scale-75
            text-gray-400
            hover:scale-100 hover:text-teal-600">
              <span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faGuitar} /></span>
              <span className="text-lg">Une méthode révolutionnaire</span>
            </div>
            <div className="text-center flex flex-col transition scale-75
            text-gray-400
            hover:scale-100 hover:text-pink-600">
              <span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faScrewdriverWrench} /></span>
              <span className="text-lg">Des outils interactifs</span>
            </div>
          </div>
        </section>
      </main>
    </>
  );
}

export default HomeSectionCardsHeader;