import Link from "next/link";
import Logo from "./Logo";

const footerLinks = [
  {
    title: "Services",
    links: [
      { label: "Docker Installationen", href: "/#services" },
      { label: "Kubernetes", href: "/#services" },
      { label: "Proxmox", href: "/#services" },
      { label: "Hetzner Cloud", href: "/#services" },
      { label: "Hardware & Software", href: "/#services" },
    ],
  },
  {
    title: "Unternehmen",
    links: [
      { label: "Über uns", href: "/#about" },
      { label: "Technologien", href: "/#technologies" },
      { label: "Kontakt", href: "/#contact" },
    ],
  },
  {
    title: "Rechtliches",
    links: [
      { label: "Impressum", href: "/impressum" },
      { label: "Datenschutz", href: "/datenschutz" },
    ],
  },
];

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

  return (
    <footer className="bg-[#111925] border-t border-gray-800">
      {/* Tagline strip */}
      <div className="border-b border-gray-800 py-6 px-4">
        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-2xl sm:text-3xl font-black text-white tracking-tight">
            <span className="text-orange-400">DIGITAL DENKEN.</span>{" "}
            <span className="bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">LOKAL HANDELN.</span>
          </p>
          <a
            href="/#contact"
            className="btn-primary flex-shrink-0 px-6 py-3 text-sm tracking-wide"
          >
            Jetzt starten
          </a>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">
          {/* Brand */}
          <div className="lg:col-span-1">
            <div className="flex items-center gap-3 mb-4">
              <Logo className="h-8 w-auto" />
              <div className="flex flex-col leading-tight">
                <span className="font-black text-white text-base tracking-wider uppercase">
                  MBO-<span className="bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">TECH-IT</span>
                </span>
              </div>
            </div>
            <p className="text-slate-500 text-sm leading-relaxed mb-4">
              Ihr Spezialist für Docker, Kubernetes, Proxmox und Hetzner Cloud &mdash;
              professionelle IT-Infrastruktur für Ihr Business.
            </p>
            <p className="text-orange-500/60 text-xs font-bold tracking-[0.2em] uppercase">
              Digital Denken. Lokal Handeln.
            </p>
          </div>

          {/* Links */}
          {footerLinks.map((group) => (
            <div key={group.title}>
              <h4 className="text-white font-bold text-sm mb-4 tracking-wide">{group.title}</h4>
              <ul className="space-y-2">
                {group.links.map((link) => (
                  <li key={link.label}>
                    <Link
                      href={link.href}
                      className="text-slate-500 hover:text-orange-400 transition-colors text-sm"
                    >
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Bottom bar */}
        <div className="pt-8 border-t border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-slate-600 text-sm">
            &copy; {year} MBO-Tech-IT. Alle Rechte vorbehalten.
          </p>
          <div className="flex items-center gap-4 text-slate-600 text-sm">
            <Link href="/impressum" className="hover:text-orange-400 transition-colors">Impressum</Link>
            <Link href="/datenschutz" className="hover:text-orange-400 transition-colors">Datenschutz</Link>
            <span className="flex items-center gap-2">
              <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
              Alle Systeme betriebsbereit
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}