Квиз «Что заказать сегодня» для доставки

<section class="vbkcz">
  <div class="vbkcz-wrap">
    <div class="vbkcz-box">
      <h2 class="vbkcz-h2">Не знаете, что заказать?</h2>
      <p class="vbkcz-lead">Четыре вопроса — и мы назовём конкретное блюдо, а не «японскую кухню».</p>
      <div class="vbkcz-stage" id="vbkcz-stage" aria-live="polite"></div>
      <div class="vbkcz-dots" id="vbkcz-dots" aria-hidden="true"></div>
    </div>
  </div>
</section>

<style>
.vbkcz, .vbkcz *, .vbkcz *::before, .vbkcz *::after { box-sizing: border-box; }
.vbkcz {
  --acc: #8a5a2b; --acc-dark: #6f4720; --ink: #24201b; --muted: #6d645a; --line: #e5ddd1; --soft: #faf6ef;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--soft); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbkcz-wrap { max-width: 860px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbkcz-box { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: clamp(26px, 3.4vw, 48px); text-align: center; }
.vbkcz-h2 { font-family: var(--fh); font-size: clamp(25px, 3.2vw, 38px); line-height: 1.1; font-weight: 700; letter-spacing: -.025em; margin: 0 0 10px; }
.vbkcz-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 auto 28px; max-width: 32em; }

