import Image from "next/image";
import LinkComp from "next/link";
import { FormattedMessage } from "react-intl";
import moment from "moment";

import BannerFooter from "assets/images/banner_footer.svg";
import { SelectLanguages } from "./select-languages";

export const Footer = () => {
  return (
    <footer className="w-full">
      <div className="px-6 mt-24 relative z-1">
        <div
          style={{
            backgroundImage: `url(${BannerFooter.src})`,
          }}
          className="bg-blue bg-cover lg:bg-contain group transition-all duration-200 shadow-xl bg-no-repeat rounded-xl max-w-6xl mx-auto"
        >
          <a
            href="https://discord.gg/RX3QnVY4UA"
            className="cursor-pointer group grid grid-cols-1 gap-5 lg:grid-cols-2 lg:gap-8 p-8"
            target="_blank"
          >
            <div>
              <h4 className="font-title text-white text-xl lg:text-2xl font-extrabold">
                <FormattedMessage id="footer.banner.title" />
              </h4>
              <p className="text-white text-base lg:text-lg mt-2 text-opacity-70">
                <FormattedMessage id="footer.banner.subtitle" />
              </p>
              <button className="bg-white rounded-lg px-3 py-2 text-blue group-hover:opacity-100 opacity-80 transition-all duration-200 font-semibold text-sm mt-3">
                <FormattedMessage id="footer.banner.cta" />
              </button>
            </div>
          </a>
        </div>
        <div className="w-full bg-dark-500 absolute h-1/2 left-0 bottom-0 -z-1" />
      </div>
      <div className="w-full bg-dark-500 p-6 pt-8">
        <div className="max-w-6xl mx-auto w-full">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-8">
            <div className="flex flex-col items-start justify-start gap-3">
              <LinkComp
                href="/"
                className="flex items-center font-title text-white font-extrabold text-2xl justify-center lg:justify-start"
              >
                <Image
                  src="/logo.svg"
                  width={24}
                  height={24}
                  className="mr-2"
                  alt="logo"
                />
                <span className="">discotools.xyz</span>
              </LinkComp>
              <SelectLanguages />
            </div>
            <div>
              <p className="font-semibold uppercase text-xs text-dark-100 text-right">
                <FormattedMessage id="footer.links.title" />
              </p>
              <ul className="flex flex-row gap-3 mt-2 items-center justify-end">
                <li className="text-white text-opacity-30 text-sm cursor-not-allowed">
                  <FormattedMessage id="footer.links.contributors" />
                </li>
                <span className="text-dark-200">-</span>
                <a href="https://discord.gg/RX3QnVY4UA" target="_blank">
                  <li className="text-white text-opacity-70 hover:text-opacity-100 text-sm cursor-pointer">
                    <FormattedMessage id="footer.links.joinUs" />
                  </li>
                </a>
                <span className="text-dark-200">-</span>
                <li className="text-white text-opacity-30 text-sm cursor-not-allowed">
                  <FormattedMessage id="footer.links.tutorials" />
                </li>
              </ul>
            </div>
          </div>
          <div className="border-t border-dark-300 mt-8 lg:mt-10 pt-6 flex items-start justify-between">
            <div>
              <p className="text-dark-100 text-sm font-semibold">
                {moment().format("YYYY")} © DiscoTools.xyz -{" "}
                <FormattedMessage id="footer.legal" />
              </p>
            </div>
            <div className="text-dark-100 tracking-wide text-sm text-right gap-1">
              Designed and Developed with 💙 <br />
              by{" "}
              <a
                href="https://en-zo.dev"
                target="_blank"
                className="text-white font-bold"
              >
                en-zo.dev
              </a>
            </div>
          </div>
        </div>
      </div>
      {/* <div className="text-center lg:text-left">
      <LinkComp
        href="/"
        className="flex items-center font-title text-blue font-extrabold text-2xl justify-center lg:justify-start"
      >
        <Image
          src="/logo_color.svg"
          width={24}
          height={24}
          className="mr-2"
          alt="logo"
        />
        <span className="hidden lg:inline-block">discotools.xyz</span>
      </LinkComp>
      
    </div>
    <div className="text-dark-200 font-semibold tracking-wide text-center text-sm lg:text-base">
      Designed and Developed with 💙 by{" "}
      <a
        href="https://en-zo.dev"
        target="_blank"
        className="text-blue font-bold"
      >
        en-zo.dev
      </a>
    </div> */}
    </footer>
  );
};