Nav Minimal

"use client";

const css = `.nvm { position: sticky; top: 0; z-index: 30; width: 100%;
  font-family: var(--ds-font, system-ui, sans-serif);
  background: color-mix(in oklab, var(--ds-bg, oklch(0.14 0.02 275)) 80%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ds-border, oklch(0.3 0.02 275)); }
.nvm-in { display: flex; align-items: center; justify-content: space-between;
  gap: var(--ds-4, 16px); max-width: var(--ds-container, 1120px); margin-inline: auto;
  padding: var(--ds-4, 16px) var(--ds-gutter, clamp(18px, 5vw, 54px)); }
.nvm-brand { font-weight: 700; letter-spacing: var(--ds-tracking-tight, -0.03em);
  font-size: var(--ds-text-md, 1.02rem); color: var(--ds-fg, oklch(0.95 0.01 265)); }

.nvm-links { display: flex; gap: var(--ds-5, 24px); align-items: center; }
@media (max-width: 760px) { .nvm-links { display: none; } }
.nvm-links a { position: relative; text-decoration: none;
  font-size: var(--ds-text-sm, 0.88rem); font-weight: 500;
  color: var(--ds-muted, oklch(0.72 0.02 265));
  transition: color var(--ds-fast, 0.18s); }
.nvm-links a:hover { color: var(--ds-fg, oklch(0.95 0.01 265)); }
/* подчёркивание растёт от левого края — одно свойство, ноль лишних элементов */
.nvm-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px;
  height: 1px; background: var(--ds-accent, oklch(0.72 0.16 300));
  scale: 0 1; transform-origin: 0 50%;
  transition: scale var(--ds-base, 0.32s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
.nvm-links a:hover::after { scale: 1 1; }

.nvm-cta { text-decoration: none; border-radius: var(--ds-radius-pill, 999px);
  padding: 9px 18px; font: 650 var(--ds-text-sm, 0.86rem) / 1 var(--ds-font, system-ui, sans-serif);
  color: var(--ds-accent-fg, oklch(0.14 0.02 275));
  background: var(--ds-accent, oklch(0.72 0.16 300));
  transition: background var(--ds-fast, 0.18s); }
.nvm-cta:hover { background: var(--ds-accent-hover, oklch(0.78 0.16 300)); }
@media (max-width: 760px) { .nvm-cta { display: none; } }

.nvm-burger { display: none; cursor: pointer; border: 1px solid var(--ds-border, oklch(0.3 0.02 275));
  background: transparent; color: var(--ds-fg, oklch(0.95 0.01 265));
  border-radius: var(--ds-radius-pill, 999px); padding: 8px 16px;
  font: 600 var(--ds-text-sm, 0.86rem) / 1 var(--ds-font, system-ui, sans-serif); }
@media (max-width: 760px) { .nvm-burger { display: block; } }
.nvm-burger:focus-visible, .nvm-links a:focus-visible, .nvm-cta:focus-visible {
  outline: 2px solid var(--ds-accent-ring, oklch(0.72 0.16 300 / 0.35)); outline-offset: 4px; }

/* ── оверлей: верхний слой, Esc и клик мимо — от платформы ─────────── */
.nvm-menu { inset: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  border: 0; padding: var(--ds-8, 80px) var(--ds-gutter, clamp(18px, 5vw, 54px));
  background: var(--ds-bg, oklch(0.14 0.02 275));
  color: var(--ds-fg, oklch(0.95 0.01 265));
  font-family: var(--ds-font, system-ui, sans-serif);
  opacity: 0; translate: 0 -12px;
  transition: opacity var(--ds-base, 0.34s), translate var(--ds-base, 0.34s)
      var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    overlay var(--ds-base, 0.34s) allow-discrete,
    display var(--ds-base, 0.34s) allow-discrete; }
.nvm-menu:popover-open { opacity: 1; translate: 0 0; }
/* стартовое состояние для появления: без него анимируется только закрытие */
@starting-style { .nvm-menu:popover-open { opacity: 0; translate: 0 -12px; } }
.nvm-menu::backdrop { background: oklch(0 0 0 / 0.4); }

.nvm-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-4, 16px); }
.nvm-menu a { text-decoration: none; color: var(--ds-fg, oklch(0.95 0.01 265));
  font-size: var(--ds-text-xl, 1.9rem); font-weight: 640;
  letter-spacing: var(--ds-tracking-tight, -0.03em);
  transition: color var(--ds-fast, 0.18s); }
.nvm-menu a:hover { color: var(--ds-accent, oklch(0.72 0.16 300)); }
.nvm-close { position: absolute; top: var(--ds-4, 16px); right: var(--ds-gutter, 24px);
  cursor: pointer; border: 1px solid var(--ds-border, oklch(0.3 0.02 275));
  background: transparent; color: var(--ds-fg, oklch(0.95 0.01 265));
  border-radius: var(--ds-radius-pill, 999px); padding: 8px 16px;
  font: 600 var(--ds-text-sm, 0.86rem) / 1 var(--ds-font, system-ui, sans-serif); }

@media (prefers-reduced-motion: reduce) {
  .nvm-links a::after, .nvm-menu, .nvm-cta { transition: none; }
}
`;
import { useId } from "react";

