import Link from "next/link";
import Image from "next/image";
import { SocialLinks } from "./SocialLinks";
import {
  BRAND,
  CONTACT_CHANNELS,
  LEGAL_LINKS,
  NAV_LINKS,
  STUDIO,
} from "@/lib/site";

export function Footer() {
  return (
    <footer className="mt-auto border-t border-border">
      <div className="mx-auto grid max-w-7xl gap-12 px-6 py-16 md:grid-cols-4 lg:px-10">
        <div className="md:col-span-2">
          <Link
            href="/"
            aria-label={`${STUDIO.name} home`}
            className="group inline-block"
          >
            <Image
              src={BRAND.wordmark.src}
              alt={STUDIO.name}
              width={220}
              height={Math.round(
                (220 * BRAND.wordmark.height) / BRAND.wordmark.width,
              )}
              className="transition duration-300 ease-out group-hover:-translate-y-0.5 group-hover:opacity-80"
            />
          </Link>
          <p className="mt-6 max-w-sm text-sm leading-relaxed text-foreground-muted">
            {STUDIO.tagline} An indie studio crafting survival adventures.
          </p>
          <a
            href={`mailto:${CONTACT_CHANNELS[0].email}`}
            className="underline-grow mt-4 inline-block break-all text-sm text-foreground-muted transition-colors hover:text-accent"
          >
            {CONTACT_CHANNELS[0].email}
          </a>
        </div>

        <nav aria-label="Footer">
          <h2 className="mb-5 font-display text-sm tracking-[0.25em] text-foreground-muted">
            EXPLORE
          </h2>
          <ul className="space-y-3 text-sm">
            {NAV_LINKS.map((link) => (
              <li key={link.href}>
                <Link
                  href={link.href}
                  className="group relative inline-flex items-center gap-1.5 text-foreground-muted transition-colors hover:text-foreground"
                >
                  {link.label}
                  <span
                    aria-hidden
                    className="-ml-1 text-xs opacity-0 transition-all duration-300 ease-out group-hover:ml-0 group-hover:opacity-100"
                  >
                    →
                  </span>
                  <span
                    aria-hidden
                    className="absolute -bottom-0.5 left-0 h-px w-0 bg-accent transition-all duration-300 ease-out group-hover:w-full"
                  />
                </Link>
              </li>
            ))}
          </ul>
        </nav>

        <div>
          <h2 className="mb-5 font-display text-sm tracking-[0.25em] text-foreground-muted">
            FOLLOW
          </h2>
          <SocialLinks />
        </div>
      </div>

      <div className="border-t border-border">
        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 px-6 py-6 text-xs text-foreground-muted sm:flex-row lg:px-10">
          <p>
            © {new Date().getFullYear()} {STUDIO.name}. All rights reserved.
          </p>
          <ul className="flex items-center gap-6">
            {LEGAL_LINKS.map((link) => (
              <li key={link.href}>
                <Link
                  href={link.href}
                  className="underline-grow inline-block transition-colors hover:text-accent"
                >
                  {link.label}
                </Link>
              </li>
            ))}
          </ul>
          <p className="hidden font-display tracking-[0.25em] lg:block">
            WHERE SUMMITS BECOME WORLDS
          </p>
        </div>
      </div>
    </footer>
  );
}