/* /products/vip — VIP-сопровождение */

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

      {/* 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/vip-hero.jpg')",
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat'
      }}>
        <div className="tag">/продукты · vip</div>
        <h1 className="poster poster-xl" style={{marginTop: 24}}>
            VIP —<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'}}>
          {[
            ['ЦЕНА','от 400 000 ₽'],
            ['ДЛИТЕЛЬНОСТЬ','21 день или 2 месяца'],
            ['СЕССИЙ','2 + чат / 4–5 + чат'],
            ['ФОРМАТ','онлайн / лично'],
          ].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="tag">§ 01 — кому нужен VIP</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:'2px solid var(--cream)'}}>
          {[
            ['01','МНОГОСЛОЙНЫЙ ЗАПРОС','«Хочу переделать жизнь» — это про VIP. Одна сессия закроет один слой, дальше — пусто.'],
            ['02','НЕТ ВРЕМЕНИ НА ТЕРАПИЮ','Плотный темп. Нужен результат за 2—4 месяца, а не за три года.'],
            ['03','ВЫСОКИЕ СТАВКИ','Бизнес, публичность, капитал. Цена ошибки высокая — нужен партнёр, который держит тебя.'],
            ['04','УЖЕ В ТЕМЕ','Прошла сессии, поняла, что работает. Готова вложиться в длинный заход.'],
          ].map(([n,t,d])=>(
            <div key={n} style={{padding:'28px 24px', borderRight:'1px solid var(--cream-33)', borderBottom:'1px solid var(--cream-33)', minHeight: 260, display:'flex', flexDirection:'column'}}>
              <div className="orange" style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', marginBottom: 16}}>/{n}</div>
              <h3 className="poster poster-xs" style={{fontSize:'clamp(23px, 2.40vw, 30px)', margin:'0 0 12px'}}>{t}</h3>
              <p style={{fontSize: 15, lineHeight: 1.5, margin: 0, color:'var(--cream-99)'}}>{d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* 2 ПАКЕТА */}
      <section className="section">
        <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">21 ДЕНЬ /<br/>ИЛИ 2 МЕСЯЦА</div>
        </div>
        <div className="pkg-grid" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 0}}>
          {[
            {n:'01', t:'КОРОТКИЙ', p:'400 000 ₽', s:'2 сессии', d:'21 день', feat:[
              '2 глубокие сессии',
              '2 диагностики',
              'Чат поддержки 21 день (рабочие часы по будням)',
              'Запись сессий — по желанию клиента',
              'Сборочный созвон в конце пакета',
              'Бесплатное участие в терапевтических группах как заместитель',
            ]},
            {n:'02', t:'ДЛИННЫЙ', p:'950 000 ₽', s:'4–5 сессий', d:'2 месяца', accent:true, feat:[
              '4–5 глубоких сессий',
              '4 диагностики',
              'Чат поддержки',
              'Запись сессий',
              'Анализ результатов',
              'Бесплатное участие в терапевтических группах как заместитель',
              'Скидка 20% на другие продукты в течение года',
            ]},
          ].map((p,i)=>(
            <div key={p.n} style={{
                padding: 36,
                background: p.accent ? 'var(--accent)' : 'transparent',
                color: p.accent ? navy : cream,
                border: '2px solid ' + (p.accent ? 'var(--accent)' : cream),
                borderRight: i===0 ? 'none' : '2px solid var(--accent)',
                display:'flex', flexDirection:'column', gap: 20,
              }}>
              <div style={{display:'flex', justifyContent:'space-between', fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.1em'}}>
                <span>/{p.n}</span><span>{p.s} · {p.d}</span>
              </div>
              <h3 className="poster poster-sm" style={{margin: 0}}>{p.t}</h3>
              <ul style={{listStyle:'none', padding: 0, margin: 0, display:'flex', flexDirection:'column', gap: 10, flex: 1}}>
                {p.feat.map((f,j)=>(
                  <li key={j} style={{fontSize: 14, lineHeight: 1.4, paddingLeft: 24, position:'relative'}}>
                    <span style={{position:'absolute', left: 0, fontWeight: 800}}>→</span>
                    {f}
                  </li>
                ))}
              </ul>
              <div style={{paddingTop: 20, borderTop: '1.5px solid currentColor', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                <span style={{fontFamily:'var(--f-display)', fontSize: 29, fontWeight: 900, letterSpacing:'-0.015em'}}>{p.p}</span>
                <a href="#record" className="btn" style={{background: p.accent ? navy : 'var(--accent)', color: p.accent ? cream : navy}}>Выбрать →</a>
              </div>
            </div>
          ))}
        </div>
        <p style={{fontSize: 15, color:'var(--cream-77)', marginTop: 20, fontStyle:'italic'}}>
          Рассрочка 2 платежа — без процентов. Детали обсуждаем на вводном созвоне.
        </p>
      </section>

      {/* КАК ИДЁТ */}
      <section className="section bg-deep">
        <div className="kicker-row">
          <div>
            <div className="tag">§ 03 — как идёт пакет</div>
            <h2 className="poster poster-md" style={{marginTop: 12}}>ПУТЬ.</h2>
          </div>
          <div className="right">ПРИМЕР НА 4–5 СЕССИЙ</div>
        </div>
        <div>
          {[
            ['00','ВВОДНЫЙ СОЗВОН','15 мин','Знакомимся. Кинезиологический тест. Решаем — наш ли это случай.'],
            ['01','КАРТА','точка А','Собираем картину целиком. Где ты сейчас, что болит, что уже пробовала.'],
            ['02','МЕТОД ХЕЛ­ЛИН­ГЕ­РА','глубокая сессия','Видим систему — род, семью, сцены, где ты ходишь по кругу.'],
            ['03','ВСЕ­ЛЕН­СКАЯ ТЕРАПИЯ','глубокая сессия','Сценарии, которые ты несёшь, не начав. Выходим за пределы биографии.'],
            ['04','ТЕЛО','глубокая сессия','Что тело решает за тебя и от чего защищает. Закрепляем через движение.'],
            ['05','СБОРКА','проверка','Собираем всё вместе. Проверяем, что встало. Где ещё держит.'],
            ['06','ФИНАЛ','итог','Закрепляем результат, проверяем сохранение изменений, подводим итоги.'],
          ].map(([n,t,tm,d],i)=>(
            <div key={n} className="stage-row" style={{
                display:'grid', gridTemplateColumns:'80px 1fr 1.5fr 120px',
                gap: 32, alignItems:'center', padding:'22px 0',
                borderTop: i===0 ? '2px solid var(--cream)' : '1px solid var(--cream-33)',
              }}>
              <span style={{fontFamily:'var(--f-display)', fontSize: 44, fontWeight: 900, color:'var(--accent)', lineHeight: 1, letterSpacing:'-0.03em'}}>{n}</span>
              <span style={{fontFamily:'var(--f-display)', fontSize:'clamp(22px, 2.60vw, 29px)', fontWeight: 900, letterSpacing:'-0.015em', lineHeight: 1.05}}>{t}</span>
              <span style={{fontSize: 15, color:'var(--cream-99)', lineHeight: 1.5}}>{d}</span>
              <span style={{fontFamily:'var(--f-mono)', fontSize: 14, color:'var(--cream-77)', letterSpacing:'0.08em', textAlign:'right'}}>{tm}</span>
            </div>
          ))}
        </div>
      </section>

      {/* ЧАТ */}
      <section className="section">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.4fr', gap: 48, alignItems:'center'}} className="chat-split">
          <div>
            <div className="tag">§ 04 — поддержка между</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 0 16px'}}>
              VIP — это не только сессии. Это присутствие и поддержка между ними. В рабочие часы по будням, не круглосуточно.
            </p>
            <ul style={{margin: 0, padding: 0, listStyle:'none', display:'flex', flexDirection:'column', gap: 10}}>
              {[
                'Когда «догоняет» через три дня после сессии — пишешь, разбираем',
                'Когда жизнь подкидывает ситуацию и нужен взгляд со стороны',
                'Когда застряла в динамике — короткий созвон и диагностика',
              ].map((t,i)=>(
                <li key={i} style={{fontSize: 15, lineHeight: 1.5, paddingLeft: 24, position:'relative'}}>
                  <span style={{position:'absolute', left: 0, color:'var(--accent)', fontWeight: 800}}>→</span>{t}
                </li>
              ))}
            </ul>
          </div>
          <div className="ph" style={{height: 380, backgroundImage: "url('image/vip-chat-mock.jpg')", backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat'}} role="img" aria-label="Пример переписки"></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="Клиент VIP">[ КЛИЕНТ · VIP ]</div>
          <figure style={{margin: 0}}>
            <div className="tag" style={{color:'var(--acid)', marginBottom: 16}}>§ 05 — одна история</div>
            <blockquote style={{margin: 0}}>
              <div style={{fontFamily:'var(--f-display)', fontSize:'clamp(26px, 3.00vw, 36px)', fontWeight: 900, lineHeight: 1.1, 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)'}}>
                Пришла с запросом «не могу масштабировать бизнес». Вышла с × 2.3 к обороту за полгода, без выгорания и с партнёром, которого до этого не пускала в жизнь.
              </div>
              <figcaption style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', textTransform:'uppercase', opacity: 0.7}}>
                ЕКАТЕРИНА, 41 / VIP — ДЛИННЫЙ / 2025
              </figcaption>
            </blockquote>
          </figure>
        </div>
      </section>

      {/* CTA */}
      <section className="section pad-lg bg-deep" id="record">
        <div className="tag">● заявка на vip</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: 500}}>
              На VIP не записываем «с кнопки». Сначала — 15 минут бесплатного созвона, чтобы оба поняли: это твоё или нет.
            </p>
            <div style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.08em', color:'var(--cream-77)', lineHeight: 1.8}}>
              СЛОТОВ В ПОТОКЕ → 6<br/>
              СВОБОДНО → <span style={{color:'var(--accent)'}}>3</span><br/>
              СТАРТ ПОТОКА → СЛЕДУЮЩИЙ ПОНЕДЕЛЬНИК
            </div>
          </div>
          <form className="form" onSubmit={(e)=>{e.preventDefault(); alert('Заявка на VIP отправлена. Напишем в течение суток для созвона.');}}>
            <div><label htmlFor="v-name">Имя</label><input id="v-name" name="name" type="text" required/></div>
            <div><label htmlFor="v-tg">Telegram или WhatsApp</label><input id="v-tg" name="contact" type="text" required placeholder="@username или +7…"/></div>
            <div><label htmlFor="v-pkg">Какой пакет интересует</label>
              <select id="v-pkg" name="pkg" 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 value="short" style={{background: navy}}>Короткий — 21 день · 400 000 ₽</option>
                <option value="long" style={{background: navy}}>Длинный — 2 месяца · 950 000 ₽</option>
                <option value="?" style={{background: navy}}>Ещё не решила</option>
              </select>
            </div>
            <div><label htmlFor="v-q">Коротко о запросе</label><textarea id="v-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:'cases.html'},
          {label:'Кто авторы', desc:'Евгения и Ксения — философия, роли, контакты.', href:'about.html'},
          {label:'Сессия', desc:'Первый шаг: индивидуальная встреча 90 минут.', href:'session.html', primary:true},
        ]}
      />

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

window.VIP = VIP;