Footer Reveal

const css = `/* СЕКЦИЯ-ОКНО: сама секция — рамка с клипом, внутренний слой доезжает по
   entry-диапазону из translateY(-100%) в 0. Математика иллюзии точная:
   позиция слоя в кадре = (верх секции) − H·(1−p), а верх секции за время
   entry проходит ровно H вверх — слой стоит НЕПОДВИЖНО относительно окна,
   как будто подвал всегда лежал под страницей. Ни fixed, ни JS. */
.ftv { position: relative; isolation: isolate; width: 100%;
  height: min(560px, 92svh);
  overflow: clip; }

.ftv-in { position: relative; height: 100%;
  display: flex; flex-direction: column;
  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); }

/* база вне @supports: слой на месте — без поддержки таймлайнов, под reduce
   и data-shot это обычный подвал */
@supports (animation-timeline: view()) {
  @media not (prefers-reduced-motion: reduce) {
    .ftv-in {
      animation: ftv-slide linear both;
      animation-timeline: view();
      animation-range: entry;
    }
    @keyframes ftv-slide {
      from { transform: translateY(-100%); }
    }
  }
}
html[data-shot] .ftv-in { animation: none; }

/* тень «страница лежит НАД подвалом» — на самой секции, а не на ездящем слое:
   верх секции и есть движущийся шов, тень обязана оставаться на нём всё
   открытие (на слое она уезжала вместе с ним, и в светлой теме два одинаковых
   фона сливались в один без шва) */
.ftv::after { content: ""; position: absolute; inset: 0 0 auto; height: 42px;
  z-index: 2; pointer-events: none;
  background: linear-gradient(oklch(0.05 0.02 265 / 0.35), transparent); }

.ftv-body { flex: 1; display: flex; flex-direction: column; width: 100%;
  max-width: var(--ds-container, 1120px); margin-inline: auto;
  padding: clamp(28px, 5vh, 56px) var(--ds-gutter, clamp(18px, 5vw, 54px)) 0; }

.ftv-cols { display: grid; gap: var(--ds-5, 24px);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ftv-tag { margin: 0; max-width: 30ch;
  font-size: var(--ds-text-sm, 0.92rem); line-height: var(--ds-leading-body, 1.55);
  color: var(--ds-muted, oklch(0.72 0.02 265)); }
.ftv-col h3 { margin: 0 0 var(--ds-3, 12px);
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-text-xs, 0.72rem); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ds-muted, oklch(0.72 0.02 265)); }
.ftv-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ftv-col a { text-decoration: none; color: var(--ds-fg, oklch(0.95 0.01 265));
  font-size: var(--ds-text-sm, 0.9rem); opacity: 0.82; transition: opacity 0.2s ease; }
.ftv-col a:hover { opacity: 1; color: var(--ds-accent, oklch(0.72 0.16 300)); }

/* ГИГАНТСКАЯ подпись у нижней кромки — фирменный жест приёма: бренд размером
   с секцию, срезанный краем окна. line-height меньше единицы и отрицательный
   нижний отступ прижимают глифы к самому краю */
.ftv-brand { margin: auto 0 0; overflow: hidden; }
.ftv-brand b { display: block; margin-bottom: -0.16em;
  font-size: clamp(4rem, 16.5vw, 12rem); font-weight: 800; line-height: 0.94;
  letter-spacing: var(--ds-tracking-tight, -0.04em); white-space: nowrap;
  background: linear-gradient(180deg,
    var(--ds-fg, oklch(0.95 0.01 265)),
    oklch(from var(--ds-fg, oklch(0.95 0.01 265)) l c h / 0.25));
  -webkit-background-clip: text; background-clip: text; color: transparent; }

.ftv-bottom { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  width: 100%; max-width: var(--ds-container, 1120px); margin-inline: auto;
  padding: var(--ds-3, 12px) var(--ds-gutter, clamp(18px, 5vw, 54px));
  border-top: 1px solid var(--ds-border, oklch(0.3 0.02 275));
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-text-xs, 0.72rem);
  color: var(--ds-muted, oklch(0.72 0.02 265)); }

/* СОКЕТ ФОНА — контракт как у остальных секций; фон живёт во внутреннем слое */
.ftv-bg { position: absolute; inset: 0; z-index: -1; }
.ftv[data-slot-bg] .ftv-in { background: transparent; }
.ftv-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.ftv[data-tone="dark"] .ftv-in { --ds-fg: oklch(0.96 0.01 265); --ds-muted: oklch(0.84 0.02 265);
  --ds-border: oklch(0.98 0.01 265 / 0.16); color: var(--ds-fg); }
.ftv[data-tone="dark"] .ftv-bg::after {
  background: oklch(0.09 0.02 265 / calc(var(--ftv-scrim, 0.5) * 0.9)); }
.ftv[data-tone="light"] .ftv-in { --ds-fg: oklch(0.2 0.02 265); --ds-muted: oklch(0.42 0.02 265);
  --ds-border: oklch(0.2 0.02 265 / 0.14); color: var(--ds-fg); }
.ftv[data-tone="light"] .ftv-bg::after {
  background: oklch(0.99 0 0 / calc(var(--ftv-scrim, 0.5) * 0.9)); }
`;
import type { ReactNode } from "react";

