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

const footerLinks = {
    services: [
        { name: "Fernsehen", href: "/fernsehen" },
        { name: "Internet", href: "/internet" },
        { name: "Telefonie", href: "/telefonie" },
        { name: "Leistungen", href: "/leistungen" },
    ],
    company: [
        { name: "Über uns", href: "/ueber-uns" },
        { name: "Kontakt", href: "/kontakt" },
        { 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-3xl)] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-2xl)]">
                    {/* Company Info */}
                    <div className="stack-md">
                        <Link
                            href="/"
                            className="hover:no-underline"
                        >
                            <Image
                                src="/images/logo/logo-weiss-ffa4cbf6.png"
                                alt="TeleNetSystems Logo"
                                width={160}
                                height={36}
                                className="h-8 w-auto"
                            />
                        </Link>
                        <p className="text-sm opacity-80">
                            Ihr regionaler Telekom- und IT-Partner in Tirol.
                            Zuverlässige Technik, ehrliche Beratung und persönlicher Service seit 1976.
                        </p>
                    </div>

                    {/* Services Links */}
                    <div>
                        <h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
                            Leistungen
                        </h3>
                        <ul className="stack-sm">
                            {footerLinks.services.map((link) => (
                                <li key={link.name}>
                                    <Link
                                        href={link.href}
                                        className="text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
                                    >
                                        {link.name}
                                    </Link>
                                </li>
                            ))}
                        </ul>
                    </div>

                    {/* Company Links */}
                    <div>
                        <h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
                            Unternehmen
                        </h3>
                        <ul className="stack-sm">
                            {footerLinks.company.map((link) => (
                                <li key={link.name}>
                                    <Link
                                        href={link.href}
                                        className="text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
                                    >
                                        {link.name}
                                    </Link>
                                </li>
                            ))}
                        </ul>
                    </div>

                    {/* Contact Info */}
                    <div>
                        <h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
                            Kontakt
                        </h3>
                        <ul className="stack-md">
                            <li className="flex items-start gap-[var(--spacing-sm)]">
                                <MapPin size={18} className="shrink-0 mt-0.5 text-[var(--color-primary)]" />
                                <span className="text-sm opacity-80">
                                    PLACEHOLDER: Adresse<br />
                                    6600 Reutte, Tirol
                                </span>
                            </li>
                            <li>
                                <a
                                    href="tel:+43567612345"
                                    className="flex items-center gap-[var(--spacing-sm)] text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
                                >
                                    <Phone size={18} className="shrink-0 text-[var(--color-primary)]" />
                                    PLACEHOLDER: Telefon
                                </a>
                            </li>
                            <li>
                                <a
                                    href="mailto:info@tnr.at"
                                    className="flex items-center gap-[var(--spacing-sm)] text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
                                >
                                    <Mail size={18} className="shrink-0 text-[var(--color-primary)]" />
                                    PLACEHOLDER: E-Mail
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                {/* Bottom Bar */}
                <div className="py-[var(--spacing-lg)] border-t border-[var(--color-background)]/10">
                    <p className="text-sm opacity-60 text-center">
                        © {currentYear} Telenet Systems GmbH. Alle Rechte vorbehalten.
                    </p>
                </div>
            </div>
        </footer>
    );
}