// 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' }}>
      <h1 className="display-xl" style={{ marginBottom: '32px', marginTop: '8px' }}>
        Узнай <span className="italic gold">себя</span><br/>
        за две минуты —<br/>
        в <span className="italic">пятидесяти</span><br/>
        страницах.
      </h1>

      <p style={{ fontSize: '19px', color: 'var(--ink-secondary)', maxWidth: '460px', 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')}>
          Получить разбор · {rubFmt(catalogPrice('natal', 1990))}
          <IconArrowRight size={16} />
        </button>
        <button className="btn btn-ghost" onClick={() => window.open('Sample PDF.html', '_blank')}>
          Посмотреть пример PDF
          <IconArrowUpRight size={14} />
        </button>
      </div>

      {/* Trust strip */}
      <div className="row gap-8" style={{ flexWrap: 'wrap' }}>
        {[
          { num: '2', unit: 'мин', label: 'от заказа до PDF' },
          { num: '50', unit: 'стр.', label: 'в одном разборе' },
          { 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>
);

// ——— Products ———
const Products = () => {
  const items = [
    {
      title: catalogTitle('natal', 'Натальная карта'),
      tag: 'бестселлер',
      planets: ['sun', 'moon', 'mercury'],
      price: rubFmt(catalogPrice('natal', 1990)),
      desc: 'Глубокий разбор личности: Солнце, Луна, асцендент. Любовь, карьера, предназначение, ритуалы.',
      pages: '50 страниц',
      accent: 'gold',
    },
    {
      title: catalogTitle('year_ahead', 'Прогноз на год'),
      tag: 'прогноз',
      planets: ['jupiter', 'saturn'],
      price: rubFmt(catalogPrice('year_ahead', 2990)),
      desc: 'Транзиты Юпитера, Сатурна, Урана. Окна возможностей помесячно.',
      pages: '38 страниц + календарь',
      accent: 'celest',
    },
    {
      title: catalogTitle('compatibility', 'Совместимость'),
      tag: 'двое',
      planets: ['venus', 'mars'],
      price: rubFmt(catalogPrice('compatibility', 2490)),
      desc: 'Синастрия двух карт: страсть, коммуникация, конфликты, потенциал отношений.',
      pages: '42 страницы',
      accent: 'rose',
    },
    {
      title: 'Индивидуальный гороскоп',
      tag: 'на каждый день',
      planets: ['moon', 'mercury'],
      price: 'от ' + rubFmt(catalogPrice('forecast_week', 199)),
      desc: 'Прогноз именно для тебя: транзиты на твою натальную карту. Неделя, месяц или год — выбери период.',
      pages: 'неделя · месяц · год',
      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' }}>Каталог · 03</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',
            padding: '32px 28px 28px',
            minHeight: '440px',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            overflow: 'hidden',
          }}>
            {/* 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>
              <button className="btn btn-ghost full" style={{ justifyContent: 'space-between', width: '100%' }} onClick={() => window.__nav?.('wizard')}>
                Выбрать <IconArrowRight size={14} />
              </button>
            </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 · 04</div>
        <h2 className="display-lg" style={{ marginBottom: '32px' }}>
          50 страниц <span className="italic gold">о тебе</span> —<br/>структурированно.
        </h2>
        <p style={{ fontSize: '17px', color: 'var(--ink-secondary)', maxWidth: '440px', marginBottom: '40px' }}>
          Не магия и не «звёзды велят». Структурированный взгляд через древнюю символическую систему — то, что психологи называют self-discovery.
        </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: 'Журнал, аффирмации' },
          ].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' }}>стр. 07 / 50</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>
);

// ——— How it works ———
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' }}>Как это работает · 05</div>
        <h2 className="display-lg">Три <span className="italic gold">шага</span></h2>
      </div>
      <span className="muted" style={{ maxWidth: '280px' }}>Без долгих опросников и шаманизма.</span>
    </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', title: 'Введи данные', desc: 'Имя, дата, время и место рождения. Время точно не знаешь — оставь пустым.', ic: <IconClock size={20} /> },
        { n: '02', title: 'Алгоритм считает карту', desc: 'Swiss Ephemeris рассчитывает планетарные позиции, AI пишет интерпретацию по методике школы Левин/Подводный.', ic: <IconCpu size={20} /> },
        { n: '03', title: 'PDF в кабинете', 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>
          <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>
  </section>
);

// ——— Testimonials ———
const Testimonials = () => (
  <section className="section">
    <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(3, 1fr)', gap: '20px' }}>
      {[
        { txt: 'После двух лет терапии — наконец-то почувствовала, что меня кто-то по-настоящему понял. Прочитала и расплакалась. В хорошем смысле.', name: 'Анна', role: 'дизайнер, 28', sign: 'cancer' },
        { txt: 'Купила натальную карту и совместимость с парнем. С первой узнала про свой темный месяц, со второй — почему мы ссоримся по одному и тому же.', name: 'Маша', role: 'маркетолог, 31', sign: 'taurus' },
        { txt: 'Скептически отнеслась. Описание характера — буквально я. Раздел "карьера" дал ответ на вопрос, который я мусолила год.', name: 'Катя', role: 'SMM, 26', sign: 'virgo' },
      ].map((t, i) => (
        <div key={i} className="card" style={{ padding: '32px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: '280px' }}>
          <p style={{ fontFamily: 'var(--font-display)', fontSize: '21px', lineHeight: 1.4, marginBottom: '24px' }}>
            <span className="gold" style={{ marginRight: '4px' }}>«</span>{t.txt}<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)',
            }}>
              <ZodiacGlyph kind={t.sign} size={20} />
            </div>
            <div>
              <div style={{ fontSize: '14px' }}>{t.name}</div>
              <div className="mono muted" style={{ fontSize: '11px' }}>{t.role}</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' }}>Вопросы · 07</div>
        <h2 className="display-lg">Что <span className="italic gold">обычно</span> спрашивают</h2>
      </div>
      <div>
        <FAQItem q="А если я не верю в астрологию?" a="Это нормально. Воспринимай разбор как структурированный взгляд на себя через древнюю символическую систему. Многие читатели узнают себя в тексте даже без веры в звёзды." />
        <FAQItem q="Что если не знаю точное время рождения?" a="Без проблем — оставь поле пустым, мы возьмём полдень. Точное время влияет в основном на «дома» (карьера/отношения) — общая личность определяется датой и местом рождения." />
        <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>
);

// ——— 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: '520px', margin: '0 auto 40px' }}>
        50 страниц о тебе — твоя личная инструкция. Сохранится в кабинете навсегда.
      </p>
      <button className="btn btn-gold" style={{ padding: '16px 28px', fontSize: '15px' }} onClick={() => window.__nav?.('wizard')}>
        Получить разбор за {rubFmt(catalogPrice('natal', 1990))}
        <IconArrowRight size={16} />
      </button>
    </div>
  </section>
);

// ——— Footer ———
const Footer = () => (
  <footer className="site-footer" style={{ padding: '64px 56px 40px', borderTop: '1px solid var(--line)' }}>
    <div className="footer-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: '40px', marginBottom: '32px' }}>
      {/* col 1 — brand */}
      <div>
        <div className="logo" style={{ marginBottom: '12px' }}>
          <span className="logo-mark gold"><LogoMark size={26} /></span>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: '20px' }}>Star Path</span>
        </div>
        <p className="mono muted" style={{ fontSize: '11px', lineHeight: 1.6 }}>
          Персональные астрологические разборы на основе натальной карты. Алгоритм + AI-интерпретация.
        </p>
      </div>
      {/* col 2 — продукт */}
      <div>
        <div className="label" style={{ marginBottom: '14px' }}>Продукт</div>
        <div className="col gap-2">
          <a href="/#catalog" className="mono" style={{ fontSize: '12px', color: 'var(--ink-secondary)', textDecoration: 'none' }}>Каталог разборов</a>
          <a href="/#sample"  className="mono" style={{ fontSize: '12px', color: 'var(--ink-secondary)', textDecoration: 'none' }}>Пример PDF</a>
          <a href="/#how"     className="mono" style={{ fontSize: '12px', color: 'var(--ink-secondary)', textDecoration: 'none' }}>Как это работает</a>
          <a href="/#faq"     className="mono" style={{ fontSize: '12px', color: 'var(--ink-secondary)', textDecoration: 'none' }}>Вопросы и ответы</a>
        </div>
      </div>
      {/* col 3 — правовая информация */}
      <div>
        <div className="label" style={{ marginBottom: '14px' }}>Документы</div>
        <div className="col gap-2">
          <a href="/privacy" className="mono" style={{ fontSize: '12px', color: 'var(--ink-secondary)', textDecoration: 'none' }}>Политика обработки персональных данных</a>
          <a href="/terms"   className="mono" style={{ fontSize: '12px', color: 'var(--ink-secondary)', textDecoration: 'none' }}>Публичная оферта</a>
          <a href="/cookies" className="mono" style={{ fontSize: '12px', color: 'var(--ink-secondary)', textDecoration: 'none' }}>Использование cookies</a>
          <a href="/requisites" className="mono" style={{ fontSize: '12px', color: 'var(--ink-secondary)', textDecoration: 'none' }}>Реквизиты и контакты</a>
        </div>
      </div>
      {/* col 4 — контакты */}
      <div>
        <div className="label" style={{ marginBottom: '14px' }}>Связаться</div>
        <div className="col gap-2">
          <a href="mailto:hello@star-path.ru" className="mono" style={{ fontSize: '12px', color: 'var(--ink-secondary)', textDecoration: 'none' }}>hello@star-path.ru</a>
          <a href="mailto:privacy@star-path.ru" className="mono" style={{ fontSize: '12px', color: 'var(--ink-secondary)', textDecoration: 'none' }}>privacy@star-path.ru — по ПДн</a>
          <span className="mono muted" style={{ fontSize: '11px' }}>Ответим в течение 1 рабочего дня</span>
        </div>
      </div>
    </div>

    {/* реквизиты ИП — из настроек сайта (/api/settings), не хардкод */}
    <div className="mono muted" style={{ fontSize: '11px', paddingTop: '24px', borderTop: '1px solid var(--line-soft)' }}>
      {setting('legal_entity', 'ИП')} · ИНН {setting('inn', '—')} · ОГРНИП {setting('ogrnip', '—')}
    </div>

    {/* bottom bar — bottom line с копирайтом и 152-ФЗ */}
    <div className="between" style={{ paddingTop: '16px', flexWrap: 'wrap', gap: '12px' }}>
      <span className="mono muted" style={{ fontSize: '11px' }}>© 2026 Star Path · Все права защищены</span>
      <span className="mono muted" style={{ fontSize: '11px' }}>
        Данные обрабатываются в соответствии с <a href="/privacy" style={{ color: 'var(--gold)', textDecoration: 'none' }}>152-ФЗ</a> и хранятся на серверах в РФ.
      </span>
    </div>
  </footer>
);

// ——— 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="/#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 />
    <Products />
    <SampleChapter />
    <HowItWorks />
    <Testimonials />
    <FAQ />
    <FinalCTA />
    <Footer />
  </div>
);

// ——— 404 — страница не найдена (общий навбар + подвал + стили лендинга) ———
const NotFound = () => (
  <div data-screen-label="404">
    <LandingNav />
    <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 });