/**
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
import Script from "next/script";
import { Rule } from "../../components/rule";
import { Social } from "../../components/social";
import { Donate, HireMe, Socials } from "../../config/Socials";
import type { JSX } from "react";

/**
 * Renders the /contact page.
 * @returns A React Component.
 */
const Contact = (): JSX.Element => {
  return (
    <main className="w-4/5 text-center max-w-4xl m-auto mt-16 mb-16 rounded-lg">
      <style>
        {`.hbspt-form {
            max-width: 750px;
            margin: auto;
            background-color: #04624f;
            border-radius: 1rem;
            padding: 1rem;
            margin-bottom: 100px;
            font-family: "Fira Code", monospace;
        }`}
      </style>
      <h1 className="text-5xl">{`Contact Us`}</h1>
      <p>
        {`We offer many different ways to get in touch with us. This page lists
        all of our available social media accounts. Use the buttons below to
        choose your preferred method.`}
      </p>
      <p>
        {`Note that the items are sorted alphabetically, not by order of
        response times. Monitoring levels and activity may vary by platform.`}
      </p>
      <p>
        {`With ${Socials.length.toLocaleString("en-GB")} choices, you shouldn't have any complaints!
        :3`}
      </p>
      <p>
        {`But if none of these work for you at all, there's a direct contact form at the bottom of this list!`}
      </p>
      <Rule />
      <section>
        <p>A quick note that we have explicitly deactivated our accounts on the following platforms. If you see an account on these platforms using our branding (either as NaomiLGBT OR NHCarrigan), it is an impersonation and should be reported.</p>
	<ul>
	  <li>Twitch</li>
	  <li>Twitter</li>
	  <li>Instagram</li>
	  <li>Threads</li>
	  <li>WhatsApp</li>
	</ul>
      </section>
      <Rule />
      <section>
        <div>
          {[ HireMe, Donate ].map(
            ({ link, label, alt, icon, color, background }) => {
              return <Social
                alt={alt}
                background={background}
                color={color}
                icon={icon}
                key={label}
                label={label}
                link={link}
              />;
            }
            ,
          )}
          {Socials.toSorted((a, b) => {
            return a.label.localeCompare(b.label);
          }).map(
            ({ link, label, alt, icon, color, background }) => {
              return <Social
                alt={alt}
                background={background}
                color={color}
                icon={icon}
                key={label}
                label={label}
                link={link}
              />;
            }
            ,
          )}
        </div>
      </section>
      <Script
        src="//js.hsforms.net/forms/embed/v2.js"
        strategy="beforeInteractive"
        type="text/javascript"
      ></Script>
      <Script strategy="afterInteractive">
        {`hbspt.forms.create({
            portalId: "47086586",
            formId: "4db250c8-a1a7-4a62-94d7-82592fa83a58",
        });`}
      </Script>
    </main>
  );
};

export default Contact;
