<script>
document.addEventListener("DOMContentLoaded", function () {
  // Массив объектов, связывающий input и блок текста, который нужно менять
  const pairs = [
    { input: '[name="time"]',  text: ".text1" },
    { input: '[name="time_2"]', text: ".text2" }
  ];

  // Функция для выбора правильного окончания слова "год" на русском
  function getYearWord(num) {
    num = Math.abs(num) % 100; // Берём последние две цифры числа, учитываем отрицательные значения
    const last = num % 10;      // Берём последнюю цифру
    if (num >= 11 && num <= 14) return "лет"; // Исключения 11–14
    if (last === 1) return "год";             // 1 год
    if (last >= 2 && last <= 4) return "года";// 2,3,4 года
    return "лет";                             // Все остальные случаи
  }

  // Функция для привязки динамического текста к input
  function bindDynamicText(inputSelector, textSelector) {
    const input = document.querySelector(inputSelector); // Находим input по селектору
    const block = document.querySelector(textSelector);  // Находим блок текста
    if (!input || !block) return; // Если не найден input или блок — ничего не делаем

    const defaultText = block.textContent; // Сохраняем исходный текст блока

    // Обработчик события input — срабатывает при каждом изменении значения
    input.addEventListener("input", () => {
      const v = input.value.trim(); // Убираем лишние пробелы
      // Если поле не пустое — показываем "Через X год/года/лет", иначе возвращаем исходный текст
      block.textContent = v ? `Через ${v} ${getYearWord(v)}` : defaultText;
    });
  }

  // Применяем функцию к каждой паре input + блок текста
  pairs.forEach(p => bindDynamicText(p.input, p.text));
});
</script>

<style>
/* Стили для блоков текста */
.text1, .text2 {
  font-family: 'Exo 2', sans-serif; /* Шрифт Exo 2 */
  font-size: 24px;                  /* Размер текста */
  line-height: 1.4;                 /* Межстрочный интервал */
}
</style>