// wizard.jsx — New reading order wizard

const WIZARD_STEPS = [
  { id: 'product', label: 'Продукт' },
  { id: 'person',  label: 'Персона' },
  { id: 'data',    label: 'Данные' },
  { id: 'pay',     label: 'Оплата' },
];

// RELATIONSHIP_OPTIONS — необязательный вопрос анкеты. Пустое значение —
// осознанный выбор пользователя, а не «не заполнил»: разбор просто не будет
// говорить про партнёрство как про факт.
const RELATIONSHIP_OPTIONS = [
  { value: '', label: 'Не хочу говорить' },
  { value: 'один', label: 'Один / одна' },
  { value: 'в отношениях', label: 'В отношениях' },
  { value: 'в браке', label: 'В браке' },
  { value: 'в разводе', label: 'В разводе' },
  { value: 'всё сложно', label: 'Всё сложно' },
];

// Mapping наш UI-id → backend service-id.
const PRODUCT_TO_SERVICE = { natal: 'natal', forecast: 'year_ahead', compat: 'compatibility', matrix: 'matrix' };

// Мультивалютность: у сервисов и наборов каталога есть currency ('RUB'|'USD')
// и цены в минорных единицах (копейки / центы). Рубли показываем как раньше
// (из price_rub), доллары — через Intl en-US из price_minor.
const catalogService = (key) => (window.__catalog && window.__catalog[key]) || null;
const usdFmt = (cents) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format((cents || 0) / 100);
const servicePriceText = (key, fallbackRub) => {
  const s = catalogService(key);
  if (s && s.currency === 'USD') return usdFmt(s.price_minor);
  return `${catalogPrice(key, fallbackRub)} ₽`;
};
const bundlePriceText = (b) => (b && b.currency === 'USD' ? usdFmt(b.price_minor) : `${b.price_rub} ₽`);
const bundleBasePriceText = (b) => (b && b.currency === 'USD' ? usdFmt(b.base_price_minor) : `${b.base_price_rub} ₽`);
const bundleDiscounted = (b) => (b.currency === 'USD' ? b.base_price_minor > b.price_minor : b.base_price_rub > b.price_rub);

// Из чего состоит разбор — устройством, а не числом страниц.
//
// Раньше здесь стояло «PDF · 38 стр.», и это было враньём: страниц столько,
// сколько глав собралось, а глав столько, сколько сказала карта. У прогноза
// выходило 15 против обещанных 38. Число в витрине живёт своей жизнью — оно
// не пересчитывается, когда мы добавляем или убираем главу, — а человек
// сверяет обещание с тем, что открыл, и видит обман там, где была
// невнимательность. Устройство разбора не врёт и не устаревает, а объём
// человек оценивает по примеру, который лежит рядом.
// WizardSupportContext — что человек оформляет прямо сейчас.
//
// Вопросы из оформления («не проходит оплата», «а время рождения обязательно»)
// приходят чаще всего, и до сих пор их задавали в пустоту: форма не знала, о
// каком продукте речь, а человек на шаге оплаты не пойдёт искать раздел
// поддержки в кабинете, которого у него может и не быть.
const WizardSupportContext = ({ label, service }) => {
  React.useEffect(() => {
    window.SUPPORT_CONTEXT = label ? { label: 'Оформление · ' + label, service: service || '' } : null;
    return () => { window.SUPPORT_CONTEXT = null; };
  }, [label, service]);
  return null;
};

const PRODUCT_SHAPE = {
  natal: '6 глав · PDF и читалка',
  forecast: 'календарь года · помесячные окна',
  compat: 'синастрия двоих · от притяжения до конфликтов',
  matrix: 'октаграмма · от ядра до кармы',
};

// Конвертация "DD.MM.YYYY" → "YYYY-MM-DD" (формат, который ждёт бэкенд).
const dotDateToISO = (s) => {
  s = (s || '').trim();
  const m = s.match(/^(\d{1,2})[.\-/](\d{1,2})[.\-/](\d{4})$/);
  if (!m) return s; // оставим как есть, бэк сам ругнётся
  return `${m[3]}-${m[2].padStart(2,'0')}-${m[1].padStart(2,'0')}`;
};

// MatrixOctagram — октаграмма матрицы судьбы (8 точек + центр, старшие арканы
// Таро). arcana — карта code→аркан из расчёта: {a: 13, b: 1, ...}. Без неё
// числа иллюстративные — форма нарисована, но чьи это арканы, ещё неизвестно.
//
// Порядок точек на экране идёт по геометрии матрицы (см. internal/matrix):
// сверху месяц B, слева день A, справа год C, снизу D, между ними диагонали.
const MATRIX_POSITIONS = ['b', 'g', 'c', 'h', 'd', 'i', 'a', 'f'];
const MatrixOctagram = ({ size = 260, arcana = null }) => {
  const c = size / 2, R = size * 0.37, r = size * 0.072;
  const pts = [-90, -45, 0, 45, 90, 135, 180, 225].map(deg => {
    const a = deg * Math.PI / 180;
    return [c + R * Math.cos(a), c + R * Math.sin(a)];
  });
  // Пока расчёта нет — точки пустые. Нарисовать сюда чужие арканы значит
  // показать человеку не его матрицу под подписью «Превью матрицы».
  const nums = MATRIX_POSITIONS.map(code => (arcana && arcana[code]) || '·');
  const center = (arcana && arcana.e) || '·';
  const poly = (idx) => idx.map(i => pts[i].join(',')).join(' ');
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: 'block' }}>
      <g fill="none" stroke="var(--gold)" strokeWidth="1">
        <polygon points={poly([0, 2, 4, 6])} opacity="0.55" />
        <polygon points={poly([1, 3, 5, 7])} opacity="0.55" />
        {pts.map((p, i) => <line key={i} x1={c} y1={c} x2={p[0]} y2={p[1]} opacity="0.22" />)}
      </g>
      {pts.map((p, i) => (
        <g key={i}>
          <circle cx={p[0]} cy={p[1]} r={r} fill="var(--bg-base)" stroke="var(--gold)" strokeWidth="1.2" />
          <text x={p[0]} y={p[1]} textAnchor="middle" dominantBaseline="central" fontSize={r * 0.95} fill="var(--ink-secondary)" fontFamily="var(--font-display)">{nums[i]}</text>
        </g>
      ))}
      <circle cx={c} cy={c} r={r * 1.25} fill="var(--bg-base)" stroke="var(--gold)" strokeWidth="1.6" />
      <text x={c} y={c} textAnchor="middle" dominantBaseline="central" fontSize={r * 1.15} fill="var(--gold)" fontFamily="var(--font-display)" fontStyle="italic">{center}</text>
    </svg>
  );
};

