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

  const links = {
    services: [
      { label: "Strategieberatung", href: "#services" },
      { label: "UX/UI Design", href: "#services" },
      { label: "Entwicklung", href: "#services" },
      { label: "SEO & Support", href: "#services" },
    ],
    company: [
      { label: "Über uns", href: "#about" },
      { label: "Projekte", href: "#projects" },
      { label: "Ablauf", href: "#process" },
      { label: "Kontakt", href: "#contact" },
    ],
    legal: [
      { label: "Impressum", href: "/impressum" },
      { label: "Datenschutz", href: "/datenschutz" },
      { label: "AGB", href: "/agb" },
    ],
  };

  return (
    <footer className="bg-secondary/20 border-t border-border relative">
      <div className="container mx-auto px-6 py-16">
        <div className="grid md:grid-cols-4 gap-12 mb-16">
          {/* Logo & Description */}
          <div className="md:col-span-1">
            <span className="text-xl font-display font-medium text-foreground tracking-tight mb-6 block">
              webklar
            </span>
            <p className="text-muted-foreground text-sm leading-relaxed">
              Maßgeschneiderte Weblösungen für Ihr Unternehmen. Sicher, zuverlässig und modern.
            </p>
          </div>

          {/* Services */}
          <div>
            <h4 className="label-tag mb-6">Leistungen</h4>
            <ul className="space-y-3">
              {links.services.map((link) => (
                <li key={link.label}>
                  <a
                    href={link.href}
                    className="text-muted-foreground hover:text-foreground transition-colors text-sm"
                  >
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Company */}
          <div>
            <h4 className="label-tag mb-6">Unternehmen</h4>
            <ul className="space-y-3">
              {links.company.map((link) => (
                <li key={link.label}>
                  <a
                    href={link.href}
                    className="text-muted-foreground hover:text-foreground transition-colors text-sm"
                  >
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Legal */}
          <div>
            <h4 className="label-tag mb-6">Rechtliches</h4>
            <ul className="space-y-3">
              {links.legal.map((link) => (
                <li key={link.label}>
                  <a
                    href={link.href}
                    className="text-muted-foreground hover:text-foreground transition-colors text-sm"
                  >
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="divider mb-8" />
        <div className="flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="text-muted-foreground text-sm">
            © {currentYear} webklar. Alle Rechte vorbehalten.
          </p>
          <div className="text-muted-foreground text-sm">
            Made in Germany
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;