// ФриТаун — общий хук подписки на SiteData + хелпер рендера hero-заголовка.
// Подключается до app.jsx/sections.jsx/scroll-house.jsx, экспонирует две вещи
// в window: useSiteData() и renderHeroTitle(title).

/* global React */

// ---------- Хук: текущие данные сайта с автообновлением ----------
function useSiteData() {
  const [data, setData] = React.useState(() => window.SiteData.get());
  React.useEffect(() => {
    // SiteData.onChange возвращает функцию-отписку
    return window.SiteData.onChange(setData);
  }, []);
  return data;
}

// ---------- Рендер hero-заголовка ----------
// Формат строки: обычный текст с italic-куском, обёрнутым в /.../.
// Пример: "Строим дома и /делаем ремонт/ — фиксированная цена в смете."
//
// На выходе — массив React-узлов, совместимый с CSS-разметкой:
//   <span class="split-word">Слово</span>                  ← обычные слова
//   <span class="split-em-group">                          ← обёртка italic-группы
//     <span class="split-word"><em>делаем</em></span>      ← (под ней рисуется черта)
//     <span class="split-word"><em>ремонт</em></span>
//   </span>
//
// Черта рисуется псевдоэлементом .split-em-group::after — без этой обёртки её нет.
function renderHeroTitle(title) {
  const src = String(title == null ? "" : title);

  // Разбиваем по парам /.../ — на чётных индексах обычный текст, на нечётных italic.
  const parts = src.split(/\/([^/]+)\//);

  const BASE = 0.05; // задержка перед первым словом
  const STEP = 0.07; // шаг между словами
  let wordIdx = 0;

  const renderWord = (tok, key, italic) => {
    const delay = (BASE + wordIdx * STEP).toFixed(2) + "s";
    wordIdx += 1;
    return (
      <span
        className="split-word"
        style={{ animationDelay: delay }}
        key={key}
      >
        {italic ? <em>{tok}</em> : tok}
      </span>
    );
  };

  const out = [];

  parts.forEach((segment, segIdx) => {
    if (!segment) return;
    const isItalic = segIdx % 2 === 1;

    // Токенизируем по пробелам, сохраняя их (чтобы между словами оставался пробел).
    const tokens = segment.split(/(\s+)/).filter(Boolean);

    if (isItalic) {
      const inner = tokens.map((tok, ti) =>
        /^\s+$/.test(tok)
          ? " "
          : renderWord(tok, `i${segIdx}-${ti}`, true)
      );
      out.push(
        <span className="split-em-group" key={`g${segIdx}`}>
          {inner}
        </span>
      );
    } else {
      tokens.forEach((tok, ti) => {
        out.push(
          /^\s+$/.test(tok)
            ? " "
            : renderWord(tok, `p${segIdx}-${ti}`, false)
        );
      });
    }
  });

  return out;
}

// Экспонируем для остальных babel-скриптов (не модули — общаемся через window).
window.useSiteData = useSiteData;
window.renderHeroTitle = renderHeroTitle;