import Link from 'next/link';
import { Logo } from '@/components/brand/Logo';
import { ShieldIcon, SparklesIcon } from '@/components/ui/icons';
import { footerNav, site } from '@/lib/site';

export function SiteFooter() {
  const year = new Date().getFullYear();
  return (
    <footer className="relative mt-auto overflow-hidden border-t border-line/70 bg-surface/50">
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-x-0 top-0 h-px bg-[linear-gradient(90deg,transparent,var(--color-violet),var(--color-cyan),transparent)] opacity-70"
      />
      <div className="container-page grid gap-12 py-14 sm:py-16 lg:grid-cols-[1.4fr_2fr]">
        <div className="flex max-w-sm flex-col gap-5">
          <Link href="/" className="-m-1 self-start rounded-lg p-1" aria-label="PintRush home">
            <Logo size="md" />
          </Link>
          <p className="font-display text-lg leading-snug font-semibold text-fg">{site.promise}</p>
          <p className="text-sm leading-relaxed text-muted">{site.shortDescription}</p>
          <ul className="flex flex-col gap-2 text-sm font-medium text-muted">
            <li className="flex items-center gap-2">
              <ShieldIcon className="size-4 text-lime" /> No wagering. No paid entry.
            </li>
            <li className="flex items-center gap-2">
              <SparklesIcon className="size-4 text-amber" /> Original trivia. No lyrics or recordings.
            </li>
          </ul>
        </div>
        <nav aria-label="Footer" className="grid grid-cols-2 gap-8 sm:grid-cols-3">
          {footerNav.map((group) => (
            <div key={group.title} className="flex flex-col gap-3">
              <h2 className="text-xs font-bold tracking-[0.18em] text-subtle uppercase">{group.title}</h2>
              <ul className="flex flex-col">
                {group.items.map((item) => (
                  <li key={item.href}>
                    <Link
                      href={item.href}
                      className="inline-flex min-h-11 items-center text-[0.9375rem] text-muted transition-colors hover:text-fg"
                    >
                      {item.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </nav>
      </div>
      <div className="border-t border-line/60">
        <div className="container-page flex flex-col gap-2 py-6 text-sm text-subtle sm:flex-row sm:items-center sm:justify-between">
          <p>
            © {year} {site.name}. All rights reserved.
          </p>
          <p>No wagering. Original trivia. Built for bars, starting on Long Island.</p>
        </div>
      </div>
    </footer>
  );
}