import React from "react";
import Image from "next/image";
import { useTranslation } from "next-i18next";
import conference_image from "../../public/conference_image.png";
import education_image from "../../public/education_image.png";
import innovation_image from "../../public/innovation_image.png";

function Socials() {
  const { t: translate } = useTranslation();

  return (
    <span className="background">
      <section className="gallery">
        <div className="card">
          <h2 className="absolute top-2 text-white left-1">
            {translate("index.layout.card1.title")}
          </h2>
          <h3 className="absolute top-8 left-2 text-white transition ">
            {translate("index.layout.card1.subtitle")}
          </h3>
          <Image
            className="h-80 object-cover"
            src={conference_image}
          />
        </div>
        <div className="card">
          <h2 className="absolute top-2 text-white left-1">
            {translate("index.layout.card2.title")}
          </h2>
          <h3 className="absolute top-8 left-2 text-white transition ">
            {translate("index.layout.card2.subtitle")}
          </h3>
          <Image
            className="h-80 object-cover"
            src={education_image}
          />
        </div>
        <div className="card">
          <h2 className="absolute top-2 text-white left-1">
            {translate("index.layout.card3.title")}
          </h2>
          <h3 className="absolute top-8 text-white left-2 text-white transition ">
            {translate("index.layout.card3.subtitle")}
          </h3>
          <Image
            className="h-80 object-cover"
            src={innovation_image}
          />
        </div>
      </section>
    </span>
  );
}

export default Socials;
