import Link from "next/link";
import {
  IconBrandInstagram,
  IconBrandLinkedin,
  IconBrandTwitter,
  IconSend,
} from "@tabler/icons-react";

import type { Dictionary } from "@/app/[lang]/dictionaries";
import { CurrentYear } from "@/components/shared/current-year";
import { LanguageSwitcher } from "@/components/shared/language-switcher";
import { Logo } from "@/components/shared/logo";
import { ModeToggle } from "@/components/shared/mode-toggle";
import { Button } from "@/components/ui/button";
import { Container } from "@/components/ui/container";
import { Subheading } from "@/components/ui/subheading";
import { cn } from "@/lib/utils";

export const Footer = ({
  dict,
  lang,
}: {
  dict: Dictionary["footer"];
  lang: string;
}) => {
  const services = dict.services_links;
  const resources = dict.resources_links;
  const company = dict.company_links;

  return (
    <footer className="border-hairline relative overflow-hidden border-t py-10 perspective-distant md:py-20 lg:py-32">
      <Container className="relative z-20 grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-6">
        <div className="flex flex-col items-start gap-4 lg:col-span-2">
          <Logo lang={lang} />
          <Subheading>{dict.tagline}</Subheading>
          <Button className="shadow-brand">{dict.cta}</Button>
        </div>
        <div className="flex flex-col gap-4">
          <h3 className="text-ink-2 text-base font-medium">{dict.services}</h3>
          <ul className="flex list-none flex-col gap-2">
            {services.map((item) => (
              <li key={item.title}>
                <Link
                  href={`/${lang}${item.href}`}
                  className="text-ink-3 hover:text-ink-1 text-sm transition duration-200"
                >
                  {item.title}
                </Link>
              </li>
            ))}
          </ul>
        </div>
        <div className="flex flex-col gap-4">
          <h3 className="text-ink-2 text-base font-medium">{dict.resources}</h3>
          <ul className="flex list-none flex-col gap-2">
            {resources.map((item) => (
              <li key={item.title}>
                <Link
                  href={`/${lang}${item.href}`}
                  className="text-ink-3 hover:text-ink-1 text-sm transition duration-200"
                >
                  {item.title}
                </Link>
              </li>
            ))}
          </ul>
        </div>
        <div className="flex flex-col gap-4">
          <h3 className="text-ink-2 text-base font-medium">{dict.company}</h3>
          <ul className="flex list-none flex-col gap-2">
            {company.map((item) => (
              <li key={item.title}>
                <Link
                  href={`/${lang}${item.href}`}
                  className="text-ink-3 hover:text-ink-1 text-sm transition duration-200"
                >
                  {item.title}
                </Link>
              </li>
            ))}
          </ul>
        </div>
        <div className="flex flex-col gap-4">
          <h3 className="text-ink-2 text-base font-medium">
            {dict.newsletter}
          </h3>
          <form className="border-hairline-2 bg-surface-2 relative flex items-center justify-center rounded-md border">
            <input
              className="text-ink-1 placeholder:text-ink-3 bg-transparent py-2 pr-12 pl-2 text-sm outline-none"
              type="email"
              name="email"
              placeholder={dict.email_placeholder}
              aria-label={dict.email_label}
              autoComplete="email"
              inputMode="email"
              autoCapitalize="none"
              spellCheck={false}
              enterKeyHint="send"
              required
            />
            <button
              type="submit"
              aria-label={dict.subscribe}
              className="bg-gradient-brand absolute inset-y-0 right-0 cursor-pointer rounded-[7px] px-4 py-2"
            >
              <IconSend className="size-4 text-white" aria-hidden="true" />
            </button>
          </form>
          <Subheading className="text-sm md:text-sm lg:text-sm">
            {dict.newsletter_note}
          </Subheading>
        </div>
      </Container>

      <Container className="relative z-20 mt-10 flex flex-col justify-between gap-4 sm:flex-row md:gap-0">
        <p className="text-ink-3 text-sm">
          &copy; <CurrentYear /> SEO Insight. {dict.rights}
        </p>

        <div className="flex flex-col items-start gap-4 md:items-end">
          <div className="flex items-center gap-4">
            <div className="*:text-ink-3 flex items-center gap-4 *:text-sm">
              <Link href={`/${lang}/privacy`}>{dict.privacy}</Link>
              <Link href={`/${lang}/terms`}>{dict.terms}</Link>
            </div>
          </div>
          <div className="flex items-center gap-4">
            <LanguageSwitcher lang={lang} align="end" />
            <ModeToggle />
            <Link href="/" aria-label="X (Twitter)">
              <IconBrandTwitter className="size-4" />
            </Link>
            <Link href="/" aria-label="Instagram">
              <IconBrandInstagram className="size-4" />
            </Link>
            <Link href="/" aria-label="LinkedIn">
              <IconBrandLinkedin className="size-4" />
            </Link>
          </div>
        </div>
      </Container>

      <div
        className={cn(
          "flex h-[200%] items-center justify-center gap-20",
          "absolute -inset-x-[150%] -inset-y-40",
          "[background-size:40px_40px]",
          "[background-image:linear-gradient(to_right,var(--color-neutral-100)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-neutral-100)_1px,transparent_1px)]",
          "dark:[background-image:linear-gradient(to_right,var(--color-neutral-900)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-neutral-900)_1px,transparent_1px)]",
          "mask-radial-from-50%",
        )}
        style={{
          transform: "rotateX(60deg)",
        }}
      />
    </footer>
  );
};