.vbkcz-q { font-family: var(--fh); font-size: clamp(19px, 2.1vw, 25px); line-height: 1.28; font-weight: 600; margin: 0 0 20px; }
.vbkcz-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.vbkcz-opt { border: 1.5px solid var(--line); margin: 0; -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer;
  background: #fff !important; color: var(--ink) !important; border-radius: 999px; padding: 15px 18px; font-size: 15.5px; transition: .18s ease; }
.vbkcz-opt:hover { border-color: var(--acc); background: var(--soft) !important; }

.vbkcz-dots { display: flex; justify-content: center; gap: 6px; margin-top: 26px; }
.vbkcz-dots i { width: 26px; height: 3px; border-radius: 3px; background: var(--line); transition: background .25s ease; }
.vbkcz-dots i.is-on { background: var(--acc); }

.vbkcz-res__img { display: block; width: min(240px, 70%); margin: 0 auto 18px; }
.vbkcz-res__tag { display: inline-block; font-size: 12px; font-weight: 600; color: var(--acc); background: var(--soft); border-radius: 999px; padding: 6px 14px; margin-bottom: 12px; }
.vbkcz-res__ttl { font-family: var(--fh); font-size: clamp(23px, 2.8vw, 32px); line-height: 1.15; font-weight: 700; margin: 0 0 10px; }
.vbkcz-res__txt { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 auto 18px; max-width: 34em; }
.vbkcz-res__price { font-family: var(--fh); font-size: 24px; font-weight: 700; margin-bottom: 20px; }
.vbkcz-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vbkcz-cta, .vbkcz-cta:link, .vbkcz-cta:visited, .vbkcz-cta:active, .vbkcz-cta:focus { display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 30px; border-radius: 999px; font-size: 16px; font-weight: 600;
  background: var(--acc); color: #fff !important; text-decoration: none !important; }
.vbkcz-cta:hover { background: var(--acc-dark); color: #fff !important; }
.vbkcz-again { min-height: 54px; padding: 0 26px; border: 1.5px solid var(--line); margin: 0; -webkit-appearance: none; appearance: none;
  font: inherit; font-size: 16px; cursor: pointer; border-radius: 999px; background: #fff !important; color: var(--ink) !important; }
.vbkcz-again:hover { border-color: var(--acc); }

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

<script>
(function () {
  /* ── ВОПРОСЫ: tags — что добавляют к подбору ── */
  var QUESTIONS = [
    { q: 'Какое настроение?', opts: [
      { t: 'Хочется уюта', tags: ['warm', 'comfort'] },
      { t: 'Что-то бодрое', tags: ['spicy', 'fresh'] },
      { t: 'Полегче', tags: ['light', 'fresh'] },
      { t: 'Праздник', tags: ['rich', 'share'] }
    ]},
    { q: 'Насколько голодны?', opts: [
      { t: 'Умираю', tags: ['rich', 'big'] },
      { t: 'Нормально', tags: ['comfort'] },
      { t: 'Слегка', tags: ['light'] }
    ]},
    { q: 'С кем едите?', opts: [
      { t: 'Один', tags: ['solo'] },
      { t: 'Вдвоём', tags: ['comfort'] },
      { t: 'Компанией', tags: ['share', 'big'] }
    ]},
    { q: 'Есть ограничения?', opts: [
      { t: 'Без мяса', tags: ['veg'] },
      { t: 'Не острое', tags: ['mild'] },
      { t: 'Ем всё', tags: ['any'] }
    ]}
  ];

  /* ── БЛЮДА ── */
  var DISHES = [
    { name: 'Том-ям с креветками', price: 690, tags: ['spicy', 'warm', 'solo', 'fresh'],
      txt: 'Кисло-острый бульон на кокосовом молоке, четыре королевские креветки, грибы и лемонграсс. Разгоняет сразу.', href: '#zakaz', c: '#efdcd0' },
    { name: 'Паста карбонара', price: 620, tags: ['comfort', 'warm', 'mild', 'solo'],
      txt: 'Классика без сливок: желток, пекорино, гуанчале. То, что нужно, когда день не задался.', href: '#zakaz', c: '#f2e8d6' },
    { name: 'Бургер с говядиной 200 г', price: 740, tags: ['rich', 'big', 'comfort', 'mild'],
      txt: 'Котлета из рубленой лопатки, чеддер, соус на копчёной паприке. Картофель уже в комплекте.', href: '#zakaz', c: '#eddccb' },
    { name: 'Салат с киноа и авокадо', price: 540, tags: ['light', 'fresh', 'veg', 'solo'],
      txt: 'Киноа, авокадо, черри, шпинат и кунжутная заправка. Наедаешься, но не тяжелеешь.', href: '#zakaz', c: '#e2ebda' },
    { name: 'Сет роллов на компанию', price: 3290, tags: ['share', 'big', 'rich', 'any'],
      txt: 'Сорок восемь кусочков, шесть видов. Хватает на четверых, остаётся только на утро.', href: '#zakaz', c: '#e6e4d6' },
    { name: 'Овощное рагу с нутом', price: 490, tags: ['veg', 'warm', 'light', 'mild'],
      txt: 'Томлёные овощи, нут, копчёная паприка и хлеб на закваске. Полностью растительное.', href: '#zakaz', c: '#e5e9d5' },
    { name: 'Стейк рибай с картофелем', price: 2190, tags: ['rich', 'big', 'share', 'any'],
      txt: 'Мраморная говядина сухого вызревания, прожарка на выбор, печёный картофель и соус.', href: '#zakaz', c: '#ead9d0' },
    { name: 'Куриный суп с домашней лапшой', price: 420, tags: ['warm', 'comfort', 'light', 'mild'],
      txt: 'Прозрачный бульон, лапша ручной раскатки, зелень. То самое, что варила бабушка.', href: '#zakaz', c: '#f1e7d3' }
  ];

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var idx = 0, tags = [];
    var stage = root.querySelector('#vbkcz-stage'), dots = root.querySelector('#vbkcz-dots');
    for (var d = 0; d < QUESTIONS.length; d++) dots.appendChild(document.createElement('i'));

    function bowl(c) {
      return '<svg class="vbkcz-res__img" viewBox="0 0 240 160" role="img" aria-label="Изображение блюда" focusable="false">' +
        '<ellipse cx="120" cy="132" rx="76" ry="10" fill="#00000010"/>' +
        '<path d="M42 66h156c0 38-32 62-78 62S42 104 42 66z" fill="' + c + '"/>' +
        '<ellipse cx="120" cy="66" rx="78" ry="18" fill="#fff" opacity=".55"/>' +
        '<ellipse cx="120" cy="66" rx="62" ry="13" fill="' + c + '"/>' +
        '<path d="M96 40c0-8 8-10 8-18M120 36c0-8 8-10 8-18M144 40c0-8 8-10 8-18" fill="none" stroke="#c9b79c" stroke-width="3" stroke-linecap="round"/><\/svg>';
    }

    function marks() {
      dots.querySelectorAll('i').forEach(function (el, i) { el.classList.toggle('is-on', i < idx || idx >= QUESTIONS.length); });
    }

    function drawStep() {
      var s = QUESTIONS[idx];
      marks();
      stage.innerHTML = '<h3 class="vbkcz-q">' + s.q + '<\/h3><div class="vbkcz-opts">' +
        s.opts.map(function (o, i) { return '<button type="button" class="vbkcz-opt" data-i="' + i + '">' + o.t + '<\/button>'; }).join('') +
        '<\/div>';
      stage.querySelectorAll('.vbkcz-opt').forEach(function (b) {
        b.addEventListener('click', function () {
          tags = tags.concat(s.opts[+b.dataset.i].tags);
          idx++;
          if (idx < QUESTIONS.length) drawStep(); else drawResult();
        });
      });
    }

    function drawResult() {
      marks();
      /* считаем совпадения тегов; при равенстве выбираем случайное из лидеров */
      var scored = DISHES.map(function (d) {
        var n = d.tags.filter(function (t) { return tags.indexOf(t) !== -1; }).length;
        return { d: d, n: n };
      });
      var max = Math.max.apply(null, scored.map(function (x) { return x.n; }));
      var top = scored.filter(function (x) { return x.n === max; });
      var pick = top[Math.floor(Math.random() * top.length)].d;

      stage.innerHTML = bowl(pick.c) +
        '<span class="vbkcz-res__tag">Вам подойдёт<\/span>' +
        '<h3 class="vbkcz-res__ttl">' + pick.name + '<\/h3>' +
        '<p class="vbkcz-res__txt">' + pick.txt + '<\/p>' +
        '<p class="vbkcz-res__price">' + String(pick.price).replace(/\B(?=(\d{3})+(?!\d))/g, ' ') + ' ₽<\/p>' +
        '<div class="vbkcz-acts"><a class="vbkcz-cta" href="' + pick.href + '">Заказать<\/a>' +
        '<button type="button" class="vbkcz-again">Ещё раз<\/button><\/div>';
      var again = stage.querySelector('.vbkcz-again');
      if (again) again.addEventListener('click', function () { idx = 0; tags = []; drawStep(); });
    }

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

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