// matrix-landing.jsx — отдельная страница «Матрица судьбы» в дизайн-системе Star Path.
// Переиспользует LandingNav / Footer / landingStyles из landing.jsx (общая babel-область).
// Воронка: free-calc по дате (/api/free/matrix) → email-лид (/api/free/lead) →
// CTA на полный разбор (/order/new?product=matrix → guest-checkout).

const mxMaskDate = (s) => {
  const d = (s || '').replace(/\D/g, '').slice(0, 8);
  const p = [d.slice(0, 2)];
  if (d.length >= 3) p.push(d.slice(2, 4));
  if (d.length >= 5) p.push(d.slice(4, 8));
  return p.filter(Boolean).join('.');
};

const MX_SECTIONS = [
  { n: '01', t: 'Ядро личности', d: 'Главный аркан и как тебя видят' },
  { n: '02', t: 'Предназначение', d: 'Вектор реализации и смысл пути' },
  { n: '03', t: 'Таланты', d: 'Врождённые сильные стороны' },
  { n: '04', t: 'Деньги', d: 'Денежный канал и реализация в деле' },
  { n: '05', t: 'Отношения', d: 'Как строишь близость и любовь' },
  { n: '06', t: 'Кармическая задача', d: 'Главный урок души' },
  { n: '07', t: 'Рекомендации', d: 'Конкретные практики по матрице' },
  { n: '08', t: 'Октаграмма', d: 'Все 22 аркана на твоей карте' },
];

