heicode/website/components/header.tsx

"use client";

import { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import { Menu, X } from "lucide-react";

const navLinks = [
  { href: "#products", label: "产品" },
  { href: "#features", label: "能力" },
  { href: "#paradigm", label: "范式" },
  { href: "#principles", label: "原则" },
];
const MANAGER_URL = "https://code.xinghanlab.com/";

export function Header() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  return (
    <header className="fixed top-0 left-0 right-0 z-50 border-b border-border/50 bg-background/80 backdrop-blur-md">
      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
        <Link href="/" className="flex items-center gap-2">
          <div className="flex h-8 w-8 items-center justify-center rounded-md border border-border/70 bg-card/60 text-foreground">
            <Image src="/heicode-logo.svg" alt="Heicode" width={18} height={18} />
          </div>
          <span className="bg-gradient-to-r from-blue-400 via-violet-400 to-purple-500 bg-clip-text text-lg font-semibold tracking-tight text-transparent">
            Heicode
          </span>
        </Link>

        {/* Desktop Navigation */}
        <nav className="hidden items-center gap-8 md:flex">
          {navLinks.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className="text-sm text-muted-foreground transition-colors hover:text-foreground"
            >
              {link.label}
            </Link>
          ))}
        </nav>

        <div className="hidden items-center gap-4 md:flex">
          <Button variant="ghost" size="sm" asChild>
            <a href={MANAGER_URL} target="_blank" rel="noreferrer">
              登录
            </a>
          </Button>
          <Button size="sm" asChild>
            <a href={MANAGER_URL} target="_blank" rel="noreferrer">
              开始使用
            </a>
          </Button>
        </div>

        {/* Mobile Menu Button */}
        <button
          className="md:hidden"
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          aria-label={mobileMenuOpen ? "关闭菜单" : "打开菜单"}
        >
          {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
        </button>
      </div>

      {/* Mobile Navigation */}
      {mobileMenuOpen && (
        <div className="border-t border-border bg-background md:hidden">
          <nav className="flex flex-col px-4 py-4">
            {navLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className="py-3 text-sm text-muted-foreground transition-colors hover:text-foreground"
                onClick={() => setMobileMenuOpen(false)}
              >
                {link.label}
              </Link>
            ))}
            <div className="mt-4 flex flex-col gap-2">
              <Button variant="ghost" size="sm" className="justify-start" asChild>
                <a href={MANAGER_URL} target="_blank" rel="noreferrer">
                  登录
                </a>
              </Button>
              <Button size="sm" asChild>
                <a href={MANAGER_URL} target="_blank" rel="noreferrer">
                  开始使用
                </a>
              </Button>
            </div>
          </nav>
        </div>
      )}
    </header>
  );
}