import Link from "next/link";
import { FaEnvelopeOpenText } from "react-icons/fa";
import { FaMagnifyingGlass } from "react-icons/fa6";

import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";

function NextSteps() {
  return (
    <div className="mt-2 sm:mt-6 max-w-7xl">
      <h1 className="text-base font-black font-inter tracking-tight">
        Next steps
      </h1>
      <h2 className="text-xl font-bold tracking-tight font-inter">
        What to expect from us
      </h2>
      <div className="justify-center items-center p-6 space-y-6 font-inter">
        <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 items-center sm:items-start">
          <FaEnvelopeOpenText className="size-10 flex-shrink-0" />
          <p className="text-center sm:text-left font-noto">
            <span className="font-bold">Check your emails. </span>
            You should receive a welcome email shortly. If you haven&apos;t,
            please check your spam/junk and mark us as a safe sender.
          </p>
        </div>
        <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 items-center sm:items-start">
          <FaMagnifyingGlass className="size-10 flex-shrink-0" />
          <p className="text-center sm:text-left font-noto">
            <span className="font-bold">Browse opportunities. </span>
            We&apos;ll invite you to suitable studies by email, but you can also
            view all opportunities on our{" "}
            <Link
              className="text-bold-forestTeal underline underline-offset-2 decoration-dotted cursor-pointer font-bold"
              href={INTERNAL_PAGES.participant.opportunities.main}
              rel="noopener noreferrer"
              target="_blank"
            >
              website
            </Link>
            .
          </p>
        </div>
      </div>
    </div>
  );
}

export default NextSteps;