"use client";

import Link from "next/link";
import { JetBrains_Mono } from "next/font/google";
import { GithubLogoIcon, TwitterLogoIcon } from "@phosphor-icons/react";
import { Send } from "lucide-react";
import { Dictionary } from "@/lib/IDict";

const jetbrainsMono = JetBrains_Mono({
  subsets: ["latin", "cyrillic"],
});

export function Footer({
  dict,
  lang,
}: {
  dict: Dictionary["footer"];
  lang: string;
}) {
  // Динамическая карта сайта с прописанными маршрутами
  const sitemap = [
    {
      title: dict.sections.product,
      links: [
        { name: dict.links.features, href: `/${lang}#features` },
        { name: dict.links.pricing, href: `/${lang}#pricing` },
        { name: dict.links.protocol, href: `/${lang}/docs` }, // Ведет в документацию
      ],
    },
    {
      title: dict.sections.resources,
      links: [
        { name: dict.links.faq, href: `/${lang}#faq` },
        { name: dict.links.comms, href: `/${lang}/blog` },
      ],
    },
    {
      title: dict.sections.legal,
      links: [
        { name: dict.links.privacy, href: `/${lang}/docs` }, // Ведет в документацию (Legal)
        { name: dict.links.terms, href: `/${lang}/docs` }, // Ведет в документацию (Legal)
      ],
    },
  ];

  return (
    <footer
      className={`mt-20 border-t border-border/50 bg-card/30 backdrop-blur-xl ${jetbrainsMono.className}`}
    >
      <div className="container mx-auto px-6 py-12">
        <div className="grid grid-cols-1 gap-12 md:grid-cols-4 lg:gap-16">
          {/* Блок бренда */}
          <div className="flex flex-col gap-4">
            <Link
              href={`/${lang}`}
              className="text-2xl font-bold tracking-tighter flex items-center gap-2 w-fit"
            >
              <div className="w-3 h-3 bg-primary rounded-full shadow-[0_0_10px_rgba(0,240,255,0.8)] animate-pulse" />
              <span className="text-neon-cyan">{dict.brand}</span>
            </Link>
            <p className="text-muted-foreground text-sm leading-relaxed max-w-[200px]">
              {dict.tagline}
            </p>
            <div className="flex gap-4 mt-2">
              <Link
                href="#"
                className="text-muted-foreground hover:text-primary transition-colors"
              >
                <GithubLogoIcon size={20} />
              </Link>
              <Link
                href="#"
                className="text-muted-foreground hover:text-secondary transition-colors"
              >
                <TwitterLogoIcon size={20} />
              </Link>
              <Link
                href="#"
                className="text-muted-foreground hover:text-primary transition-colors"
              >
                <Send size={20} />
              </Link>
            </div>
          </div>

          {/* Динамическая карта сайта */}
          {sitemap.map((section, idx) => (
            <div key={idx} className="flex flex-col gap-4">
              <h4 className="text-foreground font-bold text-sm uppercase tracking-widest">
                {section.title}
              </h4>
              <ul className="flex flex-col gap-2">
                {section.links.map((link, linkIdx) => (
                  <li key={linkIdx}>
                    <Link
                      href={link.href}
                      className="text-muted-foreground hover:text-primary text-sm transition-colors duration-200"
                    >
                      {link.name}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Нижняя панель */}
        <div className="mt-16 pt-8 border-t border-border/20 flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="text-xs text-muted-foreground/60">{dict.rights}</p>
          <div className="flex gap-8 text-[10px] uppercase tracking-[0.2em] text-muted-foreground/40 font-bold">
            <span>Uplink: Active</span>
            <span>Node: Node-Th-01</span>
            <span>Latency: 24ms</span>
          </div>
        </div>
      </div>
    </footer>
  );
}