export interface FooterRevealColumn {
  title: string;
  links: string[];
}

export interface FooterRevealProps {
  /** Гигантская подпись у нижней кромки. */
  brand?: string;
  /** Строка о деле — над колонками. */
  tagline?: string;
  columns?: FooterRevealColumn[];
  /** Нижняя строка: копирайт и прочее. */
  note?: string;
  /**
   * Сокет фона: любой эффект с `mount.role: "background"`, например `<AuroraField />`.
   * Занят — секция снимает собственную заливку, чтобы не спорить за слой.
   */
  background?: ReactNode;
  /** Какой текст читается поверх фона; приходит из `mount.tone` подставленной записи. */
  tone?: "dark" | "light";
  /** Плотность скрима между фоном и текстом; 0 — выключить. */
  scrim?: number;
}

const COLUMNS: FooterRevealColumn[] = [
  { title: "Студия", links: ["О нас", "Команда", "Вакансии"] },
  { title: "Работы", links: ["Продукты", "Брендинг", "Моушен"] },
  { title: "Связь", links: ["Telegram", "Behance", "hello@studio.dev"] },
];

/**
 * Подвал ИЗ-ПОД СТРАНИЦЫ — третий вариант вида footer: контент уезжает вверх
 * и открывает подвал, который будто всегда лежал под ним. Секция — окно
 * с клипом, внутренний слой доезжает по entry-диапазону view()-таймлайна
 * из `translateY(-100%)` в 0; математика точная — слой неподвижен
 * ОТНОСИТЕЛЬНО ОКНА (см. комментарий в CSS). Ни position: fixed, ни JS:
 * fixed в сокетной секции ломался бы о transform-предков, а тут нечему ломаться.
 *
 * Фирменный жест приёма — гигантская подпись, срезанная нижней кромкой.
 * ВАЖНО потребителю: секции выше должны иметь непрозрачный фон (у секций
 * каталога он есть по контракту), иначе подвал просвечивает раньше времени.
 */
export function FooterReveal({
  brand = "studio⁄",
  tagline = "Делаем бренды, которые движутся. С 2019 года — без шаблонов.",
  columns = COLUMNS,
  note = "Все права защищены",
  background,
  tone,
  scrim = 0.5,
}: FooterRevealProps) {
  return (
    <footer
      className="ftv"
      data-slot-bg={background ? "" : undefined}
      data-tone={tone}
      style={{ textAlign: "start", ["--ftv-scrim" as string]: scrim }}
    >
      <style href="motiva-footer-reveal" precedence="medium">{css}</style>

      <div className="ftv-in">
        {background && <div className="ftv-bg">{background}</div>}

        <div className="ftv-body">
          <div className="ftv-cols">
            {/* data-slot: адрес слота для inline-правки в конструкторе (/build) */}
            {tagline && <p className="ftv-tag" data-slot="tagline">{tagline}</p>}
            {columns.map((c, i) => (
              <div key={c.title} className="ftv-col">
                <h3 data-slot="columns" data-idx={i} data-field="title">{c.title}</h3>
                <ul>
                  {c.links.map((l) => (
                    <li key={l}>
                      <a href="#">{l}</a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          {brand && (
            <div className="ftv-brand" aria-hidden="true">
              <b data-slot="brand">{brand}</b>
            </div>
          )}
        </div>

        <div className="ftv-bottom">
          {/* год отличается между рендером на сервере и в браузере раз в году — осознанно */}
          <span suppressHydrationWarning>
            © {new Date().getFullYear()} {brand}{note ? <> — <span data-slot="note">{note}</span></> : null}
          </span>
          <span>сделано в Motiva</span>
        </div>
      </div>
    </footer>
  );
}