'use client';

import Link from 'next/link';
import { Shield } from 'lucide-react';
import { useSystemConfig } from '@/hooks/useSystemConfig';

const FOOTER_LINKS: Array<{ href: string; label: string }> = [
  { href: '/terms', label: 'Terms' },
  { href: '/privacy-policy', label: 'Privacy' },
  { href: '/about', label: 'About' },
  { href: '/contact', label: 'Contact' },
];

export function AppFooter() {
  const sysConfig = useSystemConfig();
  return (
    <footer className="border-t border-line bg-surface-raised/60">
      <div className="mx-auto max-w-6xl px-4 py-10">
        <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
          <div className="flex items-center gap-2">
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-indigo-600 text-white">
              <Shield className="h-4 w-4" />
            </div>
            <span className="text-sm font-semibold text-ink">{sysConfig.projectName}</span>
          </div>
          <nav className="flex flex-wrap items-center gap-x-5 gap-y-2 text-sm">
            {FOOTER_LINKS.map((link) => (
              <Link key={link.href} href={link.href} className="text-ink-muted hover:text-ink">
                {link.label}
              </Link>
            ))}
          </nav>
        </div>
        <div className="mt-6 border-t border-line pt-6 text-xs text-ink-faint">
          © {new Date().getFullYear()} {sysConfig.projectName}. All rights reserved.
        </div>
      </div>
    </footer>
  );
}