Квиз подбора кухни на заказ

<section class="vbkpk2">
  <div class="vbkpk2-wrap">
    <div class="vbkpk2-head">
      <h2 class="vbkpk2-h2">Четыре вопроса о будущей кухне</h2>
      <p class="vbkpk2-lead">Планировка, метраж, материал фасадов и бюджет. По ответам соберём конфигурацию с вилкой цены и сроком изготовления в цехе.</p>
    </div>

    <div class="vbkpk2-box">
      <div class="vbkpk2-bar"><i id="vbkpk2-fill"></i></div>
      <div class="vbkpk2-stage" id="vbkpk2-stage" aria-live="polite"></div>
      <div class="vbkpk2-foot">
        <button type="button" class="vbkpk2-back" id="vbkpk2-back" hidden>Вернуться к прошлому вопросу</button>
        <span class="vbkpk2-step" id="vbkpk2-step"></span>
      </div>
    </div>
  </div>
</section>

<style>
.vbkpk2, .vbkpk2 *, .vbkpk2 *::before, .vbkpk2 *::after { box-sizing: border-box; }
.vbkpk2 {
  --acc: #a8622a; --acc-dark: #874c1f; --ink: #291f16; --muted: #7a6959; --line: #e6d9c8; --soft: #f7f0e6; --card: #fff;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--card); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbkpk2-wrap { max-width: 900px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbkpk2-head { max-width: 40em; margin-bottom: clamp(20px, 2.6vw, 32px); }
.vbkpk2-h2 { font-family: var(--fh); font-size: clamp(25px, 3.2vw, 38px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.vbkpk2-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }

.vbkpk2-box { background: var(--soft); border: 1px solid var(--line); border-radius: 26px; padding: clamp(22px, 3vw, 40px); }
.vbkpk2-bar { height: 5px; border-radius: 5px; background: #e2d3bf; overflow: hidden; margin-bottom: 26px; }
.vbkpk2-bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--acc); transition: width .38s cubic-bezier(.22,1,.36,1); }

.vbkpk2-q { font-family: var(--fh); font-size: clamp(19px, 2.1vw, 25px); line-height: 1.28; font-weight: 700; margin: 0 0 6px; }
.vbkpk2-hint { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0 0 18px; }
.vbkpk2-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.vbkpk2-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 1.5px solid var(--line); margin: 0; padding: 15px 17px;
  -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer; border-radius: 15px;
  background: var(--card) !important; color: var(--ink) !important; transition: border-color .18s ease, transform .18s ease; }
.vbkpk2-opt:hover { border-color: var(--acc); transform: translateY(-2px); }
.vbkpk2-opt svg { flex: 0 0 52px; width: 52px; height: 38px; color: var(--acc); }
.vbkpk2-opt b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.vbkpk2-opt i { display: block; font-style: normal; font-size: 12.5px; line-height: 1.4; color: var(--muted); margin-top: 3px; }

.vbkpk2-foot { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.vbkpk2-back { border: 0; margin: 0; padding: 0; -webkit-appearance: none; appearance: none; background: none !important; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--muted) !important; text-decoration: underline; }
.vbkpk2-back:hover { color: var(--acc) !important; }
.vbkpk2-step { margin-left: auto; font-size: 13px; color: var(--muted); }

