/* /programs/relations — программа Отношения */

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

      {/* 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/vert-relations-hero.jpg')",
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat'
      }}>
        <div className="tag">/программы · 02 — отношения</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'}}>
          {[
            ['ФОРМАТ','программа, 4 сессии'],
            ['ДЛИТЕЛЬНОСТЬ','2 месяца'],
            ['ЦЕНА','от 90 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-orange" style={{color: navy, paddingTop: 64, paddingBottom: 64}}>
        <div className="tag" style={{color: navy, opacity: 0.7}}>§ 01 — о чём сразу</div>
        <h2 className="poster" style={{fontSize:'clamp(52px, 7.00vw, 110px)', margin:'20px 0 40px', letterSpacing:'-0.035em', lineHeight: 0.9}}>
          МЫ <i style={{fontWeight: 300}}>НЕ ЧИНИМ</i><br/>
          МУЖЕЙ.
        </h2>
        <p style={{fontSize: 15, lineHeight: 1.4, maxWidth: 820, fontWeight: 500, letterSpacing:'-0.01em'}}>
          Не «как его вернуть», не «как заставить жениться», не «как сделать из него того самого». Работаем только с тобой. Парадокс в том, что именно так отношения и меняются.
        </p>
      </section>

      {/* ТРИ СЦЕНАРИЯ */}
      <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">3 ЧАСТЫХ СЦЕНАРИЯ</div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 0, borderTop:'2px solid var(--cream)'}} className="scen-grid">
          {[
            {n:'01', t:'СПАСАТЕЛЬНИЦА', d:'Выбираешь тех, кого «надо вытаскивать». Алкоголь, долги, мама, депрессия. Пока чинишь его — чувствуешь себя нужной.', quote:'«Я из него человека сделаю»'},
            {n:'02', t:'НЕДОСТУПНЫЙ', d:'Он женат / в другой стране / холодный / не звонит. Ты снова и снова добиваешься внимания от того, кто его не даёт.', quote:'«Я же особенная — добьюсь»'},
            {n:'03', t:'САМА СПРАВЛЮСЬ', d:'Формально отношения есть. По факту — ты и дом, и работа, и ребёнок, и его настроение. Он — гость.', quote:'«Проще сделать самой»'},
          ].map((x,i)=>(
            <div key={x.n} style={{padding:'32px 28px 32px 0', borderRight: i<2 ? '1px solid var(--cream-33)' : 'none', minHeight: 320, display:'flex', flexDirection:'column'}}>
              <div className="orange" style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', marginBottom: 18}}>/{x.n}</div>
              <h3 className="poster poster-xs" style={{fontSize:'clamp(23px, 2.60vw, 32px)', margin:'0 0 14px'}}>{x.t}</h3>
              <p style={{fontSize: 14, lineHeight: 1.5, margin:'0 0 18px', color:'var(--cream-99)', flex: 1}}>{x.d}</p>
              <div style={{fontFamily:'var(--f-display)', fontSize: 15, fontStyle:'italic', fontWeight: 500, color:'var(--cream-99)', paddingTop: 14, borderTop:'1px solid var(--cream-33)', letterSpacing:'-0.005em'}}>
                {x.quote}
              </div>
            </div>
          ))}
        </div>
        <p style={{fontSize: 14, fontStyle:'italic', color:'var(--cream-77)', marginTop: 24}}>
          Это не «типы мужчин». Это твои сценарии, в которых ты их находишь. Меняешь сценарий — меняется состав героев.
        </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}}>ЧЕТЫРЕ ШАГА.</h2>
          </div>
          <div className="right">2 МЕСЯЦА /<br/>4 СЕССИИ · 90 МИН</div>
        </div>
        <div>
          {[
            ['01','СЦЕНАРИЙ','Восстанавливаем повторяющийся рисунок. Без «он козёл» и «мне не везёт». Смотрим на собственную роль — ту, которую ты играешь раз за разом.'],
            ['02','ОТЕЦ','90% историй про мужчин — про отца. Не «обвинить», а развидеть. Работаем с первой мужской фигурой — её присутствие, отсутствие, обиды, ожидания.'],
            ['03','ТЕЛО','Тело помнит всех. Работаем с тем, что ты замораживаешь, когда появляется «нормальный, свободный, рядом». Часто он кажется скучным — это признак.'],
            ['04','СБОРКА','Новая позиция. Что ты готова принять. Где проходит граница. Что делаешь, если старый сценарий снова звонит в дверь.'],
          ].map(([n,t,d])=>(
            <div key={n} className="stage-row" style={{
                display:'grid', gridTemplateColumns:'90px 1fr 1.8fr',
                gap: 32, alignItems:'start', padding:'26px 0',
                borderTop:'2px solid var(--cream)',
              }}>
              <span style={{fontFamily:'var(--f-display)', fontSize: 55, fontWeight: 900, color:'var(--accent)', lineHeight: 0.9, letterSpacing:'-0.03em'}}>{n}</span>
              <span style={{fontFamily:'var(--f-display)', fontSize:'clamp(29px, 3.19vw, 40px)', fontWeight: 900, letterSpacing:'-0.02em', lineHeight: 1}}>{t}</span>
              <span style={{fontSize: 12, color:'var(--cream-99)', lineHeight: 1.5, paddingTop: 8}}>{d}</span>
            </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 style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 0}} className="res-grid">
          <div style={{borderTop:'2px solid var(--cream)', borderRight:'1px solid var(--cream-33)', padding:'24px 32px 24px 0'}}>
            <div className="tag" style={{color:'var(--acid)', marginBottom: 16}}>◁ БЫЛО</div>
            <ul style={{listStyle:'none', padding: 0, margin: 0, display:'flex', flexDirection:'column', gap: 14}}>
              {['«Хорошие — все заняты»','Ревность в фоне всегда','Жду сообщений часами','Не могу просить — обижаюсь молча','Страх остаться одной — сильнее любви'].map((t,i)=>(
                <li key={i} style={{fontSize: 14, lineHeight: 1.4, paddingLeft: 22, position:'relative', color:'var(--cream-99)', textDecoration:'line-through', textDecorationColor:'var(--cream-33)'}}>
                  <span style={{position:'absolute', left: 0, color:'var(--cream-77)'}}>×</span>{t}
                </li>
              ))}
            </ul>
          </div>
          <div style={{borderTop:'2px solid var(--accent)', padding:'24px 0 24px 32px'}}>
            <div className="tag orange" style={{marginBottom: 16}}>▷ СТАЛО</div>
            <ul style={{listStyle:'none', padding: 0, margin: 0, display:'flex', flexDirection:'column', gap: 14}}>
              {[
                'Видно, кто свой — с первой встречи',
                'Ревность ушла, доверие — не усилие',
                'Легко говорю «мне нужно»',
                'Границы — без ссор и драм',
                'Одной — тоже хорошо, поэтому рядом хочется по любви',
              ].map((t,i)=>(
                <li key={i} style={{fontSize: 14, lineHeight: 1.4, paddingLeft: 22, position:'relative', fontWeight: 600}}>
                  <span style={{position:'absolute', left: 0, color:'var(--accent)', fontWeight: 800}}>→</span>{t}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* ДВА ОТЗЫВА */}
      <section className="section bg-cream" style={{color: navy}}>
        <div className="tag" style={{color: 'var(--acid)', marginBottom: 20}}>§ 05 — две истории</div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 48}} className="rev2-grid">
          {[
            {
              q:'«Поняла, что я всё время выбирала мужчин, чтобы спасать. Перестала — и на горизонте появился тот, кто сам стоит на ногах.»',
              d:'Пришла после третьего расставания по одной схеме. После программы — пауза, потом новые отношения, сейчас живут вместе второй год.',
              name:'МАРИНА, 36 / ПРОГРАММА ОТНОШЕНИЯ 2023',
            },
            {
              q:'«Мы с мужем 14 лет. После моей программы начал меняться он — без разговоров, просто стало иначе дома.»',
              d:'Запрос: «устала тянуть одна». В браке остались — но переразложили роли. Муж вышел из «подростка», появился партнёр.',
              name:'ОЛЬГА, 42 / В БРАКЕ · ПРОГРАММА ОТНОШЕНИЯ 2024',
            },
          ].map((r,i)=>(
            <figure key={i} style={{margin: 0, borderTop:'2px solid var(--navy)', paddingTop: 24}}>
              <blockquote style={{margin: 0}}>
                <div style={{fontFamily:'var(--f-display)', fontSize:'clamp(22px, 2.40vw, 29px)', fontWeight: 900, lineHeight: 1.15, letterSpacing:'-0.015em', margin:'0 0 16px'}}>
                  {r.q}
                </div>
                <div style={{fontSize: 15, lineHeight: 1.55, margin:'0 0 16px', color:'rgba(26,37,53,0.8)'}}>{r.d}</div>
                <figcaption style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.1em', textTransform:'uppercase', opacity: 0.7}}>
                  {r.name}
                </figcaption>
              </blockquote>
            </figure>
          ))}
        </div>
      </section>

      {/* FAQ */}
      <section className="section">
        <div className="tag">§ 06 — вопросы</div>
        <h2 className="poster poster-md" style={{margin:'20px 0 40px'}}>ЧЕСТНО.</h2>
        <div>
          {[
            ['Я не в отношениях сейчас. Мне подойдёт?','Подойдёт идеально. Лучшее время работать с отношениями — пауза. Когда никто не отвлекает от собственного сценария.'],
            ['Я в браке 15 лет. Не поздно?','Нет. Часто программа «вытягивает» долгий брак — уходит усталость, возвращается интерес. Иногда — наоборот, помогает расставанию без драмы. Оба варианта — ок.'],
            ['Можно ли прийти с мужем?','В программе — нет. Программа индивидуальная, работаем только с тобой. Для пары есть отдельный формат в рамках VIP.'],
            ['Я лесбийка / бисексуальна. Подойдёт?','Конечно. Работаем со сценариями, а сценарий не зависит от пола партнёра. Сценарий «спасать», «догонять», «тянуть одной» — универсальный.'],
            ['А если я боюсь, что после программы уйду от мужа?','Такое бывает. Программа не «сохраняет отношения любой ценой». Она помогает увидеть, что ты в них на самом деле выбираешь — и осознанно решить.'],
          ].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}}>
              Перед стартом — 15 минут бесплатного созвона. Убеждаемся, что программа — про твою ситуацию.
            </p>
            <div style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.08em', color:'var(--cream-77)', lineHeight: 1.8}}>
              БЛИЖАЙШИЙ ПОТОК → МАЙ<br/>
              СЛОТОВ В ПОТОКЕ → 10<br/>
              СВОБОДНО → <span style={{color:'var(--accent)'}}>4</span><br/>
              РАССРОЧКА → 2 ПЛАТЕЖА
            </div>
          </div>
          <form className="form" onSubmit={(e)=>{e.preventDefault(); alert('Заявка на программу «Отношения» отправлена. Напишем в течение суток для созвона.');}}>
            <div><label htmlFor="r-name">Имя</label><input id="r-name" name="name" type="text" required/></div>
            <div><label htmlFor="r-tg">Telegram или WhatsApp</label><input id="r-tg" name="contact" type="text" required placeholder="@username или +7…"/></div>
            <div><label htmlFor="r-st">Сейчас</label>
              <select id="r-st" name="state" 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}}>Развожусь / после расставания</option>
                <option style={{background: navy}}>Сложно сформулировать</option>
              </select>
            </div>
            <div><label htmlFor="r-q">Коротко о ситуации</label><textarea id="r-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.Relations = Relations;