"use client";

import Link from "next/link";
import { ArrowUpRight, LogOut } from "lucide-react";
import { useEffect, useState } from "react";
import { clearToken, getToken } from "@/lib/auth";

const links = [["首页", "#top"], ["关于我们", "#about"], ["核心服务", "#services"], ["基金产品", "#funds"]];

export function PublicHeader() {
  const [authenticated, setAuthenticated] = useState(false);

  useEffect(() => {
    setAuthenticated(Boolean(getToken()));
  }, []);

  return (
    <header className="fixed inset-x-0 top-0 z-40 border-b border-white/10 bg-[var(--brand-navy)]/85 text-white backdrop-blur-xl">
      <div className="mx-auto flex h-20 max-w-7xl items-center justify-between px-8">
        <Link href="/#top" className="flex items-center gap-3" aria-label="华夏基金首页">
          <span className="flex h-10 w-10 items-center justify-center rounded-xl bg-white text-[var(--brand-primary)] shadow-sm"><span className="text-lg font-bold">华</span></span>
          <span><span className="block text-lg font-semibold tracking-wide">华夏基金</span><span className="block text-[10px] uppercase tracking-[0.25em] text-blue-100">Huaxia Fund</span></span>
        </Link>
        <nav className="hidden items-center gap-8 lg:flex">{links.map(([label, href]) => <Link key={href} href={href} className="text-sm text-blue-50 transition hover:text-white">{label}</Link>)}</nav>
        {authenticated ? <button onClick={() => { clearToken(); setAuthenticated(false); window.location.href = "/"; }} className="flex items-center gap-1.5 rounded-lg bg-white px-4 py-2.5 text-sm font-semibold text-[var(--brand-navy)] transition hover:bg-blue-50"><LogOut className="h-4 w-4" />退出登录</button> : <div className="flex items-center gap-3"><Link href="/login" className="flex items-center gap-1.5 rounded-lg bg-white px-4 py-2.5 text-sm font-semibold text-[var(--brand-navy)] transition hover:bg-blue-50">登录 <ArrowUpRight className="h-4 w-4" /></Link></div>}
      </div>
    </header>
  );
}