import Link from "next/link";
import { Phone, Mail, MapPin } from "lucide-react";
import Container from "@/components/ui/Container";
import { COMPANY_NAME, CONTACT, FOOTER_LINKS } from "@/lib/constants";

export default function Footer() {
  const currentYear = new Date().getFullYear();

  return (
    <footer className="bg-neutral-900 text-neutral-300" role="contentinfo">
      <Container className="py-16">
        <div className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-4">
          {/* Company Info */}
          <div className="sm:col-span-2 lg:col-span-1">
            <Link href="/" aria-label="TeleNetSystems – Zur Startseite">
              <img
                src="/images/logo/logo-weiss.png"
                alt="TeleNetSystems Logo"
                className="h-10 w-auto"
                width={160}
                height={40}
              />
            </Link>
            <p className="mt-4 text-sm leading-relaxed text-neutral-400">
              Ihr regionaler Partner für Internet, Fernsehen und Telefonie in Reutte und ganz Tirol.
            </p>
            <div className="mt-6 space-y-3">
              <a
                href={`tel:${CONTACT.phone.replace(/\s/g, "")}`}
                className="flex items-center gap-2 text-sm text-neutral-400 transition-colors hover:text-white"
              >
                <Phone className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
                {CONTACT.phone}
              </a>
              <a
                href={`mailto:${CONTACT.email}`}
                className="flex items-center gap-2 text-sm text-neutral-400 transition-colors hover:text-white"
              >
                <Mail className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
                {CONTACT.email}
              </a>
              <div className="flex items-start gap-2 text-sm text-neutral-400">
                <MapPin className="h-4 w-4 flex-shrink-0 mt-0.5" aria-hidden="true" />
                <address className="not-italic">
                  {CONTACT.address.slice(1).join(", ")}
                </address>
              </div>
            </div>
          </div>

          {/* Services */}
          <div>
            <h3 className="text-sm font-semibold uppercase tracking-wider text-white">
              Dienste
            </h3>
            <ul className="mt-4 space-y-3">
              {FOOTER_LINKS.services.map((link) => (
                <li key={link.href}>
                  <Link
                    href={link.href}
                    className="text-sm text-neutral-400 transition-colors hover:text-white"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Company */}
          <div>
            <h3 className="text-sm font-semibold uppercase tracking-wider text-white">
              Unternehmen
            </h3>
            <ul className="mt-4 space-y-3">
              {FOOTER_LINKS.company.map((link) => (
                <li key={link.href}>
                  <Link
                    href={link.href}
                    className="text-sm text-neutral-400 transition-colors hover:text-white"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Legal */}
          <div>
            <h3 className="text-sm font-semibold uppercase tracking-wider text-white">
              Rechtliches
            </h3>
            <ul className="mt-4 space-y-3">
              {FOOTER_LINKS.legal.map((link) => (
                <li key={link.href}>
                  <Link
                    href={link.href}
                    className="text-sm text-neutral-400 transition-colors hover:text-white"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="mt-12 border-t border-neutral-800 pt-8 text-center">
          <p className="text-sm text-neutral-500">
            &copy; {currentYear} {COMPANY_NAME}. Alle Rechte vorbehalten.
          </p>
        </div>
      </Container>
    </footer>
  );
}
