/* /programs/ves-les — Программа «Вес-лес» */

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

      {/* 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/home-metaphor-forest.jpg')",
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat'
      }}>
        <a href="challenge-ves-les.html" className="format-new" style={{
          display:'inline-flex', alignItems:'center', gap:10, padding:'8px 14px',
          background:'rgba(227,104,62,0.14)', border:'1.5px solid var(--accent)',
          color:'var(--cream)', textDecoration:'none', fontFamily:'var(--f-mono)',
          fontSize: 12, letterSpacing:'0.12em', textTransform:'uppercase', fontWeight: 700,
          marginBottom: 16,
        }}>
          <span style={{color:'var(--accent)'}}>● NEW</span>
          Челлендж «Вес-лес» — 30 дней, 30 000 ₽ →
        </a>
        <div className="tag">/программы · /01 вес-лес</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:'1.3fr 1fr auto', gap: 32, padding:'32px 0', alignItems:'center'}}>
          <p className="lead" style={{margin: 0}}>
            Это программа для тех, кто сбрасывает — и возвращает. Потому что тело защищает чем-то, от чего не успели договориться.
          </p>
          <div style={{fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.08em', color:'var(--cream-77)', lineHeight: 1.7}}>
            ФОРМАТ → 4 СЕССИИ + ЧАТ<br/>
            СРОК → 2—3 МЕСЯЦА<br/>
            ЦЕНА → 90 000 ₽
          </div>
          <a className="btn btn-orange btn-lg" href="#record">Записаться →</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: 15, lineHeight: 1.4, margin:'0 0 20px', letterSpacing:'-0.01em'}}>
              Лишний вес — это не ошибка организма. Это его <b className="orange">решение</b>.
            </p>
            <p style={{fontSize: 12, lineHeight: 1.6, margin:'0 0 14px', color:'var(--cream-99)'}}>
              Тело удерживает объём, потому что он для чего-то служит: защита, граница, «щит от мира», «щит от внимания», оправдание, способ не жить свою жизнь.
            </p>
            <p style={{fontSize: 12, lineHeight: 1.6, margin: 0, color:'var(--cream-99)'}}>
              Пока эта функция не закрыта — организм вернёт вес. Сколько бы ты ни считала калории. Потому что калории — на один уровень, а решение — на другой.
            </p>
          </div>
          <div className="ph" style={{height: 360, backgroundImage: "url('image/vesles-forest.jpg')", backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat'}} role="img" aria-label="Лес — визуальная метафора"></div>
        </div>
      </section>

      {/* 4 ФУНКЦИИ ЛИШНЕГО ВЕСА */}
      <section className="section">
        <div className="tag">§ 02 — четыре частых функции</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','ОТ ВНИМАНИЯ','Раннее сексуальное, травматичное внимание. Тело помнит и решает: не буду привлекательной — не будет опасно.'],
            ['02','ОТ ГРАНИЦ','Не умеешь говорить «нет» словами. Тело говорит за тебя — объёмом, которым отодвигает.'],
            ['03','ОТ УСПЕХА','Мама была несчастна худой. Стать успешной и худой = предать маму. Тело решает: лучше быть как она.'],
            ['04','ОТ ОДИНОЧЕСТВА','Еда — единственная постоянная забота о себе в жизни, где больше никто не позаботился.'],
          ].map(([n,t,d],i)=>(
            <div key={n} style={{
                padding:'28px 24px',
                borderRight: i<3 ? '1px solid var(--cream-33)' : 'none',
                borderBottom:'1px solid var(--cream-33)',
                minHeight: 280, display:'flex', flexDirection:'column',
              }}>
              <div className="orange" style={{fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.12em', marginBottom: 16}}>/{n}</div>
              <h3 className="poster poster-xs" style={{fontSize:'clamp(29px, 2.81vw, 34px)', margin:'0 0 12px'}}>{t}</h3>
              <p style={{fontSize: 14, lineHeight: 1.5, margin: 0, color:'var(--cream-99)'}}>{d}</p>
            </div>
          ))}
        </div>
        <p style={{fontSize: 15, color:'var(--cream-77)', marginTop: 20, fontStyle:'italic'}}>
          Частые сценарии. У тебя может быть своё — разбираемся на сессии.
        </p>
      </section>

      {/* СТРУКТУРА 4 СЕССИИ */}
      <section className="section bg-deep">
        <div className="kicker-row">
          <div>
            <div className="tag">§ 03 — структура программы</div>
            <h2 className="poster poster-md" style={{marginTop: 12}}>ЧЕТЫРЕ <span className="orange">ВСТРЕЧИ</span>.</h2>
          </div>
          <div className="right">2—3 МЕСЯЦА /<br/>ПО СЕССИИ КАЖДЫЕ 2—3 НЕДЕЛИ</div>
        </div>
        <div>
          {[
            ['01','ТОЧКА ОТСЧЁТА','90 мин','Собираем картину: история веса, попытки, что сработало и что вернулось. Находим первую функцию — для чего тело держит.'],
            ['02','МЕТОД ХЕЛ­ЛИН­ГЕ­РА','90 мин','Работаем с системой, которая закрепила эту функцию. Род, сцены, роли. Смещаем то, что можно сместить.'],
            ['03','ВСЕ­ЛЕН­СКАЯ ТЕРАПИЯ','90 мин','Выходим за пределы личной биографии. Сценарии, которые ты несёшь, не начав их.'],
            ['04','СБОРКА','90 мин','Проверяем, что встало. Закрепляем новый контакт с телом. План на полгода вперёд.'],
          ].map(([n,t,tm,d],i)=>(
            <div key={n} style={{
                display:'grid', gridTemplateColumns:'80px 1fr 1.5fr 120px',
                gap: 32, alignItems:'center', padding:'28px 0',
                borderTop: i===0 ? '2px solid var(--cream)' : '1px solid var(--cream-33)',
              }} className="stage-row">
              <span style={{fontFamily:'var(--f-display)', fontSize: 48, fontWeight: 900, color:'var(--accent)', lineHeight: 1, letterSpacing:'-0.03em'}}>{n}</span>
              <span style={{fontFamily:'var(--f-display)', fontSize: 'clamp(19px, 2.4vw, 26px)', fontWeight: 900, letterSpacing:'-0.015em', lineHeight: 1.1}}>{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 style={{borderTop:'1px solid var(--cream-33)', paddingTop: 24, marginTop: 8, fontSize: 15, color:'var(--cream-99)'}}>
            <b style={{color:'var(--accent)', marginRight: 8}}>+</b>
            Между сессиями — чат поддержки и сборочные задания. Не «диета» — практики контакта с телом.
          </div>
        </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 className="grid2nd" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 0}}>
          {[
            ['ДИЕТА','Мы не даём меню, не считаем калории. Это не наша зона.'],
            ['ПСИ­ХО­ТЕ­РА­ПИЯ','Не разбираем детство по эпизодам. Работаем иначе.'],
            ['«МОТИВАЦИЯ»','Никаких «верь в себя». Сила воли — не наш инструмент.'],
            ['ГАРАНТИЯ КИЛОГРАММОВ','Мы не обещаем «−15 кг». Мы работаем с причиной. Килограммы — следствие.'],
          ].map(([t,d],i)=>(
            <div key={i} style={{
                padding:'28px 24px',
                borderTop:'1px solid var(--cream-33)',
                borderLeft: i%2===1 ? '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>

      {/* КЕЙС */}
      <section className="section bg-cream" style={{color: navy}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.4fr', gap: 48, alignItems:'center'}} className="case-split">
          <div className="ph light" style={{height: 380, backgroundImage: "url('image/vesles-before-after.jpg')", backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat'}} role="img" aria-label="До и после"></div>
          <figure style={{margin: 0}}>
            <div className="tag" style={{color:'var(--acid)', marginBottom: 16}}>§ 05 — одна история</div>
            <div style={{display:'flex', gap: 32, margin:'0 0 20px'}}>
              <div>
                <div style={{fontFamily:'var(--f-mono)', fontSize: 11, letterSpacing:'0.12em', opacity: 0.7}}>ДО</div>
                <div style={{fontFamily:'var(--f-display)', fontSize: 44, fontWeight: 900, letterSpacing:'-0.03em'}}>92 кг</div>
              </div>
              <div>
                <div style={{fontFamily:'var(--f-mono)', fontSize: 11, letterSpacing:'0.12em', opacity: 0.7, color:'var(--acid)'}}>ПОСЛЕ / 7 МЕС.</div>
                <div style={{fontFamily:'var(--f-display)', fontSize: 44, fontWeight: 900, letterSpacing:'-0.03em'}} className="orange">77 кг</div>
              </div>
            </div>
            <blockquote style={{margin: 0}}>
              <div style={{fontFamily:'var(--f-display)', fontSize:'clamp(23px, 2.60vw, 30px)', fontWeight: 900, lineHeight: 1.15, letterSpacing:'-0.01em', margin:'0 0 16px'}}>
                «На второй сессии поняла, что ем за маму. За то, что она себе не позволяла. После работы это ушло само — без силы воли.»
              </div>
              <figcaption style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', textTransform:'uppercase', opacity: 0.7}}>
                МАРИНА, 45 / ВЕС-ЛЕС / 4 СЕССИИ
              </figcaption>
            </blockquote>
          </figure>
        </div>
      </section>

      {/* CTA */}
      <section className="section pad-lg" id="record">
        <div className="tag">● запись на программу</div>
        <h2 className="poster poster-lg" style={{margin:'20px 0 40px'}}>
          ИДЁМ<br/><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}}>
              Оставь контакт. Сначала — короткий созвон на 15 минут, чтобы понять, подходит ли программа именно тебе.
            </p>
            <div style={{fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.08em', color:'var(--cream-77)', lineHeight: 1.8}}>
              ФОРМАТ → 4 СЕССИИ + ЧАТ<br/>
              СРОК → 2—3 МЕСЯЦА<br/>
              СТОИМОСТЬ → 90 000 ₽ ЦЕЛИКОМ ИЛИ 2×50 000 ₽<br/>
              СТАРТ → СЛЕДУЮЩАЯ НЕДЕЛЯ
            </div>
          </div>
          <form className="form" onSubmit={(e)=>{e.preventDefault(); alert('Заявка на программу отправлена.');}}>
            <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-q">Коротко о запросе (по желанию)</label><textarea id="v-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.VesLes = VesLes;