/* /products/group — Терапевтическая группа */

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

      {/* HERO */}
      <section className="section" style={{
        paddingTop: 40,
        backgroundImage: "linear-gradient(180deg, rgba(16,24,42,0.72) 0%, rgba(16,24,42,0.86) 100%), url('image/group-hero.jpg')",
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat'
      }}>
        <div className="tag">/продукты · терапевтическая группа</div>
        <h1 className="poster poster-xl" style={{marginTop: 24}}>
            ГРУППА —<br/>
            <span className="orange">ПОЛЕ РАБОТАЕТ</span><br/>
            НА ВСЕХ.
          </h1>

        <div className="rule-top rule-bottom hero-stats" style={{marginTop: 32, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 24, padding:'32px 0'}}>
          {[
            ['ФОРМАТ','2—3 дня подряд'],
            ['УЧАСТНИКОВ','8—12'],
            ['ЦЕНА','от 48 000 ₽'],
            ['МЕСТО','онлайн / Москва / СПб'],
          ].map(([k,v])=>(
            <div key={k}>
              <div style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', color:'var(--cream-77)', marginBottom: 10}}>/{k.toLowerCase()}</div>
              <div style={{fontFamily:'var(--f-display)', fontSize: 26, fontWeight: 900, letterSpacing:'-0.015em', lineHeight: 1.1}}>{v}</div>
            </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}}>ГРУППА — <span className="orange">УСИЛИТЕЛЬ.</span></h2>
          </div>
          <div className="right">НЕ ДЕШЁВЫЙ ЗАМЕНИТЕЛЬ<br/>СЕССИИ. ДРУГОЙ ИНСТРУМЕНТ</div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 0, borderTop:'2px solid var(--cream)'}} className="why-grid">
          {[
            ['01','ТВОЙ ЗАПРОС — ЧЕРЕЗ ЧУЖОЙ','Когда в сессии работают с другим человеком, ты вдруг узнаёшь свою сцену. Это не «понимание», это телесное попадание.'],
            ['02','ПОЛЕ ДЕРЖИТ ТЕРАПЕВТ','Терапевт ведёт поле, держит структуру и безопасность. Группа усиливает резонансом и присутствием — но безопасность не на участниках.'],
            ['03','×3 СЛОЁВ ЗА ВЫХОДНЫЕ','За 2—3 дня прорабатывается столько, сколько в индивидуальном формате — за месяцы. Поле работает непрерывно.'],
          ].map(([n,t,d])=>(
            <div key={n} style={{padding:'32px 28px 32px 0', borderRight:'1px solid var(--cream-33)', minHeight: 240}}>
              <div className="orange" style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', marginBottom: 18}}>/{n}</div>
              <h3 className="poster poster-xs" style={{fontSize:'clamp(22px, 2.40vw, 29px)', margin:'0 0 14px'}}>{t}</h3>
              <p style={{fontSize: 14, lineHeight: 1.5, margin: 0, color:'var(--cream-99)'}}>{d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ТРИ ФОРМАТА + ЦЕНЫ */}
      <section className="section" id="formats">
        <div className="kicker-row">
          <div>
            <div className="tag">§ 02 — три формата · цены</div>
            <h2 className="poster poster-md" style={{marginTop: 12}}>ВЫБИРАЙ <span className="orange">ВХОД.</span></h2>
          </div>
          <div className="right">ОДНА ГРУППА /<br/>ТРИ СПОСОБА БЫТЬ В НЕЙ</div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))', gap: 0, borderTop:'2px solid var(--cream)'}}>
          {[
            {n:'01', t:'ТЕМАТИЧЕСКАЯ', anchor:'thematic', p:'50 000 ₽', s:'за запрос', d:'5–7 человек. Все одновременно — и запросчики, и заместители. Одна тема прокачивается со всех сторон. Дополнительных заместителей не зовём. Лучше офлайн, можно онлайн.'},
            {n:'02', t:'ОБЩАЯ — ЗАПРОСЧИК', anchor:'general-requester', p:'48 000 ₽', s:'за работу', d:'5–7 запросчиков на день. Темы у всех разные. Чужих запросов не бывает — заместителя выбирают, когда резонирует. Поле создаётся запросами и работой терапевта. Темы вскрываются и через свой запрос, и через чужие.'},
            {n:'03', t:'ОБЩАЯ — ЗАМЕСТИТЕЛЬ', anchor:'general-figure', p:'3 000 ₽', s:'вход в поле', d:'Без своего запроса — но в поле. Опыт системной работы изнутри. Свой сдвиг приходит часто на чужой работе.'},
            {n:'04', t:'КОРПОРАТИВНАЯ', anchor:'corporate', p:'600 000 ₽', s:'пакет', d:'Топы / собственники / команды одной компании. 3–4 сессии + диагностика. Закрытый формат под задачу бизнеса.', accent:true},
          ].map((c,i,arr)=>(
            <div key={c.n} id={c.anchor} style={{
              padding:'32px 28px',
              background: c.accent ? 'var(--accent)' : 'transparent',
              color: c.accent ? navy : 'var(--cream)',
              borderRight:'1px solid var(--cream-33)',
              borderBottom:'1px solid var(--cream-33)',
              display:'flex', flexDirection:'column', gap: 14,
              minHeight: 320,
            }}>
              <div style={{display:'flex', justifyContent:'space-between', fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.12em'}}>
                <span>/{c.n}</span>
                <span style={{opacity: 0.7}}>{c.s.toUpperCase()}</span>
              </div>
              <h3 className="poster poster-xs" style={{margin: 0, fontSize:'clamp(22px, 2.4vw, 30px)', lineHeight: 1.05}}>{c.t}</h3>
              <p style={{fontSize: 14, lineHeight: 1.5, margin: 0, flex: 1}}>{c.d}</p>
              <div style={{fontFamily:'var(--f-display)', fontSize: 26, fontWeight: 900, letterSpacing:'-0.015em', borderTop:'1px solid currentColor', paddingTop: 14}}>{c.p}</div>
            </div>
          ))}
        </div>
      </section>

      {/* КАК ИДЁТ 3 ДНЯ */}
      <section className="section">
        <div className="kicker-row">
          <div>
            <div className="tag">§ 03 — как устроены 3 дня</div>
            <h2 className="poster poster-md" style={{marginTop: 12}}>ДЕНЬ ЗА ДНЁМ.</h2>
          </div>
          <div className="right">10—18 · ОБЕД<br/>ВЕЧЕР — СВОЙ</div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 0}} className="days-grid">
          {[
            {n:'01', t:'СБОР', sub:'знакомство · запросы', items:[
              ['10:00','Круг. Каждый называет, с чем пришёл'],
              ['12:00','Тело. Выгружаем напряжение дороги'],
              ['14:00','Первые сессии — поверхностные сцены'],
              ['17:00','Общий круг: что отозвалось, что задело'],
            ]},
            {n:'02', t:'ГЛУБИНА', sub:'основная работа', accent: true, items:[
              ['10:00','Возвращение в поле'],
              ['11:00','Сессии глубокие — 3—4 работы'],
              ['15:00','Перерыв + телесная практика'],
              ['16:00','Ещё 2—3 работы (более тяжёлые сцены)'],
              ['19:00','Круг. Что встало. Что ещё держит'],
            ]},
            {n:'03', t:'СБОРКА', sub:'закрепление · выход', items:[
              ['10:00','Короткие работы на остаточные темы'],
              ['13:00','Практика — что забираешь с собой'],
              ['15:00','Парная работа в тройках'],
              ['17:00','Финальный круг. Именно твой шаг после группы'],
            ]},
          ].map((d,i)=>(
            <div key={d.n} style={{
                padding: 28,
                background: d.accent ? 'rgba(227,104,62,0.08)' : 'transparent',
                borderTop:'2px solid var(--cream)',
                borderRight: i<2 ? '1px solid var(--cream-33)' : 'none',
                minHeight: 440,
              }}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 18}}>
                <span className="orange" style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em'}}>/день {d.n}</span>
                <span style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', color:'var(--cream-77)'}}>{d.sub.toUpperCase()}</span>
              </div>
              <h3 className="poster" style={{fontSize:'clamp(44px, 5.00vw, 64px)', margin:'0 0 20px'}}>{d.t}</h3>
              <ul style={{listStyle:'none', padding: 0, margin: 0, display:'flex', flexDirection:'column', gap: 12}}>
                {d.items.map((item,j)=>(
                  <li key={j} style={{display:'grid', gridTemplateColumns:'64px 1fr', gap: 14, alignItems:'baseline', paddingBottom: 10, borderBottom:'1px solid var(--cream-22)'}}>
                    <span style={{fontFamily:'var(--f-mono)', fontSize: 12, color:'var(--accent)', letterSpacing:'0.08em'}}>{item[0]}</span>
                    <span style={{fontSize: 15, lineHeight: 1.4}}>{item[1]}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>

      {/* ТЕМЫ */}
      <section className="section bg-deep">
        <div className="kicker-row">
          <div>
            <div className="tag">§ 04 — ближайшие группы</div>
            <h2 className="poster poster-md" style={{marginTop: 12}}>ГРУППА — <span className="orange">ПОД ТЕМУ.</span></h2>
          </div>
          <div className="right">НЕ СМЕШИВАЕМ<br/>ЗАПРОСЫ</div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 0}} className="topics-grid">
          {[
            {t:'ПОВТОРЯЮЩИЙСЯ СЦЕНАРИЙ', d:'Третий одинаковый мужчина. Второй одинаковый провал. Та же динамика с мамой. Работаем с корнем.', seats:'4 из 7', price:'50 000 ₽', dates:'МАЙ · МСК', fmt:'тематическая'},
            {t:'ДЕНЕЖНЫЙ ПОТОЛОК', d:'Оборот или доход второй год на одной цифре. Причины — не в стратегии.', seats:'6 из 7', price:'50 000 ₽', dates:'МАЙ · ОНЛАЙН', fmt:'тематическая'},
            {t:'ОБЩАЯ ГРУППА', d:'Разные запросы за один день. Запросчик — 48 000 ₽, заместитель — 3 000 ₽.', seats:'5 из 7 запросчиков', price:'от 3 000 ₽', dates:'ИЮНЬ · ОНЛАЙН', fmt:'общая'},
            {t:'ЗРЕЛАЯ СИЛА', d:'Для женщин 45+. Без романтизации молодости, без страха тела. Про опору на возраст.', seats:'4 из 7', price:'50 000 ₽', dates:'ИЮНЬ · ОНЛАЙН', fmt:'тематическая', accent:true},
          ].map((x,i)=>(
            <div key={x.t} style={{
                padding:'32px 28px',
                borderTop: i<2 ? '2px solid var(--cream)' : '1px solid var(--cream-33)',
                borderRight: i%2===0 ? '1px solid var(--cream-33)' : 'none',
                display:'flex', flexDirection:'column', justifyContent:'space-between', minHeight: 280,
              }}>
              <div>
                <div style={{display:'flex', gap: 8, marginBottom: 14, flexWrap:'wrap'}}>
                  <span style={{padding:'4px 10px', background: x.accent ? '#FF4D1A' : '#E3683E', color: navy, fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.1em', fontWeight: 700}}>{x.dates}</span>
                  {x.fmt && <span style={{padding:'4px 10px', border:'1.5px solid var(--cream-33)', color:'var(--cream-77)', fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.1em', fontWeight: 700, textTransform:'uppercase'}}>{x.fmt}</span>}
                </div>
                <h3 className="poster poster-xs" style={{fontSize:'clamp(23px, 2.81vw, 32px)', margin:'0 0 12px'}}>{x.t}</h3>
                <p style={{fontSize: 14, lineHeight: 1.5, margin: 0, color:'var(--cream-99)'}}>{x.d}</p>
              </div>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginTop: 24, paddingTop: 20, borderTop:'1px solid var(--cream-33)'}}>
                <div>
                  <div style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.1em', color:'var(--cream-77)'}}>МЕСТ</div>
                  <div style={{fontFamily:'var(--f-display)', fontSize: 15, fontWeight: 900, letterSpacing:'-0.015em'}}>{x.seats}</div>
                </div>
                <div style={{textAlign:'right'}}>
                  <div style={{fontFamily:'var(--f-display)', fontSize: 15, fontWeight: 900, letterSpacing:'-0.015em', marginBottom: 10}}>{x.price}</div>
                  <a href="events.html" className="btn btn-orange" style={{padding:'10px 16px', fontSize: 14}}>Записаться →</a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ПРАВИЛА */}
      <section className="section">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.4fr', gap: 48}} className="rules-split">
          <div>
            <div className="tag">§ 05 — правила поля</div>
            <h2 className="poster poster-md" style={{margin:'20px 0 40px'}}>
              БЕЗОПАСНО — <span className="orange">ЗНАЧИТ С ПРАВИЛАМИ.</span>
            </h2>
            <p style={{fontSize: 14, lineHeight: 1.5, margin: 0, color:'var(--cream-99)', maxWidth: 460}}>
              Системная работа — тонкая. Без правил это хаос. Семь пунктов, которые держат всех участников.
            </p>
          </div>
          <div style={{borderTop:'2px solid var(--cream)'}}>
            {[
              ['01','Всё, что звучит в комнате — остаётся в комнате. Нельзя.','конфиденциально'],
              ['02','В работу не приводят «кого-то починить». Работаешь с собой.','только свой запрос'],
              ['03','Не даём советов друг другу. Ведущий — ведущий.','без советов'],
              ['04','Во время работ — не отвечаем на звонки, не залезаем в телефон.','присутствие'],
              ['05','Алкоголь и вещества — не на группе и не перед.','трезво'],
              ['06','Право на «не хочу» — всегда. Никто не вытаскивает насильно.','согласие'],
              ['07','После группы — минимум сутки без важных решений и разговоров.','перерыв'],
            ].map(([n,t,tag],i)=>(
              <div key={n} style={{display:'grid', gridTemplateColumns:'50px 1fr 140px', gap: 20, padding:'18px 0', borderBottom:'1px solid var(--cream-33)', alignItems:'baseline'}}>
                <span className="orange" style={{fontFamily:'var(--f-mono)', fontSize: 15, letterSpacing:'0.1em'}}>/{n}</span>
                <span style={{fontSize: 12, lineHeight: 1.4}}>{t}</span>
                <span style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.1em', color:'var(--cream-77)', textAlign:'right', textTransform:'uppercase'}}>{tag}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ОТЗЫВ */}
      <section className="section bg-cream" style={{color: navy}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.5fr', gap: 48, alignItems:'center'}} className="rev-split">
          <div className="ph light" style={{height: 380}} aria-label="Участница группы">[ УЧАСТНИЦА · ГРУППА ]</div>
          <figure style={{margin: 0}}>
            <div className="tag" style={{color:'var(--acid)', marginBottom: 16}}>§ 06 — одна история</div>
            <blockquote style={{margin: 0}}>
              <div style={{fontFamily:'var(--f-display)', fontSize:'clamp(29px, 3.40vw, 42px)', fontWeight: 900, lineHeight: 1.05, letterSpacing:'-0.02em', margin:'0 0 20px'}}>
                «Моя сессия длилась 40 минут. А открылась я — на чужой, во второй день. Там было то, что я десять лет обходила.»
              </div>
              <div style={{fontSize: 14, lineHeight: 1.55, margin:'0 0 20px', color:'rgba(26,37,53,0.8)'}}>
                Пришла с темой отношений. Ушла с закрытой историей про отца, которую не могла тронуть в индивидуальном формате. Отношения после этого собрались сами — за 4 месяца.
              </div>
              <figcaption style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', textTransform:'uppercase', opacity: 0.7}}>
                НАТАЛЬЯ, 44 / ГРУППА «ПОВТОРЯЮЩИЙСЯ СЦЕНАРИЙ» · 2024
              </figcaption>
            </blockquote>
          </figure>
        </div>
      </section>

      {/* FAQ */}
      <section className="section">
        <div className="tag">§ 07 — вопросы</div>
        <h2 className="poster poster-md" style={{margin:'20px 0 40px'}}>ЧАСТО СПРАШИВАЮТ.</h2>
        <div>
          {[
            ['Я интроверт. Смогу ли работать в группе?','Сможешь. В группе не нужно «солировать» — большая часть работы идёт изнутри, наблюдая. Активная роль — только если ты сама её берёшь.'],
            ['А если я заплачу — и не буду работать?','Так бывает, и это нормально. У нас не «отработка», а присутствие. Твой сдвиг может случиться на чужой сессии — и это полноценный результат.'],
            ['Можно ли прийти с подругой / мужем?','Лучше — нет. В одной группе работает только один из пары. Поле реагирует на близких, и чужие сцены вскрывают лишнее. Приходите по очереди.'],
            ['Сколько длится эффект?','Основной сдвиг — в первые 2—3 недели после группы. Закрепление — 2—3 месяца. Многие приходят потом на индивидуальную сессию для точечной доработки.'],
            ['Онлайн-группа работает так же, как очная?','Поле работает и онлайн — если соблюдать правила (включённая камера, один, в тишине). Глубина сопоставимая. Для выездов — только очно.'],
            ['Можно записаться в рассрочку?','Да. На любую группу — 2 платежа без процентов. Первый — при записи, второй — за 7 дней до старта.'],
          ].map(([q,a],i)=>(
            <details key={i} style={{borderTop: i===0 ? '2px solid var(--cream)' : '1px solid var(--cream-33)', padding:'26px 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: 30, fontWeight: 800, letterSpacing:'-0.015em', lineHeight: 1.2}}>{q}</span>
                <span style={{color:'var(--accent)', fontSize: 34, 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="section pad-lg bg-deep" id="record">
        <div className="tag">● запись</div>
        <h2 className="poster poster-lg" style={{margin:'20px 0 40px'}}>
          ПРИХОДИ В <span className="orange">ПОЛЕ.</span>
        </h2>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 48, alignItems:'start'}} className="record-grid">
          <div>
            <p style={{fontSize: 15, lineHeight: 1.5, margin:'0 0 24px', maxWidth: 520}}>
              Посмотри ближайшие потоки в календаре или напиши — подберём группу под твой запрос.
            </p>
            <div style={{display:'flex', flexDirection:'column', gap: 12}}>
              <a href="events.html" className="btn btn-orange btn-lg">Смотреть все группы →</a>
              <a href="for-whom.html" className="btn btn-ghost btn-lg">Проверить, подходит ли мне</a>
            </div>
          </div>
          <form className="form" onSubmit={(e)=>{e.preventDefault(); alert('Заявка принята. Напишем в течение суток и подберём группу.');}}>
            <div><label htmlFor="g-name">Имя</label><input id="g-name" name="name" type="text" required/></div>
            <div><label htmlFor="g-tg">Telegram или WhatsApp</label><input id="g-tg" name="contact" type="text" required placeholder="@username или +7…"/></div>
            <div><label htmlFor="g-topic">Тема интересна</label>
              <select id="g-topic" name="topic" style={{width:'100%', padding:'14px 16px', background:'transparent', color:'var(--cream)', border:'2px solid var(--cream-33)', font:'500 15px/1.4 var(--f-sans)'}}>
                <option style={{background: navy}}>Повторяющийся сценарий</option>
                <option style={{background: navy}}>Денежный потолок</option>
                <option style={{background: navy}}>Зрелая сила (45+)</option>
                <option style={{background: navy}}>Тело не врёт (выезд · Сочи)</option>
                <option style={{background: navy}}>Ещё не решила — подскажите</option>
              </select>
            </div>
            <div><label htmlFor="g-q">Коротко о запросе</label><textarea id="g-q" name="query" placeholder="с чем хочешь поработать"/></div>
            <button className="btn btn-orange btn-lg" type="submit">Оставить заявку →</button>
            <p className="form-note">Конфиденциально. Не спам.</p>
          </form>
        </div>
      </section>

      <NextSteps
        title={<>ЕСЛИ <span className="orange">БЛИЗКО.</span></>}
        items={[
          {label:'Сессия', desc:'Индивидуально — если хочется поглубже, до группы.', href:'session.html', primary:true},
          {label:'Кейсы', desc:'Истории клиентов: до / после / что делали.', href:'cases.html'},
          {label:'Кто ведёт', desc:'Евгения и Ксения — почему в паре и что приносит каждая.', href:'about.html'},
        ]}
      />

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

window.Group = Group;