.vbkpk2-tag { display: inline-block; font-size: 12px; font-weight: 600; color: var(--acc); background: var(--card); border-radius: 999px; padding: 6px 14px; margin-bottom: 14px; }
.vbkpk2-rt { font-family: var(--fh); font-size: clamp(22px, 2.7vw, 31px); line-height: 1.15; font-weight: 700; margin: 0 0 10px; }
.vbkpk2-rx { font-size: 15.5px; line-height: 1.65; color: var(--muted); margin: 0 0 20px; max-width: 40em; }
.vbkpk2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.vbkpk2-grid div { background: var(--card); border-radius: 15px; padding: 16px 18px; }
.vbkpk2-grid b { display: block; font-family: var(--fh); font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.vbkpk2-grid span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.vbkpk2-fit { display: flex; gap: 10px; align-items: flex-start; background: var(--card); border-left: 3px solid var(--acc); border-radius: 0 12px 12px 0;
  padding: 14px 16px; font-size: 14px; line-height: 1.55; color: var(--muted); margin-bottom: 20px; }
.vbkpk2-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.vbkpk2-cta, .vbkpk2-cta:link, .vbkpk2-cta:visited, .vbkpk2-cta:active, .vbkpk2-cta:focus { display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 28px; border-radius: 13px; font-size: 16px; font-weight: 600;
  background: var(--acc); color: #fff !important; text-decoration: none !important; }
.vbkpk2-cta:hover { background: var(--acc-dark); color: #fff !important; }
.vbkpk2-again { min-height: 54px; padding: 0 24px; border: 1.5px solid var(--line); margin: 0; -webkit-appearance: none; appearance: none;
  font: inherit; font-size: 16px; cursor: pointer; border-radius: 13px; background: var(--card) !important; color: var(--ink) !important; }
.vbkpk2-again:hover { border-color: var(--acc); }

@media (max-width: 520px) { .vbkpk2-opts { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .vbkpk2 * { transition: none !important; animation: none !important; } .vbkpk2-opt:hover { transform: none; } }
</style>

<script>
(function () {
  /* ── СХЕМЫ ПЛАНИРОВОК ── */
  function plan(paths) {
    return '<svg viewBox="0 0 60 44" aria-hidden="true" focusable="false">' +
      '<rect x="2" y="2" width="56" height="40" rx="3" fill="none" stroke="currentColor" stroke-width="1.2" opacity=".3"/>' +
      paths + '<\/svg>';
  }
  var SVGS = {
    line: plan('<rect x="7" y="7" width="46" height="9" rx="2" fill="currentColor"/>'),
    corner: plan('<rect x="7" y="7" width="46" height="9" rx="2" fill="currentColor"/><rect x="7" y="7" width="9" height="30" rx="2" fill="currentColor"/>'),
    u: plan('<rect x="7" y="7" width="46" height="9" rx="2" fill="currentColor"/><rect x="7" y="7" width="9" height="30" rx="2" fill="currentColor"/><rect x="44" y="7" width="9" height="30" rx="2" fill="currentColor"/>'),
    island: plan('<rect x="7" y="7" width="46" height="9" rx="2" fill="currentColor"/><rect x="7" y="7" width="9" height="24" rx="2" fill="currentColor"/><rect x="24" y="27" width="27" height="10" rx="2" fill="currentColor"/>')
  };

  /* ── ШАГИ КВИЗА ── */
  var STEPS = [
    { q: 'Какая планировка подходит вашему помещению?', h: 'Смотрите на форму комнаты и на то, где стоят труба и вентиляционный короб.', key: 'layout', opts: [
      { b: 'Прямая', i: 'вдоль одной стены', svg: SVGS.line,   v: { name: 'Прямая кухня', base: 2.6, days: 0 } },
      { b: 'Угловая', i: 'буквой Г', svg: SVGS.corner,          v: { name: 'Угловая кухня', base: 3.4, days: 3 } },
      { b: 'П-образная', i: 'три стены заняты', svg: SVGS.u,    v: { name: 'П-образная кухня', base: 4.6, days: 5 } },
      { b: 'С островом', i: 'нужна отдельная тумба', svg: SVGS.island, v: { name: 'Кухня с островом', base: 5.2, days: 8 } }
    ]},
    { q: 'Сколько квадратных метров в помещении?', h: 'От площади зависит длина фронта и число шкафов под технику.', key: 'size', opts: [
      { b: 'До 8 м²', i: 'типовая квартира', v: { add: -0.5 } },
      { b: '8-12 м²', i: 'самый частый случай', v: { add: 0 } },
      { b: '12-18 м²', i: 'кухня-гостиная', v: { add: 0.8 } },
      { b: 'Больше 18 м²', i: 'дом или студия', v: { add: 1.6 } }
    ]},
    { q: 'Из чего делаем фасады?', h: 'Материал влияет на цену метра и на срок работы цеха сильнее остального.', key: 'mat', opts: [
      { b: 'Плита с кромкой', i: 'простая геометрия', v: { n: 'плита с кромкой 2 мм', m: 24000, days: 25 } },
      { b: 'Плёнка', i: 'фрезеровка и матовый тон', v: { n: 'плёнка на плите средней плотности', m: 32000, days: 30 } },
      { b: 'Эмаль', i: 'любой цвет по вееру', v: { n: 'эмаль своей покраски', m: 46000, days: 35 } },
      { b: 'Шпон дуба', i: 'видимая текстура дерева', v: { n: 'дубовый шпон с подбором рисунка', m: 58000, days: 42 } }
    ]},
    { q: 'На какую сумму рассчитываете?', h: 'Сравним с расчётом и подскажем, где вилка сходится.', key: 'budget', opts: [
      { b: 'До 150 000 ₽', i: 'базовый набор', v: { cap: 150000 } },
      { b: '150-300 000 ₽', i: 'средний бюджет', v: { cap: 300000 } },
      { b: '300-500 000 ₽', i: 'с хорошей фурнитурой', v: { cap: 500000 } },
      { b: 'Больше 500 000 ₽', i: 'без жёсткой рамки', v: { cap: 9000000 } }
    ]}
  ];

  var roots = document.querySelectorAll('.vbkpk2');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var idx = 0, picked = [];
    var stage = root.querySelector('#vbkpk2-stage');
    var fill = root.querySelector('#vbkpk2-fill');
    var back = root.querySelector('#vbkpk2-back');
    var step = root.querySelector('#vbkpk2-step');

    function money(n) { return String(Math.round(n / 1000) * 1000).replace(/\B(?=(\d{3})+(?!\d))/g, ' ') + ' ₽'; }

    function drawStep() {
      var s = STEPS[idx];
      fill.style.width = (idx / STEPS.length * 100) + '%';
      step.textContent = 'Шаг ' + (idx + 1) + ' из ' + STEPS.length;
      back.hidden = idx === 0;
      stage.innerHTML = '<h3 class="vbkpk2-q">' + s.q + '<\/h3><p class="vbkpk2-hint">' + s.h + '<\/p><div class="vbkpk2-opts">' +
        s.opts.map(function (o, j) {
          return '<button type="button" class="vbkpk2-opt" data-j="' + j + '">' + (o.svg || '') +
            '<span><b>' + o.b + '<\/b><i>' + o.i + '<\/i><\/span><\/button>';
        }).join('') + '<\/div>';
      var bs = stage.querySelectorAll('.vbkpk2-opt');
      for (var j = 0; j < bs.length; j++) bs[j].addEventListener('click', function () {
        picked[idx] = STEPS[idx].opts[+this.getAttribute('data-j')].v;
        idx++;
        if (idx < STEPS.length) drawStep(); else drawResult();
      });
    }

    function drawResult() {
      fill.style.width = '100%';
      step.textContent = 'Расчёт готов';
      back.hidden = false;
      var lay = picked[0], size = picked[1], mat = picked[2], bud = picked[3];
      var len = Math.max(1.8, lay.base + size.add);
      len = Math.round(len * 10) / 10;
      var mid = len * mat.m;
      var lo = mid * 0.92, hi = mid * 1.14;
      var d1 = mat.days + lay.days, d2 = d1 + 7;
      var fit = hi <= bud.cap
        ? 'Расчёт укладывается в названную сумму с запасом на фурнитуру и мойку.'
        : (lo <= bud.cap
          ? 'Нижняя граница расчёта попадает в вашу сумму. Верхняя выходит за неё из-за техники и высоких верхних шкафов.'
          : 'Расчёт выше названной суммы. Снизить её помогают фасады попроще, открытые полки вместо верхнего ряда и укороченный фронт.');

      stage.innerHTML = '<div class="vbkpk2-res"><span class="vbkpk2-tag">Подходящая конфигурация<\/span>' +
        '<h3 class="vbkpk2-rt">' + lay.name + ' на ' + String(len).replace('.', ',') + ' погонных метра<\/h3>' +
        '<p class="vbkpk2-rx">Фасады: ' + mat.n + '. Корпус из плиты 16 мм с кромкой по всем срезам, столешница толщиной 38 мм, петли и направляющие с доводчиками. Точную длину зафиксирует замерщик, после этого смета уходит в договор.<\/p>' +
        '<div class="vbkpk2-grid">' +
          '<div><b>' + money(lo) + ' - ' + money(hi) + '<\/b><span>вилка цены за комплект<\/span><\/div>' +
          '<div><b>' + money(mat.m) + '<\/b><span>за погонный метр<\/span><\/div>' +
          '<div><b>' + d1 + '-' + d2 + ' дней<\/b><span>изготовление в цехе<\/span><\/div>' +
        '<\/div>' +
        '<p class="vbkpk2-fit">' + fit + '<\/p>' +
        '<div class="vbkpk2-acts"><a class="vbkpk2-cta" href="#zamer">Записаться на замер<\/a>' +
        '<button type="button" class="vbkpk2-again">Пройти заново<\/button><\/div><\/div>';

      var again = stage.querySelector('.vbkpk2-again');
      if (again) again.addEventListener('click', function () { idx = 0; picked = []; drawStep(); });
    }

    back.addEventListener('click', function () {
      if (idx > 0) idx--;
      drawStep();
    });

    drawStep();
  }
})();
</script>

Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно.