/* global React, Reveal, Eyebrow, Spark, Ethno, openLead */
const { useState: useStateQ } = React;

// compact line-icon factory
function qIcon(paths) {
  return ({ style = {} }) => React.createElement("svg",
    { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round", style, "aria-hidden": "true" },
    paths.map((d, i) => React.createElement("path", { key: i, d })));
}
const IcTeam = qIcon(["M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2", "M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8", "M23 21v-2a4 4 0 0 0-3-3.87", "M16 3.13a4 4 0 0 1 0 7.75"]);
const IcGift = qIcon(["M4 12v9h16v-9", "M2 7h20v5H2z", "M12 7v14", "M12 7S10.5 3 8 3a2.5 2.5 0 0 0 0 5h4", "M12 7s1.5-4 4-4a2.5 2.5 0 0 1 0 5h-4"]);
const IcLink = qIcon(["M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71", "M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"]);
const IcGlobe = qIcon(["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20", "M2 12h20", "M12 2a15.3 15.3 0 0 1 0 20", "M12 2a15.3 15.3 0 0 0 0 20"]);
const IcStar = qIcon(["M12 2.5l2.9 5.9 6.6.95-4.75 4.63 1.12 6.52L12 17.94l-5.9 3.1 1.12-6.52L2.5 9.85l6.6-.95z"]);
const IcCoin = qIcon(["M2.5 6.5h19v11h-19z", "M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7", "M6 9.5h.01", "M18 14.5h.01"]);
const IcGem = qIcon(["M3 9l3-6h12l3 6-9 12z", "M3 9h18", "M8 3l4 6 4-6", "M12 9v12"]);
const IcTag = qIcon(["M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z", "M7.2 7.2h.01"]);
const IcSpark = qIcon(["M12 3l1.9 6.1L20 11l-6.1 1.9L12 19l-1.9-6.1L4 11l6.1-1.9z"]);
const IcQuestion = qIcon(["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20", "M9.2 9a3 3 0 1 1 4.3 2.8c-1 .5-1.5 1.1-1.5 2.2", "M12 17h.01"]);
const IcCheck = qIcon(["M20 6L9 17l-5-5"]);

const QUIZ = [
  { key: "audience", q: "Кому дарите?", hint: "Подберём формат под статус получателя", opts: [
    { v: "Сотрудникам", ic: IcTeam }, { v: "VIP-клиентам", ic: IcGift }, { v: "Партнёрам", ic: IcLink },
    { v: "Иностранным гостям", ic: IcGlobe }, { v: "Топ-менеджменту", ic: IcStar } ] },
  { key: "budget", q: "Какой бюджет на 1 подарок?", hint: "Соберём комплектацию под вашу сумму", opts: [
    { v: "До 5 000 ₸", ic: IcCoin }, { v: "5 000–10 000 ₸", ic: IcCoin }, { v: "10 000–20 000 ₸", ic: IcCoin }, { v: "Премиум", premium: true, ic: IcGem } ] },
  { key: "logo", q: "Нужен логотип компании?", hint: "Брендируем игрушку или упаковку", opts: [
    { v: "Да", ic: IcTag }, { v: "Нет", ic: IcSpark }, { v: "Пока не знаю", ic: IcQuestion } ] },
];

const BENEFITS = ["3 готовых варианта под ваш бюджет", "Подскажем сроки производства и логистику", "Брендируем подарок логотипом компании"];
const EMBERS = [[10, 0, 15], [26, 4, 17], [44, 1.5, 19], [60, 5.5, 16], [76, 2.5, 18.5], [90, 6.5, 20], [34, 8.5, 16.5], [68, 10, 18]];

function QuizOption({ o, selected, onPick }) {
  return React.createElement("button", { type: "button", className: `lp-quiz-opt${selected ? " sel" : ""}${o.premium ? " premium" : ""}`, onClick: onPick },
    React.createElement("span", { className: "ic" }, React.createElement(o.ic, { style: { width: 26, height: 26 } })),
    React.createElement("span", { className: "lbl" }, o.v),
    React.createElement("span", { className: "tick" }, React.createElement(IcCheck, { style: { width: 15, height: 15 } })));
}

function GiftQuiz() {
  const [step, setStep] = useStateQ(0);
  const [ans, setAns] = useStateQ({});
  const total = QUIZ.length;
  const done = step >= total;
  const cur = QUIZ[step];
  const pick = (key, v) => { setAns((a) => ({ ...a, [key]: v })); setTimeout(() => setStep((s) => s + 1), 240); };

  return React.createElement("section", { className: "lp-quiz", id: "kviz", style: { scrollMarginTop: 96 } },
    React.createElement(Ethno, { color: "var(--amber-300)", variant: "faint", parallax: 0.05 }),
    React.createElement("div", { className: "lp-glow", style: { width: 520, height: 520, right: "-14%", top: "-22%", background: "radial-gradient(circle, rgba(242,161,78,0.32), rgba(242,161,78,0))" } }),
    React.createElement("div", { className: "lp-hero-embers", "aria-hidden": "true" },
      EMBERS.map((e, i) => React.createElement("span", { key: i, style: { left: e[0] + "%", animationDelay: e[1] + "s", animationDuration: e[2] + "s" } }))),

    React.createElement("div", { className: "lp-inner lp-quiz-inner" },
      // ── left: intro ──
      React.createElement("div", { className: "lp-quiz-intro" },
        React.createElement(Reveal, null, React.createElement(Eyebrow, { onRed: true }, "Подбор за 30 секунд")),
        React.createElement(Reveal, { tag: "h2", className: "lp-h2", delay: 1 },
          "Подберите подарок ", React.createElement("span", { className: "lp-amber" }, "за 30 секунд")),
        React.createElement(Reveal, { tag: "p", className: "sub", delay: 2 },
          "Ответьте на 3 вопроса — и менеджер пришлёт готовые варианты под ваш бюджет, статус получателей и бренд компании."),
        React.createElement(Reveal, { tag: "ul", className: "lp-quiz-benefits", delay: 3 },
          BENEFITS.map((b) => React.createElement("li", { key: b },
            React.createElement("span", { className: "b-ic" }, React.createElement(IcCheck, { style: { width: 15, height: 15 } })), b))),
        React.createElement(Reveal, { tag: "div", className: "lp-quiz-micro", delay: 4 }, "≈ 1 минута · бесплатно · ни к чему не обязывает")),

      // ── right: quiz card ──
      React.createElement(Reveal, { delay: 2, className: "lp-quiz-card" },
        React.createElement("div", { className: "lp-quiz-top" },
          React.createElement("div", { className: "lp-quiz-steps" },
            QUIZ.map((_, i) => React.createElement("span", { key: i, className: `seg${i < step || done ? " done" : ""}${i === step && !done ? " active" : ""}` }))),
          React.createElement("span", { className: "lp-quiz-count" }, done ? "Готово" : `Шаг ${step + 1} из ${total}`)),

        done
          ? React.createElement("div", { className: "lp-quiz-done" },
              React.createElement("div", { className: "ring" }, React.createElement(IcCheck, { style: { width: 28, height: 28 } })),
              React.createElement("h3", null, "Формат подобран!"),
              React.createElement("p", { className: "sub" }, "Осталось оставить контакты — пришлём 3 варианта комплектации."),
              React.createElement("div", { className: "lp-quiz-chips" },
                [["Кому", ans.audience], ["Бюджет", ans.budget], ["Логотип", ans.logo]].map(([k, v]) =>
                  React.createElement("span", { key: k, className: "chip" }, React.createElement("b", null, k + ": "), v || "—"))),
              React.createElement("button", { type: "button", className: "lp-btn lp-btn-amber", style: { width: "100%", marginTop: 4 }, onClick: () => openLead({ quiz: ans }) },
                "Получить 3 варианта комплектации", React.createElement(Spark, { style: { width: 15, height: 15 } })),
              React.createElement("p", { className: "note" }, "Менеджер предложит 3 варианта и подскажет сроки производства."),
              React.createElement("button", { type: "button", className: "lp-quiz-restart", onClick: () => setStep(0) }, "← изменить ответы"))
          : React.createElement("div", { className: "lp-quiz-step" },
              React.createElement("div", { className: "lp-quiz-qrow" },
                step > 0 && React.createElement("button", { type: "button", className: "lp-quiz-back", "aria-label": "Назад", onClick: () => setStep((s) => Math.max(0, s - 1)) }, "←"),
                React.createElement("div", null,
                  React.createElement("h3", { className: "lp-quiz-q" }, cur.q),
                  React.createElement("p", { className: "lp-quiz-hint" }, cur.hint))),
              React.createElement("div", { className: "lp-quiz-grid" },
                cur.opts.map((o) => React.createElement(QuizOption, { key: o.v, o, selected: ans[cur.key] === o.v, onPick: () => pick(cur.key, o.v) }))))
      )
    )
  );
}

Object.assign(window, { GiftQuiz });