o2o-site-AEO/solution/site/src/sections/SiteHeader.tsx

import {Phone} from 'lucide-react';
import {useSite} from '@/lib/site-context';
import {isSectionEnabled, unitSpec} from '@/lib/derive';

/**
 * 상단 내비.
 *
 * ★ 메뉴를 <nav> + <a> 로 그대로 둔다. 자바스크립트로 만드는 메뉴는
 *   크롤러가 링크 그래프를 못 읽는다.
 *
 * ★ 사이트가 한 장이라 전부 앵커다. 예전에는 페이지 이동이 섞여 있어서
 *   라우터의 basename 을 타야 했는데(`<a href="/guide">` 는 호스트 루트로 가서 404),
 *   앵커만 남으니 그 문제가 없다.
 */
export function SiteHeader() {
  const payload = useSite();
  const spec = unitSpec(payload);

  const items = [
    {label: '소개', href: '#about', show: isSectionEnabled(payload, 'intro')},
    {label: spec.label, href: '#units', show: payload.units.length > 0},
    {label: '주변 정보', href: '#guide', show: isSectionEnabled(payload, 'local')},
    {label: '오시는 길', href: '#location', show: true},
    {label: 'FAQ', href: '#faq', show: payload.faqs.length > 0},
  ].filter((item) => item.show);

  return (
    <header className="sticky top-0 z-40 w-full border-b border-black/8 bg-[color-mix(in_srgb,var(--color-surface)_92%,transparent)] backdrop-blur-md">
      <div className="shell flex h-16 items-center justify-between">
        <a href="#top" className="flex min-w-0 items-center gap-2">
          <span
            className="serif flex size-7 shrink-0 items-center justify-center rounded-lg text-sm font-semibold text-white"
            style={{backgroundColor: 'var(--color-brand)'}}
            aria-hidden
          >
            {payload.place.name.slice(0, 1)}
          </span>
          <span className="flex min-w-0 flex-col">
            <span className="serif truncate text-base font-bold leading-none tracking-tight sm:text-lg">
              {payload.place.name}
            </span>
            {payload.place.englishName && (
              <span className="mt-0.5 truncate text-[10px] uppercase leading-tight tracking-wider opacity-50">
                {payload.place.englishName}
              </span>
            )}
          </span>
        </a>

        <nav aria-label="주요 메뉴" className="hidden items-center gap-6 md:flex">
          {items.map((item) => (
            <a
              key={item.label}
              href={item.href}
              className="py-1 text-sm font-medium opacity-70 transition-opacity hover:opacity-100"
            >
              {item.label}
            </a>
          ))}
        </nav>

        {payload.place.phone && (
          <a
            href={`tel:${payload.place.phone}`}
            className="flex items-center gap-1.5 rounded-xl px-3 py-2 text-xs font-semibold text-white transition-opacity hover:opacity-90"
            style={{backgroundColor: 'var(--color-brand)'}}
          >
            <Phone className="size-3.5" />
            <span className="hidden sm:inline">{payload.place.phone}</span>
            <span className="sm:hidden">전화</span>
          </a>
        )}
      </div>
    </header>
  );
}