"use client";

import Link from "next/link";
import { Button } from "@/components/ui/button";
import { LanguageSwitcher } from "@/components/sections/lang/language-switcher";
import { ThemeToggle } from "@/components/sections/theme/theme-toggle";
import { Dictionary } from "@/lib/IDict";

export function Header({
  dict,
  lang,
}: {
  dict: Dictionary["nav"];
  lang: string;
}) {
  return (
    <header className="fixed top-6 left-1/2 -translate-x-1/2 w-[95%] max-w-5xl z-50 bg-card/60 dark:bg-card/40 backdrop-blur-2xl border border-border/50 rounded-full shadow-lg transition-all duration-500 hover:bg-card/80 dark:hover:bg-card/60">
      <div className="px-6 md:px-8 h-16 flex items-center justify-between">
        {/* ЛЕВЫЙ БЛОК: Неоновый Логотип */}
        <Link
          href={`/${lang}`}
          className="flex items-center gap-3 group group-hover:scale-105 transition-transform duration-300"
        >
          <div className="text-2xl sm:text-3xl tracking-widest flex items-center -rotate-2 select-none font-bold">
            <span className="transition-all duration-300 text-neon-cyan animate-neon-flicker">
              Net
            </span>
            <span className="transition-all duration-300 text-neon-cyan">
              runner
            </span>
            <span className="ml-2 opacity-90 group-hover:opacity-100 transition-all duration-300 text-neon-purple">
              VPN
            </span>
          </div>
        </Link>

        {/* ЦЕНТРАЛЬНЫЙ БЛОК: Навигация */}
        <nav className="hidden md:flex items-center gap-8 text-sm font-bold text-muted-foreground">
          <Link
            href={`/${lang}#features`}
            className="hover:text-primary transition-colors duration-200"
          >
            {dict.features}
          </Link>
          <Link
            href={`/${lang}#pricing`}
            className="hover:text-primary transition-colors duration-200"
          >
            {dict.pricing}
          </Link>
          <Link
            href={`/${lang}#faq`}
            className="hover:text-primary transition-colors duration-200"
          >
            {dict.faq}
          </Link>
        </nav>

        {/* ПРАВЫЙ БЛОК: Контролы */}
        <div className="flex items-center gap-2 sm:gap-4">
          <div className="flex items-center gap-1 sm:gap-2">
            <LanguageSwitcher />
            <ThemeToggle />
          </div>
          {/* РОУТИНГ НА СТРАНИЦУ СКАЧИВАНИЯ */}
          <Button
            asChild
            className="hidden sm:flex rounded-full px-6 py-5 text-sm font-bold transition-all duration-300 bg-primary text-primary-foreground shadow-md hover:shadow-[0_0_20px_rgba(0,240,255,0.4)] dark:shadow-[0_0_15px_rgba(112,0,255,0.3)] hover:-translate-y-0.5"
          >
            <Link href={`/${lang}/download`}>{dict.cta}</Link>
          </Button>
        </div>
      </div>
    </header>
  );
}