const MatrixLanding = () => {
  const [dob, setDob] = React.useState('');
  const [result, setResult] = React.useState(null);
  const [calculating, setCalculating] = React.useState(false);
  const [err, setErr] = React.useState(null);
  const [email, setEmail] = React.useState('');
  const [leadConsent, setLeadConsent] = React.useState(false);
  const [leadSent, setLeadSent] = React.useState(false);

  const isoDob = () => {
    const m = (dob || '').match(/^(\d{1,2})[.\-/](\d{1,2})[.\-/](\d{4})$/);
    return m ? `${m[3]}-${m[2].padStart(2, '0')}-${m[1].padStart(2, '0')}` : '';
  };

  const calc = async () => {
    const iso = isoDob();
    if (!iso) { setErr('Введи дату в формате ДД.ММ.ГГГГ'); return; }
    setErr(null); setCalculating(true);
    try {
      const r = await fetch('/api/free/matrix', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ born_date: iso }),
      });
      const d = await r.json();
      if (!r.ok) throw new Error(d.error || 'Не удалось рассчитать');
      setResult(d);
    } catch (e) { setErr(e.message || 'Ошибка'); } finally { setCalculating(false); }
  };

  const sendLead = async () => {
    if (!email.includes('@')) { setErr('Укажи корректный email'); return; }
    if (!leadConsent) { setErr('Подтверди согласие с условиями'); return; }
    setErr(null);
    try {
      await fetch('/api/free/lead', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: email.trim(), kind: 'matrix', born_date: isoDob() }),
      });
    } catch (_) { /* best-effort */ }
    setLeadSent(true);
  };

  const goOrder = () => { window.location.href = '/order/new?product=matrix'; };

  const inputStyle = {
    padding: '14px 16px', borderRadius: '10px', border: '1px solid var(--line)',
    background: 'rgba(255,255,255,0.03)', color: 'var(--ink-primary)', fontSize: '17px',
    textAlign: 'center', letterSpacing: '0.04em', width: '100%',
  };

  // Карточка free-calc: либо форма, либо результат.
  const calcCard = (
    <div className="card-glass" style={{ padding: '28px', borderRadius: '18px', width: '100%', maxWidth: '420px' }}>
      {!result ? (
        <div className="col gap-4">
          <div className="label">Бесплатный расчёт</div>
          <input value={dob} onChange={e => setDob(mxMaskDate(e.target.value))}
            placeholder="ДД.ММ.ГГГГ" inputMode="numeric" style={inputStyle} />
          <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', opacity: calculating ? 0.6 : 1 }}
            disabled={calculating} onClick={calc}>
            {calculating ? 'Считаем…' : 'Рассчитать бесплатно'}
            {!calculating && <IconArrowRight size={16} />}
          </button>
          {err && <div className="mono" style={{ fontSize: '12px', color: 'var(--rose)' }}>{err}</div>}
          <div className="mono muted" style={{ fontSize: '11px', textAlign: 'center' }}>Без регистрации · результат сразу на экране</div>
        </div>
      ) : (
        <div className="col gap-4">
          <div className="col" style={{ gap: '6px', textAlign: 'center' }}>
            <div className="label">Твой главный аркан</div>
            <div className="display-xl gold" style={{ fontSize: '64px', lineHeight: 1 }}>{result.center?.arcanum}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: '22px' }}>{result.center?.name}</div>
          </div>
          <p className="muted" style={{ fontSize: '14px', lineHeight: 1.5, textAlign: 'center' }}>{result.teaser}</p>
          <div className="row" style={{ gap: '8px', flexWrap: 'wrap', justifyContent: 'center' }}>
            {(result.points || []).map(p => (
              <div key={p.code} style={{ width: '54px', textAlign: 'center', padding: '8px 4px', border: '1px solid var(--line-soft)', borderRadius: '10px' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: '20px', color: 'var(--gold)' }}>{p.arcanum}</div>
                <div className="mono muted" style={{ fontSize: '10px' }}>{p.code}</div>
              </div>
            ))}
          </div>
          <div className="col gap-3" style={{ borderTop: '1px solid var(--line-soft)', paddingTop: '20px' }}>
            {!leadSent && (
              <>
                <p style={{ fontSize: '14px', textAlign: 'center' }}>Хочешь полный разбор всех 9 точек — предназначение, деньги, отношения, карма?</p>
                <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="email — пришлём детали"
                  style={{ ...inputStyle, fontSize: '15px', letterSpacing: 0 }} />
                <label className="row gap-2" style={{ alignItems: 'flex-start', fontSize: '11px', color: 'var(--ink-muted)', cursor: 'pointer', textAlign: 'left' }}>
                  <input type="checkbox" checked={leadConsent} onChange={e => setLeadConsent(e.target.checked)} style={{ marginTop: '2px' }} />
                  <span>Мне есть 18 лет, согласен с <a href="/terms" target="_blank">офертой</a> и <a href="/privacy" target="_blank">политикой обработки персональных данных</a>.</span>
                </label>
                <button className="btn btn-ghost" style={{ width: '100%', justifyContent: 'center' }} onClick={sendLead}>
                  Получить детали на email
                </button>
              </>
            )}
            {leadSent && <div className="mono" style={{ fontSize: '12px', color: 'var(--sage)', textAlign: 'center' }}>Готово — детали придут на email ✓</div>}
            <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }} onClick={goOrder}>
              Полный разбор · {rubFmt(catalogPrice('matrix', 1490))} <IconArrowRight size={16} />
            </button>
          </div>
        </div>
      )}
    </div>
  );

  return (
    <div data-screen-label="Матрица судьбы">
      <LandingNav />

      <section className="hero-grid" style={landingStyles.hero}>
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'radial-gradient(ellipse 60% 50% at 78% 50%, var(--gold-glow), transparent 70%)' }} />

        <div className="hero-copy" style={{ position: 'relative', zIndex: 2, maxWidth: '640px' }}>
          <div className="label" style={{ marginBottom: '16px' }}>Матрица судьбы</div>
          <h1 className="display-xl" style={{ marginBottom: '28px', marginTop: '4px' }}>
            Рассчитай <span className="italic gold">матрицу судьбы</span><br />
            бесплатно — по <span className="italic">дате</span> рождения.
          </h1>
          <p style={{ fontSize: '19px', color: 'var(--ink-secondary)', maxWidth: '460px', lineHeight: 1.55, marginBottom: '40px' }}>
            Система самопознания на 22 арканах Таро. Без времени и места рождения — нужна только дата. Узнай свой главный аркан за минуту, а полный разбор раскроет предназначение, деньги и отношения.
          </p>
          <div className="row gap-8" style={{ flexWrap: 'wrap' }}>
            {[
              { num: '22', unit: 'аркана', label: 'на твоей карте' },
              { num: '8', unit: 'глав', label: 'в полном разборе' },
              { num: '1', unit: 'поле', label: 'нужна только дата' },
            ].map((s, i) => (
              <div key={i} className="col" style={{ gap: '4px' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: '3px' }}>
                  <span className="display-md" style={{ fontSize: '36px', color: 'var(--ink-primary)' }}>{s.num}</span>
                  <span className="mono" style={{ fontSize: '12px', color: 'var(--ink-muted)' }}>{s.unit}</span>
                </div>
                <span className="mono" style={{ fontSize: '11px', color: 'var(--ink-muted)', letterSpacing: '0.05em' }}>{s.label}</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{ position: 'relative', zIndex: 2, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          {calcCard}
        </div>
      </section>

      <section className="section" id="inside">
        <div className="col" style={{ gap: '8px', marginBottom: '40px', textAlign: 'center' }}>
          <div className="label">Что внутри разбора</div>
          <h2 className="display-md" style={{ fontSize: '34px' }}>8 глав о тебе по матрице судьбы</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '16px' }}>
          {MX_SECTIONS.map(s => (
            <div key={s.n} className="card-glass" style={{ padding: '20px', borderRadius: '14px' }}>
              <div className="mono gold" style={{ fontSize: '12px', marginBottom: '8px' }}>{s.n}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: '19px', marginBottom: '6px' }}>{s.t}</div>
              <div className="mono muted" style={{ fontSize: '12px', lineHeight: 1.5 }}>{s.d}</div>
            </div>
          ))}
        </div>
      </section>

      <Footer />
    </div>
  );
};

Object.assign(window, { MatrixLanding });