export interface NavMinimalProps {
  brand?: string;
  links?: string[];
  cta?: string;
  ctaHref?: string;
}

/**
 * Минималистичная шапка: на широком экране — ссылки в строку, на узком — кнопка,
 * раскрывающая меню на весь экран.
 *
 * Оверлей сделан на НАТИВНОМ popover, и это тот случай, когда платформа отдаёт даром
 * ровно то, ради чего обычно тянут библиотеку:
 *
 *   - меню уезжает в верхний слой и гарантированно оказывается поверх всего, без
 *     войны z-index'ов с липкими шапками и модалками;
 *   - закрытие по Esc и по клику мимо — уже встроено (light dismiss);
 *   - фокус уходит внутрь при открытии и возвращается на кнопку при закрытии;
 *   - связь кнопки и меню объявляется атрибутом `popovertarget`, без единой строчки JS.
 *
 * Анимация появления — `@starting-style` плюс `transition-behavior: allow-discrete`.
 * Без второго элемент, который переключает `display`, не анимируется вовсе: браузеру
 * нечего интерполировать между «нет в раскладке» и «есть». Это ровно та же грабля,
 * что и с `<details>` в аккордеоне, и решается она тем же семейством свойств.
 *
 * Где popover не поддержан, меню просто открывается без анимации — ветку писать не нужно.
 */
export function NavMinimal({
  brand = "meridian",
  links = ["Работы", "Услуги", "О студии", "Журнал", "Контакты"],
  cta = "Написать",
  ctaHref = "#",
}: NavMinimalProps) {
  const id = useId().replace(/:/g, "");
  const menuId = `nvm-${id}`;

  return (
    <>
      <style href="motiva-nav-minimal" precedence="medium">{css}</style>

      <nav className="nvm" style={{ textAlign: "start" }}>
        <div className="nvm-in">
          {/* data-slot: адрес слота для inline-правки в конструкторе (/build) */}
          {brand && <span className="nvm-brand" data-slot="brand">{brand}</span>}

          <div className="nvm-links">
            {links.map((l, i) => (
              <a key={l} href="#" data-slot="links" data-idx={i}>
                {l}
              </a>
            ))}
          </div>

          {cta && (
            <a className="nvm-cta" href={ctaHref} data-slot="cta">
              {cta}
            </a>
          )}

          {/* связь кнопки и меню — атрибутом, без обработчиков */}
          <button className="nvm-burger" popoverTarget={menuId}>
            Меню
          </button>
        </div>
      </nav>

      <div id={menuId} popover="auto" className="nvm-menu">
        <button className="nvm-close" popoverTarget={menuId} popoverTargetAction="hide">
          Закрыть
        </button>
        <ul>
          {links.map((l) => (
            <li key={l}>
              <a href="#">{l}</a>
            </li>
          ))}
          <li>
            <a href={ctaHref}>{cta} →</a>
          </li>
        </ul>
      </div>
    </>
  );
}