import React from "react";
import { Link } from "react-router-dom";
import { ChevronRight } from "lucide-react";
import Logo from "@/components/Logo";
import { FlickeringGrid } from "@/components/ui/flickering-grid";
import { useIsMobile } from "@/hooks/use-mobile";

type FooterLink = {
  id: number;
  title: string;
  /** internal react-router route */
  to?: string;
  /** anchor / mailto / tel / external */
  href?: string;
};

const footerLinks: { title: string; links: FooterLink[] }[] = [
  {
    title: "Seiten",
    links: [
      { id: 1, title: "Startseite", to: "/" },
      { id: 2, title: "Über uns", to: "/ueber-uns" },
      { id: 3, title: "Leistungen", href: "/#services" },
      { id: 4, title: "Kontakt", to: "/kontakt" },
    ],
  },
  {
    title: "Kontakt",
    links: [
      { id: 5, title: "support@webklar.com", href: "mailto:support@webklar.com" },
      { id: 6, title: "0170 4969375", href: "tel:+491704969375" },
    ],
  },
  {
    title: "Rechtliches",
    links: [
      { id: 7, title: "AGB", to: "/agb" },
      { id: 8, title: "Impressum", to: "/impressum" },
    ],
  },
];

const Footer: React.FC = () => {
  const isMobile = useIsMobile();

  return (
    <footer
      id="footer"
      className="w-full overflow-hidden border-t border-white/[0.1] bg-black pb-0"
    >
      <div className="mx-auto flex max-w-7xl flex-col p-10 md:flex-row md:items-start md:justify-between">
        <div className="mx-0 flex max-w-xs flex-col items-start justify-start gap-y-5">
          <Link to="/" className="flex items-center gap-2">
            <Logo width={32} height={32} />
            <span className="text-xl font-semibold text-white">WEBklar</span>
          </Link>
          <p className="font-medium leading-relaxed tracking-tight text-neutral-400">
            Webagentur für KMU – Website, Prozesse und Automatisierung aus einer
            Hand.
          </p>
          <div className="text-sm text-neutral-500">
            © {new Date().getFullYear()} WEBklar. Alle Rechte vorbehalten.
          </div>
        </div>
        <div className="pt-10 md:w-1/2 md:pt-0">
          <div className="flex flex-col items-start justify-start gap-y-8 sm:flex-row sm:justify-between lg:pl-10">
            {footerLinks.map((column, columnIndex) => (
              <ul key={columnIndex} className="flex flex-col gap-y-3">
                <li className="mb-1 text-sm font-semibold text-neutral-300">
                  {column.title}
                </li>
                {column.links.map((link) => (
                  <li
                    key={link.id}
                    className="group inline-flex cursor-pointer items-center justify-start gap-1 text-[15px]/snug text-neutral-400"
                  >
                    {link.to ? (
                      <Link
                        to={link.to}
                        className="transition-colors group-hover:text-neutral-200"
                      >
                        {link.title}
                      </Link>
                    ) : (
                      <a
                        href={link.href}
                        className="transition-colors group-hover:text-neutral-200"
                      >
                        {link.title}
                      </a>
                    )}
                    <div className="flex size-4 translate-x-0 transform items-center justify-center rounded border border-white/[0.15] opacity-0 transition-all duration-300 ease-out group-hover:translate-x-1 group-hover:opacity-100">
                      <ChevronRight className="h-4 w-4" />
                    </div>
                  </li>
                ))}
              </ul>
            ))}
          </div>
        </div>
      </div>
      <div className="relative z-0 mt-24 h-48 w-full md:h-64">
        <div className="absolute inset-0 z-10 bg-gradient-to-t from-transparent from-40% to-black" />
        <div className="absolute inset-0 mx-6">
          <FlickeringGrid
            text="WEBklar"
            fontSize={isMobile ? 70 : 90}
            className="h-full w-full"
            squareSize={2}
            gridGap={isMobile ? 2 : 3}
            color="#6B7280"
            maxOpacity={0.3}
            flickerChance={0.1}
          />
        </div>
      </div>
    </footer>
  );
};

export default Footer;
