/* /products/challenge-ves-les — Челлендж «Вес-лес» */

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

      {/* HERO */}
      <section className="section" style={{paddingTop: 40}}>
        <div className="tag">/челлендж · 01 — вес-лес <span className="orange" style={{fontWeight:800,letterSpacing:'0.2em',marginLeft:10}}>● NEW</span></div>
        <h1 className="poster poster-xl" style={{marginTop: 24}}>
          ЧЕЛЛЕНДЖ —<br/>
          <span className="orange">ВЕС-ЛЕС.</span>
        </h1>
        <div className="rule-top rule-bottom" style={{marginTop: 32, display:'grid', gridTemplateColumns:'1.3fr 1fr auto', gap: 32, padding:'32px 0', alignItems:'center'}}>
          <p className="lead" style={{margin: 0}}>
            30 дней. 30 человек. 15 пар по тесту совместимости. Старт <b className="orange">10 июня 2026</b>. Это не марафон, это система — с точками сверки, анкетами и индивидуальной сессией для каждого.
          </p>
          <div style={{fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.08em', color:'var(--cream-77)', lineHeight: 1.7}}>
            ФОРМАТ → ГРУППА 30 ЧЕЛОВЕК<br/>
            СРОК → 30 ДНЕЙ<br/>
            ЦЕНА → 30 000 ₽<br/>
            ЗАПУСКИ → 4 РАЗА В ГОД
          </div>
          <a className="btn btn-orange btn-lg" href="#waitlist">В лист ожидания →</a>
        </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:'1.2fr 1fr', gap: 48, alignItems:'start'}} className="split">
          <div>
            <p style={{fontSize: 18, lineHeight: 1.4, margin:'0 0 20px', letterSpacing:'-0.01em'}}>
              Челлендж — это <b className="orange">групповая активация</b> решения «Вес-лес» за 30 дней.
            </p>
            <p style={{fontSize: 14, lineHeight: 1.6, margin:'0 0 14px', color:'var(--cream-99)'}}>
              Вес возвращается, потому что тело держит его для какой-то функции — защита, граница, оправдание не жить свою жизнь. Пока эта функция не закрыта — никакая диета не удержит результат.
            </p>
            <p style={{fontSize: 14, lineHeight: 1.6, margin:'0 0 14px', color:'var(--cream-99)'}}>
              В челлендже мы за 30 дней проходим все слои: причину, тело, тестируем продукты, проверяем результат анкетой. У каждого участника — индивидуальная сессия по весу в любой момент. У каждой пары — баддинг по тесту совместимости.
            </p>
            <p style={{fontSize: 14, lineHeight: 1.6, margin: 0, color:'var(--cream-99)'}}>
              Слово «марафон» испорчено историей с Блиновской. Челлендж — нейтрально и современно. И мы делаем не «-15 кг к лету», а проверяемый системный сдвиг.
            </p>
          </div>
          <div className="ph" style={{height: 360, backgroundImage: "url('image/home-metaphor-forest.jpg')", backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat'}} role="img" aria-label="Лес — визуальная метафора"></div>
        </div>
      </section>

      {/* ЧТО ВНУТРИ */}
      <section className="section">
        <div className="tag">§ 02 — что входит в челлендж</div>
        <h2 className="poster poster-md" style={{margin:'20px 0 40px'}}>
          ВНУТРИ <span className="orange">30 ДНЕЙ.</span>
        </h2>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))', gap: 0, borderTop:'2px solid var(--cream)'}}>
          {[
            ['01','ИНДИ­ВИ­ДУ­АЛЬ­НАЯ СЕССИЯ','Терапевтическая сессия по весу для каждого участника. В любой момент челленджа — когда созрел запрос.'],
            ['02','15 ПАР · БАДДИ','Разбиваем 30 человек на пары по тесту совместимости. Бадди держит тебя весь челлендж — отчёт, поддержка, не соскользнуть в одиночку.'],
            ['03','ТЕСТИРОВАНИЕ ПРОДУКТОВ','30 дней — тестируем еду, что подходит твоему телу. Без жёстких диет — наблюдение и фиксация.'],
            ['04','БАДЫ И ПРЕПАРАТЫ','Рекомендации по антипаразитарке и БАДам, если есть показания. Покупает участник сам — мы помогаем ориентироваться.'],
            ['05','ТОЧКИ СВЕРКИ','Регулярные сверки в течение челленджа. Замеряем — не вес, а сдвиг. Тело, состояние, поведение.'],
            ['06','АНКЕТЫ А И Б','Анкета А на старте, анкета Б на финише. Не «как себя чувствуешь», а конкретные параметры — чтобы результат можно было проверить.'],
          ].map(([n,t,d],i)=>(
            <div key={n} style={{
              padding:'28px 24px',
              borderRight:'1px solid var(--cream-33)',
              borderBottom:'1px solid var(--cream-33)',
              minHeight: 240,
              display:'flex', flexDirection:'column', gap: 12,
            }}>
              <div className="orange" style={{fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.12em'}}>/{n}</div>
              <h3 className="poster poster-xs" style={{fontSize:'clamp(20px, 2.2vw, 26px)', margin: 0, lineHeight: 1.05}}>{t}</h3>
              <p style={{fontSize: 14, lineHeight: 1.5, margin: 0, color:'var(--cream-99)'}}>{d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ПЛЕЙСХОЛДЕР — РАЗВЁРНУТОЕ ОПИСАНИЕ */}
      <section className="section bg-deep">
        <div className="tag">§ 03 — детали программы</div>
        <h2 className="poster poster-md" style={{margin:'20px 0 28px'}}>
          КАК ИДЁТ <span className="orange">МЕСЯЦ.</span>
        </h2>
        <div style={{padding:'28px 32px', border:'1.5px dashed var(--cream-33)', background:'rgba(242,234,218,0.04)'}}>
          <p style={{fontFamily:'var(--f-mono)', fontSize: 11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--cream-77)', margin:'0 0 12px'}}>
            ▷ в процессе
          </p>
          <p style={{margin: 0, fontSize: 15, lineHeight: 1.55, color:'var(--cream-99)'}}>
            Развёрнутое описание программы дня за днём — с темами недель, упражнениями, точками сверки — Ксения готовит. Появится здесь, как только будет финальная версия. Если хочешь попасть в первый запуск 10 июня — оставляй заявку в листе ожидания, пришлём детали лично.
          </p>
        </div>
      </section>

      {/* ЗАПУСКИ */}
      <section className="section">
        <div className="tag">§ 04 — расписание запусков</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(220px, 1fr))', gap: 0, borderTop:'2px solid var(--cream)'}}>
          {[
            {n:'01', date:'10 ИЮНЯ 2026', q:'II КВАРТАЛ', status:'НАБОР ОТКРЫТ', accent:true},
            {n:'02', date:'СЕНТЯБРЬ 2026', q:'III КВАРТАЛ', status:'СКОРО'},
            {n:'03', date:'ДЕКАБРЬ 2026', q:'IV КВАРТАЛ', status:'СКОРО'},
            {n:'04', date:'МАРТ 2027', q:'I КВАРТАЛ', status:'СКОРО'},
          ].map((r,i)=>(
            <div key={r.n} style={{
              padding:'28px 24px',
              background: r.accent ? 'var(--accent)' : 'transparent',
              color: r.accent ? navy : cream,
              borderRight:'1px solid var(--cream-33)',
              borderBottom:'1px solid var(--cream-33)',
              minHeight: 200,
              display:'flex', flexDirection:'column', gap: 14,
            }}>
              <div style={{fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.12em', opacity: 0.7}}>/{r.n} · {r.q}</div>
              <div style={{fontFamily:'var(--f-display)', fontSize: 26, fontWeight: 900, letterSpacing:'-0.015em', lineHeight: 1.05}}>{r.date}</div>
              <div style={{fontFamily:'var(--f-mono)', fontSize: 11, letterSpacing:'0.14em', textTransform:'uppercase', fontWeight: 700, marginTop:'auto'}}>{r.status}</div>
            </div>
          ))}
        </div>
      </section>

      {/* СВЯЗКА С ПРОДУКТОМ */}
      <section className="section bg-cream" style={{color: navy}}>
        <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap: 48, alignItems:'center'}} className="split">
          <div>
            <div className="tag" style={{color:'var(--acid)'}}>§ 05 — отличие от программы «Вес-лес»</div>
            <h2 className="poster poster-md" style={{margin:'20px 0 28px'}}>
              ЭТО НЕ <span className="orange">ПРОГРАММА.</span>
            </h2>
            <p style={{fontSize: 16, lineHeight: 1.5, margin:'0 0 16px'}}>
              Челлендж — короткая групповая активация решения «Вес-лес» за 30 дней. Цена ниже, формат жёстче, поддержка — поле + бадди.
            </p>
            <p style={{fontSize: 14, lineHeight: 1.5, margin:'0 0 24px', color:'rgba(26,37,53,0.75)'}}>
              Программа «Вес-лес» — индивидуальный заход на 8 недель с собственным темпом, четырьмя сессиями и личным сопровождением. Глубже, дороже, без группы.
            </p>
            <a className="btn btn-orange" href="ves-les.html">→ Решение «Вес-лес» (программа)</a>
          </div>
          <div style={{padding:'32px', border:'2px solid '+navy, fontFamily:'var(--f-mono)', fontSize: 13, lineHeight: 1.7}}>
            <div style={{display:'flex', justifyContent:'space-between', borderBottom:'1px solid '+navy, paddingBottom: 8, marginBottom: 8, fontWeight: 700, letterSpacing:'0.1em'}}>
              <span>ПАРАМЕТР</span><span>ЧЕЛЛЕНДЖ</span><span>ПРОГРАММА</span>
            </div>
            {[
              ['СРОК','30 ДНЕЙ','8 НЕДЕЛЬ'],
              ['ЦЕНА','30 000 ₽','90 000 ₽'],
              ['ФОРМАТ','ГРУППА 30','ИНДИВИДУАЛЬНО'],
              ['СЕССИЙ','1','4'],
              ['ЗАПУСК','4 Р/ГОД','В ЛЮБОЕ ВРЕМЯ'],
            ].map(([k,a,b],i)=>(
              <div key={k} style={{display:'flex', justifyContent:'space-between', padding:'6px 0', borderBottom: i<4 ? '1px solid rgba(26,37,53,0.2)' : 'none'}}>
                <span style={{opacity: 0.6}}>{k}</span><span style={{fontWeight: 800, color:'var(--accent)'}}>{a}</span><span>{b}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section pad-lg bg-deep" id="waitlist">
        <div className="tag">● заявка в лист ожидания · челлендж 10 июня 2026</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}}>
              Места ограничены — 30 на запуск. Сначала — 15-минутный созвон: знакомимся, проверяем совместимость по тесту, отвечаем на вопросы. Потом — оплата и старт 10 июня.
            </p>
            <p style={{fontSize: 14, lineHeight: 1.5, color:'var(--cream-77)', margin: 0}}>
              Если не успел в этот запуск — встанешь в лист ожидания на сентябрь.
            </p>
          </div>
          <form className="form" onSubmit={(e)=>{e.preventDefault(); alert('Заявка на челлендж «Вес-лес» отправлена. Свяжемся в течение суток для созвона.');}}>
            <div><label htmlFor="ch-name">Имя</label><input id="ch-name" required name="name" placeholder="как к тебе обращаться"/></div>
            <div><label htmlFor="ch-contact">Telegram или e-mail</label><input id="ch-contact" required name="contact" placeholder="@username или mail@"/></div>
            <div><label htmlFor="ch-msg">Что хочешь сдвинуть за 30 дней (коротко)</label><textarea id="ch-msg" name="message" rows="3" placeholder="одна-две фразы"/></div>
            <button type="submit" className="btn btn-orange btn-lg">Записаться в лист ожидания →</button>
            <p style={{fontSize: 12, color:'var(--cream-77)', marginTop: 14, lineHeight: 1.5}}>
              Отправляя форму, ты соглашаешься с <a href="#" style={{color:'var(--cream-99)'}}>политикой конфиденциальности</a>. Мы не передаём данные третьим лицам.
            </p>
          </form>
        </div>
      </section>

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

window.ChallengeVesLes = ChallengeVesLes;