Story Sticky

"use client";

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

export interface StoryChapter {
  title: string;
  text: string;
  /** Кадр, который показывается на этой главе. */
  image: string;
}

export interface StoryStickyProps {
  eyebrow?: string;
  chapters?: StoryChapter[];
  /**
   * Сокет фона: любой эффект с `mount.role: "background"`, например `<AuroraField />`.
   * Занят — секция снимает собственную заливку, чтобы не спорить за слой.
   */
  background?: ReactNode;
  /** Какой текст читается поверх фона; приходит из `mount.tone` подставленной записи. */
  tone?: "dark" | "light";
  /** Плотность скрима между фоном и текстом (формат «0.5»); 0 — выключить. */
  scrim?: number;
}

const CHAPTERS: StoryChapter[] = [
  {
    title: "Корпус из одного куска",
    text: "Фрезеруется из цельной заготовки, поэтому в нём нет ни одного стыка, который мог бы скрипнуть через год.",
    image: "https://motiva.pages.dev/img/1082-1200x1200.jpg",
  },
  {
    title: "Экран, который видно на солнце",
    text: "Пиковая яркость 1600 нит и матовое покрытие: цвета не выцветают, а отражения не мешают читать.",
    image: "https://motiva.pages.dev/img/1069-1200x1200.jpg",
  },
  {
    title: "Шесть часов без розетки",
    text: "Новая архитектура питания расходует вдвое меньше на тех же задачах. Зарядка за двадцать минут — на половину дня.",
    image: "https://motiva.pages.dev/img/1050-1200x1200.jpg",
  },
];

/**
 * Скроллителлинг: кадр остаётся на месте, текст рядом идёт главами, кадр меняется под
 * активную главу. Приём с витрин Apple — и он держится на двух вещах.
 *
 * ПЕРВОЕ: закрепление — это `position: sticky`, а не пин скроллтриггером. Липкий элемент
 * ведёт сам браузер на этапе композиции; библиотечный пин пересчитывает позицию в каждом
 * кадре и на слабых машинах отстаёт от пальца.
 *
 * ВТОРОЕ: активную главу определяет IntersectionObserver с «щелью» посреди экрана —
 * `rootMargin: -45% сверху и снизу` схлопывает область наблюдения в тонкую полосу по центру.
 * Глава становится активной ровно когда пересекает эту полосу. Обработчика `scroll` нет:
 * браузер сам сообщает о пересечении, и это стоит ноль в кадре.
 *
 * Кадры лежат стопкой и переключаются прозрачностью — композитор, ни одной перерисовки.
 * Все картинки в разметке сразу, поэтому переключение мгновенное и без подгрузки.
 */
