Nav Minimal

"use client";

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>{`
        .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; }
        }
      `}</style>

      <nav className="nvm" style={{ textAlign: "start" }}>
        <div className="nvm-in">
          <span className="nvm-brand">{brand}</span>

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

          <a className="nvm-cta" href={ctaHref}>
            {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>
    </>
  );
}