import Link from "next/link";
import Image from "next/image";
import { Linkedin, Twitter } from "lucide-react";

const footerLinks = [
  {
    title: "Platform",
    links: [
      { href: "/platform", label: "Overview" },
      { href: "/platform#identity", label: "Identity" },
      { href: "/platform#communication", label: "Communication" },
      { href: "/platform#signatures", label: "Signatures" },
      { href: "/platform#payments", label: "Payments" },
    ],
  },
  {
    title: "Solutions",
    links: [
      { href: "/ai-agents", label: "AI Agents" },
      { href: "/industries", label: "Industries" },
      { href: "/security", label: "Security" },
    ],
  },
  {
    title: "Company",
    links: [
      { href: "/contact", label: "Contact" },
      { href: "/contact", label: "Book a Demo" },
    ],
  },
];

export function Footer() {
  return (
    <footer className="relative border-t border-white/[0.04] bg-[#060920]">
      <div className="mx-auto max-w-7xl px-6 py-16">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12">
          {/* Logo & tagline */}
          <div className="lg:col-span-2">
            <Link href="/">
              <Image
                src="/kobil.svg"
                alt="KOBIL"
                width={100}
                height={26}
                className="logo-white opacity-80"
              />
            </Link>
            <p className="mt-4 text-slate-400 text-sm leading-relaxed max-w-xs">
              The Digital Trust Platform. One platform for identity,
              communication, signatures, and payments.
            </p>
            <p className="mt-6 text-slate-500 text-xs tracking-wide uppercase">
              Headquartered in Germany. Trusted Worldwide.
            </p>
            <div className="flex gap-3 mt-4">
              <a
                href="https://linkedin.com/company/kobil"
                target="_blank"
                rel="noopener noreferrer"
                className="p-2 rounded-lg border border-white/[0.06] text-slate-500 hover:text-accent hover:border-accent/20 transition-all duration-300"
                aria-label="LinkedIn"
              >
                <Linkedin size={16} />
              </a>
              <a
                href="https://x.com/kobil"
                target="_blank"
                rel="noopener noreferrer"
                className="p-2 rounded-lg border border-white/[0.06] text-slate-500 hover:text-accent hover:border-accent/20 transition-all duration-300"
                aria-label="X (Twitter)"
              >
                <Twitter size={16} />
              </a>
            </div>
          </div>

          {/* Link columns */}
          {footerLinks.map((column) => (
            <div key={column.title}>
              <h3 className="text-xs font-semibold text-slate-300 uppercase tracking-widest mb-5">
                {column.title}
              </h3>
              <ul className="space-y-3">
                {column.links.map((link) => (
                  <li key={link.label}>
                    <Link
                      href={link.href}
                      className="text-sm text-slate-500 hover:text-slate-200 transition-colors duration-300"
                    >
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-12 pt-8 border-t border-white/[0.04] flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="text-xs text-slate-600">
            &copy; {new Date().getFullYear()} KOBIL GmbH. All rights reserved.
          </p>
          <div className="flex gap-6 text-xs text-slate-600">
            <span className="hover:text-slate-400 cursor-pointer transition-colors">
              Privacy Policy
            </span>
            <span className="hover:text-slate-400 cursor-pointer transition-colors">
              Terms of Service
            </span>
            <span className="hover:text-slate-400 cursor-pointer transition-colors">
              Imprint
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}