import Link from "next/link";
import { TrptkLogo } from "../icons/TrptkLogo";
import { ArrowLink } from "../ArrowLink";

const navCol1 = [
  { href: "/", label: "Home" },
  { href: "/blog", label: "Blog" },
  { href: "/concerts", label: "Concerts" },
  { href: "/artists", label: "Artists" },
  { href: "/composers", label: "Composers" },
  { href: "/releases", label: "Releases" },
];

const navCol2 = [
  { href: "/about", label: "About us" },
  { href: "/team", label: "Our team" },
  { href: "/studio", label: "Our studio" },
  { href: "/label", label: "Label" },
  { href: "/services", label: "Services" },
];

const navCol3 = [
  { href: "/faq", label: "Frequently asked questions" },
  { href: "/terms-conditions", label: "Terms & conditions" },
  { href: "/privacy-policy", label: "Privacy policy" },
  { href: "/cookie-management", label: "Cookie management" },
  { href: "/contact", label: "Contact" },
];

export function Footer() {
  return (
    <div
      id="mastfoot"
      className="mt-20 grid w-full grid-cols-12 gap-6 p-6 md:gap-8 md:p-8 lg:gap-10"
    >
      <Link
        href="/"
        className="col-span-12 flex-none py-2 sm:col-span-4 md:col-span-3 lg:col-span-2"
      >
        <TrptkLogo width={90} />
      </Link>

      <div className="col-span-6 sm:col-span-4 lg:col-span-3">
        <ul className="text-lightsec dark:text-darksec">
          {navCol1.map((item) => (
            <li key={item.href} className="py-0.5">
              <ArrowLink href={item.href}>{item.label}</ArrowLink>
            </li>
          ))}
        </ul>
      </div>

      <div className="col-span-6 sm:col-span-4 lg:col-span-3">
        <ul className="text-lightsec dark:text-darksec">
          {navCol2.map((item) => (
            <li key={item.href} className="py-0.5">
              <ArrowLink href={item.href}>{item.label}</ArrowLink>
            </li>
          ))}
        </ul>
      </div>

      <div className="col-span-4 hidden sm:block md:col-span-3 lg:hidden">&nbsp;</div>

      <div className="col-span-12 sm:col-span-8 lg:col-span-4">
        <ul className="text-lightsec dark:text-darksec">
          {navCol3.map((item) => (
            <li key={item.href} className="py-0.5">
              <ArrowLink href={item.href}>{item.label}</ArrowLink>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}