// landing.jsx — StarPath landing page

const landingStyles = {
  hero: {
    position: 'relative',
    minHeight: '92vh',
    padding: '40px 56px 80px',
    overflow: 'hidden',
    display: 'grid',
    gridTemplateColumns: '1.15fr 1fr',
    gap: '40px',
    alignItems: 'center',
  },
  heroBg: {
    position: 'absolute',
    right: '-180px',
    top: '50%',
    transform: 'translateY(-50%)',
    pointerEvents: 'none',
    opacity: 0.6,
  },
};

const HeroBackdrop = () => (
  <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}>
    {/* Radial vignette */}
    <div style={{
      position: 'absolute', inset: 0,
      background: 'radial-gradient(ellipse 60% 50% at 80% 50%, var(--gold-glow), transparent 70%)'
    }} />
    {/* Large background chart on the right */}
    <div style={{ position: 'absolute', right: '-260px', top: '-100px', opacity: 0.85 }}>
      <NatalChartBg size={1100} opacity={0.55} />
    </div>
  </div>
);

const Hero = () => (
  <section className="hero-grid" style={landingStyles.hero}>
    <HeroBackdrop />

    {/* Left column — copy */}
    <div className="hero-copy" style={{ position: 'relative', zIndex: 2, maxWidth: '640px' }}>
      {/* Хук уникального механизма: снимает главное возражение «это же гороскопы»
          раньше, чем человек успевает его сформулировать. */}
      <div className="eyebrow" style={{ marginBottom: '18px' }}>Правило 0,01°</div>

      <h1 className="display-xl" style={{ marginBottom: '32px', marginTop: '8px' }}>
        Почему всё<br/>
        <span className="italic gold">повторяется</span>?<br/>
        И что делать.
      </h1>

      <p style={{ fontSize: '19px', color: 'var(--ink-secondary)', maxWidth: '470px', lineHeight: 1.55, marginBottom: '40px' }}>
        Третий раз один и тот же финал в отношениях. Карьера, которая стоит третий год. Вопрос «со мной что-то не так» в два часа ночи. Разбор показывает механику: в какой точке всё каждый раз сворачивает не туда — и что с этим делать. Стоит как один сеанс у психолога.
      </p>

      <div className="row gap-3" style={{ marginBottom: '64px', flexWrap: 'wrap' }}>
        <button className="btn btn-primary" onClick={() => window.__nav?.('wizard')}>
          Получить разбор · {catalogPriceText('natal', 1990)}
          <IconArrowRight size={16} />
        </button>
        <button className="btn btn-ghost" onClick={() => window.open('/example', '_blank')}>
          Посмотреть пример разбора
          <IconArrowUpRight size={14} />
        </button>
      </div>

      {/* Trust strip */}
      <div className="row gap-8" style={{ flexWrap: 'wrap' }}>
        {[
          { num: '0,01', unit: '°', label: 'точность позиций планет' },
          { num: '<1', unit: 'часа', label: 'от данных до PDF' },
          { num: '7', 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>

    {/* Right column — natal chart */}
    <div style={{ position: 'relative', zIndex: 2, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
      <div className="hero-chart" style={{ position: 'relative' }}>
        <NatalChart size={520} />
        {/* Floating annotation */}
        <div className="card-glass" style={{
          position: 'absolute', top: '-10px', right: '-30px',
          padding: '12px 16px', maxWidth: '220px', borderRadius: '14px'
        }}>
          <div className="label" style={{ marginBottom: '4px' }}>Текущий момент</div>
          <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: '20px' }}>
            Луна <span className="gold">в Скорпионе</span>
          </div>
          <div className="mono" style={{ fontSize: '11px', color: 'var(--ink-muted)', marginTop: '6px' }}>
            18.05.2026  ·  14:32 MSK
          </div>
        </div>
        <div className="card-glass" style={{
          position: 'absolute', bottom: '-10px', left: '-40px',
          padding: '12px 16px', maxWidth: '240px', borderRadius: '14px'
        }}>
          <div className="label" style={{ marginBottom: '4px' }}>Транзит</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: '17px', lineHeight: 1.3 }}>
            Юпитер ↔ Сатурн<br/>
            <span className="italic muted" style={{ fontSize: '14px' }}>оппозиция, 4° орб</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ——— Marquee strip with running zodiac glyphs ———
const ZodiacMarquee = () => (
  <div style={{ borderTop: '1px solid var(--line-soft)', borderBottom: '1px solid var(--line-soft)', overflow: 'hidden', padding: '20px 0' }}>
    <div className="row" style={{ gap: '64px', alignItems: 'center', whiteSpace: 'nowrap', animation: 'marquee 80s linear infinite', willChange: 'transform' }}>
      {[...ZODIAC_ORDER, ...ZODIAC_ORDER, ...ZODIAC_ORDER].map((z, i) => (
        <div key={i} className="row gap-3" style={{ alignItems: 'center', color: 'var(--ink-secondary)' }}>
          <ZodiacGlyph kind={z} size={22} />
          <span className="mono" style={{ fontSize: '12px', letterSpacing: '0.16em', textTransform: 'uppercase' }}>
            {{ aries: 'Овен', taurus: 'Телец', gemini: 'Близнецы', cancer: 'Рак', leo: 'Лев', virgo: 'Дева', libra: 'Весы', scorpio: 'Скорпион', sagittarius: 'Стрелец', capricorn: 'Козерог', aquarius: 'Водолей', pisces: 'Рыбы' }[z]}
          </span>
          <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--gold)' }} />
        </div>
      ))}
    </div>
  </div>
);

// ——— Как это работает: три шага и три правила ———
//
// Раньше здесь шли две секции подряд — «Механика: почему это не гороскоп» и
// «Как это работает» — и рассказывали одно и то же дважды: правило 0,01° и шаг
// «сначала считает астрономия», второй проход и шаг «второй проход и PDF». В
// шапке они тоже стояли рядом двумя пунктами, ведущими по сути в одно место.
//
// Осталась одна секция. Спина — три шага (что человек делает и что получает),
// на каждом висит правило, из-за которого шаг даёт не то, что даёт гороскоп по
// знаку. Третье правило — «правило второй недели» — про результат, а не про
// процесс, поэтому стоит плашкой под шагами, а не четвёртой колонкой в ряду.
//
// Секция не отрицает, что это астрология: мы сами отдаём бесплатный гороскоп
// по знаку на /goroskop, и «это не гороскоп» рядом с ним звучало как враньё.
// Сравнение идёт по объёму входных данных: у гороскопа в ленте на входе одно
// Солнце и двенадцатая часть страны в читателях, здесь — дата, время и место
// одного человека. Это же и ответ на «чем платное лучше бесплатного».
//
// Про языковую модель здесь не кричим. Она работает на шаге интерпретации и по
// уже посчитанным цифрам, а не считает карту, — сказать это один раз в FAQ
// («Это просто текст из нейросети?») честнее, чем повторять в каждом блоке:
// в продающем тексте это звучит не как гарантия точности, а как оправдание.
//
// id="how", а не "mechanism": на этот якорь ведут подвал и шапка сайта.
const HowItWorks = () => (
  <section className="section" id="how">
    <div className="between between-stack" style={{ marginBottom: '64px', alignItems: 'flex-end' }}>
      <div>
        <div className="eyebrow" style={{ marginBottom: '14px' }}>Как это работает · 03</div>
        <h2 className="display-lg" style={{ maxWidth: '760px' }}>
          Не по знаку Солнца, а <span className="italic gold">по всей твоей карте</span>
        </h2>
      </div>
      <div className="muted" style={{ maxWidth: '340px', fontSize: '15px' }}>
        Гороскоп по знаку знает про тебя одно: где стояло Солнце. Разбор считается на дату, время и место рождения — по всем планетам, домам и аспектам. Три шага, без опросников и шаманизма.
      </div>
    </div>

    <div className="rgrid howit-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      {[
        {
          n: '01',
          rule: 'Без опросников',
          title: 'Введи данные',
          desc: 'Имя, дата, время и место рождения — больше ничего. Время не помнишь — оставь пустым: разбор соберётся, просто без глав про дома. Точное время обычно стоит в свидетельстве о рождении.',
          ic: <IconClock size={20} />,
        },
        {
          n: '02',
          rule: 'Правило 0,01°',
          title: 'Сначала расчёт',
          desc: 'Положение планет на минуту твоего рождения берётся из эфемерид Swiss Ephemeris — с точностью до сотой доли градуса. Это тот же расчёт, которым пользуется астрономия. Дальше в работу идут конкретные градусы, дома и аспекты твоей карты, а не знак Солнца.',
          ic: <IconCpu size={20} />,
        },
        {
          n: '03',
          rule: 'Воду вычёркивают до тебя',
          title: 'Потом интерпретация',
          desc: 'Посчитанное разбирается по методике школы Левин/Подводный. Каждую готовую главу перечитывает второй редактор и убирает всё, что подошло бы любому человеку: абзац, который можно отправить и твоей маме, и твоей коллеге, до тебя не доходит. Разбор приходит на email меньше чем за час и остаётся в кабинете навсегда.',
          ic: <IconDocument size={20} />,
        },
      ].map((s, i) => (
        <div key={i} style={{
          padding: '40px 32px',
          borderRight: i < 2 ? '1px solid var(--line)' : 'none',
        }}>
          <div className="between" style={{ marginBottom: '48px' }}>
            <span className="display-md" style={{ fontSize: '52px', color: 'var(--gold)' }}>{s.n}</span>
            <div className="gold">{s.ic}</div>
          </div>
          <div className="mono" style={{ fontSize: '11px', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--gold)', marginBottom: '10px' }}>{s.rule}</div>
          <h3 className="display-md" style={{ fontSize: '28px', marginBottom: '16px' }}>{s.title}</h3>
          <p style={{ fontSize: '14.5px', color: 'var(--ink-secondary)', lineHeight: 1.6 }}>{s.desc}</p>
        </div>
      ))}
    </div>

    <div className="card how-payoff" style={{ marginTop: '16px', padding: '32px 28px', display: 'flex', gap: '22px', alignItems: 'flex-start', position: 'relative', isolation: 'isolate' }}>
      <CardStars seed="how-second-week" behind />
      <div className="gold" style={{ flexShrink: 0, lineHeight: 1 }}><IconCompass size={20} /></div>
      <div>
        <div className="mono" style={{ fontSize: '11px', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--gold)', marginBottom: '10px' }}>Правило второй недели · не совет, а схема</div>
        <p style={{ color: 'var(--ink-secondary)', fontSize: '14.5px', lineHeight: 1.6, margin: 0, maxWidth: '760px' }}>
          На выходе не «прислушайся к себе», а карта повторяющегося сценария: в какой точке он каждый раз начинается. Обычно это вторая неделя, а не седьмой месяц в два часа ночи.
        </p>
      </div>
    </div>
  </section>
);

// ——— Бесплатный расчёт ———
//
// Вход в воронку: посчитать можно до всякой регистрации и оплаты. Карточки те
// же, что на посадочных страницах (free-calc.jsx), — своя копия разошлась бы с
// продуктом при первой правке.
//
// Стоит на главной, а не только на отдельной странице: до этого /matrica жила
// без единой ссылки на неё, и бесплатный расчёт существовал только для тех,
// кто знает адрес наизусть.
const FreeCalc = () => (
  <section className="section" id="free">
    <div className="rgrid" style={{ display: 'grid', gridTemplateColumns: '1fr 420px', gap: '56px', alignItems: 'center' }}>
      <div>
        <div className="label" style={{ marginBottom: '14px' }}>Бесплатно, без регистрации</div>
        <h2 className="display-md" style={{ fontSize: '38px', marginBottom: '18px', lineHeight: 1.1 }}>
          Посмотри свою карту <span className="italic gold">прямо сейчас</span>
        </h2>
        <p style={{ fontSize: '17px', color: 'var(--ink-secondary)', lineHeight: 1.6, maxWidth: '460px', marginBottom: '20px' }}>
          Натальная карта считается по дате, времени и месту рождения — Солнце, Луна
          и Асцендент появятся сразу на экране. Не знаете времени — есть матрица
          судьбы, ей хватает одной даты.
        </p>
        <p className="mono muted" style={{ fontSize: '11px', lineHeight: 1.7, maxWidth: '420px' }}>
          Позиции считаются по эфемеридам, тем же, что и в платном разборе. Разница
          не в точности, а в глубине: расчёт показывает конфигурацию, разбор
          объясняет, что она означает в вашей жизни.{' '}
          <a href="/natalnaya-karta" style={{ color: 'var(--gold)' }}>Подробнее про натальную карту</a>
          {' · '}
          <a href="/matrica" style={{ color: 'var(--gold)' }}>про матрицу</a>
        </p>
      </div>
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <FreeCalcTabs />
      </div>
    </div>
  </section>
);

// ——— Products ———
const Products = () => {
  const items = [
    {
      title: catalogTitle('natal', 'Натальная карта'),
      service: 'natal',
      product: 'natal',
      tag: 'бестселлер',
      planets: ['sun', 'moon', 'mercury'],
      price: catalogPriceText('natal', 1990),
      desc: 'Почему ты выбираешь именно таких, в какой момент начинаешь исчезать в другом человеке и где твои деньги совпадают с твоей энергией.',
      pages: '6 глав · PDF и интерактивная карта',
      accent: 'gold',
    },
    {
      title: catalogTitle('year_ahead', 'Прогноз на год'),
      service: 'year_ahead',
      product: 'forecast',
      tag: 'прогноз',
      planets: ['jupiter', 'saturn'],
      price: catalogPriceText('year_ahead', 2990),
      desc: 'Когда давить, когда лучше ничего не начинать, а когда прыгать. Чтобы в ноябре, если накроет, ты знала: это месяц, а не ты.',
      pages: 'календарь года · помесячные окна',
      accent: 'celest',
    },
    {
      title: catalogTitle('compatibility', 'Совместимость'),
      service: 'compatibility',
      product: 'compat',
      tag: 'двое',
      planets: ['venus', 'mars'],
      price: catalogPriceText('compatibility', 2490),
      desc: 'Мой ли это человек — или мы просто ссоримся по одному и тому же кругу. Где вам легко, а где будет больно и почему.',
      pages: 'синастрия двоих · от притяжения до конфликтов',
      accent: 'rose',
    },
    {
      // Подписка, а не разовый разбор. До этого здесь стоял «Индивидуальный
      // гороскоп» за 199 ₽ — недельный forecast_week, которого нет ни в
      // каталоге (/api/catalog его не отдаёт, цена бралась из фолбэка), ни в
      // карточках визарда. Человек читал «на каждый день · 199 ₽», кликал и
      // попадал на экран, где ежедневное стоит 299 ₽ в месяц.
      title: 'Ежедневный прогноз',
      product: 'daily',
      tag: 'подписка',
      planets: ['moon', 'sun'],
      price: rubFmt(subscriptionOffer().price_rub) + '/мес',
      desc: 'Каждое утро — короткое сообщение про твой день по твоей карте, а не «всем Овнам сегодня».',
      pages: `первые ${subscriptionOffer().trial_days} дней бесплатно · отменить в один клик`,
      accent: 'sage',
    },
  ];
  return (
    <section className="section" id="catalog">
      <div className="between between-stack" style={{ marginBottom: '64px', alignItems: 'flex-end' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: '14px' }}>Каталог · 04</div>
          <h2 className="display-lg" style={{ maxWidth: '720px' }}>
            Выбери, <span className="italic gold">что важно</span> сейчас
          </h2>
        </div>
        <div className="muted" style={{ maxWidth: '320px', fontSize: '15px' }}>
          Три разбора под три разных вопроса и подписка на каждый день. Всё считается по одной и той же карте — твоей.
        </div>
      </div>

      <div className="rgrid-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '16px' }}>
        {items.map((p, i) => (
          <div key={i} className="card" style={{
            position: 'relative',
            isolation: 'isolate',
            padding: '32px 28px 28px',
            minHeight: '440px',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            overflow: 'hidden',
          }}>
            {/* Карточки каталога вдвое выше карточек механики — звёзд на них
                больше, иначе та же дюжина на большей площади читается как
                случайно забытые точки. */}
            <CardStars seed={`catalog-${p.product}`} count={20} behind />
            {/* corner ornament */}
            <div style={{ position: 'absolute', top: -40, right: -40, opacity: 0.35 }}>
              <svg width="220" height="220" viewBox="0 0 220 220" style={{ pointerEvents: 'none' }}>
                <circle cx="110" cy="110" r="80" fill="none" stroke="var(--line)" strokeDasharray="2 4" />
                <circle cx="110" cy="110" r="60" fill="none" stroke="var(--line)" />
                <circle cx="110" cy="110" r="40" fill="none" stroke="var(--line)" strokeDasharray="1 3" />
              </svg>
            </div>
            <div style={{ position: 'relative', zIndex: 1 }}>
              <div className="between" style={{ marginBottom: '32px' }}>
                <span className="chip" style={{
                  color: `var(--${p.accent})`,
                  borderColor: `color-mix(in oklab, var(--${p.accent}) 50%, transparent)`,
                  background: `color-mix(in oklab, var(--${p.accent}) 10%, transparent)`,
                }}>{p.tag}</span>
                <span className="mono muted" style={{ fontSize: '11px' }}>0{i + 1}</span>
              </div>

              <div className="row gap-3" style={{ marginBottom: '20px' }}>
                {p.planets.map((pl, j) => (
                  <div key={j} style={{
                    width: 36, height: 36, borderRadius: '50%',
                    border: '1px solid var(--line)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: `var(--${p.accent})`,
                  }}>
                    <PlanetGlyph kind={pl} size={20} />
                  </div>
                ))}
              </div>

              <h3 className="display-md" style={{ fontSize: '36px', marginBottom: '16px' }}>
                {p.title}
              </h3>
              <p style={{ color: 'var(--ink-secondary)', fontSize: '14.5px', lineHeight: 1.55, marginBottom: '24px' }}>
                {p.desc}
              </p>
            </div>

            <div>
              <div className="between" style={{ marginBottom: '20px' }}>
                <span className="mono muted" style={{ fontSize: '11px' }}>{p.pages}</span>
                <span className="display-md" style={{ fontSize: '28px' }}>{p.price}</span>
              </div>
              {/* Выбор доезжает до визарда: без ?product= он открывался на
                  натальной карте, что бы человек ни нажал на главной. */}
              <button className="btn btn-ghost full" style={{ justifyContent: 'space-between', width: '100%' }}
                onClick={() => { window.location.href = '/order/new' + (p.product ? '?product=' + p.product : ''); }}>
                Выбрать <IconArrowRight size={14} />
              </button>
              {/* Пример этого продукта, а не «пример вообще»: раньше единственная
                  ссылка вела на натальную карту, и выбирающий матрицу изучал
                  чужой товар. */}
              {p.service && catalogHasExample(p.service) && (
                <a className="mono" href={`/example?service=${p.service}`} target="_blank" rel="noopener"
                   style={{ display: 'block', marginTop: '12px', textAlign: 'center', fontSize: '11px',
                            letterSpacing: '0.08em', textTransform: 'uppercase',
                            color: 'var(--ink-muted)', textDecoration: 'none' }}>
                  Посмотреть пример
                </a>
              )}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

// ——— Sample chapter preview ———
const SampleChapter = () => (
  <section className="section" id="sample">
    <div className="rgrid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: '64px', alignItems: 'center' }}>
      <div>
        <div className="eyebrow" style={{ marginBottom: '14px' }}>Что внутри PDF · 05</div>
        <h2 className="display-lg" style={{ marginBottom: '32px' }}>
          Шесть вопросов,<br/>которые ты <span className="italic gold">уже себе</span> задавала.
        </h2>
        <p style={{ fontSize: '17px', color: 'var(--ink-secondary)', maxWidth: '440px', marginBottom: '40px' }}>
          Не магия и не «звёзды велят». Каждая глава берёт один твой вопрос и отвечает на него через твою карту — по-русски, с конкретикой, без гороскопной воды.
        </p>

        <div className="col gap-4">
          {[
            { ic: <IconSun size={18} />,   title: 'Со мной что-то не так или это нормально', sub: 'Солнце, Луна, асцендент' },
            { ic: <IconHeart size={18} />, title: 'Почему я снова выбираю таких',            sub: 'Венера, Марс, 7 дом' },
            { ic: <IconTrend size={18} />, title: 'Почему дохожу до финала и не прохожу',    sub: 'МС, Сатурн, 10 дом' },
            { ic: <IconCompass size={18} />, title: 'Куда мне на самом деле идти',             sub: 'Лунные узлы, 12 дом' },
            { ic: <IconBolt size={18} />,  title: 'Почему меня выключает к четвергу',        sub: 'Марс, 6 дом, Хирон' },
            { ic: <IconJournal size={18} />, title: 'Что с этим делать в понедельник утром',   sub: 'Практики и journal-вопросы' },
          ].map((c, i) => (
            <div key={i} className="row gap-4" style={{ alignItems: 'center', paddingBottom: '14px', borderBottom: '1px solid var(--line-soft)' }}>
              <div className="gold" style={{ width: 22 }}>{c.ic}</div>
              <div className="col" style={{ flex: 1 }}>
                <span style={{ fontSize: '15px' }}>{c.title}</span>
              </div>
              <span className="mono muted" style={{ fontSize: '12px' }}>{c.sub}</span>
            </div>
          ))}
        </div>
      </div>

      {/* PDF Preview mockup */}
      <div style={{ position: 'relative' }}>
        <div className="card" style={{
          padding: '40px 36px',
          background: 'var(--bg-elevated)',
          borderRadius: '4px',
          aspectRatio: '0.75 / 1',
          maxWidth: '480px',
          margin: '0 auto',
          position: 'relative',
          boxShadow: '0 40px 100px -30px rgba(0,0,0,0.8)',
        }}>
          <div className="between" style={{ marginBottom: '32px' }}>
            <div className="row gap-2" style={{ alignItems: 'center' }}>
              <LogoMark size={18} />
              <span className="mono" style={{ fontSize: '11px', letterSpacing: '0.16em' }}>STAR PATH</span>
            </div>
            <span className="mono muted" style={{ fontSize: '10px' }}>Глава 1</span>
          </div>
          <div className="label" style={{ marginBottom: '8px' }}>Глава 1 · Ядро личности</div>
          <h3 className="display-md" style={{ fontSize: '28px', marginBottom: '24px', lineHeight: 1.1 }}>
            Солнце в <span className="italic gold">Раке</span>,<br/>Луна в <span className="italic">Скорпионе</span>
          </h3>
          <p style={{ fontSize: '13.5px', lineHeight: 1.65, color: 'var(--ink-secondary)', fontFamily: 'var(--font-display)', fontSize: '15.5px' }}>
            «В тебе с рождения живёт парадокс: мягкость снаружи (Рак), но глубокий, иногда тёмный внутренний мир (Скорпион). Это даёт тебе редкий дар — видеть людей насквозь, не теряя при этом доброты...»
          </p>
          <div style={{ marginTop: '24px', display: 'flex', gap: '8px' }}>
            <ZodiacGlyph kind="cancer" size={22} />
            <ZodiacGlyph kind="scorpio" size={22} />
          </div>
          <div style={{ position: 'absolute', bottom: '32px', left: '36px', right: '36px' }}>
            <div style={{ height: '2px', background: 'var(--gold)', width: '40%', marginBottom: '12px' }}/>
            <span className="mono muted" style={{ fontSize: '10px' }}>Пример из реального разбора · анонимизировано</span>
          </div>
        </div>
        {/* page peek behind */}
        <div style={{
          position: 'absolute', top: '20px', left: '20%', right: '20%', bottom: '-10px',
          background: 'var(--bg-raised)', borderRadius: '4px',
          border: '1px solid var(--line)',
          zIndex: -1, opacity: 0.4
        }} />
      </div>
    </div>
  </section>
);

// ——— Testimonials ———
//
// В секции только тексты клиентов из /api/reviews, прошедшие модерацию.
// Придуманных карточек здесь больше нет: под видом отзыва на продающей
// странице стоял текст, который никто нам не писал, — и он же оттеснял
// настоящий отзыв, пока их не набиралось три. Нет одобренных отзывов —
// секции нет вовсе: пустое место честнее выдуманного.


const Testimonials = () => {
  const [real, setReal] = React.useState([]);

  React.useEffect(() => {
    let alive = true;
    fetch('/api/reviews?limit=6', { credentials: 'same-origin' })
      .then(r => (r.ok ? r.json() : { reviews: [] }))
      .then(d => { if (alive) setReal((d && d.reviews) || []); })
      .catch(() => {});
    return () => { alive = false; };
  }, []);

  const items = real.slice(0, 3);
  // Секция существует ровно тогда, когда есть что показать.
  if (items.length === 0) return null;
  // Одна-две карточки в сетке на три колонки растянулись бы во всю ширину и
  // читались как недоделанная секция. Колонок ровно столько, сколько карточек.
  const cols = Math.min(items.length, 3);
  const gridMaxWidth = cols === 1 ? '560px' : cols === 2 ? '880px' : 'none';

  return (
    <section className="section" id="reviews">
      <div style={{ marginBottom: '56px' }}>
        <div className="eyebrow" style={{ marginBottom: '14px' }}>Отзывы · 06</div>
        <h2 className="display-lg">Что <span className="italic gold">говорят</span></h2>
      </div>

      <div className="rgrid" style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: '20px', maxWidth: gridMaxWidth, margin: '0 auto' }}>
        {items.map((t, i) => (
          <div key={i} className="card" style={{ padding: '32px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: '280px', position: 'relative', isolation: 'isolate' }}>
            {/* seed от текста, а не от индекса: секция подменяет затравочные
                отзывы настоящими, и по индексу узор бы не поменялся. */}
            <CardStars seed={(t.text || '').slice(0, 32)} behind />
            <p style={{ fontFamily: 'var(--font-display)', fontSize: '21px', lineHeight: 1.4, marginBottom: '24px' }}>
              <span className="gold" style={{ marginRight: '4px' }}>«</span>{t.text}<span className="gold" style={{ marginLeft: '4px' }}>»</span>
            </p>
            <div className="row gap-3" style={{ alignItems: 'center' }}>
              <div style={{
                width: 40, height: 40, borderRadius: '50%',
                border: '1px solid var(--gold)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'var(--gold)',
              }}>
                {/* Знак — только оформление; в пограничные сутки бэкенд его не
                    присылает, и тогда в кружке остаётся первая буква имени. */}
                {t.zodiac
                  ? <ZodiacGlyph kind={t.zodiac} size={20} />
                  : <span style={{ fontFamily: 'var(--font-display)', fontSize: 18 }}>{(t.name || '·').slice(0, 1)}</span>}
              </div>
              <div>
                <div style={{ fontSize: '14px' }}>{t.name}</div>
                {t.note && <div className="mono muted" style={{ fontSize: '11px' }}>{t.note}</div>}
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

// ——— FAQ ———
const FAQItem = ({ q, a }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderBottom: '1px solid var(--line)' }}>
      <button
        onClick={() => setOpen(!open)}
        style={{
          width: '100%', background: 'none', border: 'none', cursor: 'pointer',
          padding: '24px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          color: 'var(--ink-primary)', textAlign: 'left',
          fontFamily: 'var(--font-display)', fontSize: '22px',
        }}>
        <span>{q}</span>
        <span style={{ color: 'var(--gold)', transition: 'transform 200ms', transform: open ? 'rotate(45deg)' : 'rotate(0)' }}>
          <IconPlus size={18} />
        </span>
      </button>
      {open && (
        <div style={{ paddingBottom: '24px', color: 'var(--ink-secondary)', fontSize: '15px', lineHeight: 1.6, maxWidth: '680px' }}>
          {a}
        </div>
      )}
    </div>
  );
};

const FAQ = () => (
  <section className="section" id="faq">
    <div className="rgrid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: '80px', alignItems: 'flex-start' }}>
      <div className="faq-aside" style={{ position: 'sticky', top: '120px' }}>
        <div className="eyebrow" style={{ marginBottom: '14px' }}>Вопросы · 08</div>
        <h2 className="display-lg">Что <span className="italic gold">обычно</span> спрашивают</h2>
      </div>
      <div>
        <FAQItem q="А если я не верю в астрологию?" a="Верить и не нужно. Мы не предсказываем судьбу — объясняем механику: почему ты реагируешь так, а не иначе, и в какой точке сценарий каждый раз повторяется. Позиции планет считает астрономия, дальше это переводится на язык характера. Прочитаешь и скажешь «не про меня» — вернём деньги." />
        <FAQItem q="Мне напишут то, что подойдёт кому угодно?" a="Ровно от этого и стоит второй проход: готовую главу перечитывает второй редактор и вычёркивает всё, что можно было бы отправить твоей маме и твоей коллеге. Плюс расчёт идёт от минуты рождения, а не от знака: два человека одного знака получают разные тексты." />
        <FAQItem q="Это просто текст из нейросети?" a="Нет. Карта считается по эфемеридам Swiss Ephemeris — положение планет на твою минуту рождения с точностью до 0,01°, тот же стандарт, что в астрономических расчётах. Дальше посчитанное разбирается по методике школы Левин/Подводный, а каждую главу перечитывает второй редактор и вычёркивает всё, что подошло бы любому. Языковая модель работает только на этапе текста и только по готовым цифрам: придумать, где стояла твоя Венера, она не может — цифры приходят к ней извне." />
        <FAQItem q="Я уже платила психологу, и не помогло. Почему тут иначе?" a="Терапия работает вашим разговором: первые месяцы уходят на то, чтобы специалист вас узнал. Здесь наоборот — вы сразу получаете готовую версию себя на бумаге и решаете, что в ней правда. Это не замена терапии: если она вам подходит, разбор скорее ускорит её, чем отменит." />
        <FAQItem q="Прочитаю — и что дальше?" a="Последняя глава — не «прислушайся к себе», а конкретные вопросы и практики на ближайшие недели. Дальше можно подключить ежедневный прогноз по твоей карте: одно короткое сообщение утром про твой день, а не про всех Овнов." />
        <FAQItem q="А если там будет что-то плохое?" a="Приговоров не бывает: мы не пишем «ты никогда не выйдешь замуж» и вообще не предсказываем события. Сложные места разбираются как устройство, с которым можно договориться, и с объяснением, что с ними делать." />
        <FAQItem q="Что если не знаю точное время рождения?" a="Оставь поле пустым — мы возьмём полдень. Время влияет в основном на «дома» (карьера, отношения), а характер определяется датой и местом. Если хочется точности: время рождения обычно указано в свидетельстве о рождении, а восстановить его можно запросом в ЗАГС или в роддом." />
        <FAQItem q="Сколько ждать готовый разбор?" a="Обычно меньше часа: алгоритм пишет каждую главу отдельно и перепроверяет факты по карте, а это небыстро. Ждать у экрана не надо — PDF придёт на email и появится в личном кабинете сам." />
        <FAQItem q="1 990 ₽ — это дорого?" a="Час у астролога в Москве стоит 4 500 ₽ и остаётся аудиозаписью, которую переслушивают один раз. Год терапии — около 216 000 ₽. Разбор стоит как один сеанс, читается вечером и лежит в кабинете, чтобы вернуться к нему через полгода." />
        <FAQItem q="Можно ли вернуть деньги?" a="Да, в течение 7 дней — если разбор не зашёл или нашёл фактическую ошибку в позициях планет. Напиши на hello@star-path.ru." />
        <FAQItem q="Это AI пишет или живой астролог?" a="Алгоритм считает астрономические данные (Swiss Ephemeris — стандарт индустрии), AI-ассистент по методике школы Левин/Подводный пишет интерпретацию. Опционально можно докупить аудио-комментарий от живого астролога." />
        <FAQItem q="Безопасны ли мои данные?" a="Пароли хранятся в bcrypt-хеше, БД зашифрована. Для генерации текста дата, время и место рождения передаются ИИ-модели DeepSeek — это трансграничная передача (КНР), на неё мы берём отдельное согласие при регистрации. Для разбора совместимости передаются также имена двух людей. Email, пароль и IP не передаём. Аккаунт со всеми заказами удаляется в один клик, согласие можно отозвать. Соблюдаем 152-ФЗ." />
      </div>
    </div>
  </section>
);

// ——— Цена вопроса: якорь против терапии и часовой консультации ———
const PriceAnchor = () => (
  <section className="section" id="price">
    <div className="rgrid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: '64px', alignItems: 'center' }}>
      <div>
        <div className="eyebrow" style={{ marginBottom: '14px' }}>Цена вопроса · 07</div>
        <h2 className="display-lg" style={{ marginBottom: '24px' }}>
          Сколько стоит <span className="italic gold">тот же вопрос</span>
        </h2>
        <p style={{ fontSize: '16px', color: 'var(--ink-secondary)', maxWidth: '380px' }}>
          Всё это — способы ответить себе на одно и то же «почему у меня опять так». Цены средние по Москве.
        </p>
      </div>

      <div className="col" style={{ gap: '0' }}>
        {[
          { what: 'Год терапии', price: '≈ 216 000 ₽', note: 'первые три месяца уходят на «давайте познакомимся»' },
          { what: 'Час у астролога', price: '4 500 ₽', note: 'аудиозапись, которую переслушивают один раз' },
          { what: 'Курс «найди себя»', price: '30 000 ₽', note: '12 недель и 60 уроков, которые редко досматривают' },
          { what: 'Разбор Star Path', price: catalogPriceText('natal', 1990), note: 'читается за вечер, остаётся в кабинете навсегда', own: true },
        ].map((r, i) => (
          <div key={i} className="between between-stack" style={{
            padding: '20px 0',
            borderTop: i === 0 ? 'none' : '1px solid var(--line-soft)',
            alignItems: 'baseline',
            gap: '16px',
          }}>
            <div style={{ flex: 1 }}>
              <div style={{
                fontFamily: 'var(--font-display)',
                fontSize: '21px',
                color: r.own ? 'var(--gold)' : 'var(--ink-primary)',
                marginBottom: '4px',
              }}>{r.what}</div>
              <div className="mono muted" style={{ fontSize: '11px', letterSpacing: '0.04em' }}>{r.note}</div>
            </div>
            <div className="display-md" style={{
              fontSize: '26px',
              color: r.own ? 'var(--gold)' : 'var(--ink-muted)',
              textDecoration: r.own ? 'none' : 'line-through',
              textDecorationColor: 'var(--line)',
              whiteSpace: 'nowrap',
            }}>{r.price}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ——— CTA ———
const FinalCTA = () => (
  <section className="section-lg" style={{ position: 'relative', overflow: 'hidden', textAlign: 'center' }}>
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.6 }}>
      <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }}>
        <NatalChartBg size={900} opacity={0.45} />
      </div>
    </div>
    <div style={{ position: 'relative', zIndex: 2, maxWidth: '780px', margin: '0 auto' }}>
      <h2 className="display-xl" style={{ marginBottom: '32px' }}>
        Хватит гадать,<br/>что с тобой <span className="italic gold">не так</span>.
      </h2>
      <p style={{ fontSize: '18px', color: 'var(--ink-secondary)', marginBottom: '40px', maxWidth: '540px', margin: '0 auto 40px' }}>
        Ответы про характер, отношения и карьеру — в одном разборе. Остаётся в кабинете навсегда: в ноябре, когда снова накроет, его можно перечитать.
      </p>
      <button className="btn btn-gold" style={{ padding: '16px 28px', fontSize: '15px' }} onClick={() => window.__nav?.('wizard')}>
        Получить разбор за {catalogPriceText('natal', 1990)}
        <IconArrowRight size={16} />
      </button>
      <div className="mono" style={{ marginTop: '16px', fontSize: '11px', color: 'var(--ink-muted)', letterSpacing: '0.05em' }}>
        7 дней на возврат, если не узнаешь себя
      </div>
    </div>
  </section>
);

// ——— Footer ———
// Разметку не держим здесь: футер один на весь сайт и лежит в
// web/landing/partials/footer.html. Сервер подставляет его в <template id="site-footer">
// (см. spa.html), отсюда только вставляем — иначе лендинг и статические страницы
// снова разъедутся, как было до этого. Стили — /site-footer.css.
const Footer = () => {
  const html = React.useMemo(() => {
    const tpl = document.getElementById('site-footer');
    return tpl ? tpl.innerHTML : '';
  }, []);
  return <div className="site-footer-mount" dangerouslySetInnerHTML={{ __html: html }} />;
};

// ——— Общая шапка сайта ———
// Разметку не держим здесь: шапка одна на весь сайт и лежит в
// web/landing/partials/nav.html. Сервер подставляет её в <template id="site-nav">
// (см. spa.html), отсюда только вставляем и просим /site-nav.js заполнить
// правый блок — тем же кодом, что и на статических страницах.
//
// Лендинг ниже — единственное исключение: у него своя навигация с якорями
// секций, и на странице разбора эти якоря вели бы обратно на лендинг.
const SiteNav = ({ user }) => {
  const ref = React.useRef(null);
  const html = React.useMemo(() => {
    const tpl = document.getElementById('site-nav');
    return tpl ? tpl.innerHTML : '';
  }, []);
  React.useEffect(() => {
    if (!ref.current || !window.siteNav) return;
    // Пользователь известен странице (кабинет) — рисуем сразу, иначе шапка
    // спросит сама: свой запрос за /api/auth/me она кеширует.
    if (user !== undefined) window.siteNav.render(user, ref.current);
    else window.siteNav.ready().then((me) => {
      if (ref.current) window.siteNav.render(me, ref.current);
    });
  }, [user, html]);
  return <div ref={ref} className="site-nav-mount" dangerouslySetInnerHTML={{ __html: html }} />;
};

// ——— Top navbar лендинга (logo + section anchors + auth) ———
const LandingNav = () => {
  const [user, setUser] = React.useState(null);
  React.useEffect(() => {
    fetch('/api/auth/me', { credentials: 'same-origin' })
      .then(r => r.ok ? r.json() : null)
      .then(d => { if (d) setUser(d.user || d); })
      .catch(() => {});
  }, []);
  const navLinkStyle = {
    fontSize: '13px', color: 'var(--ink-secondary)', textDecoration: 'none',
    padding: '6px 4px', transition: 'color 160ms',
  };
  return (
    <header className="landing-nav" style={{
      position: 'sticky', top: 0, zIndex: 50,
      padding: '16px 56px',
      display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', gap: '40px',
      background: 'rgba(10, 8, 22, 0.72)',
      backdropFilter: 'blur(20px) saturate(160%)',
      WebkitBackdropFilter: 'blur(20px) saturate(160%)',
      borderBottom: '1px solid var(--line-soft)',
    }}>
      <a href="/" style={{ display: 'flex', alignItems: 'center', gap: '10px', textDecoration: 'none', color: 'inherit' }}>
        <span style={{ display: 'inline-flex', color: 'var(--gold)' }}><LogoMark size={22} /></span>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: '19px', letterSpacing: '0.01em' }}>Star Path</span>
      </a>
      <nav className="row gap-6 landing-nav-links" style={{ justifyContent: 'center', alignItems: 'center' }}>
        <a href="/#free"      style={navLinkStyle}>Бесплатный расчёт</a>
        {/* Гороскоп по знаку — своя страница, а не якорь: на неё приходят из
            поиска, и в шапке лендинга она нужна затем же, зачем матрица.
            Называется «Гороскоп дня», как и заголовок самой страницы: рядом
            стояли «Гороскоп» и «Не гороскоп», и меню противоречило само себе.
            Пункт «Механика» ушёл вместе с одноимённой секцией — она слилась с
            «Как это работает», и два пункта вели по смыслу в одно место. */}
        <a href="/goroskop"   style={navLinkStyle}>Гороскоп дня</a>
        <a href="/#catalog"   style={navLinkStyle}>Каталог</a>
        <a href="/#sample"    style={navLinkStyle}>Что внутри</a>
        <a href="/#how"       style={navLinkStyle}>Как это работает</a>
        <a href="/#faq"       style={navLinkStyle}>FAQ</a>
      </nav>
      <div className="row gap-3" style={{ alignItems: 'center', justifyContent: 'flex-end' }}>
        {user ? (
          <>
            <a href="/account" style={{ ...navLinkStyle, fontSize: '13px' }}>Кабинет</a>
            <a href="/order/new" className="btn btn-gold btn-sm" style={{ textDecoration: 'none' }}>
              <IconPlus size={14} /> Новый разбор
            </a>
          </>
        ) : (
          <>
            <a href="/login" style={{ ...navLinkStyle, fontSize: '13px' }}>Войти</a>
            <a href="/signup" className="btn btn-gold btn-sm" style={{ textDecoration: 'none' }}>Создать аккаунт</a>
          </>
        )}
      </div>
    </header>
  );
};

const Landing = () => (
  <div data-screen-label="01 Лендинг">
    <LandingNav />
    <Hero />
    <ZodiacMarquee />
    <FreeCalc />
    <HowItWorks />
    <Products />
    <SampleChapter />
    <Testimonials />
    <PriceAnchor />
    <FAQ />
    <FinalCTA />
    <Footer />
  </div>
);

// ——— 404 — страница не найдена (общий навбар + подвал + стили лендинга) ———
const NotFound = () => (
  <div data-screen-label="404">
    <SiteNav />
    <section style={{
      position: 'relative',
      minHeight: 'calc(100vh - 240px)',
      padding: '64px 56px 96px',
      overflow: 'hidden',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      textAlign: 'center',
    }}>
      {/* Faint orbital backdrop — тот же мотив, что и на лендинге */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse 55% 45% at 50% 45%, var(--gold-glow), transparent 70%)',
        }} />
        <div style={{ opacity: 0.5 }}>
          <NatalChartBg size={760} opacity={0.5} />
        </div>
      </div>

      <div style={{ position: 'relative', zIndex: 2, maxWidth: '560px' }}>
        <div className="label" style={{ marginBottom: '20px', color: 'var(--gold)' }}>Ошибка 404</div>
        <h1 className="display-xl" style={{ fontSize: 'clamp(96px, 22vw, 200px)', lineHeight: 0.95, marginBottom: '24px' }}>
          <span className="italic gold">404</span>
        </h1>
        <h2 className="display-md" style={{ fontSize: '32px', marginBottom: '16px' }}>
          Эта страница затерялась среди звёзд
        </h2>
        <p style={{ fontSize: '17px', color: 'var(--ink-secondary)', lineHeight: 1.55, marginBottom: '40px' }}>
          Возможно, ссылка устарела или в адресе опечатка. Вернитесь на главную или выберите разбор из каталога.
        </p>
        <div className="row gap-3" style={{ justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="btn btn-primary" onClick={() => window.__nav?.('landing')}>
            На главную
            <IconArrowRight size={16} />
          </button>
          <a href="/#catalog" className="btn btn-ghost" style={{ textDecoration: 'none' }}>
            Каталог разборов
          </a>
        </div>
      </div>
    </section>
    <Footer />
  </div>
);

Object.assign(window, { Landing, NotFound, SiteNav });