// KASHA website — sticky top navigation
function SiteHeader({ route, onNavigate }) {
  const { Logo, Button, Icon } = window.DS;
  const A = window.SITE_ASSETS;   // 홈페이지 CMS (관리자에서 편집)

  const links = [
    { key: "home", label: "홈" },
    { key: "shop", label: "촬영 상품" },
    { key: "portfolio", label: "포트폴리오" },
    { key: "booking", label: "예약" },
  ];

  return (
    <header
      style={{
        position: "sticky",
        top: 0,
        zIndex: 50,
        background: "rgba(255,255,255,0.82)",
        backdropFilter: "saturate(180%) blur(18px)",
        WebkitBackdropFilter: "saturate(180%) blur(18px)",
        borderBottom: "1px solid var(--border-subtle)",
      }}
    >
      {A && A.noticeActive && (
        <div style={{ background: "var(--ink)", color: "#fff", fontSize: 13, fontWeight: 500, padding: "9px 16px", textAlign: "center", letterSpacing: "var(--tracking-body)" }}>
          {A.notice}
        </div>
      )}
      <div
        style={{
          maxWidth: "var(--container-max)",
          margin: "0 auto",
          height: 68,
          padding: "0 24px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
        <div
          style={{ cursor: "pointer", display: "flex", alignItems: "center" }}
          onClick={() => onNavigate("home")}
        >
          <Logo size={26} />
        </div>

        <nav style={{ display: "flex", alignItems: "center", gap: 4 }}>
          {links.map((l) => (
            <button
              key={l.key}
              onClick={() => onNavigate(l.key)}
              style={{
                padding: "8px 16px",
                border: "none",
                background: "transparent",
                fontFamily: "var(--font-sans)",
                fontSize: "var(--text-body)",
                fontWeight: route === l.key ? "var(--weight-bold)" : "var(--weight-medium)",
                color: route === l.key ? "var(--text-strong)" : "var(--text-secondary)",
                cursor: "pointer",
                whiteSpace: "nowrap",
                letterSpacing: "var(--tracking-body)",
              }}
            >
              {l.label}
            </button>
          ))}
        </nav>

        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <button
            onClick={() => onNavigate("mypage")}
            aria-label="마이페이지"
            title="마이페이지"
            style={{
              width: 38, height: 38, borderRadius: "50%",
              border: `1.5px solid ${route === "mypage" ? "var(--ink)" : "var(--border-default)"}`,
              background: route === "mypage" ? "var(--ink)" : "#fff",
              display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer",
              transition: "border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard)",
            }}
          >
            <Icon name="user" size={20} color={route === "mypage" ? "#fff" : "var(--gray-600)"} />
          </button>
          <Button variant="primary" size="sm" onClick={() => onNavigate("booking")}>
            촬영 예약
          </Button>
        </div>
      </div>
    </header>
  );
}
window.SiteHeader = SiteHeader;