const Wizard = () => {
  const [step, setStep] = React.useState(0);
  const [product, setProduct] = React.useState(() => {
    const q = new URLSearchParams(window.location.search).get('product');
    // daily — подписка; без неё карточка «Ежедневный прогноз» с главной
    // открывала визард на натальной карте.
    return ['natal', 'forecast', 'compat', 'matrix', 'daily'].includes(q) ? q : 'natal';
  });
  const [personMode, setPersonMode] = React.useState('saved'); // saved | new
  const [selectedPerson, setSelectedPerson] = React.useState(null);
  const [secondPerson, setSecondPerson] = React.useState(null);
  const [tip, setTip] = React.useState(false); // аудио-комментарий пока не реализован
  const [payMethod, setPayMethod] = React.useState('sbp'); // СБП по умолчанию: 0.7% против 2.8% картой

  // Backend state
  const [persons, setPersons] = React.useState([]);
  // Общий список для обоих выпадающих списков совместимости.
  // ВАЖНО: объявлять строго после persons — Babel с preset env превращает
  // const в var, поэтому обращение выше по файлу даёт undefined, а не TDZ-ошибку.
  const personOptions = React.useMemo(
    () => (persons || []).map(p => ({ value: p.id, label: p.name, hint: p.relation || '' })),
    [persons]
  );
  const [user, setUser] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitErr, setSubmitErr] = React.useState(null);
  // Промокод. Проверяется на сервере ДО оплаты той же функцией, что считает
  // цену заказа: применённый только на фронте код разошёлся бы с суммой
  // платежа, и человек увидел бы другую цифру уже на странице банка.
  // Набор выбран вместо отдельного разбора. Продукт при этом остаётся тем,
  // с которого набор начинается: данные рождения, превью карты и проверки — те
  // же, отличаются только цена и то, что уходит на сервер.
  const [bundle, setBundle] = React.useState(null);
  const [promo, setPromo] = React.useState('');
  const [promoBusy, setPromoBusy] = React.useState(false);
  const [promoState, setPromoState] = React.useState(null);

  // Контролируемая форма ввода персоны (step 1 mode=new, step 2; для совместимости — Партнёр 1).
  const [form, setForm] = React.useState({ name: '', dob: '', time: '', place: '', placeLat: 0, placeLng: 0, placeTz: '', gender: '', saveAsPerson: true });
  const setF = (k, v) => setForm(f => ({ ...f, [k]: v }));
  // Вторая форма — Партнёр 2 для совместимости (оба партнёра редактируемы на шаге «Данные»).
  const [form2, setForm2] = React.useState({ name: '', dob: '', time: '', place: '', placeLat: 0, placeLng: 0, placeTz: '', gender: '', saveAsPerson: true });
  const setF2 = (k, v) => setForm2(f => ({ ...f, [k]: v }));
  // Совместимость: подтверждение права предоставить данные второго человека (152-ФЗ — третье лицо).
  const [partner2Consent, setPartner2Consent] = React.useState(false);

  // Подарок: разбор оформляется на другого человека.
  // giftNeedsData — даритель не знает данных рождения; их введёт получатель по
  // ссылке из письма. Это и практично (точное время знает мало кто), и чисто
  // по 152-ФЗ: данные вводит сам субъект, а не третье лицо.
  const [isGift, setIsGift] = React.useState(false);
  const [giftNeedsData, setGiftNeedsData] = React.useState(true);
  const [gift, setGift] = React.useState({ email: '', name: '', from: '', message: '' });
  // Как подарок попадёт к человеку: письмом от нас или ссылкой из рук дарителя.
  // Второе — не редкость: адреса часто просто нет, зато есть мессенджер.
  const [giftDelivery, setGiftDelivery] = React.useState('email');
  // Согласие на регулярное списание — отдельная явная галочка (astro-r9o.7).
  const [subConsent, setSubConsent] = React.useState(false);
  // Пояс и час доставки. Пояс берём из браузера: человек в визарде ещё не наш
  // подписчик, спрашивать его о том, что и так известно, — лишний шаг.
  const [subTZ, setSubTZ] = React.useState(() => browserTZ() || 'Europe/Moscow');
  const [subHour, setSubHour] = React.useState(9);
  // Анкета «о себе». Карта показывает устройство человека, но не его
  // обстоятельства: один и тот же Марс в седьмом доме в двадцать лет и в сорок
  // — про разное. Все поля необязательные, пустая анкета ничего не ломает.
  const [ctx, setCtx] = React.useState({ occupation: '', relationship: '', focus: '' });
  const setC = (k, v) => setCtx(prev => ({ ...prev, [k]: v }));
  const setG = (k, v) => setGift(g => ({ ...g, [k]: v }));
  // Совместимость дарить «вслепую» нельзя: получателю пришлось бы вводить
  // данные двух человек, включая чужие. Форму такого объёма он не заполнит.
  const giftBlind = isGift && giftNeedsData && product !== 'compat';

  // Guest-checkout (не залогинен): email + согласие инлайн — фримиум без account-wall.
  const [guestEmail, setGuestEmail] = React.useState('');
  const [guestConsent, setGuestConsent] = React.useState(false);
  const [guestMarketing, setGuestMarketing] = React.useState(false);

  // Персона → объект формы (born_date "YYYY-MM-DD" → "DD.MM.YYYY"). Для новой/пустой
  // персоны saveAsPerson=true (сохраним при заказе), для существующей — false (не дублируем).
  const personToForm = (p) => {
    if (!p) return { name: '', dob: '', time: '', place: '', placeLat: 0, placeLng: 0, placeTz: '', gender: '', saveAsPerson: true };
    const iso = p.born_date || '';
    const dot = iso.length >= 10 ? `${iso.slice(8, 10)}.${iso.slice(5, 7)}.${iso.slice(0, 4)}` : '';
    return { name: p.name || '', dob: dot, time: dtNormTime(p.born_time), place: p.place || '', placeLat: p.lat || 0, placeLng: p.lon || 0, placeTz: p.tz_name || '', gender: p.gender || '', saveAsPerson: false };
  };

  React.useEffect(() => {
    (async () => {
      try {
        const [meR, psR] = await Promise.all([
          fetch('/api/auth/me', { credentials: 'same-origin' }),
          fetch('/api/persons', { credentials: 'same-origin' }),
        ]);
        if (meR.ok) {
          const me = await meR.json();
          setUser(me.user || me);
        }
        if (psR.ok) {
          const data = await psR.json();
          const list = data.persons || [];
          setPersons(list);
          // Если в URL передан ?person=<id> — выбираем именно его
          const qsPerson = new URLSearchParams(window.location.search).get('person');
          const preselected = qsPerson && list.find(p => p.id === qsPerson);
          const def = preselected || list.find(p => p.is_default) || list[0];
          if (def) setSelectedPerson(def.id);
          if (list.length > 1) setSecondPerson(list[1].id);
          // если нет ни одной персоны — переключаем на "новый"
          if (list.length === 0) setPersonMode('new');
        }
      } catch (e) {
        console.warn('wizard.load', e);
      } finally {
        setLoading(false);
      }
    })();
  }, []);

  // Превью карты — настоящий расчёт по уже введённым данным, а не картинка с
  // чужими позициями. Человек на этом шаге проверяет, те ли данные он подал:
  // нарисованный кому-то другому Асцендент проверять нечего, а ошибку в дате
  // видно именно по знакам. Ручка публичная и та же, что у бесплатного
  // расчёта на главной, — значит превью и покупка считаются одинаково.
  const [preview, setPreview] = React.useState(null);
  React.useEffect(() => {
    const iso = dotDateToISO(form.dob);
    if (!/^\d{4}-\d{2}-\d{2}$/.test(iso)) { setPreview(null); return; }
    let alive = true;
    // Пауза — против запроса на каждую цифру даты: поле заполняется посимвольно.
    const timer = setTimeout(async () => {
      try {
        const url = product === 'matrix' ? '/api/free/matrix' : '/api/free/chart';
        const body = product === 'matrix'
          ? { born_date: iso, gender: form.gender || '' }
          : {
            born_date: iso,
            born_time: (form.time || '').trim(),
            place: (form.place || '').trim(),
            lat: form.placeLat || 0,
            lng: form.placeLng || 0,
            tz: form.placeTz || '',
          };
        const r = await fetch(url, {
          method: 'POST', headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(body),
        });
        if (!r.ok) throw new Error('preview');
        const d = await r.json();
        if (alive) setPreview(d);
      } catch (e) {
        // Превью — не часть заказа: молча остаёмся на «данных не хватает».
        if (alive) setPreview(null);
      }
    }, 400);
    return () => { alive = false; clearTimeout(timer); };
  }, [product, form.dob, form.time, form.place, form.placeLat, form.placeLng, form.placeTz, form.gender]);

  // Арканы матрицы: code («A».. «I») → число, в том виде, в каком их ждёт
  // октаграмма.
  const previewArcana = React.useMemo(() => {
    if (!preview || preview.kind !== 'matrix' || !preview.points) return null;
    const byCode = {};
    preview.points.forEach(p => { byCode[(p.code || '').toLowerCase()] = p.arcanum; });
    return byCode;
  }, [preview]);

  // Ответ прошлого продукта живёт до следующего запроса (пауза в 400 мс),
  // поэтому смотрим на kind, а не на сам факт ответа.
  const chartPreview = preview && preview.kind === 'chart' ? preview : null;

  // Позиции для колеса. Рисуем только те планеты, для которых есть глиф:
  // дальние (Уран, Нептун, Плутон) иначе встали бы пустыми кружками.
  const previewPlacements = React.useMemo(() => {
    const pts = (chartPreview && chartPreview.points) || [];
    return pts.filter(p => Planet[p.id]).map(p => ({ planet: p.id, deg: p.lon }));
  }, [chartPreview]);

  // Цены/названия тянутся с бэка (window.__catalog) с фолбэками. Ключи визарда
  // (forecast/compat) маппятся на каталожные (year_ahead/compatibility).
  const PRODUCTS = {
    natal:    { key: 'natal',         name: catalogTitle('natal', 'Натальная карта'), price: catalogPrice('natal', 1990), desc: 'Почему ты такая, какая есть', accent: 'gold', planets: ['sun','moon','mercury'] },
    forecast: { key: 'year_ahead',    name: catalogTitle('year_ahead', 'Прогноз на год'),  price: catalogPrice('year_ahead', 2990), desc: 'Когда действовать, а когда ждать', accent: 'celest', planets: ['jupiter','saturn'] },
    compat:   { key: 'compatibility', name: catalogTitle('compatibility', 'Совместимость'),    price: catalogPrice('compatibility', 2490), desc: 'Мой ли это человек',       accent: 'rose', planets: ['venus','mars'] },
    daily:    { key: 'daily_sub',     name: 'Ежедневный прогноз', price: subscriptionOffer().price_rub, desc: 'Каждое утро — про твой день', accent: 'celest', planets: ['moon','sun'], sub: true },
    matrix:   { key: 'matrix',        name: catalogTitle('matrix', 'Матрица судьбы'),   price: catalogPrice('matrix', 1490), desc: 'Предназначение по дате рождения',   accent: 'sage', planets: ['sun','moon','mercury'] },
  };

  // Показываем только те наборы, что собираются из одних данных рождения.
  // Набор с совместимостью потребовал бы второго человека и своей ветки шага
  // «Данные» — до тех пор его честнее не предлагать вовсе, чем предложить и
  // сломаться на середине.
  const BUNDLE_ITEM_TO_PRODUCT = { natal: 'natal', year_ahead: 'forecast', matrix: 'matrix' };
  const bundles = (typeof catalogBundles === 'function' ? catalogBundles() : [])
    .filter(b => (b.items || []).every(it => BUNDLE_ITEM_TO_PRODUCT[it.key]));

  const chooseBundle = (b) => {
    setBundle(b);
    // Подарок и набор пока не совместимы — снимаем выбор, а не показываем
    // ошибку после оплаты.
    setIsGift(false);
    // Первый разбор набора задаёт, что спрашивать дальше.
    const first = (b.items || [])[0];
    setProduct(BUNDLE_ITEM_TO_PRODUCT[first && first.key] || 'natal');
  };

  // Код мог действовать только на прошлый продукт, поэтому смена продукта
  // сбрасывает результат проверки, а не тащит его в новый заказ.
  React.useEffect(() => { setPromoState(null); }, [product]);

  const promoApplied = !!(promoState && promoState.ok && promoState.product === PRODUCTS[product].key);

  const applyPromo = async () => {
    const code = promo.trim();
    if (!code || promoBusy) return;
    setPromoBusy(true);
    try {
      const r = await fetch('/api/promo/check', {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code, product: PRODUCTS[product].key }),
      });
      const d = await r.json();
      if (d && d.ok) {
        // Цена приходит в валюте витрины: для USD — центы в price_minor,
        // для рублей — как раньше в price_rub.
        setPromoState({ ok: true, code: d.code, product: d.product, price: d.currency === 'USD' ? d.price_minor : d.price_rub, currency: d.currency || 'RUB', percent: d.discount_percent, label: d.discount_label });
        window.astro?.track?.('promo_applied', d.code || '');
      } else {
        setPromoState({ ok: false, error: (d && d.error) || 'Промокод не применился' });
      }
    } catch (e) {
      setPromoState({ ok: false, error: 'Не удалось проверить промокод' });
    } finally {
      setPromoBusy(false);
    }
  };

  // Пришёл по ссылке приглашения: код лежит в адресе, а если человек успел
  // погулять по сайту — в куке с того перехода. Заставлять его набирать код,
  // который мы и так знаем, значит терять покупку на последнем шаге.
  const autoPromo = React.useRef(false);
  React.useEffect(() => {
    if (promo) return;
    const fromUrl = new URLSearchParams(location.search).get('promo');
    const fromCookie = (document.cookie.match(/(?:^|;\s*)sp_promo=([^;]+)/) || [])[1];
    const code = (fromUrl || fromCookie || '').trim();
    if (code) setPromo(decodeURIComponent(code).toUpperCase());
  }, []);
  React.useEffect(() => {
    if (autoPromo.current || !promo || promoState || !product) return;
    autoPromo.current = true;
    applyPromo();
  }, [promo, product]);

  // Цена уже приходит со скидкой (её считает бэк). Здесь только показываем,
  // откуда она взялась: без объяснения цифра выглядит как ошибка прайса.
  const discountOf = (id) => catalogDiscount(PRODUCTS[id].key);
  const DiscountNote = ({ id, align }) => {
    const d = discountOf(id);
    if (!d) return null;
    // Зачёркнутая база — в валюте сервиса: центы для USD, рубли как раньше.
    const svc = catalogService(PRODUCTS[id].key);
    const baseText = svc && svc.currency === 'USD' ? usdFmt(svc.base_price_minor) : `${d.base} ₽`;
    return (
      <div className="row gap-2" style={{ alignItems: 'baseline', justifyContent: align || 'flex-start', flexWrap: 'wrap' }}>
        {d.strikethrough && d.base ? (
          <span className="mono muted" style={{ fontSize: '12px', textDecoration: 'line-through' }}>{baseText}</span>
        ) : null}
        <span className="mono" style={{
          fontSize: '10px', color: 'var(--gold)', border: '1px solid var(--gold)',
          borderRadius: '4px', padding: '1px 6px', whiteSpace: 'nowrap',
        }}>{d.label || `−${d.percent}%`}</span>
      </div>
    );
  };

  // Поля получателя подарка. Живут на шаге «Данные»: и когда даритель вводит
  // данные рождения сам, и когда их заполнит получатель.
  const renderGiftFields = () => (
    <div className="card" style={{ padding: '32px', background: 'var(--bg-raised)', marginBottom: giftBlind ? 0 : '24px' }}>
      <div className="label" style={{ marginBottom: '16px' }}>Как передать подарок</div>
      <div className="rgrid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px', marginBottom: '24px' }}>
        {[
          { id: 'email', title: 'Отправим письмом', sub: 'Нужен его email' },
          { id: 'link',  title: 'Дам ссылку сам',   sub: 'Ссылка появится сразу после оплаты' },
        ].map(o => (
          <button key={o.id} onClick={() => setGiftDelivery(o.id)} style={{
            textAlign: 'left',
            background: giftDelivery === o.id ? 'var(--bg-elevated)' : 'var(--bg-base)',
            border: giftDelivery === o.id ? '1.5px solid var(--gold)' : '1px solid var(--line)',
            borderRadius: '12px', padding: '16px 18px', cursor: 'pointer', transition: 'all 200ms',
          }}>
            <div style={{ fontSize: '15px', marginBottom: '4px' }}>{o.title}</div>
            <div className="mono muted" style={{ fontSize: '10.5px' }}>{o.sub}</div>
          </button>
        ))}
      </div>

      <div className="label" style={{ marginBottom: '20px' }}>Получатель</div>
      <div className="col gap-4">
        <div className="row gap-4 row-stack">
          {giftDelivery === 'email' && (
            <label className="field" style={{ flex: 1 }}>
              <span className="label">Email получателя</span>
              <input className="input" type="email" value={gift.email} onChange={e => setG('email', e.target.value)} placeholder="ему@example.com" />
            </label>
          )}
          <label className="field" style={{ flex: 1 }}>
            <span className="label">Как его зовут</span>
            <input className="input" value={gift.name} onChange={e => setG('name', e.target.value)} placeholder="Имя — необязательно" />
          </label>
        </div>
        <label className="field">
          <span className="label">От кого</span>
          <input className="input" value={gift.from} onChange={e => setG('from', e.target.value)} placeholder="Твоё имя — его увидит получатель" />
        </label>
        <label className="field">
          <span className="label">Поздравление</span>
          <input className="input" maxLength={500} value={gift.message} onChange={e => setG('message', e.target.value)}
            placeholder={giftDelivery === 'link' ? 'Пара слов — их увидит получатель на странице подарка' : 'Пара слов — попадут в письмо и на страницу подарка'} />
        </label>
        <div className="mono muted" style={{ fontSize: '11px', lineHeight: 1.6 }}>
          {giftDelivery === 'link'
            ? (giftBlind
              ? 'Сразу после оплаты покажем ссылку — передашь её сам. По ней получатель укажет свои данные рождения, и разбор соберётся.'
              : 'Сразу после оплаты покажем ссылку — передашь её сам. По ней получатель прочитает разбор и скачает PDF.')
            : (giftBlind
              ? 'После оплаты получателю уйдёт письмо со ссылкой. Разбор соберётся, как только он заполнит данные рождения.'
              : 'После оплаты соберём разбор и пришлём его получателю письмом. Ссылка личная — по ней он и прочитает, и скачает PDF.')}
        </div>
      </div>
    </div>
  );

  const next = () => setStep(Math.min(WIZARD_STEPS.length - 1, step + 1));
  const prev = () => setStep(Math.max(0, step - 1));

  // Шаг визарда — самое вероятное место отсева и единственное, где без
  // разметки не видно ничего: все четыре шага живут на одном адресе, и в
  // отчёте по путям они сливаются в одну строку /order/new.
  React.useEffect(() => {
    window.astro?.track?.('wizard_step', WIZARD_STEPS[step]?.id || String(step));
  }, [step]);

  // Поля рождения — переиспользуются для обычной формы и для обоих партнёров совместимости.
  const renderBirthFields = (f, set, dateOnly = false) => (
    <div className="col gap-4">
      {!dateOnly && (
        <label className="field">
          <span className="label">Имя</span>
          <input className="input" value={f.name} onChange={e => set('name', e.target.value)} placeholder="Как зовут?" />
        </label>
      )}
      {dateOnly ? (
        <div className="field">
          <span className="label">Дата рождения</span>
          <DateField format="dot" value={f.dob} onChange={v => set('dob', v)} />
        </div>
      ) : (
        <div className="row gap-4 row-stack">
          <div className="field" style={{ flex: 1 }}>
            <span className="label">Дата</span>
            <DateField format="dot" value={f.dob} onChange={v => set('dob', v)} />
          </div>
          <div className="field" style={{ flex: 1 }}>
            <span className="label">Время</span>
            <TimeField value={f.time} onChange={v => set('time', v)} />
          </div>
        </div>
      )}
      {!dateOnly && (
        <label className="field">
          <span className="label">Место рождения</span>
          <PlaceField value={f.place} onChange={v => set('place', v)} onPick={s => { set('place', s.name); set('placeLat', s.lat); set('placeLng', s.lng); set('placeTz', s.tz_name); }} />
        </label>
      )}
      <label className="field">
        <span className="label">Пол</span>
        <Select value={f.gender} onChange={v => set('gender', v)} options={GENDER_OPTIONS} />
        <span className="mono muted" style={{ fontSize: '11px', marginTop: '4px' }}>Не обязательно: пропустишь — определим род по имени. Укажи, если имя редкое или общее для обоих (Саша, Женя).</span>
      </label>
      <label className="row gap-3" style={{ alignItems: 'flex-start', cursor: 'pointer' }}>
        <input type="checkbox" checked={f.saveAsPerson} onChange={e => set('saveAsPerson', e.target.checked)} style={{ marginTop: 4 }} />
        <span style={{ fontSize: '13px', color: 'var(--ink-secondary)' }}>Сохранить в моих персонах</span>
      </label>
    </div>
  );

  // Префилл форм при переходе на step-2.
  React.useEffect(() => {
    if (step !== 2) return;
    if (product === 'compat') {
      // Оба партнёра — из выбранных персон (если выбраны), но полностью редактируемы.
      setForm(personToForm(persons.find(x => x.id === selectedPerson)));
      setForm2(personToForm(persons.find(x => x.id === secondPerson)));
      return;
    }
    if (personMode === 'saved' && selectedPerson) {
      setForm(personToForm(persons.find(x => x.id === selectedPerson)));
    }
  }, [step, product, personMode, selectedPerson, secondPerson, persons]);

  // Отправка заказа на бэкенд + переход на оплату.
  // Для compatibility — обязательны две сохранённые персоны.
  // Для natal/year_ahead — берём поля из step-2 формы (даже если step-1 picker
  // выбрал сохранённую персону, эти поля пред-заполнены и user мог их править).
  // isSub — выбран не разовый разбор, а подписка. Флоу общий до последнего
  // шага: персона и данные рождения нужны и там, и там — без натальной карты
  // ежедневку не посчитать.
  const isSub = product === 'daily';

  // Валюта заказа задаётся витриной, а не пользователем: USD-сервисы и наборы
  // оплачиваются картой через lava.top, и выбора «СБП или карта» у них нет —
  // СБП умеет только рубли. Набор несёт валюту с собой, как и сервис.
  const orderSvc = bundle || catalogService(PRODUCTS[product].key);
  const isUSDOrder = !isSub && !!orderSvc && orderSvc.currency === 'USD';

  // Итог «К оплате»: строкой — для показа, и отдельная проверка на ноль, чтобы
  // при полном промокоде кнопка честно говорила «Получить разбор», а не вела
  // за платёжной ссылкой на ноль.
  const orderPriceText = () => {
    if (bundle) return bundlePriceText(bundle);
    if (promoApplied) return promoState.currency === 'USD' ? usdFmt(promoState.price) : `${promoState.price + (tip ? 990 : 0)} ₽`;
    if (isUSDOrder) return usdFmt(orderSvc.price_minor);
    return `${PRODUCTS[product].price + (tip ? 990 : 0)} ₽`;
  };
  const orderIsFree = () => {
    if (bundle) return (bundle.currency === 'USD' ? bundle.price_minor : bundle.price_rub) === 0;
    if (promoApplied) return promoState.price === 0;
    if (isUSDOrder) return orderSvc.price_minor === 0;
    return (PRODUCTS[product].price + (tip ? 990 : 0)) === 0;
  };

  // Оформление подписки. Отдельно от submitOrder: подписка не создаёт заказ,
  // не идёт в платёжку и живёт в своей таблице.
  const submitSubscription = async () => {
    setSubmitting(true);
    setSubmitErr(null);
    try {
      if (!user) {
        // Гостевого оформления подписки пока нет: она привязана к аккаунту,
        // а passwordless-провижининг у нас умеет только checkout заказов.
        window.location.href = '/login?next=' + encodeURIComponent('/order/new?product=daily');
        return;
      }
      if (!subConsent) throw new Error('Подтверди согласие на регулярное списание');

      // Персона: либо выбранная, либо создаём из формы — подписке нужен id.
      let personID = personMode === 'saved' ? selectedPerson : null;
      const birth = {
        name: form.name.trim(),
        born_date: dotDateToISO(form.dob),
        born_time: form.time.trim(),
        tz_name: form.placeTz || '',
        place: form.place.trim(),
        lat: form.placeLat || 0,
        lon: form.placeLng || 0,
        gender: form.gender,
      };
      if (!personID) {
        if (!birth.name || !birth.born_date || !birth.place) {
          throw new Error('Заполни имя, дату и место рождения');
        }
        const pr = await fetch('/api/persons', {
          method: 'POST', credentials: 'same-origin',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ ...birth, relation: '' }),
        });
        const pd = await pr.json();
        if (!pr.ok) throw new Error(pd.error || 'Не удалось сохранить персону');
        personID = pd.id;
      } else if (birth.born_date) {
        // Выбранную персону обновляем правками с шага «Данные».
        await fetch(`/api/persons/${encodeURIComponent(personID)}`, {
          method: 'PATCH', credentials: 'same-origin',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(birth),
        }).catch(() => {});
      }

      const r = await fetch('/api/subscriptions', {
        method: 'POST', credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          person_id: personID, consent_recurring: true,
          tz: subTZ, daily_hour: subHour,
        }),
      });
      const d = await r.json();
      if (!r.ok) throw new Error(d.error === 'subscription already active'
        ? 'Подписка уже оформлена — она в кабинете'
        : (d.error || `HTTP ${r.status}`));
      window.location.href = '/account';
    } catch (e) {
      console.error('subscription.submit', e);
      setSubmitErr(e.message || 'Не удалось оформить подписку');
      setSubmitting(false);
    }
  };

  const submitOrder = async () => {
    setSubmitting(true);
    setSubmitErr(null);
    // Что записать в персоны после успешного заказа. Именно после: у гостя
    // сессия появляется только вместе с заказом, до этого /api/persons — 401,
    // и введённые данные (в первую очередь место рождения) терялись.
    const pendingPersons = [];
    // Выбранную персону обновляем (PATCH), новую — создаём. Так место, дата и
    // время, введённые один раз, подставятся в следующий заказ и в кабинете.
    const persistPerson = async (t) => {
      const payload = {
        name: t.birth.name,
        born_date: t.birth.born_date,
        born_time: t.birth.born_time,
        tz_name: t.birth.tz_name || '',
        place: t.birth.place,
        lat: t.birth.lat || 0,
        lon: t.birth.lng || 0,
        gender: t.birth.gender || '',
      };
      try {
        if (t.id) {
          await fetch(`/api/persons/${encodeURIComponent(t.id)}`, {
            method: 'PATCH', credentials: 'same-origin',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload),
          });
        } else if (t.saveNew) {
          await fetch('/api/persons', {
            method: 'POST', credentials: 'same-origin',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ ...payload, relation: '' }),
          });
        }
      } catch (_) { /* best-effort: заказ уже создан, ломать его нечем */ }
    };
    try {
      const service = PRODUCT_TO_SERVICE[product];
      // Продукт без цены в валюте витрины покупать нельзя: карточка на витрине
      // задизейблена, но прямую ссылку с ?product= никто не отменял.
      if (!bundle && !isSub) {
        const svc = catalogService(PRODUCTS[product].key);
        if (svc && svc.unavailable) throw new Error('Этот разбор сейчас недоступен');
      }
      // Набор присылаем ключом: из чего он состоит и сколько стоит, знает
      // сервер. Услугу тоже оставляем — она задаёт, какие данные рождения
      // проверять, и на сервере всё равно перезаписывается составом набора.
      const body = bundle ? { service, bundle: bundle.key } : { service };
      if (service === 'compatibility') {
        // Оба партнёра берутся из редактируемых форм шага «Данные» (inline),
        // поэтому любые правки пользователя попадают в заказ.
        const mkBirth = (f) => ({
          name: f.name.trim(),
          born_date: dotDateToISO(f.dob),
          born_time: f.time.trim(),
          tz_name: f.placeTz || '',
          place: f.place.trim(),
          lat: f.placeLat || 0,
          lng: f.placeLng || 0,
          gender: f.gender,
        });
        const b1 = mkBirth(form);
        const b2 = mkBirth(form2);
        if (!b1.name || !b1.born_date || !b1.place) throw new Error('Заполни данные первого человека: имя, дата и место рождения');
        if (!b2.name || !b2.born_date || !b2.place) throw new Error('Заполни данные второго человека: имя, дата и место рождения');
        if (!partner2Consent) throw new Error('Подтверди, что вправе предоставить данные второго человека');
        body.partner1 = b1;
        body.partner2 = b2;
        body.partner2_consent = true;
        pendingPersons.push({ id: selectedPerson || null, saveNew: form.saveAsPerson, birth: b1 });
        pendingPersons.push({ id: secondPerson || null, saveNew: form2.saveAsPerson, birth: b2 });
      } else {
        // Прогноз на год требует период — по умолчанию ближайшие 12 месяцев.
        // Считаем до ветки по данным рождения: подарку «вслепую» период тоже нужен.
        if (service === 'year_ahead') {
          const ymd = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
          const from = new Date();
          const to = new Date(from); to.setFullYear(to.getFullYear() + 1);
          body.from_date = ymd(from);
          body.to_date = ymd(to);
        }
        if (giftBlind) {
          // Данных рождения нет и быть не может — их введёт получатель.
          // Персону тоже не сохраняем: это не наш человек.
        } else {
          body.birth = {
            name: form.name.trim(),
            born_date: dotDateToISO(form.dob),
            born_time: form.time.trim(),
            tz_name: form.placeTz || '',
            place: form.place.trim(),
            lat: form.placeLat || 0,
            lng: form.placeLng || 0,
            gender: form.gender,
          };
          if (!body.birth.born_date) {
            throw new Error('Укажи дату рождения');
          }
          // Матрица судьбы — date-only: имя/место не обязательны.
          if (service !== 'matrix' && (!body.birth.name || !body.birth.place)) {
            throw new Error('Заполни имя, дату и место рождения');
          }
          pendingPersons.push({
            id: personMode === 'saved' ? (selectedPerson || null) : null,
            saveNew: form.saveAsPerson,
            birth: body.birth,
          });
        }
      }

      // Анкета уходит отдельным блоком: в промпте она помечена как слова
      // клиента, а не как данные карты. Подарок «вслепую» её не собирает —
      // отвечать за получателя мы не можем.
      if (!giftBlind) {
        const c = {};
        if (ctx.occupation.trim()) c.occupation = ctx.occupation.trim();
        if (ctx.relationship) c.relationship = ctx.relationship;
        if (ctx.focus.trim()) c.focus = ctx.focus.trim();
        if (Object.keys(c).length) body.context = c;
      }

      if (isGift) {
        const giftEmail = giftDelivery === 'email' ? gift.email.trim() : '';
        if (giftDelivery === 'email' && (!giftEmail || !giftEmail.includes('@'))) {
          throw new Error('Укажи email получателя — на него уйдёт подарок');
        }
        body.gift = {
          recipient_email: giftEmail,
          recipient_name: gift.name.trim(),
          sender_name: gift.from.trim(),
          message: gift.message.trim(),
          needs_birth_data: giftBlind,
        };
      }
      if (promoApplied) body.promo_code = promoState.code;
      window.astro?.track?.('checkout_started', product || '');
      let endpoint = '/api/orders';
      if (!user) {
        // Гость: заказ без обязательной регистрации (создаст passwordless-аккаунт + сессию).
        const email = guestEmail.trim();
        if (!email || !email.includes('@')) throw new Error('Укажи email — на него придёт разбор');
        if (!guestConsent) throw new Error('Подтверди согласие с условиями, чтобы продолжить');
        body.email = email;
        body.consent_pdn = true;
        body.consent_cross_border = true;
        body.consent_marketing = guestMarketing;
        endpoint = '/api/checkout/guest';
      }
      const r = await fetch(endpoint, {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
      if (r.status === 401) { window.location.href = '/login?next=/order/new'; return; }
      if (r.status === 412) { window.location.href = '/consent'; return; }
      const data = await r.json();
      if (!r.ok) throw new Error(data.error || `HTTP ${r.status}`);
      for (const t of pendingPersons) await persistPerson(t);
      // Промокод покрыл всю стоимость: платить нечего, заказ уже в работе.
      // Идти за платёжной ссылкой на ноль рублей бессмысленно — банк её не
      // создаст, а человек увидит ошибку там, где всё получилось.
      if (data.paid) {
        window.location.href = `/order/${data.order_id}`;
        return;
      }
      // Платёж. Эндпоинт единый: какой провайдер за ним стоит (мок, Точка или
      // lava.top) — решает бэкенд по валюте заказа, фронт об этом знать не должен.
      // У USD-заказа один способ оплаты (карта), поэтому payment_method не
      // отправляем вовсе: выбирать там нечего.
      const payBody = { order_id: data.order_id };
      if (data.currency !== 'USD') payBody.payment_method = payMethod;
      const pr = await fetch('/api/payments/create', {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payBody),
      });
      const pd = await pr.json();
      if (!pr.ok) throw new Error(pd.error || `HTTP ${pr.status}`);
      // Отмечаем до перехода: дальше страницу забирает банк, и отсюда мы
      // больше ничего не узнаем. Очередь дожимается на pagehide.
      window.astro?.track?.('payment_redirect', data.currency === 'USD' ? 'card_usd' : (payMethod || ''));
      window.location.href = pd.confirmation_url || `/order/${data.order_id}`;
    } catch (e) {
      console.error('order.submit', e);
      // Причина в отчёте обязательна: без неё «слился на оплате» не отличается
      // от «у нас упало», а это два разных вывода и две разные починки.
      window.astro?.track?.('payment_failed', (e && e.message) || 'unknown');
      setSubmitErr(e.message || 'Не удалось создать заказ');
      setSubmitting(false);
    }
  };

  return (
    <div data-screen-label="09 Wizard" style={{ minHeight: 'calc(100vh - 120px)', position: 'relative', overflowX: 'clip' }}>
      <WizardSupportContext
        label={(PRODUCTS[product] || {}).name}
        service={PRODUCT_TO_SERVICE[product] || ''} />
      {/* Шапка сайта. Раньше её здесь не было вовсе: человек, зашедший в
          оформление по прямой ссылке, оставался без логотипа, без выхода и без
          признака того, под каким аккаунтом он покупает. «Назад» и шаги ниже
          остаются — это навигация внутри оформления, а не по сайту. */}
      <SiteNav />
      {/* Background chart */}
      <div style={{ position: 'absolute', right: -240, top: -100, opacity: 0.5, pointerEvents: 'none' }}>
        <NatalChartBg size={900} opacity={0.45} />
      </div>

      <div className="wizard-shell" style={{ position: 'relative', maxWidth: '1100px', width: '100%', margin: '0 auto' }}>
        {/* Header */}
        <div className="between between-stack" style={{ marginBottom: '48px' }}>
          <button className="btn btn-ghost btn-sm" onClick={() => window.__nav?.('landing')}>
            <IconArrowLeft size={14} /> Назад
          </button>
          <div className="row gap-2" style={{ alignItems: 'center' }}>
            <span className="mono muted" style={{ fontSize: '11px' }}>Шаг {step + 1} / {WIZARD_STEPS.length}</span>
            <span style={{ width: 80, height: 2, background: 'var(--line)', borderRadius: 999, overflow: 'hidden', marginLeft: 8 }}>
              <span style={{
                display: 'block', height: '100%',
                width: `${((step + 1) / WIZARD_STEPS.length) * 100}%`,
                background: 'var(--gold)',
                transition: 'width 320ms ease',
              }} />
            </span>
          </div>
        </div>

        {/* Stepper */}
        <div className="row" style={{ gap: '12px', marginBottom: '48px', flexWrap: 'wrap' }}>
          {WIZARD_STEPS.map((s, i) => {
            const canGo = i < step; // на пройденные шаги можно вернуться и поправить
            return (
            <div key={s.id} onClick={() => { if (canGo) { setSubmitErr(null); setStep(i); } }}
              className="row gap-3"
              title={canGo ? 'Вернуться к шагу' : undefined}
              style={{ alignItems: 'center', opacity: i > step ? 0.4 : 1, cursor: canGo ? 'pointer' : 'default' }}>
              <div style={{
                width: 28, height: 28, borderRadius: '50%',
                border: '1px solid var(--line)',
                background: i < step ? 'var(--gold)' : i === step ? 'transparent' : 'transparent',
                color: i < step ? 'var(--bg-base)' : i === step ? 'var(--gold)' : 'var(--ink-muted)',
                borderColor: i <= step ? 'var(--gold)' : 'var(--line)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-ui)', fontSize: '11px',
              }}>
                {i < step ? <IconCheck size={12} /> : i + 1}
              </div>
              <span className="mono" style={{ fontSize: '11px', letterSpacing: '0.12em', textTransform: 'uppercase', color: i === step ? 'var(--ink-primary)' : 'var(--ink-muted)' }}>
                {s.label}
              </span>
              {i < WIZARD_STEPS.length - 1 && <span style={{ width: 24, height: 1, background: 'var(--line)' }} />}
            </div>
            );
          })}
        </div>

        {/* Step content */}
        <div className="fade-in" key={step}>
          {step === 0 && (
            <>
              <h1 className="display-lg" style={{ marginBottom: '16px' }}>
                Какой <span className="italic gold">разбор</span> сейчас?
              </h1>
              <p style={{ color: 'var(--ink-secondary)', fontSize: '17px', marginBottom: '40px', maxWidth: '520px' }}>
                Выбери, что важно прямо сейчас. Каждый разбор основан на твоей натальной карте.
              </p>
              <div className="rgrid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px' }}>
                {Object.entries(PRODUCTS).map(([id, p]) => {
                  // Продукт без цены в валюте витрины (unavailable) показываем
                  // явно недоступным: пустое место выглядело бы багом каталога.
                  const svc = catalogService(p.key);
                  const unavail = !!(svc && svc.unavailable);
                  return (
                  <button key={id} disabled={unavail} onClick={() => { if (!unavail) { setBundle(null); setProduct(id); } }} style={{
                    textAlign: 'left',
                    background: product === id ? 'var(--bg-elevated)' : 'var(--bg-raised)',
                    border: product === id ? `1.5px solid var(--${p.accent})` : '1px solid var(--line)',
                    borderRadius: '18px',
                    padding: '28px',
                    cursor: unavail ? 'not-allowed' : 'pointer',
                    opacity: unavail ? 0.55 : 1,
                    transition: 'all 200ms',
                    position: 'relative',
                    overflow: 'hidden',
                    // Выбранная карточка светится ярче — россыпь идёт за уже
                    // существующим состоянием, а не заводит своё.
                    '--stars-opacity': product === id ? '0.5' : '0.28',
                  }}>
                    <CardStars seed={id} />
                    <div style={{ position: 'relative' }}>
                    <div className="between" style={{ marginBottom: '20px' }}>
                      <div className="row gap-2">
                        {p.planets.map((pl, j) => (
                          <div key={j} style={{ width: 32, height: 32, borderRadius: '50%', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: `var(--${p.accent})` }}>
                            <PlanetGlyph kind={pl} size={16} />
                          </div>
                        ))}
                      </div>
                      {product === id && (
                        <div style={{ width: 24, height: 24, borderRadius: '50%', background: `var(--${p.accent})`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--bg-base)' }}>
                          <IconCheck size={14} />
                        </div>
                      )}
                    </div>
                    <h3 className="display-md" style={{ fontSize: '28px', marginBottom: '8px' }}>{p.name}</h3>
                    <p style={{ fontSize: '13.5px', color: 'var(--ink-secondary)', marginBottom: '24px', lineHeight: 1.5 }}>{p.desc}</p>
                    {/* Подпись слева, цена справа. Подпись переносится, цена —
                        никогда: с nowrap на подписи и без него на цене длинная
                        строка («синастрия двоих · от притяжения до конфликтов»)
                        выдавливала цену за край карточки, и у совместимости её
                        не было видно вовсе, а у прогноза от 3490 отрывался «₽».
                        Цена — то, ради чего эту строку читают, и ужиматься
                        должна подпись. */}
                    <div className="between" style={{ alignItems: 'baseline', gap: '12px' }}>
                      <span className="mono muted" style={{ fontSize: '11px', minWidth: 0, lineHeight: 1.5 }}>
                        {p.sub ? `${subscriptionOffer().trial_days} дней бесплатно` : PRODUCT_SHAPE[id] || 'PDF и читалка'}
                      </span>
                      <span className="display-md" style={{ fontSize: unavail ? '16px' : '24px', color: unavail ? 'var(--ink-muted)' : `var(--${p.accent})`, whiteSpace: 'nowrap', flexShrink: 0 }}>
                        {unavail ? 'Недоступно' : servicePriceText(p.key, p.price)}{p.sub && !unavail ? <span className="mono" style={{ fontSize: '12px' }}>/мес</span> : null}
                      </span>
                    </div>
                    {/* Отдельной строкой под ценой: внутри .between бейдж
                        распирал колонку и подпись ломалась на две строки. */}
                    <div style={{ marginTop: '8px' }}><DiscountNote id={id} align="flex-end" /></div>
                    </div>
                  </button>
                  );
                })}
              </div>

              {/* Наборы — отдельной полосой под продуктами, а не пятой
                  карточкой в той же сетке: это другая единица покупки, и
                  ставить её в один ряд с разборами значит предлагать выбрать
                  одно из пяти там, где выбирают одно из четырёх плюс «сразу
                  два». */}
              {bundles.length > 0 && (
                <div style={{ marginTop: '28px' }}>
                  <div className="label" style={{ marginBottom: '14px' }}>Сразу вместе — дешевле</div>
                  <div className="col gap-3">
                    {bundles.map(b => {
                      const active = bundle && bundle.key === b.key;
                      return (
                        <button key={b.key} onClick={() => chooseBundle(b)} style={{
                          textAlign: 'left',
                          background: active ? 'var(--bg-elevated)' : 'var(--bg-raised)',
                          border: active ? '1.5px solid var(--gold)' : '1px solid var(--line)',
                          borderRadius: '18px', padding: '22px 24px', cursor: 'pointer',
                          transition: 'all 200ms',
                        }}>
                          <div className="between" style={{ alignItems: 'baseline', gap: '16px', flexWrap: 'wrap' }}>
                            <div style={{ minWidth: 0 }}>
                              <div className="display-md" style={{ fontSize: '20px', marginBottom: '6px' }}>{b.title}</div>
                              <div className="mono muted" style={{ fontSize: '11px' }}>
                                {(b.items || []).map(it => it.title).join(' + ')}
                              </div>
                            </div>
                            <div className="row gap-2" style={{ alignItems: 'baseline', flexShrink: 0 }}>
                              {bundleDiscounted(b) && (
                                <span className="mono muted" style={{ fontSize: '12px', textDecoration: 'line-through' }}>
                                  {bundleBasePriceText(b)}
                                </span>
                              )}
                              <span className="display-md" style={{ fontSize: '24px', color: 'var(--gold)', whiteSpace: 'nowrap' }}>
                                {bundlePriceText(b)}
                              </span>
                            </div>
                          </div>
                        </button>
                      );
                    })}
                  </div>
                </div>
              )}

              {/* Про объём говорим честно и один раз: число страниц зависит от
                  карты, и сравнивать человек будет не с цифрой, а с примером. */}
              <p className="mono muted" style={{ fontSize: '11px', lineHeight: 1.7, marginTop: '20px', maxWidth: '620px' }}>
                Объём зависит от карты: каких-то глав может не быть, а редкие конфигурации добавляют свои.{' '}
                <a href={`/example?service=${PRODUCT_TO_SERVICE[product] || 'natal'}`} style={{ color: 'var(--gold)' }}>
                  Посмотреть пример разбора
                </a>
              </p>
            </>
          )}

          {step === 1 && (
            <>
              <h1 className="display-lg" style={{ marginBottom: '16px' }}>
                Для <span className="italic gold">кого</span> разбор?
              </h1>
              <p style={{ color: 'var(--ink-secondary)', fontSize: '17px', marginBottom: '32px', maxWidth: '520px' }}>
                {giftBlind
                  ? 'Подарок оформляется на другого человека — данные рождения он укажет сам.'
                  : product === 'compat'
                  ? 'Выбери двух из сохранённых — или оставь как есть и заполни данные вручную. Данные обоих можно отредактировать на следующем шаге.'
                  : 'Выбери из сохранённых или добавь нового человека.'}
              </p>

              {/* Себе или в подарок — решает, что вообще спрашивать дальше.
                  К подписке не применимо: она привязана к аккаунту. К набору
                  тоже: у подарка своя ссылка и свой путь на КАЖДЫЙ разбор, и
                  «подарить два сразу» — это отдельный продукт, а не галочка. */}
              {!isSub && !bundle && (
              <div className="card" style={{ padding: '24px', marginBottom: '28px', background: 'var(--bg-raised)' }}>
                <div className="label" style={{ marginBottom: '16px' }}>Кому достанется разбор</div>
                <div className="rgrid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px' }}>
                  {[
                    { id: false, title: 'Себе', sub: 'Разбор придёт на мою почту' },
                    { id: true,  title: 'В подарок', sub: 'Разбор получит другой человек' },
                  ].map(o => (
                    <button key={String(o.id)} onClick={() => setIsGift(o.id)} style={{
                      textAlign: 'left',
                      background: isGift === o.id ? 'var(--bg-elevated)' : 'var(--bg-base)',
                      border: isGift === o.id ? '1.5px solid var(--gold)' : '1px solid var(--line)',
                      borderRadius: '12px', padding: '16px 18px', cursor: 'pointer', transition: 'all 200ms',
                    }}>
                      <div style={{ fontSize: '15px', marginBottom: '4px' }}>{o.title}</div>
                      <div className="mono muted" style={{ fontSize: '10.5px' }}>{o.sub}</div>
                    </button>
                  ))}
                </div>

                {isGift && (
                  <div style={{ marginTop: '20px' }}>
                    <div className="label" style={{ marginBottom: '12px' }}>Данные рождения получателя</div>
                    <div className="col gap-3">
                      {[
                        { id: true,  title: 'Пусть заполнит сам', sub: 'Пришлём ему ссылку — точное время рождения знает только он' },
                        { id: false, title: 'Я их знаю', sub: 'Введу дату, время и место сам(а) — разбор придёт готовым' },
                      ].map(o => (
                        <label key={String(o.id)} className="card" style={{
                          cursor: product === 'compat' && o.id ? 'not-allowed' : 'pointer',
                          opacity: product === 'compat' && o.id ? 0.45 : 1,
                          padding: '14px 18px',
                          background: giftNeedsData === o.id ? 'var(--bg-elevated)' : 'var(--bg-base)',
                          borderColor: giftNeedsData === o.id ? 'var(--gold)' : 'var(--line)',
                          display: 'flex', alignItems: 'flex-start', gap: '12px',
                        }}>
                          <input type="radio" name="giftdata" style={{ marginTop: 3 }}
                            disabled={product === 'compat' && o.id}
                            checked={giftNeedsData === o.id}
                            onChange={() => setGiftNeedsData(o.id)} />
                          <div>
                            <div style={{ fontSize: '14px' }}>{o.title}</div>
                            <div className="mono muted" style={{ fontSize: '10.5px', marginTop: '3px' }}>{o.sub}</div>
                          </div>
                        </label>
                      ))}
                    </div>
                    {product === 'compat' && (
                      <div className="mono muted" style={{ fontSize: '10.5px', marginTop: '12px', lineHeight: 1.6 }}>
                        Для совместимости данные обоих людей вводит даритель — получателю пришлось бы заполнять и чужие.
                      </div>
                    )}
                  </div>
                )}
              </div>
              )}

              {giftBlind && (
                <div className="card" style={{ padding: '24px', background: 'var(--bg-raised)', borderColor: 'var(--gold-dim)' }}>
                  <div style={{ fontSize: '15px', marginBottom: '8px' }}>Данные рождения спросим у получателя</div>
                  <div className="mono muted" style={{ fontSize: '11px', lineHeight: 1.6 }}>
                    На следующем шаге укажи, кому и куда отправить подарок. После оплаты получателю уйдёт письмо со ссылкой — он заполнит свои данные, и разбор соберётся в течение часа.
                  </div>
                </div>
              )}

              {/* Mode toggle (для совместимости скрыт — оба партнёра редактируются на шаге «Данные») */}
              {!giftBlind && product !== 'compat' && (
              <div className="row gap-2" style={{ marginBottom: '32px', padding: '4px', border: '1px solid var(--line)', borderRadius: '12px', background: 'var(--bg-raised)', width: 'fit-content' }}>
                {[
                  { id: 'saved', label: 'Сохранённые персоны' },
                  { id: 'new',   label: 'Новый человек' },
                ].map(m => (
                  <button key={m.id} onClick={() => setPersonMode(m.id)} style={{
                    padding: '10px 16px',
                    borderRadius: '8px',
                    border: 'none',
                    background: personMode === m.id ? 'var(--ink-primary)' : 'transparent',
                    color: personMode === m.id ? 'var(--bg-base)' : 'var(--ink-secondary)',
                    cursor: 'pointer',
                    fontSize: '13px',
                    fontFamily: 'var(--font-ui)',
                  }}>{m.label}</button>
                ))}
              </div>
              )}

              {!giftBlind && (personMode === 'saved' || product === 'compat') && (
                <>
                  {product === 'compat' && (
                    <div className="card" style={{ padding: '32px', marginBottom: '24px', background: 'var(--bg-raised)' }}>
                      <div className="row gap-6 row-stack" style={{ alignItems: 'center' }}>
                        <div style={{ flex: 1 }}>
                          <div className="label" style={{ marginBottom: '8px' }}>Партнёр 1</div>
                          <Select value={selectedPerson || ''} onChange={setSelectedPerson} options={personOptions} placeholder="Кто" />
                        </div>
                        <div className="rose" style={{ paddingTop: 20 }}><IconHeart size={28} /></div>
                        <div style={{ flex: 1 }}>
                          <div className="label" style={{ marginBottom: '8px' }}>Партнёр 2</div>
                          <Select value={secondPerson || ''} onChange={setSecondPerson} options={personOptions} placeholder="С кем" />
                        </div>
                      </div>
                    </div>
                  )}
                  <div className="rgrid-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '14px' }}>
                    {persons.length === 0 && !loading && (
                      <div className="muted" style={{ gridColumn: '1 / -1', padding: '20px', fontSize: '14px' }}>
                        У тебя пока нет сохранённых персон — добавь нового человека ниже.
                      </div>
                    )}
                    {persons.map(p => {
                      const selected = product === 'compat'
                        ? (p.id === selectedPerson || p.id === secondPerson)
                        : p.id === selectedPerson;
                      const isoDate = p.born_date || '';
                      const showDate = isoDate.length >= 10 ? `${isoDate.slice(8,10)}.${isoDate.slice(5,7)}.${isoDate.slice(0,4)}` : '—';
                      return (
                        <button key={p.id} onClick={() => product !== 'compat' && setSelectedPerson(p.id)} style={{
                          textAlign: 'left',
                          background: selected ? 'var(--bg-elevated)' : 'var(--bg-raised)',
                          border: selected ? '1.5px solid var(--gold)' : '1px solid var(--line)',
                          borderRadius: '14px',
                          padding: '20px',
                          cursor: 'pointer',
                          transition: 'all 200ms',
                          position: 'relative',
                          overflow: 'hidden',
                          '--stars-opacity': selected ? '0.5' : '0.28',
                        }}>
                          {/* Карточка вдвое ниже продуктовой — звёзд соответственно меньше. */}
                          <CardStars seed={p.id} count={8} />
                          <div style={{ position: 'relative' }}>
                            <div className="row gap-3" style={{ alignItems: 'center', marginBottom: '12px' }}>
                              <div style={{ width: 40, height: 40, borderRadius: '50%', border: '1px solid var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--gold)' }}>
                                <IconUser size={18} />
                              </div>
                              <div>
                                <div style={{ fontSize: '15px' }}>{p.name}</div>
                                {p.relation && <div className="mono muted" style={{ fontSize: '10px' }}>{p.relation}</div>}
                              </div>
                            </div>
                            <div className="mono muted" style={{ fontSize: '11px' }}>{showDate}{p.place ? ` · ${p.place}` : ''}</div>
                          </div>
                        </button>
                      );
                    })}
                    {product !== 'compat' && (
                    <button onClick={() => setPersonMode('new')} style={{
                      border: '1.5px dashed var(--line)',
                      borderRadius: '14px',
                      background: 'transparent',
                      padding: '20px',
                      cursor: 'pointer',
                      color: 'var(--ink-muted)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px',
                      fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: '17px',
                    }}>
                      <IconPlus size={16} /> Новый
                    </button>
                    )}
                  </div>
                </>
              )}

              {!giftBlind && personMode === 'new' && product !== 'compat' && (
                <div className="card" style={{ padding: '32px', background: 'var(--bg-raised)' }}>
                  <div className="col gap-4">
                    <label className="field">
                      <span className="label">Имя</span>
                      <input className="input" placeholder="Как зовут?" value={form.name} onChange={e => setF('name', e.target.value)} />
                    </label>
                    <div className="row gap-4">
                      <div className="field" style={{ flex: 1 }}>
                        <span className="label">Дата рождения</span>
                        <DateField format="dot" value={form.dob} onChange={v => setF('dob', v)} />
                      </div>
                      <div className="field" style={{ flex: 1 }}>
                        <span className="label">Время — если знаешь</span>
                        <TimeField value={form.time} onChange={v => setF('time', v)} />
                      </div>
                    </div>
                    <label className="field">
                      <span className="label">Место рождения</span>
                      <input className="input" placeholder="Город, страна" value={form.place} onChange={e => setF('place', e.target.value)} />
                    </label>
                    <label className="field">
                      <span className="label">Пол</span>
                      <Select value={form.gender} onChange={v => setF('gender', v)} options={GENDER_OPTIONS} />
                      <span className="mono muted" style={{ fontSize: '11px', marginTop: '4px' }}>Не обязательно: пропустишь — определим род по имени. Укажи, если имя редкое или общее для обоих (Саша, Женя).</span>
                    </label>
                    <label className="row gap-3" style={{ alignItems: 'flex-start', marginTop: '12px', cursor: 'pointer' }}>
                      <input type="checkbox" checked={form.saveAsPerson} onChange={e => setF('saveAsPerson', e.target.checked)} style={{ marginTop: 4 }} />
                      <span style={{ fontSize: '13px', color: 'var(--ink-secondary)' }}>Сохранить в моих персонах — чтобы заказывать повторно</span>
                    </label>
                  </div>
                </div>
              )}
            </>
          )}

          {step === 2 && (
            <>
              <h1 className="display-lg" style={{ marginBottom: '16px' }}>
                {giftBlind ? <>Кому <span className="italic gold">подарок</span></> : <>Уточни <span className="italic gold">данные</span></>}
              </h1>
              <p style={{ color: 'var(--ink-secondary)', fontSize: '17px', marginBottom: '32px', maxWidth: '520px' }}>
                {giftBlind
                  ? (giftDelivery === 'link'
                    ? 'Ссылку покажем сразу после оплаты — передашь её сам. Данные рождения получатель заполнит по ней.'
                    : 'Укажи, куда отправить подарок. Данные рождения получатель заполнит сам по ссылке из письма.')
                  : 'Расчёт идёт от твоей минуты рождения, а не от знака, — поэтому время важно: по нему считаются дома (карьера, отношения). Не помнишь — оставь пустым, разбор соберётся и так. Обычно время указано в свидетельстве о рождении, а восстановить его можно запросом в ЗАГС или в роддом.'}
              </p>

              {isGift && renderGiftFields()}

              {giftBlind ? null : product === 'compat' ? (
              <>
              <div className="rgrid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '24px' }}>
                <div className="card" style={{ padding: '28px', background: 'var(--bg-raised)' }}>
                  <div className="label" style={{ marginBottom: '16px', color: 'var(--rose)' }}>Партнёр 1</div>
                  {renderBirthFields(form, setF)}
                </div>
                <div className="card" style={{ padding: '28px', background: 'var(--bg-raised)' }}>
                  <div className="label" style={{ marginBottom: '16px', color: 'var(--rose)' }}>Партнёр 2</div>
                  {renderBirthFields(form2, setF2)}
                </div>
              </div>
              <label className="row gap-3" style={{ alignItems: 'flex-start', marginTop: '20px', cursor: 'pointer' }}>
                <input type="checkbox" checked={partner2Consent} onChange={e => setPartner2Consent(e.target.checked)} style={{ marginTop: 4 }} />
                <span style={{ fontSize: '13px', color: 'var(--ink-secondary)' }}>
                  Подтверждаю, что вправе предоставить данные второго человека и уведомил(а) его об этом разборе. <span className="gold">Обязательно</span>
                </span>
              </label>
              </>
              ) : product === 'matrix' ? (
              <div className="rgrid" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: '32px' }}>
                <div className="card" style={{ padding: '32px', background: 'var(--bg-raised)' }}>
                  <div className="col gap-4">
                    <div className="field">
                      <span className="label">Дата рождения</span>
                      <DateField format="dot" value={form.dob} onChange={v => setF('dob', v)} />
                    </div>
                    <label className="field">
                      <span className="label">Пол</span>
                      <Select value={form.gender} onChange={v => setF('gender', v)} options={GENDER_OPTIONS} />
                      <span className="mono muted" style={{ fontSize: '11px', marginTop: '4px' }}>Не обязательно: пропустишь — определим род по имени. Укажи, если имя редкое или общее для обоих (Саша, Женя).</span>
                    </label>
                    <div className="card" style={{ background: 'var(--bg-base)', padding: '16px', borderColor: 'var(--gold-dim)' }}>
                      <div className="mono muted" style={{ fontSize: '11px', lineHeight: 1.5 }}>
                        Матрица судьбы считается по 22 арканам Таро только из <b>даты рождения</b>. Время и место не нужны.
                      </div>
                    </div>
                  </div>
                </div>

                {/* Превью октаграммы — гомогенно с натальной картой */}
                <div className="card" style={{ padding: '24px', background: 'var(--bg-raised)', position: 'relative', overflow: 'hidden' }}>
                  <div className="label" style={{ marginBottom: '20px' }}>Превью матрицы</div>
                  <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '20px' }}>
                    <MatrixOctagram size={260} arcana={previewArcana} />
                  </div>
                  <div className="col gap-2">
                    <div className="between" style={{ fontSize: '13px' }}>
                      <span className="muted">Главный аркан</span>
                      <span className="row gap-2" style={{ alignItems: 'center' }}>
                        {previewArcana && preview.center
                          ? <>{preview.center.arcanum} · {preview.center.name}</>
                          : <span className="mono muted">—</span>}
                      </span>
                    </div>
                    <div className="between" style={{ fontSize: '13px' }}>
                      <span className="muted">Точки судьбы</span>
                      <span>8 + центр</span>
                    </div>
                    <div className="between" style={{ fontSize: '13px' }}>
                      <span className="muted">Система</span>
                      <span>22 аркана Таро</span>
                    </div>
                  </div>
                </div>
              </div>
              ) : (
              <div className="rgrid" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: '32px' }}>
                <div className="card" style={{ padding: '32px', background: 'var(--bg-raised)' }}>
                  <div className="col gap-4">
                    <label className="field">
                      <span className="label">Имя</span>
                      <input className="input" value={form.name} onChange={e => setF('name', e.target.value)} placeholder="Как зовут?" />
                    </label>
                    <div className="row gap-4 row-stack">
                      <div className="field" style={{ flex: 1 }}>
                        <span className="label">Дата</span>
                        <DateField format="dot" value={form.dob} onChange={v => setF('dob', v)} />
                      </div>
                      <div className="field" style={{ flex: 1 }}>
                        <span className="label">Время</span>
                        <TimeField value={form.time} onChange={v => setF('time', v)} />
                      </div>
                    </div>
                    <label className="field">
                      <span className="label">Место рождения</span>
                      <PlaceField value={form.place} onChange={v => setF('place', v)} onPick={s => { setF('place', s.name); setF('placeLat', s.lat); setF('placeLng', s.lng); setF('placeTz', s.tz_name); }} />
                    </label>
                    <label className="field">
                      <span className="label">Пол</span>
                      <Select value={form.gender} onChange={v => setF('gender', v)} options={GENDER_OPTIONS} />
                      <span className="mono muted" style={{ fontSize: '11px', marginTop: '4px' }}>Не обязательно: пропустишь — определим род по имени. Укажи, если имя редкое или общее для обоих (Саша, Женя).</span>
                    </label>
                    {product === 'forecast' && (() => {
                      const ymd = (d) => `${String(d.getDate()).padStart(2, '0')}.${String(d.getMonth() + 1).padStart(2, '0')}.${d.getFullYear()}`;
                      const from = new Date();
                      const to = new Date(from); to.setFullYear(to.getFullYear() + 1);
                      return (
                        <div className="card" style={{ background: 'var(--bg-base)', padding: '16px', borderColor: 'var(--celest)' }}>
                          <div className="label" style={{ marginBottom: '4px' }}>Период прогноза</div>
                          <div style={{ fontSize: '14px' }}>Ближайшие 12 месяцев · {ymd(from)} — {ymd(to)}</div>
                        </div>
                      );
                    })()}
                    <div className="card" style={{ background: 'var(--bg-base)', padding: '16px', borderColor: 'var(--gold-dim)' }}>
                      <div className="row gap-3" style={{ alignItems: 'flex-start' }}>
                        <IconShield size={16} style={{ color: 'var(--gold)', marginTop: 2 }} />
                        <div>
                          <div style={{ fontSize: '13px', marginBottom: '4px' }}>Что мы рассчитаем с этими данными</div>
                          <div className="mono muted" style={{ fontSize: '11px', lineHeight: 1.5 }}>
                            Положения 10 планет, 12 домов, 28+ аспектов, лунные узлы, Хирон, Лилит — через Swiss Ephemeris.
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Live preview — позиции считаются по введённым данным */}
                <div className="card" style={{ padding: '24px', background: 'var(--bg-raised)', position: 'relative', overflow: 'hidden' }}>
                  <div className="label" style={{ marginBottom: '20px' }}>Превью карты</div>
                  <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '20px' }}>
                    {/* Посчитанное колесо не крутим: анимация уводила бы планеты
                        с их настоящих градусов. */}
                    <NatalChart size={260} animated={previewPlacements.length === 0}
                      {...(previewPlacements.length ? { placements: previewPlacements } : {})}
                      {...(chartPreview && chartPreview.houses ? { houses: chartPreview.houses } : {})} />
                  </div>
                  <div className="col gap-2">
                    {[
                      { label: 'Солнце', v: chartPreview && chartPreview.sun },
                      { label: 'Луна', v: chartPreview && chartPreview.moon },
                      { label: 'Асцендент', v: chartPreview && chartPreview.ascendant },
                    ].map(row => (
                      <div key={row.label} className="between" style={{ fontSize: '13px' }}>
                        <span className="muted">{row.label}</span>
                        {row.v ? (
                          <span className="row gap-2" style={{ alignItems: 'center' }}>
                            <ZodiacGlyph kind={row.v.key} size={14} /> {row.v.sign}
                            <span className="mono muted">{row.v.degree}°</span>
                          </span>
                        ) : (
                          <span className="mono muted">—</span>
                        )}
                      </div>
                    ))}
                    {/* Чего не хватает — говорим прямо: прочерк без объяснения
                        читается как поломка, а чинится он данными человека. */}
                    {!chartPreview && (
                      <div className="mono muted" style={{ fontSize: '11px', lineHeight: 1.5, marginTop: '4px' }}>
                        Позиции появятся, как только будет дата рождения.
                      </div>
                    )}
                    {chartPreview && !chartPreview.ascendant && (
                      <div className="mono muted" style={{ fontSize: '11px', lineHeight: 1.5, marginTop: '4px' }}>
                        Асцендент считается от минуты и места рождения — укажи их, и он появится.
                      </div>
                    )}
                  </div>
                </div>
              </div>
              )}

              {!giftBlind && (
                <div className="card" style={{ padding: '28px', background: 'var(--bg-raised)', marginTop: '24px' }}>
                  <div className="label" style={{ marginBottom: '8px' }}>Чтобы разбор попал в твою жизнь</div>
                  <p style={{ color: 'var(--ink-secondary)', fontSize: '14px', marginBottom: '20px', maxWidth: '560px' }}>
                    Карта показывает, как ты устроен. Эти вопросы — про то, где ты сейчас.
                    Можно пропустить: разбор соберётся и без них, просто будет говорить чуть более общо.
                  </p>
                  <div className="col gap-4">
                    <div className="rgrid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
                      <label className="field">
                        <span className="label">Чем занимаешься</span>
                        <input className="input" type="text" value={ctx.occupation} maxLength={120}
                          placeholder="дизайнер, врач, свой проект…"
                          onChange={e => setC('occupation', e.target.value)} />
                      </label>
                      <label className="field">
                        <span className="label">Отношения</span>
                        <Select value={ctx.relationship} onChange={v => setC('relationship', v)} options={RELATIONSHIP_OPTIONS} />
                      </label>
                    </div>
                    <label className="field">
                      <span className="label">О чём хочется узнать в первую очередь</span>
                      <input className="input" type="text" value={ctx.focus} maxLength={200}
                        placeholder="почему повторяется один и тот же сценарий в отношениях"
                        onChange={e => setC('focus', e.target.value)} />
                    </label>
                  </div>
                </div>
              )}
            </>
          )}

          {step === 3 && isSub && (
            <>
              <h1 className="display-lg" style={{ marginBottom: '16px' }}>
                <span className="italic gold">Подписка</span>
              </h1>
              <p style={{ color: 'var(--ink-secondary)', fontSize: '17px', marginBottom: '32px', maxWidth: '540px' }}>
                Каждое утро — прогноз по твоей натальной карте. В кабинете, на почте и в мессенджере: каналы выбираешь сам.
              </p>

              <div className="card" style={{ padding: '32px', maxWidth: '560px', background: 'var(--bg-raised)' }}>
                <div className="between" style={{ marginBottom: '20px', flexWrap: 'wrap', gap: '8px' }}>
                  <span style={{ fontSize: '15px' }}>Ежедневный прогноз</span>
                  <span className="display-md" style={{ fontSize: '32px' }}>
                    {subscriptionOffer().price_rub} ₽<span className="mono" style={{ fontSize: '13px' }}>/мес</span>
                  </span>
                </div>
                <div className="divider" style={{ marginBottom: '20px' }} />
                <DeliveryPicker tz={subTZ} hour={subHour} onTZ={setSubTZ} onHour={setSubHour} />
                <label className="row gap-3" style={{ alignItems: 'flex-start', cursor: 'pointer', marginBottom: '20px' }}>
                  <input type="checkbox" checked={subConsent} onChange={e => setSubConsent(e.target.checked)} style={{ marginTop: 4 }} />
                  <span style={{ fontSize: '13px', color: 'var(--ink-secondary)', lineHeight: 1.55 }}>
                    Первые {subscriptionOffer().trial_days} дней бесплатно, дальше {subscriptionOffer().price_rub} ₽ в месяц.
                    Согласен на регулярное списание. Отменить можно в один клик, в кабинете.
                  </span>
                </label>
                <button className="btn btn-gold full" style={{ width: '100%', justifyContent: 'center', padding: '14px', opacity: submitting ? 0.6 : 1 }}
                  disabled={submitting} onClick={submitSubscription}>
                  {submitting ? 'Оформляем…' : (user ? `Попробовать ${subscriptionOffer().trial_days} дней бесплатно` : 'Войти и оформить')}
                </button>
                {submitErr && (
                  <div style={{ marginTop: '12px', padding: '10px 14px', background: 'color-mix(in oklab, var(--rose) 12%, transparent)', border: '1px solid var(--rose)', borderRadius: '8px', fontSize: '13px', color: 'var(--rose)' }}>
                    {submitErr}
                  </div>
                )}
                <div className="mono muted" style={{ fontSize: '10.5px', lineHeight: 1.6, marginTop: '16px' }}>
                  Считаем по персоне, которую ты выбрал на прошлых шагах. Сменить её можно в кабинете.
                </div>
              </div>
            </>
          )}

          {step === 3 && !isSub && (
            <>
              <h1 className="display-lg" style={{ marginBottom: '32px' }}>
                <span className="italic gold">Оплата</span>
              </h1>

              <div className="rgrid" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: '32px', alignItems: 'flex-start' }}>
                <div className="card" style={{ padding: '32px', background: 'var(--bg-raised)' }}>
                  <div className="label" style={{ marginBottom: '20px' }}>Способ оплаты</div>
                  <div className="col gap-3">
                    {isUSDOrder ? (
                      // У долларового заказа способ один — карта через lava.top:
                      // СБП живёт только в рублях, и рисовать выбор из одного
                      // пункта значило бы имитировать решение, которого нет.
                      <div className="card" style={{
                        padding: '16px 20px',
                        background: 'var(--bg-elevated)',
                        borderColor: 'var(--gold)',
                        display: 'flex', alignItems: 'center', gap: '14px',
                      }}>
                        <input type="radio" name="pay" checked readOnly />
                        <div style={{ flex: 1 }}>
                          <div style={{ fontSize: '14px' }}>Банковская карта</div>
                          <div className="mono muted" style={{ fontSize: '11px' }}>Visa, Mastercard · оплата через lava.top</div>
                        </div>
                        <IconLock size={14} style={{ color: 'var(--gold)' }} />
                      </div>
                    ) : (
                    [
                      // Только то, что реально подключено у банка-эквайрера:
                      // выбранный способ уходит в Точку один, и предложить
                      // кошельки значило бы обещать форму, которой не будет.
                      { id: 'sbp', label: 'СБП', sub: 'По QR или из приложения банка', recommended: true },
                      { id: 'card', label: 'Банковская карта', sub: 'МИР, Visa, Mastercard' },
                    ].map((m) => {
                      const active = payMethod === m.id;
                      return (
                      <label key={m.id} className="card" style={{
                        cursor: 'pointer',
                        padding: '16px 20px',
                        background: active ? 'var(--bg-elevated)' : 'var(--bg-base)',
                        borderColor: active ? 'var(--gold)' : 'var(--line)',
                        display: 'flex', alignItems: 'center', gap: '14px',
                      }}>
                        <input type="radio" name="pay" checked={active} onChange={() => setPayMethod(m.id)} />
                        <div style={{ flex: 1 }}>
                          <div style={{ fontSize: '14px', display: 'flex', alignItems: 'center', gap: '8px' }}>
                            {m.label}
                            {m.recommended && <span className="mono" style={{ fontSize: '10px', color: 'var(--gold)', border: '1px solid var(--gold)', borderRadius: '4px', padding: '1px 6px' }}>рекомендуем</span>}
                          </div>
                          <div className="mono muted" style={{ fontSize: '11px' }}>{m.sub}</div>
                        </div>
                        {active && <IconLock size={14} style={{ color: 'var(--gold)' }} />}
                      </label>
                      );
                    })
                    )}
                  </div>

                  <div className="col gap-4" style={{ marginTop: '24px' }}>
                    <label className="field">
                      <span className="label">Email для PDF</span>
                      <input className="input" value={user?.email || ''} readOnly style={{ opacity: 0.75 }} />
                    </label>
                    <div className="mono muted" style={{ fontSize: '11px' }}>
                      PDF придёт на email, с которого ты вошла. Изменить — в кабинете.
                    </div>
                  </div>
                </div>

                {/* Summary */}
                <div className="card" style={{ padding: '28px', background: 'var(--bg-raised)', position: 'sticky', top: 24 }}>
                  <div className="label" style={{ marginBottom: '20px' }}>Заказ</div>
                  <div className="col gap-3" style={{ marginBottom: '20px' }}>
                    <div className="between">
                      <span style={{ fontSize: '14px' }}>{bundle ? bundle.title : PRODUCTS[product].name}</span>
                      <span className="mono">{bundle ? bundlePriceText(bundle) : servicePriceText(PRODUCTS[product].key, PRODUCTS[product].price)}</span>
                    </div>
                    {bundle && (
                      <div className="mono muted" style={{ fontSize: '11px', lineHeight: 1.6 }}>
                        {(bundle.items || []).map(it => it.title).join(' · ')} — одной оплатой,
                        поштучно {bundleBasePriceText(bundle)}
                      </div>
                    )}
                    {discountOf(product) && (
                      <div className="between" style={{ alignItems: 'baseline' }}>
                        <span className="mono muted" style={{ fontSize: '11px' }}>
                          {discountOf(product).expiresAt
                            ? `Скидка действует до ${new Date(discountOf(product).expiresAt).toLocaleDateString('ru-RU', { day: '2-digit', month: 'long' })}`
                            : discountOf(product).label}
                        </span>
                        <DiscountNote id={product} align="flex-end" />
                      </div>
                    )}
                    <div className="between muted" style={{ fontSize: '13px' }}>
                      <span>Для: {isGift
                        ? `${gift.name || 'получателя'} · ${giftDelivery === 'link' ? 'ссылкой' : (gift.email || 'email не указан')}`
                        : product === 'compat'
                        ? `${persons.find(p => p.id === selectedPerson)?.name || '—'} × ${persons.find(p => p.id === secondPerson)?.name || '—'}`
                        : (personMode === 'saved' && selectedPerson ? (persons.find(p => p.id === selectedPerson)?.name || 'персона') : (form.name || 'новая персона'))}</span>
                    </div>
                    {isGift && (
                      <div className="mono muted" style={{ fontSize: '10.5px', lineHeight: 1.6 }}>
                        {giftBlind
                          ? 'Подарок · получатель сам укажет данные рождения по ссылке из письма'
                          : 'Подарок · готовый разбор уйдёт получателю письмом'}
                      </div>
                    )}
                    {tip && (
                      <div className="between" style={{ paddingTop: '12px', borderTop: '1px solid var(--line-soft)' }}>
                        <span style={{ fontSize: '13px' }}>Аудио-комментарий астролога</span>
                        <button onClick={() => setTip(false)} className="mono" style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--ink-muted)', fontSize: '11px' }}>+ 990 ₽</button>
                      </div>
                    )}
                  </div>
                  <div className="divider" style={{ marginBottom: '16px' }} />
                  <div className="col gap-2" style={{ marginBottom: '16px' }}>
                    <div className="row gap-2">
                      <input
                        value={promo}
                        onChange={e => { setPromo(e.target.value); if (promoState) setPromoState(null); }}
                        onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); applyPromo(); } }}
                        placeholder="Промокод"
                        aria-label="Промокод"
                        style={{ flex: 1, minWidth: 0, padding: '10px 12px', borderRadius: '8px', border: '1px solid var(--line-soft)', background: 'transparent', color: 'inherit', fontSize: '14px', textTransform: 'uppercase' }} />
                      <button
                        onClick={applyPromo}
                        disabled={promoBusy || !promo.trim()}
                        className="mono"
                        style={{ padding: '10px 14px', borderRadius: '8px', border: '1px solid var(--line-soft)', background: 'transparent', color: 'inherit', fontSize: '12px', cursor: promo.trim() ? 'pointer' : 'default', opacity: promoBusy || !promo.trim() ? 0.5 : 1 }}>
                        {promoBusy ? '…' : 'Применить'}
                      </button>
                    </div>
                    {promoState && (
                      <div className="mono" style={{ fontSize: '11.5px', color: promoState.ok ? 'var(--gold)' : 'var(--ink-muted)' }}>
                        {promoState.ok
                          ? `${promoState.label || 'Промокод'} · −${promoState.percent}%`
                          : promoState.error}
                      </div>
                    )}
                  </div>
                  <div className="between" style={{ marginBottom: '24px' }}>
                    <span className="mono muted" style={{ fontSize: '12px' }}>К оплате</span>
                    <span className="display-md" style={{ fontSize: '32px' }}>
                      {orderPriceText()}
                    </span>
                  </div>
                  {!user && (
                    <div className="col gap-3" style={{ marginBottom: '16px' }}>
                      <label className="col gap-1">
                        <span className="mono muted" style={{ fontSize: '12px' }}>Email — на него придёт PDF-разбор</span>
                        <input type="email" value={guestEmail} onChange={e => setGuestEmail(e.target.value)} placeholder="you@example.com"
                          style={{ padding: '12px 14px', borderRadius: '8px', border: '1px solid var(--line-soft)', background: 'transparent', color: 'inherit', fontSize: '15px' }} />
                      </label>
                      <label className="row gap-2" style={{ alignItems: 'flex-start', fontSize: '12px', color: 'var(--ink-muted)', cursor: 'pointer' }}>
                        <input type="checkbox" checked={guestConsent} onChange={e => setGuestConsent(e.target.checked)} style={{ marginTop: '3px' }} />
                        <span>Мне есть 18 лет, данные верны. Согласен с <a href="/terms" target="_blank">офертой</a>, <a href="/privacy" target="_blank">политикой обработки персональных данных</a> и тарифами, и на обработку данных рождения (в т.ч. передачу ИИ-сервису для генерации разбора).</span>
                      </label>
                      <label className="row gap-2" style={{ alignItems: 'flex-start', fontSize: '12px', color: 'var(--ink-muted)', cursor: 'pointer' }}>
                        <input type="checkbox" checked={guestMarketing} onChange={e => setGuestMarketing(e.target.checked)} style={{ marginTop: '3px' }} />
                        <span>Хочу получать полезные материалы и предложения на email (необязательно).</span>
                      </label>
                    </div>
                  )}
                  <button
                    className="btn btn-gold full"
                    style={{ width: '100%', justifyContent: 'center', padding: '14px', opacity: submitting ? 0.6 : 1 }}
                    disabled={submitting}
                    onClick={submitOrder}
                  >
                    <IconLock size={14} /> {submitting
                      ? 'Создаём заказ…'
                      : orderIsFree()
                      ? 'Получить разбор'
                      : 'Оплатить'}
                  </button>
                  {submitErr && (
                    <div style={{ marginTop: '12px', padding: '10px 14px', background: 'color-mix(in oklab, var(--rose) 12%, transparent)', border: '1px solid var(--rose)', borderRadius: '8px', fontSize: '13px', color: 'var(--rose)' }}>
                      {submitErr}
                    </div>
                  )}
                  {/* Возражение «это же просто текст из нейросети» приходит ровно
                      здесь, на кнопке оплаты, — поэтому механика повторяется рядом
                      с ценой, а не остаётся на лендинге. */}
                  <p className="muted" style={{ fontSize: '11.5px', lineHeight: 1.55, marginTop: '16px', textAlign: 'center' }}>
                    Позиции планет берутся из эфемерид Swiss Ephemeris — с точностью до 0,01° на твою минуту рождения, а не по знаку Солнца. Разбор идёт по методике школы Левин/Подводный, и каждую главу потом перечитывает второй редактор и вычёркивает всё, что подошло бы любому.
                  </p>
                  <div className="row gap-3" style={{ alignItems: 'center', justifyContent: 'center', marginTop: '12px' }}>
                    <IconShield size={12} style={{ color: 'var(--ink-muted)' }} />
                    <span className="mono muted" style={{ fontSize: '11px' }}>152-ФЗ · возврат 7 дней</span>
                  </div>
                </div>
              </div>
            </>
          )}
        </div>

        {/* Navigation — липкая полоса у нижнего края: на длинных шагах (выбор
            продукта, форма данных) кнопка «Дальше» иначе уезжает под фолд и
            юзер не понимает, что делать. */}
        {step < 3 && (
          <div className="wizard-nav between">
            <button className="btn btn-ghost" onClick={prev} disabled={step === 0} style={{ opacity: step === 0 ? 0.4 : 1 }}>
              <IconArrowLeft size={14} /> Назад
            </button>
            <button className="btn btn-gold" onClick={next}>
              {step === 2 ? 'К оплате' : 'Дальше'} <IconArrowRight size={14} />
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { Wizard });