import Image from "next/image";
import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import Layout from "../components/layout";
import linkedin from "../../public/linkedin.svg";
import youtube from "../../public/youtube.svg";
import twitter from "../../public/twitter.svg";
import RenderMap from "../components/renderMap";

const Location = () => {
  const { t: translate } = useTranslation();
  return (
    <>
      <Layout
        title="location.title"
        subtitle="location.subtitle"
        page="location"
      >
        <div className="layout lg:flex justify-center pt-20 md:mx-auto">
          <div className="md:flex">
            <div className="mr-10 mb-6">
              <b>{translate("location.email")}</b>
              <p>info@atlanticmath.com</p>
            </div>
            <div className="mr-10 mb-6">
              <b>{translate("location.address")}</b>
              <p>Las Palmas de Gran Canaria, Spain</p>
            </div>
            <div className="mr-10 mb-6">
              <b>{translate("location.phone")}</b>
              <p>+34 91 827 47 42</p>
            </div>
          </div>
          <div className="flex md:justify-center mt-10 lg:mt-0">
            <a
              href="https://www.linkedin.com/company/pentaquark-consulting"
              target="_blank"
            >
              <Image
                className="cursor-pointer fill-red-500 h-12 w-12 p-2 mx-4 bg-zinc-800 text-white hover:bg-red-700 rounded-full transition ease-in-out duration-200"
                src={linkedin}
                alt="linkedin"
              />
            </a>
            <a href="https://twitter.com/stellaldm" target="_blank">
              <Image
                className="cursor-pointer h-12 w-12 p-2 mx-4 bg-zinc-800 text-white hover:bg-red-700 rounded-full transition ease-in-out duration-200"
                src={twitter}
                alt="twitter"
              />
            </a>
            <a href="https://www.youtube.com/@pentaquark648" target="_blank">
              <Image
                className="cursor-pointer h-12 w-12 p-1 mx-4 bg-zinc-800 text-white hover:bg-red-700 rounded-full transition ease-in-out duration-200"
                src={youtube}
                alt="youtube"
              />
            </a>
          </div>
        </div>
        <div className="layout text-center mt-20 mb-10 whitespace-pre-line">
          <p className="text-lg text-zinc-700">
            {translate("location.mapDescription")}
          </p>
        </div>
        <RenderMap />
      </Layout>
    </>
  );
};

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale)),
    },
  };
}

export default Location;
