import Link from "next/link";
import { Send, Mail, MessageCircle } from "lucide-react";
import Logo from "./Logo";
import { navLinks } from "@/config/services";
import { contacts } from "@/config/contacts";

export default function Footer() {
  return (
    <footer className="border-t border-white/[0.06] px-6 py-14">
      <div className="mx-auto grid max-w-6xl gap-10 sm:grid-cols-2 lg:grid-cols-4">
        <div>
          <Logo />
          <p className="mt-4 max-w-xs text-sm leading-relaxed text-ink-500">
            Комплексные IT-решения для бизнеса: сайты, боты, CRM, серверы и
            техническая поддержка.
          </p>
        </div>

        <div>
          <p className="mb-4 font-mono text-xs uppercase tracking-[0.2em] text-ink-700">
            Разделы
          </p>
          <ul className="space-y-2.5">
            {navLinks.slice(1).map((link) => (
              <li key={link.href}>
                <Link
                  href={link.href}
                  className="text-sm text-ink-500 transition-colors hover:text-ink-100"
                >
                  {link.label}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <p className="mb-4 font-mono text-xs uppercase tracking-[0.2em] text-ink-700">
            Контакты
          </p>
          <ul className="space-y-2.5 text-sm text-ink-500">
            <li>{contacts.city}</li>
            <li>
              <a
                href={`mailto:${contacts.email}`}
                className="transition-colors hover:text-ink-100"
              >
                {contacts.email}
              </a>
            </li>
            <li>{contacts.workingHours}</li>
          </ul>
        </div>

        <div>
          <p className="mb-4 font-mono text-xs uppercase tracking-[0.2em] text-ink-700">
            Мы в сети
          </p>
          <div className="flex gap-3">
            <a
              href={contacts.telegramChannel}
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Telegram"
              className="flex h-10 w-10 items-center justify-center rounded-full border border-white/[0.08] text-ink-300 transition-colors hover:border-blue-500/40 hover:text-blue-400"
            >
              <Send size={17} />
            </a>
            <a
              href={contacts.vk}
              target="_blank"
              rel="noopener noreferrer"
              aria-label="VKontakte"
              className="flex h-10 w-10 items-center justify-center rounded-full border border-white/[0.08] text-ink-300 transition-colors hover:border-blue-500/40 hover:text-blue-400"
            >
              <MessageCircle size={17} />
            </a>
            <a
              href={`mailto:${contacts.email}`}
              aria-label="Email"
              className="flex h-10 w-10 items-center justify-center rounded-full border border-white/[0.08] text-ink-300 transition-colors hover:border-blue-500/40 hover:text-blue-400"
            >
              <Mail size={17} />
            </a>
          </div>
        </div>
      </div>

      <div className="mx-auto mt-12 max-w-6xl border-t border-white/[0.06] pt-6 text-xs text-ink-700">
        © {new Date().getFullYear()} LabNetHub. Все права защищены.
      </div>
    </footer>
  );
}