import Link from "next/link";
import { useTranslations } from "next-intl";
import LanguageSwitcher from "../elements/LanguageSwitcher";

export default function Menu() {
  const t = useTranslations("Navigation");
  return (
    <>
      <ul className="wsmenu-list nav-theme">
        <li aria-haspopup="true">
          <Link href="/#" className="h-link">
            {t("about")} <span className="wsarrow" />
          </Link>
          <ul className="sub-menu">
            <li aria-haspopup="true">
              <Link href="/#merms-about">{t("whyMerms")}</Link>
            </li>
            <li aria-haspopup="true">
              <Link href="/#merms-works">{t("howItWorks")}</Link>
            </li>
            {/* <li aria-haspopup="true">
              <Link href="/contacts">{t("contactUs")}</Link>
            </li> */}
            <li aria-haspopup="true">
              <Link href="/help-center">{t("helpCenter")}</Link>
            </li>
          </ul>
        </li>
        <li className="nl-simple" aria-haspopup="true">
          <Link href="/#merms-features" className="h-link">
            {t("features")}
          </Link>
        </li>
        <li className="nl-simple" aria-haspopup="true">
          <Link href="/contacts" className="h-link">
            {t("contactUs")}
          </Link>
        </li>
        <li className="nl-simple reg-fst-link mobile-last-link" aria-haspopup="true">
          <Link href={process.env.NEXT_PUBLIC_LOGIN_URL} className="h-link">
            {t("signIn")}
          </Link>
        </li>
        <li className="nl-simple" aria-haspopup="true">
          <Link
            href={process.env.NEXT_PUBLIC_SIGNUP_URL}
            className="btn r-04 btn--theme hover--tra-white last-link"
          >
            {t("signUp")}
          </Link>
        </li>
        <LanguageSwitcher />
      </ul>
    </>
  );
}