// 39 Uchi — site chrome: top nav + footer (with the quiet san-kyū sign-off)
const NS = window.Ds39UchiDesignSystem_266f47;

function Logo({ height = 26 }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, color: "var(--text)" }}>
      <span style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 22, letterSpacing: "-0.04em" }}>39</span>
      <span style={{ width: 1, height: 20, background: "var(--border-strong)" }}></span>
      <span style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 16, letterSpacing: "0.14em" }}>UCHI</span>
    </div>
  );
}

function Nav({ onNav, route }) {
  const { Button } = NS;
  const vw = useViewport();
  const px = vw < 760 ? 20 : vw < 1024 ? 32 : 48;
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 20,
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: `${vw < 760 ? 16 : 20}px ${px}px`,
      background: "color-mix(in srgb, var(--bg) 82%, transparent)",
      backdropFilter: "blur(12px)",
      borderBottom: "1px solid var(--border)",
    }}>
      <div onClick={() => onNav("home")} style={{ cursor: "pointer" }}><Logo /></div>
      <nav style={{ display: "flex", alignItems: "center", gap: 36 }}>
        <Button variant="primary" size="sm" onClick={() => onNav("detail")}>Đặt phòng</Button>
      </nav>
    </header>
  );
}

function Footer() {
  const vw = useViewport();
  const px = vw < 760 ? 20 : vw < 1024 ? 32 : 48;
  return (
    <footer style={{ borderTop: "1px solid var(--border)", padding: `${vw < 760 ? 40 : 56}px ${px}px ${vw < 760 ? 32 : 40}px`, marginTop: 8 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap", gap: 32 }}>
        <div style={{ maxWidth: 320 }}>
          <Logo />
          <p style={{ fontFamily: "var(--font-text)", fontSize: 14, color: "var(--text-muted)", lineHeight: 1.6, marginTop: 16 }}>
            Trốn giữa phố.<br />A quiet hideaway. Downtown Đà Lạt.
          </p>
        </div>
      </div>
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 10,
        marginTop: vw < 760 ? 32 : 48, paddingTop: 20, borderTop: "1px solid var(--border)",
        fontFamily: "var(--font-text)", fontSize: 12.5, color: "var(--text-faint)",
      }}>
        <span>© 2026 39 Uchi · Đà Lạt</span>
        <span style={{ color: "var(--accent)", letterSpacing: "0.04em" }}>39 — san-kyū</span>
      </div>
    </footer>
  );
}


Object.assign(window, { Nav, Footer, Logo });