Nav Sticky

"use client";

import { useEffect, useRef, useState } from "react";

export interface NavStickyProps {
  /** Название бренда слева. */
  brand?: string;
  /** Пункты меню (формат «["Работы","Услуги"]»). */
  links?: string[];
  /** Подпись кнопки справа. */
  cta?: string;
  ctaHref?: string;
  /** Индекс активного пункта (формат «0»). */
  active?: number;
}

/**
 * Липкая шапка: подложка активного пункта переезжает между ссылками, а сама панель
 * «уплотняется», когда страница прокручена.
 *
 * Два решения, ради которых секцию стоит читать:
 *
 * 1. Факт прокрутки ловится не слушателем `scroll`, а невидимым маячком над шапкой и
 *    IntersectionObserver. Обработчик срабатывает ДВА раза за всю сессию — на пересечении
 *    порога, — вместо десятков вызовов в секунду.
 * 2. Подложка ездит трансформом, а её ширина берётся из `offsetWidth` активной кнопки
 *    ровно в момент смены, а не в каждом кадре.
 */
export function NavSticky({
  brand = "studio⁄",
  links = ["Работы", "Услуги", "Студия", "Контакты"],
  cta = "Обсудить",
  ctaHref = "#",
  active = 0,
}: NavStickyProps) {
  const [cur, setCur] = useState(active);
  const [stuck, setStuck] = useState(false);
  const listRef = useRef<HTMLDivElement>(null);
  const sentinel = useRef<HTMLDivElement>(null);

  // положение подложки: пересчитываем при смене пункта и при изменении размеров панели
  useEffect(() => {
    const list = listRef.current;
    if (!list) return;
    const place = () => {
      const btn = list.querySelectorAll<HTMLElement>("button")[cur];
      const pill = list.querySelector<HTMLElement>(".nvs-pill");
      if (!btn || !pill) return;
      pill.style.width = `${btn.offsetWidth}px`;
      pill.style.translate = `${btn.offsetLeft - list.clientLeft}px 0`;
    };
    place();
    const ro = new ResizeObserver(place);
    ro.observe(list);
    return () => ro.disconnect();
  }, [cur, links]);

  useEffect(() => {
    const el = sentinel.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => setStuck(!e!.isIntersecting), { threshold: 1 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return (
    <>
      <style>{`
        .nvs-sentinel { height: 1px; }
        .nvs { position: sticky; top: 0; z-index: 30; width: 100%;
          font-family: var(--ds-font, system-ui, sans-serif);
          transition: background var(--ds-base, 0.32s), border-color var(--ds-base, 0.32s); }
        .nvs[data-stuck="1"] {
          background: color-mix(in oklab, var(--ds-bg, oklch(0.14 0.02 275)) 78%, transparent);
          backdrop-filter: blur(14px);
          border-bottom: 1px solid var(--ds-border, oklch(0.3 0.02 275)); }
        .nvs-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-3, 12px) var(--ds-gutter, clamp(18px, 5vw, 54px)); }
        .nvs-brand { font-weight: 800; letter-spacing: var(--ds-tracking-display, -0.045em);
          font-size: var(--ds-text-md, 1.05rem); color: var(--ds-fg, oklch(0.95 0.01 265)); }

        .nvs-list { position: relative; display: flex; gap: var(--ds-1, 4px); padding: var(--ds-1, 4px);
          border-radius: var(--ds-radius-pill, 999px);
          border: 1px solid var(--ds-border, oklch(0.3 0.02 275));
          background: color-mix(in oklab, var(--ds-surface, oklch(0.18 0.02 275)) 70%, transparent); }
        @media (max-width: 720px) { .nvs-list { display: none; } }
        .nvs-list button { position: relative; border: 0; background: none; cursor: pointer;
          border-radius: var(--ds-radius-pill, 999px); padding: 7px 14px;
          font: 500 var(--ds-text-sm, 0.86rem) / 1 var(--ds-font, system-ui, sans-serif);
          color: var(--ds-muted, oklch(0.72 0.02 265));
          transition: color var(--ds-fast, 0.18s); }
        .nvs-list button[data-on="1"] { color: var(--ds-accent-fg, oklch(0.14 0.02 275)); }
        .nvs-pill { position: absolute; top: var(--ds-1, 4px); left: 0; height: calc(100% - 8px);
          border-radius: var(--ds-radius-pill, 999px);
          background: var(--ds-accent, oklch(0.72 0.16 300)); z-index: -1;
          transition: translate var(--ds-base, 0.32s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
                      width var(--ds-base, 0.32s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }

        .nvs-cta { border: 0; cursor: pointer; text-decoration: none; display: inline-block;
          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), transform var(--ds-fast, 0.18s); }
        .nvs-cta:hover { background: var(--ds-accent-hover, oklch(0.78 0.16 300)); transform: translateY(-1px); }
        .nvs-cta:focus-visible, .nvs-list button:focus-visible {
          outline: 2px solid var(--ds-accent-ring, oklch(0.72 0.16 300 / 0.35)); outline-offset: 3px; }
      `}</style>

      {/* маячок: пока он в кадре — страница не прокручена */}
      <div ref={sentinel} className="nvs-sentinel" aria-hidden />

      <nav className="nvs" data-stuck={stuck ? "1" : "0"} style={{ textAlign: "start" }}>
        <div className="nvs-in">
          <span className="nvs-brand">{brand}</span>

          <div className="nvs-list" ref={listRef}>
            <span className="nvs-pill" aria-hidden />
            {links.map((l, i) => (
              <button key={l} data-on={i === cur ? "1" : "0"} aria-current={i === cur} onClick={() => setCur(i)}>
                {l}
              </button>
            ))}
          </div>

          <a className="nvs-cta" href={ctaHref}>
            {cta}
          </a>
        </div>
      </nav>
    </>
  );
}