/* /for-whom — Для кого и не для кого */

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

      {/* HERO */}
      <section className="section" style={{paddingTop: 40}}>
        <div className="tag">/для кого</div>
        <h1 className="poster poster-xl" style={{marginTop: 24}}>
          ФИЛЬТР<br/>
          <span className="orange">НА ВХОДЕ.</span>
        </h1>
        <div className="rule-top" style={{marginTop: 32, display:'grid', gridTemplateColumns:'1.3fr 1fr', gap: 40, paddingTop: 24, alignItems:'start'}}>
          <p className="lead" style={{margin: 0}}>
            Мы не подходим всем. Это честно сказать заранее — и сохранить <b className="orange">время обеим сторонам</b>.
          </p>
          <div style={{fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.08em', color:'var(--cream-77)', lineHeight: 1.7}}>
            СТРАНИЦА → FOR-WHOM<br/>
            ЦЕЛЬ → САМОПРОВЕРКА ДО ЗАЯВКИ<br/>
            ЧЕСТНО → ЕСЛИ НЕ СОВПАЛО, НЕ НАСТАИВАЕМ
          </div>
        </div>
      </section>

      {/* ДЛЯ КОГО */}
      <section className="section">
        <div className="tag">§ 01 — заходи, если…</div>
        <h2 className="poster poster-md" style={{margin:'20px 0 40px'}}>
          ТЕБЕ <span className="orange">СЮДА,</span><br/>ЕСЛИ…
        </h2>
        <div className="grid2" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 0, borderTop:'2px solid var(--cream)'}}>
          {[
            ['ТЫ УСТАЛА ХОДИТЬ ПО КРУГУ','Один и тот же сценарий — третий, пятый раз. Знаешь это за собой и больше не хочешь.'],
            ['У ТЕБЯ УЖЕ ГОРИТ','Не «почему бы не попробовать», а «блин, я больше так не хочу». Именно с этим к нам.'],
            ['ТЫ ГОТОВА БРАТЬ ОТВЕТСТВЕННОСТЬ','За то, что происходит в твоей жизни, — включая «неприятные» части. Без этого метод не работает.'],
            ['ТЫ ЖЕНЩИНА 35—55','Не правило, а статистика: большинство наших клиенток именно такие. Но возраст — не фильтр.'],
            ['У ТЕБЯ ЕСТЬ ДЕНЬГИ НА ПРАКТИКУ','Сессия от 20 тыс. Мы не торгуемся — это инвестиция в результат, который не откатится.'],
            ['ТЫ ПРОБОВАЛА — НЕ СРАБОТАЛО','Психотерапия, коучинг, эзотерика, книжки. Осталось ощущение «всё правильно, но ничего не меняется».'],
          ].map(([t,d],i)=>(
            <div key={i} style={{
                padding:'32px 28px',
                borderBottom:'1px solid var(--cream-33)',
                borderRight: i%2===0 ? '1px solid var(--cream-33)' : 'none',
              }}>
              <div style={{display:'flex', gap: 20, alignItems:'baseline'}}>
                <span style={{fontFamily:'var(--f-mono)', fontSize: 12, color:'var(--accent)', letterSpacing:'0.1em', minWidth: 36}}>/0{i+1}</span>
                <div>
                  <h3 style={{fontFamily:'var(--f-display)', fontSize: 26, fontWeight: 900, letterSpacing:'-0.015em', margin:'0 0 10px', lineHeight: 1.1}}>
                    {t}
                  </h3>
                  <p style={{fontSize: 14, margin: 0, lineHeight: 1.5, color:'var(--cream-99)'}}>{d}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* КИСЛОТА — НЕ ДЛЯ КОГО */}
      <section className="bg-acid" style={{padding:'80px var(--px)'}}>
        <div className="tag" style={{color:'var(--navy)'}}>§ 02 — фильтр жёстче</div>
        <h2 className="poster poster-lg" style={{margin:'20px 0 40px'}}>
          ПРОЙДИ <i>МИМО,</i><br/>
          ЕСЛИ ТЫ…
        </h2>
        <div className="grid3" style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(320px, 1fr))', gap:'20px 60px'}}>
          {[
            ['ТУРИСТ','Пришла посмотреть, «как у них». Коллекционируешь школы и техники.'],
            ['ИСКАТЕЛЬ ХАЛЯВЫ','«А можно что-нибудь бесплатно, попробовать?» Нет. Мы уважаем свой труд.'],
            ['КОЛЛЕКЦИОНЕР ИНСАЙТОВ','Умеешь красиво формулировать про себя. Только ничего не меняется.'],
            ['ТРЕБУЮЩИЙ ДОКАЗАТЕЛЬСТВ','«Докажите, что работает — и тогда я подумаю». Мы не доказываем. Работаем.'],
            ['ПРИШЕДШИЙ ЗА ДРУГОГО','«Почините мне мужа / маму / ребёнка». Мы работаем только с тем, кто напротив.'],
            ['В ИЗМЕНЁННЫХ СОСТОЯНИЯХ','Психотропные препараты, алкоголь, наркотики. Это не морализм — это безопасность.'],
          ].map(([t,d],i)=>(
            <div key={i} style={{display:'flex', gap: 20, paddingTop: 20, borderTop:'1.5px solid var(--navy)'}}>
              <span style={{fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.1em', minWidth: 36}}>/0{i+1}</span>
              <div>
                <div style={{fontFamily:'var(--f-display)', fontSize: 23, fontWeight: 900, letterSpacing:'-0.01em', marginBottom: 8, lineHeight: 1.05}}>{t}</div>
                <div style={{fontSize: 15, lineHeight: 1.5}}>{d}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{marginTop: 56, padding:'28px 0', borderTop:'2px solid var(--navy)'}}>
          <p className="poster poster-xs" style={{fontSize:'clamp(29px, 3.51vw, 40px)', margin:0, lineHeight: 1.05}}>
            Это не про «плохие / хорошие». Это про то, что <span style={{background:'var(--navy)', color:'var(--acid)', padding:'0 12px'}}>мы не сработаемся</span> — и это нормально.
          </p>
        </div>
      </section>

      {/* 3 ВОПРОСА К СЕБЕ */}
      <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">ЕСЛИ НА ВСЕ ТРИ ДА /<br/>ЗАХОДИ</div>
        </div>
        <div className="q3" style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 0, border:'2px solid var(--cream)'}}>
          {[
            ['01','Я готова увидеть, что в моих повторах есть моя часть?','Не «я жертва обстоятельств». А «ок, что я делаю такого, что эта ситуация повторяется».'],
            ['02','Я готова вложить деньги и 2—4 недели практики после?','Одна сессия — не волшебная таблетка. После — время на встраивание. Готова дать это время?'],
            ['03','Я готова услышать «да» и «нет», а не только приятное?','Мы говорим то, что видим. Иногда это неудобно. Если нужна поддержка и комплимент — это не к нам.'],
          ].map(([n,q,d],i)=>(
            <div key={n} style={{
                padding: 36,
                borderRight: i<2 ? '1px solid var(--cream-33)' : 'none',
                display:'flex', flexDirection:'column', minHeight: 340,
              }}>
              <div style={{fontFamily:'var(--f-display)', fontSize: 96, fontWeight: 900, color:'var(--accent)', lineHeight: 0.85, letterSpacing:'-0.05em', marginBottom: 24}}>{n}</div>
              <div style={{fontFamily:'var(--f-display)', fontSize: 15, fontWeight: 800, letterSpacing:'-0.01em', lineHeight: 1.2, marginBottom: 16, flex: 1}}>{q}</div>
              <p style={{fontSize: 14, margin: 0, lineHeight: 1.5, color:'var(--cream-99)', fontStyle:'italic'}}>{d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="bg-orange" style={{padding:'72px var(--px)', color: navy}}>
        <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 48, alignItems:'end'}} className="cta-split">
          <h2 className="poster poster-lg" style={{margin: 0}}>
            СОШЛОСЬ?<br/>ПОШЛИ.
          </h2>
          <div style={{display:'flex', flexDirection:'column', gap: 16, paddingBottom: 12}}>
            <a className="btn btn-lg" style={{background: navy, color:'var(--cream)'}} href="session.html">Записаться на сессию →</a>
            <a className="btn btn-lg" style={{background:'transparent', color: navy, border:'2px solid '+navy}} href="method.html">← Назад к методу</a>
          </div>
        </div>
      </section>

      <NextSteps
        title={<>ПОДХОДИТ — <span className="orange">ИДЁМ.</span></>}
        items={[
          {label:'Кто мы', desc:'Две со-основательницы, их путь и почему вместе.', href:'about.html'},
          {label:'Кейсы', desc:'Реальные истории: до / после / что делали / цитата.', href:'cases.html'},
          {label:'Сессия', desc:'Записаться на первую встречу. 90 минут.', href:'session.html', primary:true},
        ]}
      />

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

window.ForWhom = ForWhom;