import Link from "next/link";
import Image from "next/image";

import { company, mainNavigation } from "@/lib/site-content";

export function SiteFooter() {
  return (
    <footer className="mt-20 border-t border-alpine-200 bg-alpine-900 text-alpine-50">
      <div className="container-shell grid gap-10 py-14 md:grid-cols-[1.2fr_1fr_1fr]">
        <div className="space-y-4">
          <Image
            alt="TeleNetSystems Logo hell"
            className="h-10 w-auto"
            src="/assets/logo/logo-weiss-ffa4cbf6.png"
            width={190}
            height={50}
          />
          <p className="max-w-sm text-sm leading-relaxed text-alpine-100">
            TeleNetSystems verbindet technisches Know-how mit regionaler Naehe. Sie bekommen klare Tarife,
            erreichbare Ansprechpartner und Support aus Tirol.
          </p>
        </div>

        <div>
          <h2 className="font-heading text-lg text-white">Seiten</h2>
          <ul className="mt-4 space-y-2 text-sm text-alpine-100">
            {mainNavigation.map((item) => (
              <li key={item.href}>
                <Link className="hover:text-copper-200" href={item.href}>
                  {item.label}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <h2 className="font-heading text-lg text-white">Kontakt</h2>
          <ul className="mt-4 space-y-2 text-sm text-alpine-100">
            <li>{company.name}</li>
            <li>{company.address}</li>
            <li>
              <a className="hover:text-copper-200" href={`tel:${company.phone.replace(/\s+/g, "")}`}>
                {company.phone}
              </a>
            </li>
            <li>
              <a className="hover:text-copper-200" href={`mailto:${company.email}`}>
                {company.email}
              </a>
            </li>
            <li>{company.openingHours}</li>
          </ul>
        </div>
      </div>

      <div className="border-t border-alpine-700/80">
        <div className="container-shell flex flex-wrap items-center justify-between gap-3 py-4 text-xs text-alpine-200">
          <p>© {new Date().getFullYear()} TeleNetSystems GmbH</p>
          <div className="flex gap-4">
            <Link className="hover:text-copper-200" href="/impressum">
              Impressum
            </Link>
            <Link className="hover:text-copper-200" href="/datenschutz">
              Datenschutz
            </Link>
          </div>
        </div>
      </div>
    </footer>
  );
}