/* /products/session — Индивидуальная сессия */

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

      {/* 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/session-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" style={{marginTop: 32, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 24, padding:'32px 0'}} id="spec">
          {[
            ['ЦЕНА','по запросу'],
            ['ДЛИТЕЛЬНОСТЬ','60—90 мин'],
            ['ФОРМАТ','онлайн / лично'],
            ['ВЕДУТ','К. Пуляткина или Е. Новиковская'],
          ].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>
        <div style={{marginTop: 24, padding: '20px 24px', borderLeft:'3px solid var(--accent)', background:'rgba(227,104,62,0.08)'}}>
          <p style={{margin: 0, fontSize: 15, lineHeight: 1.5, color:'var(--cream-99)'}}>
            <b style={{color:'var(--cream)'}}>Цена — после 15-минутной диагностики.</b> Сначала созваниваемся коротко: знакомимся с запросом, проводим кинезиологический тест, собираем под тебя группу заместителей. После этого называем стоимость работы.
          </p>
        </div>
      </section>

      {/* КОМУ ПОДОЙДЁТ */}
      <section className="section bg-deep">
        <div className="tag">§ 01 — кому подойдёт</div>
        <h2 className="poster poster-md" style={{margin:'20px 0 40px'}}>
          СЕССИЯ — ДЛЯ <span className="orange">КОНКРЕТНОГО</span> ЗАПРОСА.
        </h2>
        <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap: 48, alignItems:'start'}} className="split">
          <ul style={{margin: 0, padding: 0, listStyle:'none', display:'flex', flexDirection:'column', gap: 16}}>
            {[
              'Одна тема, которая «висит» и не двигается сама',
              'Первый контакт — хочешь понять, работает ли метод лично для тебя',
              'Ты уже в теме практик, нужна точечная работа, а не пакет',
              'Запрос горит сейчас — не через три месяца',
            ].map((t,i)=>(
              <li key={i} style={{display:'flex', gap: 16, fontSize: 14, lineHeight: 1.45, paddingBottom: 14, borderBottom:'1px solid var(--cream-33)'}}>
                <span className="orange" style={{fontFamily:'var(--f-mono)', fontSize: 12, minWidth: 30}}>0{i+1}</span>
                <span>{t}</span>
              </li>
            ))}
          </ul>
          <div style={{background:'var(--accent)', color: navy, padding: 28}}>
            <div style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.1em', marginBottom: 12}}>⚠ ВАЖНО</div>
            <p style={{fontSize: 12, margin: 0, lineHeight: 1.5, fontWeight: 600}}>
              Если запрос большой и многослойный («я хочу переделать жизнь») — лучше идти в <a href="#vip" style={{textDecoration:'underline'}}>VIP-сопровождение</a>. Одной сессии не хватит, и это нормально.
            </p>
          </div>
        </div>
      </section>

      {/* 4 ШАГА */}
      <section className="section">
        <div className="kicker-row">
          <div>
            <div className="tag">§ 02 — как проходит</div>
            <h2 className="poster poster-md" style={{marginTop: 12}}>60—90 МИН.</h2>
          </div>
          <div className="right">04 ШАГА</div>
        </div>
        <div className="steps" style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', border:'2px solid var(--cream)'}}>
          {[
            ['01','ТОЧКА','5 мин','Формулируем запрос. Не «хочу похудеть» — а что именно и с чего начать.'],
            ['02','ТЕСТ','10 мин','Кинезиологический калибр — где сценарий живёт в теле.'],
            ['03','РАБОТА','45—60 мин','Ядро: сессия по методу Хеллингера / Вселенская терапия. Движение, диалог, контакт.'],
            ['04','СБОРКА','10 мин','Закрепляем. Что делаешь ближайшие 2—4 недели.'],
          ].map(([n,t,d,p],i)=>(
            <div key={n} style={{
                padding: 28, minHeight: 280,
                borderRight: i<3 ? '1px solid var(--cream-33)' : 'none',
                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">§ 03 — что получаешь</div>
        <h2 className="poster poster-md" style={{margin:'20px 0 40px'}}>
          НА <span className="orange">ВЫХОДЕ.</span>
        </h2>
        <div className="grid4" style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr 1fr', gap: 0, borderTop:'1px solid var(--cream-33)'}}>
          {[
            ['Сдвиг по конкретному запросу','Не «инсайт», а ощутимое изменение состояния и реакции.'],
            ['Карту «что дальше»','Конкретные шаги на 2—4 недели — сборочная часть, которую ты делаешь сама.'],
            ['Запись сессии','Если работаем онлайн. На случай, если хочешь вернуться к материалу.'],
            ['Чат поддержки 7 дней','Если что-то «догоняет» после — не остаёшься одна.'],
          ].map(([t,d],i)=>(
            <div key={i} style={{
                padding:'28px 24px',
                borderRight: i<3 ? '1px solid var(--cream-33)' : 'none',
                borderBottom:'1px solid var(--cream-33)',
              }}>
              <div className="orange" style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.1em', marginBottom: 12}}>/0{i+1}</div>
              <h3 style={{fontFamily:'var(--f-display)', fontSize: 15, fontWeight: 900, letterSpacing:'-0.015em', margin:'0 0 10px', lineHeight: 1.15}}>{t}</h3>
              <p style={{fontSize: 14, margin: 0, lineHeight: 1.5, color:'var(--cream-99)'}}>{d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ОТЗЫВ */}
      <section className="section bg-cream" style={{color: navy}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.4fr', 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}}>§ 04 — одна история</div>
            <blockquote style={{margin: 0}}>
              <div style={{fontFamily:'var(--f-display)', fontSize: 'clamp(23px, 2.6vw, 32px)', fontWeight: 900, lineHeight: 1.15, letterSpacing:'-0.015em', margin:'0 0 20px'}}>
                «Пришла с вопросом про работу. Ушла с пониманием, почему я никогда её не отпускала.»
              </div>
              <div style={{fontSize: 14, lineHeight: 1.55, margin:'0 0 20px', color:'rgba(26,37,53,0.8)'}}>
                Через три недели написала: сказала нет проекту, в котором сидела два года. Через месяц — получила оффер с × 1.7 к доходу.
              </div>
              <figcaption style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', textTransform:'uppercase', opacity: 0.7}}>
                АННА, 42 / ОДНА СЕССИЯ / ОНЛАЙН
              </figcaption>
            </blockquote>
          </figure>
        </div>
      </section>

      {/* FAQ */}
      <section className="section">
        <div className="kicker-row">
          <div>
            <div className="tag">§ 05 — вопросы</div>
            <h2 className="poster poster-sm" style={{marginTop: 12}}>БЫСТРО.</h2>
          </div>
        </div>
        <div>
          {[
            ['Можно ли перенести / отменить?','Да. Бесплатно — не позже, чем за 24 часа. Позже — сгорает.'],
            ['Как оплата?','Перевод на карту / ИП. Чек присылаем. Рассрочка — только в VIP, не на сессию.'],
            ['Можно ли взять вторую сессию?','Да. Через 2—4 недели, чтобы первая встала. Раньше — не предлагаем, пусто.'],
            ['Что если я не знаю, с чего начать?','На первом шаге помогаем сформулировать. Приходи с тем, что болит.'],
          ].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: 29, fontWeight: 800, letterSpacing:'-0.015em', lineHeight: 1.2}}>{q}</span>
                <span style={{color:'var(--accent)', fontSize: 32, fontWeight: 300}} aria-hidden="true">+</span>
              </summary>
              <p style={{fontSize: 15, lineHeight: 1.55, margin:'18px 0 0', color:'var(--cream-99)', maxWidth: 780}}>{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'}}>
          ЗАПИСАТЬСЯ.
        </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: 500}}>
              Оставь контакт и пару слов о запросе. Подтверждаем слот и присылаем инструкции в течение 24 часов.
            </p>
            <div style={{fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.08em', color:'var(--cream-77)', lineHeight: 1.8}}>
              СЛОТЫ → ПН—ПТ, 10—20 МСК<br/>
              ЗАПИСЬ → НА 2—3 НЕДЕЛИ ВПЕРЁД<br/>
              СРОЧНО → ПИШИ В TELEGRAM
            </div>
          </div>
          <form className="form" onSubmit={(e)=>{e.preventDefault(); alert('Заявка на сессию отправлена.');}}>
            <div><label htmlFor="s-name">Имя</label><input id="s-name" name="name" type="text" required/></div>
            <div><label htmlFor="s-tg">Telegram или WhatsApp</label><input id="s-tg" name="contact" type="text" required placeholder="@username или +7…"/></div>
            <div><label htmlFor="s-q">Запрос</label><textarea id="s-q" name="query" placeholder="коротко: что болит"/></div>
            <button className="btn btn-orange btn-lg" type="submit">Записаться на сессию →</button>
            <p className="form-note">Согласие на обработку персональных данных — по <a href="#legal" style={{textDecoration:'underline'}}>политике</a>.</p>
          </form>
        </div>
      </section>

      <NextSteps
        title={<>ПЕРЕД <span className="orange">ЗАПИСЬЮ.</span></>}
        items={[
          {label:'Кто ведёт сессию', desc:'Евгения Новиковская и Ксения Пуляткина — философия и роли в паре.', href:'about.html'},
          {label:'Кейсы', desc:'Восемь историй клиентов с цифрами и цитатами.', href:'cases.html'},
          {label:'Для кого подходит', desc:'Честный фильтр — подходит / не подходит.', href:'for-whom.html'},
        ]}
      />

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

window.Session = Session;