import { type NextPage } from "next";
import Link from "next/link";
import { ArrowUpRightIcon } from "@heroicons/react/20/solid";
import Footer from "~/components/Footer";
import Header from "~/components/Header";

const TextLink = ({ href, children }: { href: string; children: string }) => {
  return (
    <Link
      href={href}
      className="align-items-center inline-block rounded-md border border-neutral-900 py-[2px] px-[4px] text-sm hover:bg-neutral-900 hover:text-white"
    >
      {children}
      <ArrowUpRightIcon className="inline-block w-4" />
    </Link>
  );
};

const Home: NextPage = () => {
  return (
    <>
      <div className="flex min-h-screen flex-col">
        <Header />
        <div
          style={{
            backgroundImage: `url("/backdrops/patient-clinic-bg.jpeg")`,
            backgroundPosition: `center`,
            backgroundRepeat: `no-repeat`,
          }}
          className="flex grow flex-col"
        >
          <div
            style={{
              WebkitBackdropFilter: `blur(15px) contrast(50%)`,
              backdropFilter: `blur(15px) contrast(50%)`,
            }}
            className="flex min-h-[350px] w-full grow flex-col"
          >
            <div className="my-auto h-min space-y-8">
              <h1 className="mx-auto max-w-lg text-center text-4xl font-extrabold text-yellow-200">
                Welcome to the Resource Center for Auditory Training!
              </h1>
              <div className="mx-auto flex w-[350px] flex-col space-y-4 rounded-md border border-neutral-500 bg-neutral-900 p-4 shadow-lg shadow-neutral-800/50 sm:w-[400px]">
                <p className="text-center text-2xl text-neutral-100">
                  Looking for resource recommendations?
                </p>
                <Link
                  href="/resources/search"
                  className="flex-inline mx-auto flex animate-expand_in_out rounded-md border border-neutral-300 bg-yellow-400 p-2 font-bold hover:bg-yellow-100"
                >
                  Search for Auditory Resources
                  <ArrowUpRightIcon className="inline w-5" />
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <main>
        <section className="grid min-h-[300px] place-items-center border border-b border-neutral-400 bg-yellow-100 p-4 text-white drop-shadow-md sm:p-12">
          <div className="flex max-w-5xl flex-col-reverse justify-center divide-neutral-700 md:flex-row md:divide-y-0 md:divide-x">
            <section className="px-4 text-neutral-800">
              <p className="pt-2">
                You can use the <TextLink href="/resources">Resources</TextLink>{" "}
                tab to scroll through the list of all resources, or the{" "}
                <TextLink href="/resources/search">Search</TextLink> tab to
                filter resources based on your preferences and skill level. We
                also have an <TextLink href="/about">About</TextLink> tab to
                learn more about the creators of this website and a{" "}
                <TextLink href="/contact">Contact Us</TextLink> tab to submit
                any comments or questions you have about the site and auditory
                training in general. We hope you find this website helpful in
                your auditory training journey, and we are here to support you
                every step of the way.
              </p>
            </section>
            <h1 className="pr-auto my-auto h-full grow p-4 text-center text-4xl font-bold text-black">
              Getting Started
            </h1>
          </div>
        </section>

        <section className="grid min-h-[300px] place-items-center border-y border-t border-yellow-200 bg-neutral-900 p-4 text-white sm:p-12">
          <div className="my-auto mx-auto flex max-w-5xl flex-col divide-y divide-white md:flex-row md:divide-y-0 md:divide-x">
            <h1 className="pr-auto my-auto h-full grow p-4 text-center text-4xl font-bold text-yellow-200">
              Our Purpose
            </h1>
            <section className="px-4 text-neutral-300">
              <p className="pt-2">
                The goal of this site is to provide resources for cochlear
                implant users to practice listening with their device. While
                cochlear implants are highly effective in providing access to
                speech sounds for patients, it can take time and practice for
                them to adjust to the new signal transmitted through the
                implant. Auditory training can assist cochlear implant users in
                practicing listening to environmental sounds, understanding
                speech sounds in both quiet and noisy environments, and
                (re)training to enjoy music. We have compiled and categorized
                all available auditory training resources for cochlear implant
                users, including smartphone, web-based, and other online
                resources that can be utilized as clinician-guided or home-based
                by the cochlear implant patient and their families. Our online
                index allows both professionals and patients to filter through
                the resources based on specific characteristics and requested
                features, making the selection process more efficient.
              </p>
            </section>
          </div>
        </section>

        <div className="mx-auto mb-12 max-w-5xl p-4 sm:p-12">
          <h1 className="text-center text-2xl font-extrabold sm:text-4xl">
            Want to learn more?
          </h1>
          <div className="mx-auto flex w-fit flex-col space-y-6 pt-8">
            <section className="flex flex-row justify-between space-x-4">
              <h2 className="text-md my-auto inline-block italic sm:text-lg">
                Learn more about the project
              </h2>
              <span className="my-auto hidden h-[1px] grow border border-dashed border-neutral-400 sm:block" />
              <Link
                href="/about"
                className="inline-block rounded-md border border-neutral-900 bg-yellow-200 px-4 py-2 align-middle font-semibold shadow-lg shadow-black/50 duration-200 ease-out hover:bg-yellow-300 hover:shadow-md"
              >
                About
                <ArrowUpRightIcon className="inline-block w-5 align-middle" />
              </Link>
            </section>
            <section className="flex flex-row justify-between space-x-4">
              <h2 className="text-md my-auto inline-block italic sm:text-lg">
                Get in touch with the team
              </h2>
              <span className="my-auto hidden h-[1px] grow border border-dashed border-neutral-400 sm:block" />
              <Link
                href="/contact"
                className="inline-block rounded-md border border-neutral-900 bg-yellow-200 px-4 py-2 align-middle font-semibold shadow-lg shadow-black/50 duration-200 ease-out hover:bg-yellow-300 hover:shadow-md"
              >
                Contact
                <ArrowUpRightIcon className="inline-block w-5 align-middle" />
              </Link>
            </section>
            <section className="flex flex-row justify-between space-x-4">
              <h2 className="text-md my-auto inline-block italic sm:text-lg">
                Tell us how we&rsquo;re doing!
              </h2>
              <a
                target="_blank"
                href="https://forms.gle/FD2abgwBuTaipysZ6"
                className="inline-block flex flex-row rounded-md border border-neutral-900 bg-yellow-200 px-4 py-2 align-middle font-semibold shadow-lg shadow-black/50 duration-200 ease-out hover:bg-yellow-300 hover:shadow-md"
              >
                Give Feedback
                <ArrowUpRightIcon className="inline w-5 align-middle" />
              </a>
            </section>
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
};

export default Home;