import Link from "next/link";
import { useRouter } from "next/router";

export default function Menu() {
  const router = useRouter();

  return (
    <>
      <ul className="wsmenu-list nav-theme">
        {/* DROPDOWN SUB MENU */}
        <li aria-haspopup="true">
          <Link href="#" className="h-link">
            About <span className="wsarrow" />
          </Link>
          <ul className="sub-menu">
            <li aria-haspopup="true">
              <Link href="#merms-about">Why MERMS?</Link>
            </li>
            <li aria-haspopup="true">
              <Link href="#merms-works">How It Works</Link>
            </li>
            <li aria-haspopup="true">
              <Link href="/contacts">Contacts Us</Link>
            </li>
            <li aria-haspopup="true">
              <Link href="/faqs">F.A.Q.</Link>
            </li>
          </ul>
        </li>
        {/* SIMPLE NAVIGATION LINK */}
        <li className="nl-simple" aria-haspopup="true">
          <Link href="/#merms-features" className="h-link">
            Features
          </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">
            Sign in
          </Link>
        </li>
        {/* SIGN UP BUTTON */}
        <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"
          >
            Sign up
          </Link>
        </li>
      </ul>
    </>
  );
}