export function StorySticky({
  eyebrow = "как это сделано", chapters = CHAPTERS,
  background,
  tone,
  scrim = 0.5,
}: StoryStickyProps) {
  const [active, setActive] = useState(0);
  const root = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = root.current;
    if (!el) return;
    const steps = Array.from(el.querySelectorAll<HTMLElement>("[data-step]"));
    if (!steps.length) return;

    const io = new IntersectionObserver(
      (entries) => {
        for (const e of entries) {
          if (!e.isIntersecting) continue;
          const i = Number((e.target as HTMLElement).dataset.step);
          if (!Number.isNaN(i)) setActive(i);
        }
      },
      // полоса посреди экрана: глава активна, пока пересекает центр
      { rootMargin: "-45% 0px -45% 0px", threshold: 0 },
    );
    steps.forEach((s) => io.observe(s));
    return () => io.disconnect();
  }, [chapters]);

  return (
    <section
      className="stk"
      data-slot-bg={background ? "" : undefined}
      data-tone={tone} ref={root} style={{ textAlign: "start", ["--stk-scrim" as string]: scrim }}
    >
      <style>{`
        .stk { width: 100%; padding-block: var(--ds-section-y, var(--ds-8, 80px));
          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); }
        .stk-in { max-width: var(--ds-container, 1120px); margin-inline: auto;
          padding-inline: var(--ds-gutter, clamp(18px, 5vw, 54px)); }
        .stk-eyebrow { margin: 0 0 var(--ds-6, 36px);
          font-family: var(--ds-font-mono, ui-monospace, monospace);
          font-size: var(--ds-text-xs, 0.75rem); letter-spacing: 0.16em; text-transform: uppercase;
          color: var(--ds-accent, oklch(0.72 0.16 300)); }

        .stk-cols { display: grid; gap: var(--ds-7, 54px); align-items: start;
          grid-template-columns: 1fr 1fr; }
        @media (max-width: 820px) { .stk-cols { grid-template-columns: 1fr; } }

        /* закрепление ведёт браузер, а не скрипт */
        .stk-media { position: sticky; top: 12vh; aspect-ratio: 1; border-radius: var(--ds-radius-lg, 20px);
          overflow: hidden; background: var(--ds-surface, oklch(0.18 0.02 275));
          box-shadow: var(--ds-shadow-lg, 0 26px 60px oklch(0 0 0 / 0.55)); }
        @media (max-width: 820px) { .stk-media { top: 8vh; aspect-ratio: 16 / 10; } }
        /* кадры стопкой: переключение прозрачностью, а не подменой src */
        .stk-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
          opacity: 0; scale: 1.04;
          transition: opacity var(--ds-slow, 0.65s), scale var(--ds-slow, 0.9s)
            var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
        .stk-media img[data-on="1"] { opacity: 1; scale: 1; }

        .stk-steps { display: grid; }
        .stk-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center;
          padding-block: var(--ds-6, 36px); }
        @media (max-width: 820px) { .stk-step { min-height: auto; } }
        .stk-num { font-family: var(--ds-font-mono, ui-monospace, monospace);
          font-size: var(--ds-text-xs, 0.72rem); letter-spacing: 0.12em;
          color: var(--ds-accent, oklch(0.72 0.16 300)); }
        .stk-t { margin: var(--ds-3, 12px) 0 0; font-size: var(--ds-text-xl, 2rem); font-weight: 640;
          line-height: 1.12; letter-spacing: var(--ds-tracking-tight, -0.03em);
          opacity: 0.4; transition: opacity var(--ds-base, 0.4s); }
        .stk-x { margin: var(--ds-4, 16px) 0 0; max-width: 44ch;
          font-size: var(--ds-text-md, 1rem); line-height: var(--ds-leading-body, 1.55);
          color: var(--ds-muted, oklch(0.72 0.02 265));
          opacity: 0.35; transition: opacity var(--ds-base, 0.4s); }
        /* неактивные главы притушены — глаз сам находит текущую */
        .stk-step[data-on="1"] .stk-t, .stk-step[data-on="1"] .stk-x { opacity: 1; }

        @media (prefers-reduced-motion: reduce) {
          .stk-media img, .stk-t, .stk-x { transition: none; }
          .stk-t, .stk-x { opacity: 1; }
        }
      
        /* СОКЕТ ФОНА. Слой лежит на z-index -1 внутри своего stacking context: он рисуется
           поверх заливки секции, но под всем содержимым — поэтому контенту не нужно ни
           position, ни z-index, и вёрстка секции не меняется вовсе.
           Тон переопределяет ТОКЕНЫ, а не перечисляет классы: все дети и так читают
           --ds-fg/--ds-muted, значит пара фон+текст чинится в одном месте.
           Скрим обязателен: у живого фона яркость гуляет по кадру, и цвет текста, читаемый
           и на провале, и на вспышке, подобрать нельзя — контраст надо создавать. */
        .stk { position: relative; isolation: isolate; }
        .stk-bg { position: absolute; inset: 0; z-index: -1; }
        .stk[data-slot-bg] { background: transparent; }
        .stk-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
        .stk[data-tone="dark"] { --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); }
        .stk[data-tone="dark"] .stk-bg::after {
          background: oklch(0.09 0.02 265 / calc(var(--stk-scrim, 0.5) * 0.9)); }
        .stk[data-tone="light"] { --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); }
        .stk[data-tone="light"] .stk-bg::after {
          background: oklch(0.99 0 0 / calc(var(--stk-scrim, 0.5) * 0.9)); }
      `}</style>

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

      <div className="stk-in">
        {eyebrow && <p className="stk-eyebrow">{eyebrow}</p>}

        <div className="stk-cols">
          <div className="stk-media">
            {chapters.map((c, i) => (
              <img key={c.image} src={c.image} alt={c.title} data-on={i === active ? "1" : "0"} />
            ))}
          </div>

          <div className="stk-steps">
            {chapters.map((c, i) => (
              <div key={c.title} className="stk-step" data-step={i} data-on={i === active ? "1" : "0"}>
                <span className="stk-num">
                  {String(i + 1).padStart(2, "0")} / {String(chapters.length).padStart(2, "0")}
                </span>
                <h3 className="stk-t">{c.title}</h3>
                <p className="stk-x">{c.text}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}