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

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 = () => {
  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' }}>
          <FreeCalcCard />
        </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', position: 'relative', isolation: 'isolate' }}>
              <CardStars seed={`matrix-${s.n}`} count={10} behind />
              <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 });