import Link from "next/link";
import { Container } from "./Container";
import { Logo } from "./Logo";
import { HeaderAuth } from "./auth/HeaderAuth";
import { MobileAuthCTA } from "./auth/MobileAuthCTA";
import { HeaderScrollProgress } from "./HeaderScrollProgress";
import { MobileNav } from "./MobileNav";
import { ProductsMegaMenu } from "./ProductsMegaMenu";
import { HeaderCart } from "./store/HeaderCart";

const primaryLinks: { href: string; label: string }[] = [
  { href: "/", label: "Home" },
  { href: "/about", label: "About" },
];

const trailingLinks: { href: string; label: string }[] = [
  { href: "/blog", label: "Blog" },
  { href: "/news", label: "News" },
  { href: "/studies", label: "Studies" },
  { href: "/contact", label: "Contact" },
];

export function Header() {
  return (
    <header className="sticky top-0 z-50 border-b border-[var(--color-line)] bg-white/85 backdrop-blur-md">
      <Container className="flex h-20 items-center justify-between px-6 md:px-10">
        <Logo size={52} />
        <nav
          aria-label="Primary"
          className="hidden md:flex items-center gap-7 text-sm font-medium text-[var(--color-slate)]"
        >
          {primaryLinks.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className="relative py-2 hover:text-[var(--color-blue)] transition-colors after:absolute after:left-0 after:-bottom-1 after:h-px after:w-full after:origin-left after:scale-x-0 after:bg-[var(--color-blue)] after:transition-transform after:duration-300 after:ease-out hover:after:scale-x-100"
            >
              {link.label}
            </Link>
          ))}
          <ProductsMegaMenu />
          {trailingLinks.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className="relative py-2 hover:text-[var(--color-blue)] transition-colors after:absolute after:left-0 after:-bottom-1 after:h-px after:w-full after:origin-left after:scale-x-0 after:bg-[var(--color-blue)] after:transition-transform after:duration-300 after:ease-out hover:after:scale-x-100"
            >
              {link.label}
            </Link>
          ))}
        </nav>
        <div className="flex items-center gap-2 md:gap-3">
          <HeaderCart />
          <HeaderAuth />
          <MobileNav authSlot={<MobileAuthCTA />} />
        </div>
      </Container>
      <HeaderScrollProgress />
    </header>
  );
}
