telenetsystems-2026-02-03-v1/components/layout/Footer.tsx

import Link from "next/link";
import Image from "next/image";
import { MapPin, Phone, Mail, Clock } from "lucide-react";

const navigation = {
  leistungen: [
    { name: "Fernsehen", href: "/fernsehen" },
    { name: "Internet", href: "/internet" },
    { name: "Telefonie", href: "/telefonie" },
    { name: "IT-Services", href: "/leistungen" },
  ],
  unternehmen: [
    { name: "Über uns", href: "/ueber-uns" },
    { name: "Kontakt", href: "/kontakt" },
  ],
  rechtliches: [
    { name: "Impressum", href: "/impressum" },
    { name: "Datenschutz", href: "/datenschutz" },
  ],
};

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

  return (
    <footer className="bg-[var(--color-foreground)] text-[var(--color-background)]">
      <div className="container">
        {/* Main Footer Content */}
        <div className="py-[var(--spacing-4xl)]">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-2xl)]">
            {/* Company Info */}
            <div className="lg:col-span-1">
              <Image
                src="/images/brand/logo-weiss-ffa4cbf6.png"
                alt="Telenet Systems GmbH"
                width={160}
                height={51}
                className="h-10 w-auto mb-[var(--spacing-lg)]"
              />
              <p className="text-sm text-gray-300 mb-[var(--spacing-lg)]">
                Ihr regionaler Partner für Telekommunikation und IT-Services in Tirol. Seit 1976 verbinden wir Menschen und Technik.
              </p>
              <div className="space-y-[var(--spacing-sm)]">
                <div className="flex items-start gap-[var(--spacing-sm)] text-sm text-gray-300">
                  <MapPin className="h-4 w-4 mt-0.5 flex-shrink-0" aria-hidden="true" />
                  <span>Reutte, Tirol, Österreich</span>
                </div>
                <a
                  href="tel:+4356725000"
                  className="flex items-center gap-[var(--spacing-sm)] text-sm text-gray-300 hover:text-white transition-colors"
                >
                  <Phone className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
                  <span>+43 5672 5000</span>
                </a>
                <a
                  href="mailto:info@tnr.at"
                  className="flex items-center gap-[var(--spacing-sm)] text-sm text-gray-300 hover:text-white transition-colors"
                >
                  <Mail className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
                  <span>info@tnr.at</span>
                </a>
                <div className="flex items-start gap-[var(--spacing-sm)] text-sm text-gray-300">
                  <Clock className="h-4 w-4 mt-0.5 flex-shrink-0" aria-hidden="true" />
                  <span>Mo–Fr: 8:00–12:00 &amp; 13:00–17:00</span>
                </div>
              </div>
            </div>

            {/* Leistungen */}
            <div>
              <h3 className="text-base font-semibold mb-[var(--spacing-lg)]">Leistungen</h3>
              <ul className="space-y-[var(--spacing-sm)]">
                {navigation.leistungen.map((item) => (
                  <li key={item.name}>
                    <Link
                      href={item.href}
                      className="text-sm text-gray-300 hover:text-white transition-colors"
                    >
                      {item.name}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            {/* Unternehmen */}
            <div>
              <h3 className="text-base font-semibold mb-[var(--spacing-lg)]">Unternehmen</h3>
              <ul className="space-y-[var(--spacing-sm)]">
                {navigation.unternehmen.map((item) => (
                  <li key={item.name}>
                    <Link
                      href={item.href}
                      className="text-sm text-gray-300 hover:text-white transition-colors"
                    >
                      {item.name}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            {/* Rechtliches & CTA */}
            <div>
              <h3 className="text-base font-semibold mb-[var(--spacing-lg)]">Rechtliches</h3>
              <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
                {navigation.rechtliches.map((item) => (
                  <li key={item.name}>
                    <Link
                      href={item.href}
                      className="text-sm text-gray-300 hover:text-white transition-colors"
                    >
                      {item.name}
                    </Link>
                  </li>
                ))}
              </ul>
              <Link href="/kontakt" className="btn btn-primary">
                Kontakt aufnehmen
              </Link>
            </div>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="border-t border-gray-700 py-[var(--spacing-lg)]">
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-[var(--spacing-sm)]">
            <p className="text-sm text-gray-400">
              © {currentYear} Telenet Systems GmbH. Alle Rechte vorbehalten.
            </p>
            <p className="text-sm text-gray-400">
              Ihr Partner für Telekommunikation seit 1976
            </p>
          </div>
        </div>
      </div>
    </footer>
  );
}