// natal-landing.jsx — посадочная страница «Натальная карта» (/natalnaya-karta).
//
// Отдельным адресом, а не якорем на главной: на «рассчитать натальную карту
// онлайн бесплатно» приходят из поиска и рекламы, и человеку нужна страница
// про то, что он искал, а не главная про сервис целиком.
//
// Переиспользует LandingNav / Footer / landingStyles из landing.jsx и карточку
// расчёта из free-calc.jsx (общая babel-область) — своя копия расчёта
// разошлась бы с продуктом при первой правке.
//
// Воронка та же: free-calc (/api/free/chart) → email-лид (/api/free/lead) →
// полный разбор (/order/new?product=natal → guest-checkout).

// Главы полного разбора. Названия — те же, что человек увидит в готовом
// разборе (см. chapterName в report-render.js): страница обещает ровно то, что
// придёт, и не расходится с продуктом, когда его правят.
const NL_CHAPTERS = [
  { n: 'I', t: 'Ядро личности', d: 'Из чего вы собраны и почему реагируете именно так' },
  { n: 'II', t: 'Любовь и отношения', d: 'Какой сценарий повторяется и в какой точке начинается' },
  { n: 'III', t: 'Карьера и реализация', d: 'Где ваши деньги совпадают с вашей энергией' },
  { n: 'IV', t: 'Предназначение', d: 'Куда всё это ведёт и что считать своим' },
  { n: 'V', t: 'Здоровье и энергия', d: 'Где вы себя тратите и чем восстанавливаетесь' },
  { n: 'VI', t: 'Ритуалы и журнал', d: 'Что делать с этим в понедельник утром' },
];

// Что даёт каждое поле формы. Стоит на странице, потому что «время рождения»
// человек либо не помнит, либо не понимает, зачем оно, — и уходит вводить
// приблизительное, а потом удивляется, что Асцендент не тот.
const NL_FIELDS = [
  { k: 'Дата', d: 'Солнце и Луна — характер и эмоциональная реакция', need: 'обязательно' },
  { k: 'Время', d: 'Асцендент и дома: как вас видят и куда ложится каждая сфера жизни', need: 'без него — карта без домов' },
  { k: 'Место', d: 'Координаты и часовой пояс: та же минута в разных городах даёт разную карту', need: 'без него — только знаки' },
];

const NatalLanding = () => {
  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: '470px', lineHeight: 1.55, marginBottom: '40px' }}>
            Солнце, Луна и Асцендент — сразу на экране, без регистрации. Позиции
            считаются по эфемеридам на минуту рождения, а не по знаку из
            гороскопа: разница между «всем Овнам сегодня» и вашей картой
            начинается именно здесь.
          </p>
          <div className="row gap-8" style={{ flexWrap: 'wrap' }}>
            {[
              { num: '10', unit: 'планет', label: 'в полном разборе' },
              { num: '12', unit: 'домов', label: 'сферы жизни' },
              { num: '6', 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' }}>
          <FreeChartCard />
        </div>
      </section>

      <section className="section" id="fields">
        <div className="col" style={{ gap: '8px', marginBottom: '40px', textAlign: 'center' }}>
          <div className="label">Что нужно для расчёта</div>
          <h2 className="display-md" style={{ fontSize: '34px' }}>Три поля — и каждое что-то добавляет</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '16px' }}>
          {NL_FIELDS.map(f => (
            <div key={f.k} className="card-glass" style={{ padding: '22px', borderRadius: '14px', position: 'relative', isolation: 'isolate' }}>
              <CardStars seed={`natal-field-${f.k}`} count={10} behind />
              <div style={{ fontFamily: 'var(--font-display)', fontSize: '20px', marginBottom: '8px' }}>{f.k}</div>
              <div style={{ fontSize: '14px', color: 'var(--ink-secondary)', lineHeight: 1.55, marginBottom: '10px' }}>{f.d}</div>
              <div className="mono gold" style={{ fontSize: '11px', letterSpacing: '0.05em' }}>{f.need}</div>
            </div>
          ))}
        </div>
        <p className="mono muted" style={{ fontSize: '11px', lineHeight: 1.7, marginTop: '20px', maxWidth: '620px' }}>
          Не помните времени — в свидетельстве о рождении оно есть, а если нет, оставьте
          поле пустым: карта соберётся без домов, и мы скажем об этом прямо, а не сделаем вид,
          что посчитали.
        </p>
      </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' }}>Шесть глав — и все про вашу жизнь, а не про планеты</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '16px' }}>
          {NL_CHAPTERS.map(c => (
            <div key={c.n} className="card-glass" style={{ padding: '20px', borderRadius: '14px', position: 'relative', isolation: 'isolate' }}>
              <CardStars seed={`natal-${c.n}`} count={10} behind />
              <div className="mono gold" style={{ fontSize: '12px', marginBottom: '8px' }}>{c.n}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: '19px', marginBottom: '6px' }}>{c.t}</div>
              <div className="mono muted" style={{ fontSize: '12px', lineHeight: 1.5 }}>{c.d}</div>
            </div>
          ))}
        </div>
        <div className="row gap-3" style={{ marginTop: '28px', flexWrap: 'wrap', justifyContent: 'center' }}>
          <a className="btn btn-gold" href="/order/new?product=natal" style={{ textDecoration: 'none' }}>
            Собрать свой разбор · {rubFmt(catalogPrice('natal', 1990))} ₽
          </a>
          <a className="btn btn-ghost" href="/example?service=natal" style={{ textDecoration: 'none' }}>
            Сначала посмотреть пример
          </a>
        </div>
        <p className="mono muted" style={{ fontSize: '11px', lineHeight: 1.7, marginTop: '18px', textAlign: 'center' }}>
          Объём зависит от карты: каких-то глав может не быть, а редкие конфигурации добавляют свои.
        </p>
      </section>

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

Object.assign(window, { NatalLanding });