---
import { ko, en } from "../i18n/content";
import "../styles/fonts.css";
import "../styles/tokens.css";
import "../styles/base.css";

interface Props {
  lang: "ko" | "en";
  title: string;
  description: string;
}
const { lang, title, description } = Astro.props;

// 언어별로 자기 폰트만 받는다. 두 벌을 한 페이지에 로드하면 예산을 넘긴다.
const FONT_CSS = {
  ko: "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css",
  en: "https://api.fontshare.com/v2/css?f%5B%5D=switzer@400,500,600&display=swap",
} as const;

const alt = lang === "ko" ? "/en/" : "/";

// 헤더 내비게이션. 본문과 같은 콘텐츠 파일에서 온다 — 라벨을 레이아웃에
// 하드코딩하면 두 언어판이 어긋난다.
const nav = (lang === "ko" ? ko : en).nav;

// 파비콘: 페이지의 스파인 모티프를 그대로 쓴 단순 기하 마크.
// data: URI 안의 SVG 는 상위 문서의 커스텀 프로퍼티를 읽지 못한다.
// 하드 게이트 #1 의 유일한 예외이고, 값은 tokens.css 와 손으로 맞춘다.
//   MARK_BG = --accent-inverse · MARK_FG = --surface-inverse
const MARK_BG = "#0E6B63";
const MARK_FG = "#F4F2EC";
const FAVICON =
  "data:image/svg+xml," +
  encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <rect width="32" height="32" rx="3" fill="${MARK_BG}"/>
      <path d="M11 7v18" stroke="${MARK_FG}" stroke-width="2" stroke-linecap="round"/>
      <circle cx="11" cy="10" r="3" fill="${MARK_FG}"/>
      <circle cx="11" cy="16" r="3" fill="${MARK_FG}"/>
      <circle cx="11" cy="22" r="3" fill="${MARK_FG}"/>
      <path d="M18 10h7M18 16h5M18 22h7" stroke="${MARK_FG}" stroke-width="2" stroke-linecap="round" opacity=".55"/>
    </svg>`,
  );
---

<!doctype html>
<html lang={lang} class="no-js">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
    <meta name="description" content={description} />
    <link rel="icon" href={FAVICON} />

    <link rel="canonical" href={new URL(Astro.url.pathname, Astro.site)} />
    <link rel="alternate" hreflang="ko" href={new URL("/", Astro.site)} />
    <link rel="alternate" hreflang="en" href={new URL("/en/", Astro.site)} />
    <link rel="alternate" hreflang="x-default" href={new URL("/", Astro.site)} />

    <link
      rel="preconnect"
      href={lang === "ko" ? "https://cdn.jsdelivr.net" : "https://api.fontshare.com"}
      crossorigin
    />
    <link rel="stylesheet" href={FONT_CSS[lang]} />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap"
      media="print"
      onload="this.media='all'"
    />

    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content={lang === "ko" ? "ko_KR" : "en_US"} />
    <meta name="color-scheme" content="light dark" />

    {/* JS 가 살아 있으면 no-js 를 떼고 진입 연출을 켠다 */}
    <script is:inline>
      document.documentElement.classList.remove("no-js");
    </script>
  </head>

  <body>
    <a class="skip" href="#main">{lang === "ko" ? "본문으로 건너뛰기" : "Skip to content"}</a>

    <header class="site-header">
      <div class="header-inner glass">
        <span class="rim" aria-hidden="true"></span>
        <a class="wordmark" href={lang === "ko" ? "/" : "/en/"} aria-label="designpaca">
          <svg class="mark" viewBox="0 0 32 32" width="20" height="20" aria-hidden="true">
            <path d="M11 7v18" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" />
            <circle cx="11" cy="10" r="3" fill="currentColor" />
            <circle cx="11" cy="16" r="3" fill="currentColor" />
            <circle cx="11" cy="22" r="3" fill="currentColor" />
          </svg>
          <span>designpaca</span>
        </a>

        <nav class="nav-main" aria-label={lang === "ko" ? "섹션" : "Sections"}>
          {nav.items.map((i) => <a href={i.href}>{i.label}</a>)}
          {/* 페이지를 벗어나는 유일한 링크다. 화살표로 그렇다고 알린다 */}
          <a class="nav-repo" href={nav.repo} rel="noopener">
            {nav.repoLabel}
            <svg viewBox="0 0 12 12" width="9" height="9" aria-hidden="true">
              <path d="M3.5 8.5 8.5 3.5M4.5 3.5h4v4" stroke="currentColor"
                    stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" fill="none" />
            </svg>
          </a>
        </nav>

        <div class="header-end">
          {/* 언어는 국가가 아니다. 국기 아이콘을 쓰지 않는다 */}
          <a
            class="btn btn-quiet btn-sm"
            href={alt}
            hreflang={lang === "ko" ? "en" : "ko"}
            lang={lang === "ko" ? "en" : "ko"}
          >
            {lang === "ko" ? "English" : "한국어"}
          </a>

          {/* 모바일 메뉴. details 라 JS 가 0바이트이고, 키보드와
              스크린리더 대응이 브라우저 기본으로 온다 */}
          <details class="nav-mobile">
            <summary class="btn btn-quiet btn-sm" aria-label={nav.menu}>
              <svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true">
                <path d="M2 4h12M2 8h12M2 12h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
              </svg>
            </summary>
            <div class="nav-sheet glass">
              {nav.items.map((i) => <a href={i.href}>{i.label}</a>)}
              <a href={nav.repo} rel="noopener">{nav.repoLabel} ↗</a>
            </div>
          </details>
        </div>
      </div>
    </header>

    <main id="main" class="page">
      <slot />
    </main>


    <script is:inline>
      // 진입 연출. 한 번 보이면 계속 보인다.
      // scroll 리스너를 쓰지 않는다(하드 게이트 10).
      (function () {
        var els = document.querySelectorAll(".reveal");
        if (!("IntersectionObserver" in window) || !els.length) {
          els.forEach(function (el) { el.classList.add("is-in"); });
          return;
        }
        var io = new IntersectionObserver(
          function (entries) {
            entries.forEach(function (e) {
              if (!e.isIntersecting) return;
              e.target.classList.add("is-in");
              io.unobserve(e.target);
            });
          },
          { rootMargin: "200px 0px 200px 0px", threshold: 0 },
        );
        els.forEach(function (el) { io.observe(el); });
      })();
    </script>
  </body>
</html>

<style>
  .skip {
    position: absolute;
    left: var(--space-3);
    top: calc(var(--space-3) * -4);
    padding: var(--space-2) var(--space-3);
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--radius-sm);
    z-index: 10;
    transition: transform var(--dur-quick) var(--ease-out);
  }
  .skip:focus { transform: translateY(calc(var(--space-3) * 5)); }

  /* 상단에 붙은 풀블리드 바 대신 떠 있는 헤더 */
  /* 상단에 붙은 바가 아니라 떠 있는 유리 알약 */
  /* 언어 전환 링크에는 lang 속성이 붙는다(스크린리더가 "English" 를
     영어로 읽어야 하므로 옳다). 그런데 [lang] 셀렉터가 타입 스케일을
     통째로 재정의해서 이 링크만 16px 이 됐다 — 스케일 밖 단계가 하나 생긴다.
     크기는 헤더에서 확정하고 링크는 상속만 받는다. */
  .site-header {
    font-size: var(--step-0);
    position: fixed;
    top: var(--space-3);
    left: 0;
    right: 0;
    z-index: 3;
    padding-inline: var(--gutter);
  }
  .header-inner {
    max-width: 1180px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border-radius: var(--radius-frame);
  }
  .wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--weight-medium);
    letter-spacing: -0.01em;
    text-decoration: none;
  }
  .mark { color: var(--accent); flex: none; }
  /* ---- 섹션 내비 (데스크톱) --------------------------------- */
  .nav-main {
    display: none;
    gap: var(--space-1);
    margin-inline: auto;
  }
  .nav-main a {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-h-sm);
    padding-inline: var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
    text-decoration: none;
    transition: color var(--dur-instant) var(--ease-out),
                background-color var(--dur-instant) var(--ease-out);
  }
  .nav-main a:hover { color: var(--ink); background: var(--glass-tint); }
  /* 바깥으로 나가는 링크는 섹션 앵커와 같은 무게로 두지 않는다 */
  .nav-repo { gap: var(--space-1); opacity: 0.72; }
  .nav-repo:hover { opacity: 1; }

  .header-end {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
  }

  /* ---- 모바일 메뉴 ------------------------------------------
     details 를 쓴 이유는 JS 0바이트 때문만이 아니다. 열림 상태,
     Esc, 포커스 순서, aria-expanded 를 브라우저가 이미 맞게 한다.
     직접 만들면 그 넷을 전부 다시 구현해야 하고 보통 틀린다. */
  .nav-mobile { position: relative; }
  .nav-mobile > summary {
    list-style: none;
    padding-inline: 0;
    width: var(--control-h-sm);
  }
  .nav-mobile > summary::-webkit-details-marker { display: none; }
  .nav-mobile > summary::marker { content: ""; }

  .nav-sheet {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    min-width: 11rem;
    padding: var(--space-2);
    display: grid;
    gap: 2px;
    z-index: 4;
  }
  .nav-sheet a {
    display: flex;
    align-items: center;
    min-height: var(--control-h);
    padding-inline: var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--ink);
    text-decoration: none;
  }
  .nav-sheet a:hover { background: var(--glass-tint-2); }

  @media (min-width: 900px) {
    .nav-main { display: flex; }
    .nav-mobile { display: none; }
  }

</style>
