/* /method — Метод синхронизации души и тела */

const Method = () => {
  const navy = '#1A2535';
  return (
    <main className="page">
      <Marquee on={window.__tweaks?.marquee !== false}/>
      <Nav current="method"/>

      {/* HERO */}
      <section className="section" style={{paddingTop: 40}}>
        <div className="tag">/метод</div>
        <h1 className="poster poster-xl" style={{marginTop: 24}}>
          ЧТО МЫ<br/>
          <span className="orange">ДЕЛАЕМ</span><br/>
          С ТОБОЙ.
        </h1>
        <div className="rule-top" style={{marginTop: 32, display:'grid', gridTemplateColumns:'1.3fr 1fr', gap: 40, alignItems:'start', paddingTop: 24}}>
          <p className="lead" style={{margin: 0}}>
            Метод синхронизации души и тела — то, что получилось, когда две практикующие женщины поняли, что каждая школа по&nbsp;отдельности <b className="orange">не держит результат</b>.
          </p>
          <div style={{fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.08em', color:'var(--cream-77)', lineHeight: 1.7}}>
            ГОДЫ СБОРКИ → 2010—2026<br/>
            ОСНОВА → МЕТОД ХЕЛ­ЛИН­ГЕ­РА<br/>
            + ВСЕ­ЛЕН­СКАЯ ТЕРАПИЯ ТАЛЬПИСА<br/>
            + КИНЕ­ЗИО­ЛО­ГИЯ<br/>
            + РЕ­ГРЕС­СИИ<br/>
            + ПСИ­ХО­ЛО­ГИЯ<br/>
            + ТОЧКА СИН­ХРО­НИ­ЗА­ЦИИ
          </div>
        </div>
      </section>

      {/* ПРИНЦИП */}
      <section className="section bg-deep">
        <div className="kicker-row">
          <div>
            <div className="tag">§ 01 — принцип</div>
            <h2 className="poster poster-md" style={{marginTop: 12}}>ТЕЛО<br/>НЕ ВРЁТ.</h2>
          </div>
          <div className="right">ГИПОТЕЗА /<br/>НА КОТОРОЙ ВСЁ ДЕРЖИТСЯ</div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap: 60, alignItems:'start'}} className="split">
          <div>
            <p style={{fontSize: 23, lineHeight: 1.4, margin:'0 0 24px', letterSpacing:'-0.01em'}}>
              Голова умеет врать — красиво, связно, убедительно.<br/>
              Тело — нет.
            </p>
            <p style={{fontSize: 14, lineHeight: 1.55, margin:'0 0 16px', color:'var(--cream-99)'}}>
              Когда мы задаём телу прямой вопрос — оно отвечает движением, дыханием, паузой, сопротивлением. Это и есть <b className="orange">настоящий ответ</b>, мимо которого голова прошла десятилетиями.
            </p>
            <p style={{fontSize: 14, lineHeight: 1.55, margin: 0, color:'var(--cream-99)'}}>
              Работа идёт не через разбор. Через контакт.
            </p>
          </div>
          <div className="ph" style={{height: 360, backgroundImage: "url('image/method-session-working.jpg')", backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat'}} role="img" aria-label="Рабочий момент сессии"></div>
        </div>
      </section>

      {/* 6 СЛОЁВ */}
      <section className="section">
        <div className="tag">§ 02 — из чего собрано</div>
        <h2 className="poster poster-md" style={{margin:'20px 0 40px'}}>
          ШЕСТЬ <span className="orange">СЛОЁВ.</span><br/>ОДИН МЕТОД.
        </h2>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))', gap: 0, borderTop:'2px solid var(--cream)'}} className="layers">
          {[
            ['01','МЕТОД ХЕЛ­ЛИН­ГЕ­РА','по Б. Хеллингеру','видим систему — род, семья, сцены, в которых ты оказываешься снова и снова. и место, которое ты занимаешь в этой системе.'],
            ['02','ВСЕ­ЛЕН­СКАЯ ТЕРАПИЯ','Леонида Тальписа','выходим за пределы личной биографии — к сценариям, которые не твои, а ты их несёшь.'],
            ['03','КИНЕ­ЗИО­ЛО­ГИЯ','мышечный тест','тело даёт ответы быстрее, чем голова — через микродвижения и мышечный отклик. это калибр, который не пропускает вранье.'],
            ['04','РЕ­ГРЕС­СИИ','глубокие слои памяти','работаем с тем, что не помним сознанием. родовая, ранние, иные слои — то, что хранится в теле без слов.'],
            ['05','ПСИ­ХО­ЛО­ГИЯ','клиническая база','диагностика, классификация, безопасность процесса. понимаем, где наш метод работает, а где нужен врач.'],
            ['06','ТОЧКА СИН­ХРО­НИ­ЗА­ЦИИ','ядро метода','место, где все слои собираются в результат. наш собственный термин — не «точка сборки», именно синхронизация.'],
          ].map(([n,t,sub,d], i) => (
            <div key={n} style={{
                padding:'32px 28px',
                borderRight: '1px solid var(--cream-33)',
                borderBottom: '1px solid var(--cream-33)',
              }}>
              <div style={{fontFamily:'var(--f-mono)', fontSize: 12, color:'var(--accent)', letterSpacing:'0.12em', marginBottom: 16}}>/{n}</div>
              <h3 className="poster poster-xs" style={{margin:'0 0 4px'}}>{t}</h3>
              <div style={{fontFamily:'var(--f-mono)', fontSize: 14, color:'var(--cream-77)', letterSpacing:'0.08em', marginBottom: 20, textTransform:'uppercase'}}>{sub}</div>
              <p style={{fontSize: 14, lineHeight: 1.5, margin: 0}}>{d}</p>
            </div>
          ))}
        </div>

        <div className="bg-orange" style={{marginTop: 0, padding:'36px var(--px)', display:'flex', alignItems:'center', gap: 24}}>
          <div className="poster poster-sm" style={{lineHeight: 0.8, margin: 0}} aria-hidden="true">+</div>
          <p style={{fontSize: 29, fontWeight: 700, margin: 0, lineHeight: 1.15, letterSpacing:'-0.015em', maxWidth: 900}}>
            Каждый слой по отдельности — рабочий. Вместе — дают то, чего по отдельности не дают: результат, который <i>не откатывается</i>.
          </p>
        </div>
      </section>

      {/* ПОЧЕМУ НЕ ОТКАТЫВАЕТСЯ */}
      <section className="section bg-deep">
        <div className="tag">§ 03 — почему не откатывается</div>
        <h2 className="poster poster-md" style={{margin:'20px 0 40px'}}>
          РЕЗУЛЬТАТ<br/><span className="orange">В ТЕЛЕ.</span><br/>НЕ В ТЕТРАДКЕ.
        </h2>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 0, border:'2px solid var(--cream)'}} className="contrast">
          <div style={{padding: 32, borderRight:'2px solid var(--cream)'}}>
            <div style={{fontFamily:'var(--f-mono)', fontSize: 14, color:'var(--cream-77)', letterSpacing:'0.12em', marginBottom: 14}}>КАК ОБЫЧНО</div>
            <h3 style={{fontFamily:'var(--f-display)', fontSize: 29, fontWeight: 900, margin:'0 0 16px', letterSpacing:'-0.01em', lineHeight: 1.1}}>
              ИНСАЙТ В ГОЛОВЕ —<br/>ТЕЛОМ НИКТО НЕ ЗАНИМАЛСЯ.
            </h3>
            <p style={{fontSize: 14, lineHeight: 1.5, margin: 0, color:'var(--cream-99)'}}>
              Поведение и состояние живут в теле. А тело никто не трогал. Через неделю всё возвращается на место.
            </p>
          </div>
          <div className="bg-orange" style={{padding: 32, color: navy}}>
            <div style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', marginBottom: 14}}>КАК У НАС</div>
            <h3 style={{fontFamily:'var(--f-display)', fontSize: 29, fontWeight: 900, margin:'0 0 16px', letterSpacing:'-0.01em', lineHeight: 1.1}}>
              СМЕСТИЛАСЬ В ТЕЛЕ —<br/>ТУДА НЕ ВЕРНУЛАСЬ.
            </h3>
            <p style={{fontSize: 14, lineHeight: 1.5, margin: 0}}>
              Работаем там, где живёт сценарий — в теле. Закрепляем движением, дыханием, контактом. Голова собирает смысл потом — сама.
            </p>
          </div>
        </div>
      </section>

      {/* ДОРОЖНАЯ КАРТА */}
      <section className="section">
        <div className="kicker-row">
          <div>
            <div className="tag">§ 04 — как проходит сессия</div>
            <h2 className="poster poster-md" style={{marginTop: 12}}>ДОРОЖНАЯ КАРТА.</h2>
          </div>
          <div className="right">07 ЭТАПОВ /<br/>ОТ ЗАПРОСА К РЕЗУЛЬТАТУ</div>
        </div>
        <div className="steps" style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(220px, 1fr))', gap: 0}}>
          {[
            ['01','ВВОДНЫЙ СОЗВОН','15 мин','Знакомимся, слушаем запрос, кинезиологический тест. Решаем — наш ли это случай.'],
            ['02','КАРТА','точка А','Рисуем дорожную карту: где ты сейчас, куда идём, какие слои подключаем под твой запрос.'],
            ['03','МЕТОД СДТ','глубина','Синхронизация души и тела. Видим систему — род, семью, сцены, где ты ходишь по кругу.'],
            ['04','ВСЕ­ЛЕН­СКАЯ ТЕРАПИЯ','контекст','Сценарии, которые не твои, а ты их несёшь. Выходим за пределы личной биографии.'],
            ['05','ТЕЛО','ядро','Закрепляем через тело — движение, дыхание, контакт. Чтобы результат не остался только в голове.'],
            ['06','СБОРКА','проверка','Собираем всё вместе. Проверяем, что встало. Что ещё держит.'],
            ['07','ФИНАЛ','итог','Закрепляем результат, проверяем сохранение изменений, подводим итоги. Что делаешь дальше — сама.'],
          ].map(([n,t,d,p], i) => (
            <div key={n} style={{
                padding: 28,
                borderTop:'2px solid var(--cream)',
                borderBottom:'2px solid var(--cream)',
                borderRight: '1px solid var(--cream-33)',
                minHeight: 240, display:'flex', flexDirection:'column',
              }}>
              <div style={{display:'flex', justifyContent:'space-between', marginBottom: 20}}>
                <span style={{fontFamily:'var(--f-display)', fontSize: 48, fontWeight: 900, color:'var(--accent)', lineHeight: 0.9, letterSpacing:'-0.03em'}}>{n}</span>
                <span style={{fontFamily:'var(--f-mono)', fontSize: 11, color:'var(--cream-77)', letterSpacing:'0.1em'}}>{d}</span>
              </div>
              <div style={{fontFamily:'var(--f-display)', fontSize: 15, fontWeight: 900, marginBottom: 12, letterSpacing:'-0.01em'}}>{t}</div>
              <p style={{fontSize: 14, lineHeight: 1.5, margin: 0, color:'var(--cream-99)'}}>{p}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ЧТО ЭТО НЕ */}
      <section className="section bg-deep">
        <div className="tag">§ 05 — границы метода</div>
        <h2 className="poster poster-md" style={{margin:'20px 0 40px'}}>
          ЭТО <span className="orange">НЕ</span>…
        </h2>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))', gap: 0}}>
          {[
            ['КОУЧИНГ','Никаких «визуализаций денежного потока».'],
            ['ПСИ­ХО­ТЕ­РА­ПИЯ','Мы не разбираем детство по винтикам.'],
            ['ЭЗОТЕРИКА','Без карт, свечей и лунных дней.'],
            ['ТРЕНИНГ','Никаких «12 шагов» и пакетных решений.'],
          ].map(([t,d],i)=>(
            <div key={i} style={{padding: 28, borderTop:'1px solid var(--cream-33)', borderLeft: i>0 ? '1px solid var(--cream-33)' : 'none'}}>
              <div style={{fontFamily:'var(--f-display)', fontSize: 29, fontWeight: 900, letterSpacing:'-0.015em', marginBottom: 10, color:'var(--accent)', lineHeight: 1.05, textAlign: 'left'}}>НЕ<br/>{t}</div>
              <p style={{fontSize: 15, margin: 0, lineHeight: 1.5, color:'var(--cream-99)'}}>{d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* FAQ */}
      <section className="section">
        <div className="kicker-row">
          <div>
            <div className="tag">§ 06 — частые вопросы</div>
            <h2 className="poster poster-sm" style={{marginTop: 12}}>ОТВЕЧАЕМ.</h2>
          </div>
          <div className="right">6 ВОПРОСОВ</div>
        </div>
        <div>
          {[
            ['Сколько сессий нужно?','Одной хватает, чтобы снять конкретный запрос. Глубокая перестройка — пакет от 3 до 6. Решаем после первой встречи, не раньше.'],
            ['Работает онлайн?','Да. Zoom / Telegram. Для расстановочной работы у нас свой формат, который не требует очного контакта. Лично — тоже возможно, по согласованию.'],
            ['А если я «не чувствую тело»?','Это не противопоказание. Наоборот — частый запрос. Начинаем с того, что есть, и расширяем контакт по ходу.'],
            ['Нужно ли «готовиться» к сессии?','Нет. Сформулировать один запрос — и всё. Всё остальное — на сессии.'],
            ['Что если после сессии «ничего не произошло»?','Бывает. Иногда всё встаёт в тело в течение 2—4 недель после. Поэтому у нас есть сборочный шаг и поддержка в чате в пакетах.'],
            ['Вы работаете с мужчинами?','Да, но преимущественно — женщины 35—55. Это не правило, это статистика.'],
          ].map(([q,a],i)=>(
            <details key={i} style={{borderTop:'1px solid var(--cream-33)', padding:'24px 0'}} open={i===0}>
              <summary style={{cursor:'pointer', listStyle:'none', display:'flex', justifyContent:'space-between', alignItems:'baseline', gap: 20}}>
                <span style={{fontFamily:'var(--f-display)', fontSize: 24, fontWeight: 800, letterSpacing:'-0.015em', lineHeight: 1.25}}>{q}</span>
                <span style={{color:'var(--accent)', fontSize: 28, fontWeight: 300}} aria-hidden="true">+</span>
              </summary>
              <p style={{fontSize: 15, lineHeight: 1.55, margin:'18px 0 0', color:'var(--cream-99)', maxWidth: 820}}>{a}</p>
            </details>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="bg-orange" style={{padding:'72px var(--px)', color: navy}}>
        <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 48, alignItems:'end'}} className="cta-split">
          <h2 className="poster poster-lg" style={{margin: 0}}>
            ПОНЯТНО?<br/>ЗАХОДИ.
          </h2>
          <div style={{display:'flex', flexDirection:'column', gap: 16, paddingBottom: 12}}>
            <a className="btn btn-lg" style={{background: navy, color:'var(--cream)'}} href="session.html">Записаться на сессию →</a>
            <a className="btn btn-lg" style={{background:'transparent', color: navy, border:'2px solid '+navy}} href="for-whom.html">Подходит ли мне</a>
          </div>
        </div>
      </section>

      <NextSteps
        title={<>ДАЛЬШЕ — <span className="orange">ПО ОЧЕРЕДИ.</span></>}
        items={[
          {label:'Для кого и не для кого', desc:'Честный фильтр. Может, не тебе — и это нормально.', href:'for-whom.html'},
          {label:'Кейсы клиентов', desc:'Восемь историй с цифрами и цитатами. Имена изменены.', href:'cases.html'},
          {label:'Записаться на сессию', desc:'Формат, цена, как записаться. Первый шаг.', href:'session.html', primary:true},
        ]}
      />

      <Footer/>
      <FloatingCTA/>
    </main>
  );
};

window.Method = Method;