landing_page/refer_landing_page/components/Header.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState, useRef, useEffect } from "react";
import ThemeToggle from "./ThemeToggle";

// CUSTOMIZATION HOOK — MOTION: 스마트 스티키 튜닝
const SCROLL_DELTA  = 6;    // px — 방향 전환 인식 최소 이동량(지터 방지)
const HIDE_AFTER    = 140;  // px — 이 지점 이전에는 숨기지 않음(실측 데스크톱 헤더 높이 122.8px + 여유)
const NAV_SETTLE_MS = 300;  // ms — 라우트 전환 직후 방향 판정 유예 구간

// CUSTOMIZATION HOOK: edit nav labels / routes here.
const navItems = [
  { href: "/", ko: "홈", en: "Home", no: "01" },
  { href: "/members", ko: "구성원", en: "Members", no: "02" },
  { href: "/publications", ko: "논문", en: "Publications", no: "03" },
  { href: "/lectures", ko: "강의", en: "Lectures", no: "04" },
  { href: "/standardization", ko: "표준화", en: "Standardization", no: "05" },
];

export default function Header() {
  const [open, setOpen] = useState(false);
  const [hidden, setHidden] = useState(false);
  const pathname = usePathname();

  const lastY       = useRef(0);
  const ticking     = useRef(false);
  const navSettling = useRef(false);
  const openRef     = useRef(open);
  openRef.current   = open;

  useEffect(() => {
    // (A) 모션 줄임 사용자는 자동 숨김 자체를 비활성화 — DESIGN.md 접근성 원칙
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

    lastY.current = window.scrollY;

    const update = () => {
      ticking.current = false;
      const y = window.scrollY;

      // (B) 최상단 + iOS 러버밴드(음수) 구간 → 항상 표시
      if (y <= 0) {
        setHidden(false);
        lastY.current = 0;
        return;
      }

      // (F-2) 라우트 전환 정착 구간: 전환이 유발한 스크롤 점프는 방향 판정에서 제외.
      //       기준점만 따라가고 hidden은 건드리지 않는다.
      if (navSettling.current) {
        lastY.current = y;
        return;
      }

      // (C) 모바일 메뉴가 열려 있으면 숨기지 않되, lastY는 계속 추적
      //     (추적하지 않으면 메뉴를 닫는 순간 헤더가 튀며 사라짐)
      if (openRef.current) {
        setHidden(false);
        lastY.current = y;
        return;
      }

      const delta = y - lastY.current;

      // (D) 미세 이동 무시. 이때 lastY를 갱신하지 않고 보존
      if (Math.abs(delta) < SCROLL_DELTA) return;

      if (delta > 0 && y > HIDE_AFTER) {
        setHidden(true); // 아래로 → 숨김
      } else if (delta < 0) {
        setHidden(false); // 위로 → 복귀
      }

      lastY.current = y;
    };

    const onScroll = () => {
      if (ticking.current) return;
      ticking.current = true;
      requestAnimationFrame(update); // 프레임당 1회로 제한
    };

    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // (F) 라우트 전환 대응 — persistent layout이라 hidden이 페이지를 넘어 생존한다.
  //     스크롤 이벤트 발화 여부와 무관하게 표시 상태를 보장한다.
  useEffect(() => {
    setHidden(false);
    lastY.current = window.scrollY; // 현재 실제 위치로 동기화
    setOpen(false); // 뒤로/앞으로 이동 시 모바일 메뉴 잔존 방지
    navSettling.current = true;
    const id = window.setTimeout(() => {
      navSettling.current = false;
    }, NAV_SETTLE_MS);
    return () => window.clearTimeout(id);
  }, [pathname]);

  const isActive = (href: string) =>
    pathname
      ? href === "/"
        ? pathname === "/"
        : pathname === href || pathname.startsWith(`${href}/`)
      : false;

  return (
    <header
      data-smart-sticky
      onFocusCapture={() => setHidden(false)}
      className={`flow-root sticky top-0 z-50 border-b border-ink bg-ivory/85 backdrop-blur transition-transform duration-300 ease-out ${
        hidden ? "-translate-y-full" : "translate-y-0"
      }`}
    >
      {/* Journal issue strip — magazine masthead feel. */}
      <div className="hidden border-b border-line desktop:block">
        <div className="container-content flex items-center justify-between py-1.5">
          <span className="kicker">KNU/CSE/ANL</span>
          {/* CUSTOMIZATION HOOK: masthead tagline */}
          <span className="kicker text-ink-mute">
            Kyungpook National University · School of Computer Science &amp; Engineering
          </span>
          <span className="kicker">대구 · Daegu</span>
        </div>
      </div>

      <div className="container-content flex h-[4.25rem] items-center justify-between gap-4 my-2 sm:my-3">
        {/* Brand logo */}
        <Link
          href="/"
          className="group flex flex-col leading-none shrink-0"
          onClick={() => setOpen(false)}
        >
          <span className="headline-ko text-lg text-ink sm:text-xl">
            AI 에이전트 네트워크 연구실
          </span>
          <span className="kicker mt-1 transition-colors group-hover:text-cobalt-dark">
            AI Agent Networking Lab (ANL)
          </span>
        </Link>

        {/* Desktop nav — small caps, wide tracking (visible at >= 1240px) */}
        <div className="hidden items-center gap-4 desktop:flex">
          <nav className="flex items-center gap-2" aria-label="주 메뉴">
            {navItems.map((item) => {
              const active = isActive(item.href);
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  aria-current={active ? "page" : undefined}
                  className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.18em] transition-all px-3 py-1.5 rounded-md ${
                    active
                      ? "bg-cobalt-dark text-white dark:text-ivory shadow-sm font-bold"
                      : "text-ink hover:text-cobalt-dark hover:bg-paper/60"
                  }`}
                >
                  <span
                    className={`font-display text-[0.62rem] ${
                      active ? "text-white dark:text-ivory" : "text-ink-mute"
                    }`}
                  >
                    {item.no}
                  </span>
                  <span>{item.en}</span>
                </Link>
              );
            })}
          </nav>
          <div className="h-4 w-px bg-line" aria-hidden="true" />
          <ThemeToggle />
        </div>

        {/* Mobile controls (visible under 1240px) */}
        <div className="flex items-center gap-2 desktop:hidden">
          <ThemeToggle />
          <button
            type="button"
            className="inline-flex items-center justify-center border border-ink p-2 text-ink transition hover:bg-ink hover:text-ivory"
            aria-label={open ? "메뉴 닫기" : "메뉴 열기"}
            aria-expanded={open}
            aria-controls="mobile-menu"
            onClick={() => setOpen((v) => !v)}
          >
            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.8} stroke="currentColor">
              {open ? (
                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
              ) : (
                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M3.75 17.25h16.5" />
              )}
            </svg>
          </button>
        </div>
      </div>

      {/* Mobile menu panel */}
      {open && (
        <nav
          id="mobile-menu"
          className="mobile-menu-panel border-t border-ink bg-ivory desktop:hidden"
          aria-label="모바일 메뉴"
        >
          <ul className="container-content flex flex-col py-2">
            {navItems.map((item) => {
              const active = isActive(item.href);
              return (
                <li key={item.href}>
                  <Link
                    href={item.href}
                    onClick={() => setOpen(false)}
                    aria-current={active ? "page" : undefined}
                    className={`flex items-baseline justify-between px-4 py-3.5 transition-colors rounded-md my-1 ${
                      active
                        ? "bg-cobalt-dark text-white dark:text-ivory font-bold shadow-sm"
                        : "text-ink hover:bg-paper/60"
                    }`}
                  >
                    <span className="flex items-baseline gap-3">
                      <span
                        className={`font-display text-xs ${
                          active ? "text-white dark:text-ivory" : "text-ink-mute"
                        }`}
                      >
                        {item.no}
                      </span>
                      <span className="headline-ko text-lg">{item.ko}</span>
                    </span>
                    <span
                      className={`text-[0.7rem] font-semibold uppercase tracking-[0.18em] ${
                        active ? "text-white dark:text-ivory" : "text-ink-mute"
                      }`}
                    >
                      {item.en}
                    </span>
                  </Link>
                </li>
              );
            })}
          </ul>
        </nav>
      )}
    </header>
  );
}