"use client";

import Link from "next/link";
import { useState } from "react";
import { CloseIcon, MenuIcon } from "@/components/icons";
import { navigation } from "@/lib/content";
import { BrandMark } from "@/components/brand-mark";

export function SiteHeader() {
  const [open, setOpen] = useState(false);

  return (
    <header className="sticky top-0 z-50 border-b border-white/5 bg-ink/90 backdrop-blur-xl">
      <div className="container-shell flex h-[82px] items-center justify-between gap-6">
        <Link aria-label="返回考町科技首页" href="/" onClick={() => setOpen(false)}>
          <BrandMark compact />
        </Link>
        <nav aria-label="主导航" className="desktop-nav items-center gap-8">
          {navigation.map((item) => (
            <Link className="text-sm text-muted transition-colors hover:text-copy" href={item.href} key={item.href}>
              {item.label}
            </Link>
          ))}
        </nav>
        <div className="desktop-nav items-center gap-3">
          <Link className="text-sm text-muted transition-colors hover:text-copy" href="/login">
            登录
          </Link>
          <Link className="button-primary min-h-10 px-4 py-2" href="/contact">
            联系我们
          </Link>
        </div>
        <button aria-expanded={open} aria-label={open ? "关闭导航" : "打开导航"} className="button-ghost mobile-nav-trigger min-h-10 p-2" onClick={() => setOpen((current) => !current)} type="button">
          {open ? <CloseIcon /> : <MenuIcon />}
        </button>
      </div>
      {open ? (
        <div className="border-t border-line bg-panel md:hidden">
          <nav aria-label="移动端主导航" className="container-shell flex flex-col gap-1 py-4">
            {navigation.map((item) => (
              <Link className="rounded-lg px-3 py-3 text-sm text-muted hover:bg-panel-raised hover:text-copy" href={item.href} key={item.href} onClick={() => setOpen(false)}>
                {item.label}
              </Link>
            ))}
            <Link className="mt-2 rounded-lg border-t border-line px-3 py-4 text-sm text-copy" href="/login" onClick={() => setOpen(false)}>
              登录 / 账户入口
            </Link>
          </nav>
        </div>
      ) : null}
    </header>
  );
}