import {
  IconBrandGithub,
  IconBrandLinkedin,
  IconBrandTwitter,
} from "@tabler/icons-react";
import NextLink from "next/link";
import { getTranslations } from "next-intl/server";
import type React from "react";
import { Link } from "@/i18n/navigation";
import { cn } from "@/lib/utils";

export async function Footer() {
  const tFooter = await getTranslations("footer");
  const tCommon = await getTranslations("common");

  const pages = [
    {
      title: tFooter("home"),
      href: "/",
    },
    {
      title: tFooter("services"),
      href: "/services",
    },
    {
      title: tFooter("contact"),
      href: "/contact",
    },
    {
      title: tFooter("privacyPolicy"),
      href: "/privacy-policy",
    },
    {
      title: tFooter("terms"),
      href: "/terms",
    },
  ];

  return (
    <footer className="relative w-full overflow-hidden bg-gradient-to-tr from-[#000] to-[#1A2428] px-4 py-12 sm:px-6 sm:py-16 md:py-20 lg:px-8">
      <div className="mx-auto max-w-7xl items-start justify-between text-neutral-500 text-sm md:px-8">
        <div className="relative flex w-full flex-col items-center justify-center">
          <div className="mr-0 mb-4 md:mr-4 md:flex">
            <Logo />
          </div>

          <ul className="flex list-none flex-col items-center gap-2 text-neutral-300 transition-colors hover:text-white sm:flex-row sm:gap-4">
            {pages.map((page) => (
              <li className="list-none" key={page.href}>
                <Link
                  className="inline-block py-2 transition-colors hover:text-[#FD105E]"
                  href={page.href}
                >
                  {page.title}
                </Link>
              </li>
            ))}
          </ul>

          <GridLineHorizontal className="mx-auto mt-8 max-w-7xl" offset="0px" />
        </div>
        <div className="mt-8 flex w-full flex-col items-center justify-between sm:flex-row">
          <p className="mb-8 text-neutral-400 sm:mb-0">
            {tCommon("copyright", { year: new Date().getFullYear() })}
          </p>
          <div className="flex gap-4">
            <NextLink
              aria-label="Twitter"
              className="p-3"
              href="https://twitter.com/elevaseo"
              rel="noopener noreferrer"
              target="_blank"
            >
              <IconBrandTwitter className="h-6 w-6 text-neutral-300 transition-colors hover:text-[#FD105E]" />
            </NextLink>
            <NextLink
              aria-label="LinkedIn"
              className="p-3"
              href="https://www.linkedin.com/company/elevaseo"
              rel="noopener noreferrer"
              target="_blank"
            >
              <IconBrandLinkedin className="h-6 w-6 text-neutral-300 transition-colors hover:text-[#FD105E]" />
            </NextLink>
            <NextLink
              aria-label="GitHub"
              className="p-3"
              href="https://github.com/elevaseo"
              rel="noopener noreferrer"
              target="_blank"
            >
              <IconBrandGithub className="h-6 w-6 text-neutral-300 transition-colors hover:text-[#FD105E]" />
            </NextLink>
          </div>
        </div>
      </div>
    </footer>
  );
}

const GridLineHorizontal = ({
  className,
  offset,
}: {
  className?: string;
  offset?: string;
}) => {
  return (
    <div
      className={cn(
        "h-[var(--height)] w-[calc(100%+var(--offset))]",
        "bg-[linear-gradient(to_right,var(--color),var(--color)_50%,transparent_0,transparent)]",
        "[background-size:var(--width)_var(--height)]",
        "[mask:linear-gradient(to_left,var(--background)_var(--fade-stop),transparent),_linear-gradient(to_right,var(--background)_var(--fade-stop),transparent),_linear-gradient(black,black)]",
        "[mask-composite:exclude]",
        "z-30",
        "dark:bg-[linear-gradient(to_right,var(--color-dark),var(--color-dark)_50%,transparent_0,transparent)]",
        className
      )}
      style={
        {
          "--background": "#ffffff",
          "--color": "rgba(0, 0, 0, 0.2)",
          "--height": "1px",
          "--width": "5px",
          "--fade-stop": "90%",
          "--offset": offset || "200px", //-100px if you want to keep the line inside
          "--color-dark": "rgba(255, 255, 255, 0.2)",
          maskComposite: "exclude",
        } as React.CSSProperties
      }
    />
  );
};

const Logo = () => (
  <Link
    className="relative z-20 mr-4 flex items-center space-x-2 px-2 py-1 font-normal text-sm text-white"
    href="/"
  >
    <svg
      aria-hidden="true"
      fill="none"
      height="32"
      role="presentation"
      viewBox="0 0 200 200"
      width="32"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g clipPath="url(#clip0_105_593)">
        <path
          clipRule="evenodd"
          d="M162.963 37.037L100 0L37.037 37.037L0 99.9999L37.037 162.963V37.037H162.963ZM37.037 162.963L100 200L162.963 162.963L200 100L162.963 37.0372L162.963 162.963L37.037 162.963Z"
          fill="#FD105E"
          fillRule="evenodd"
        />
      </g>
      <defs>
        <clipPath id="clip0_105_593">
          <rect fill="white" height="200" width="200" />
        </clipPath>
      </defs>
    </svg>
    <span className="font-medium text-white text-xl">ElevaSEO</span>
  </Link>
);