/**
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
import Image from "next/image";
import React, { type JSX } from "react";
import { NaomiNavItems } from "../../config/NavItems";

/**
 * Renders Naomi's landing page component.
 * @returns A JSX element.
 */
const Naomi = (): JSX.Element => {
  return (
    <main className="w-4/5 text-center max-w-4xl mx-auto mt-16 rounded-lg">
      <h1 className="text-4xl mb-2">{`Naomi Carrigan`}</h1>
      <Image
        alt="Naomi Carrigan"
        className="rounded-full m-auto"
        height={200}
        src="https://cdn.nhcarrigan.com/profile.png"
        width={200}
      />
      <p className="text-2xl">{`Software Engineer | Community Manager | Technomancer`}</p>
      <p className="mb-4">
        {`Hiya! I'm Naomi. I'm a developer, and I build inclusive spaces on the internet!`}
      </p>
      <ul>
        {NaomiNavItems.map((item, index) => {
          return (
            <li className="mb-4" key={item.href}>
              <a
                href={item.href}
                rel={item.href.startsWith("http")
                  ? "noreferrer"
                  : ""}
                target={item.href.startsWith("http")
                  ? "_blank"
                  : "_self"}
              >
                {index % 2 === 1
                  ? "🩷"
                  : "🩵"} {item.text}{" "}
              </a>
            </li>
          );
        })}
      </ul>
      <p>
        {`Can't find what you are looking for? `}
        <a
          className="underline"
          href="https://sitemap.nhcarrigan.com"
        >{`Check out our sitemap`}</a>
        {`.`}
      </p>
    </main>
  );
};

export default Naomi;