/* /about — от кого + контакты (с якорем #contacts) */

const About = () => {
  const navy = '#1A2535';
  const cream = '#F2EADA';

  const [form, setForm] = React.useState({ name:'', contact:'', topic:'общий вопрос', message:'' });
  const [sent, setSent] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.contact) return;
    setSent(true);
  };

  return (
    <main className="page">
      <Marquee on={window.__tweaks?.marquee !== false}/>
      <Nav current="about"/>

      {/* HERO */}
      <section className="section" style={{paddingTop: 40}}>
        <div className="tag">/от кого · авторы метода</div>
        <div style={{display:'grid', gridTemplateColumns:'1.5fr 1fr', gap: 40, alignItems:'end', marginTop: 24}} className="hero-grid">
          <h1 className="poster poster-xl" style={{margin: 0}}>
            ДВЕ ЖЕНЩИНЫ.<br/>
            <span className="orange"><i>ОДИН МЕТОД.</i></span>
          </h1>
          <div style={{paddingBottom: 12}}>
            <p className="lead" style={{margin: 0, maxWidth: 460, color:'var(--cream-99)'}}>
              Евгения Новиковская и Ксения Пуляткина. Мы собрали «ОСОЗНАНКА НАИЗНАНКУ», потому что не нашли метод, который работает с причиной, а не симптомом. Ниже — кто мы и как связаться.
            </p>
          </div>
        </div>

        <div className="rule-top rule-bottom" style={{marginTop: 32, display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(140px, 1fr))', gap: 24, padding:'32px 0'}}>
          {[
            ['КЛИЕНТОВ МЕТОДА','100+'],
            ['СЕССИЙ','1000+'],
            ['ЛЕТ ПРАКТИК','30+'],
            ['ЛЕТ С МЕТОДОМ ХЕЛ­ЛИН­ГЕ­РА','15+'],
            ['ЛЕТ ВСЕ­ЛЕН­СКАЯ ТЕРАПИЯ','3+'],
          ].map(([k,v])=>(
            <div key={k}>
              <div style={{fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.12em', color:'var(--cream-77)', marginBottom: 10}}>/{k.toLowerCase()}</div>
              <div className="orange" style={{fontFamily:'var(--f-display)', fontSize:'clamp(34px, 5.00vw, 64px)', fontWeight: 900, letterSpacing:'-0.03em', lineHeight: 1}}>{v}</div>
            </div>
          ))}
        </div>

        <div style={{marginTop: 14, fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.08em', color:'var(--cream-77)'}}>
          ▼ метод новый и проходит патентное бюро — цифры честные, не круглые
        </div>
      </section>

      {/* МАНИФЕСТ */}
      <section className="section bg-deep">
        <div className="tag">§ зачем мы это сделали</div>
        <h2 className="poster poster-lg" style={{margin:'20px 0 40px'}}>
          ИСКАЛИ.<br/>
          НЕ НАШЛИ.<br/>
          <span className="orange"><i>СДЕЛАЛИ СВОЙ.</i></span>
        </h2>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 48}} className="manifest-grid">
          <div style={{fontSize: 14, lineHeight: 1.6, color:'var(--cream-99)'}}>
            <p style={{margin:'0 0 18px'}}>
              Мы встретились на пересечении разных путей — телесных практик, осознанного движения, голосовой работы, системной психологии и метода Хеллингера. Каждая из нас шла своей дорогой, но искала одно и то же: метод, который работает не через голову, а через живой опыт.
            </p>
            <p style={{margin:'0 0 18px'}}>
              Метод, в котором результат фиксируется в теле — иначе мы не считаем работу завершённой. Мы перепробовали десятки подходов, учились у разных мастеров, прошли через разные традиции.
            </p>
          </div>
          <div style={{fontSize: 14, lineHeight: 1.6, color:'var(--cream-99)'}}>
            <p style={{margin:'0 0 18px'}}>
              И в какой-то момент поняли: то, что мы ищем, нужно создать самим. Так родилась «ОСОЗНАНКА НАИЗНАНКУ» — метод, который соединяет тело, внимание, контакт и работу с причиной состояния.
            </p>
            <p style={{margin:'0 0 18px'}}>
              Не как теорию, а как живую практику, которую можно почувствовать с первой встречи. Если это звучит как про тебя — <a href="#contacts" style={{color:'var(--accent)', textDecoration:'underline', textDecorationThickness: 2, textUnderlineOffset: 4, fontWeight: 600}}>напиши нам ниже</a>.
            </p>
          </div>
        </div>

        <div style={{marginTop: 48, padding:'32px 36px', border:'1.5px solid var(--accent)', background:'rgba(227,104,62,0.08)'}}>
          <div className="tag" style={{marginBottom: 14}}>§ почему «наизнанку»</div>
          <p style={{margin: 0, fontSize: 'clamp(19px, 2.19vw, 26px)', lineHeight: 1.4, fontWeight: 500, maxWidth: 900}}>
            Потому что мы не работаем со «стороной для показа». Мы идём туда, где больно, страшно, непонятно — туда, где живёт настоящая причина. И выворачиваем наружу то, что обычно прячется. <span className="orange">Без глянца. Без фильтров. Без цензуры. По-настоящему.</span>
          </p>
        </div>
      </section>

      {/* АВТОР 1 — ЕВГЕНИЯ */}
      <section className="section">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.4fr', gap: 56, alignItems:'start'}} className="founder-grid">
          <div>
            <div className="ph" style={{height: 480, fontSize: 60, border:'1.5px solid var(--cream-33)'}}>◐</div>
            <div style={{marginTop: 20, fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.12em', color:'var(--cream-77)'}}>
              /автор 01 · со-основатель
            </div>
          </div>
          <div>
            <div className="tag" style={{marginBottom: 14}}>ЕВГЕНИЯ НОВИКОВСКАЯ</div>
            <h3 className="poster" style={{fontSize:'clamp(40px, 5.51vw, 81px)', lineHeight: 1, margin:'0 0 28px', fontWeight: 900, letterSpacing:'-0.03em'}}>
              ТЕЛО КАК<br/>
              <span className="orange">СОБЕСЕДНИК.</span>
            </h3>

            <div style={{display:'flex', flexDirection:'column', gap: 22, fontSize: 12, lineHeight: 1.6, color:'var(--cream-99)'}}>
              <p style={{margin: 0}}>
                Практик телесно-ориентированного подхода с 10-летним опытом. Исследую, как через тело можно возвращаться к себе — к своей чувствительности, присутствию и живости.
              </p>
              <p style={{margin: 0}}>
                Работаю с причиной состояния и фиксацией результата в теле. Для меня работа завершена только тогда, когда изменение закрепилось не в голове, а в мышцах, дыхании, позе. Разговор — это начало. Тело — это подтверждение.
              </p>
              <p style={{margin: 0}}>
                В пару с Ксенией я приношу глубину телесного опыта и чувствительность к процессу. Замечаю то, что пока не названо. Держу контекст, пока она двигает процесс.
              </p>
            </div>

            <blockquote style={{
              margin:'32px 0 0', padding:'22px 26px',
              background: cream, color: navy, borderLeft:'6px solid '+navy,
            }}>
              <p style={{margin: 0, fontFamily:'var(--f-display)', fontStyle:'italic', fontSize:'clamp(18px, 1.90vw, 22px)', lineHeight: 1.4, fontWeight: 500}}>
                «Тело — не инструмент. Оно живой собеседник. Лучший способ узнать себя — начать его слушать».
              </p>
            </blockquote>

            <div style={{marginTop: 24, display:'flex', gap: 10, flexWrap:'wrap'}}>
              <a href="https://t.me/soulnovikovskaya" target="_blank" rel="noreferrer" className="soc-btn">
                <span style={{fontWeight: 700, color:'var(--accent)'}}>TG</span> @soulnovikovskaya
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* АВТОР 2 — КСЕНИЯ */}
      <section className="section bg-deep">
        <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 56, alignItems:'start'}} className="founder-grid-flip">
          <div>
            <div className="tag" style={{marginBottom: 14}}>КСЕНИЯ ПУЛЯТКИНА</div>
            <h3 className="poster" style={{fontSize:'clamp(40px, 5.51vw, 81px)', lineHeight: 1, margin:'0 0 28px', fontWeight: 900, letterSpacing:'-0.03em'}}>
              ГОЛОС,<br/>
              ДВИЖЕНИЕ,<br/>
              <span className="orange">КОНТАКТ.</span>
            </h3>

            <div style={{display:'flex', flexDirection:'column', gap: 22, fontSize: 12, lineHeight: 1.6, color:'var(--cream-99)'}}>
              <p style={{margin: 0}}>
                Практик осознанного движения и голосовых практик. Работаю на стыке тела, звука и творчества. Помогаю найти уникальный способ контакта с собой — не универсальный протокол, а твой, личный.
              </p>
              <p style={{margin: 0}}>
                Не верю в «одного правильного пути». Верю в то, что каждый человек уже содержит ответы — просто перестал их слышать. Моя задача — не дать инструкцию, а вернуть слух.
              </p>
              <p style={{margin: 0}}>
                В пару с Евгенией я приношу творческую энергию, голос и смелость эксперимента. Называю то, что она заметила. Двигаю процесс, пока она держит контекст.
              </p>
            </div>

            <blockquote style={{
              margin:'32px 0 0', padding:'22px 26px',
              background:'var(--accent)', color: navy, borderLeft:'6px solid '+navy,
            }}>
              <p style={{margin: 0, fontFamily:'var(--f-display)', fontStyle:'italic', fontSize:'clamp(18px, 1.90vw, 22px)', lineHeight: 1.4, fontWeight: 500}}>
                «Задача практики — не добавить что-то новое, а помочь вспомнить то, что уже есть».
              </p>
            </blockquote>

          </div>
          <div>
            <div className="ph" style={{height: 480, fontSize: 60, border:'1.5px solid var(--cream-33)'}}>◑</div>
            <div style={{marginTop: 20, fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.12em', color:'var(--cream-77)', textAlign:'right'}}>
              со-основатель · /автор 02
            </div>
          </div>
        </div>
      </section>

      {/* ПОЧЕМУ ВМЕСТЕ */}
      <section className="section">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.6fr', gap: 48, alignItems:'start'}} className="story-grid">
          <div>
            <div className="tag">§ в паре</div>
            <h2 className="poster poster-md" style={{margin:'16px 0 0'}}>
              ПОЧЕМУ<br/>
              <span className="orange">ВМЕСТЕ.</span>
            </h2>
          </div>
          <div style={{fontSize: 14, lineHeight: 1.6, color:'var(--cream-99)', display:'flex', flexDirection:'column', gap: 18}}>
            <p style={{margin: 0}}>
              Женя привносит глубину телесного опыта и чувствительность к процессу. Ксения — творческую энергию, голос и смелость эксперимента.
            </p>
            <p style={{margin: 0}}>
              Вместе мы создаём пространство, где есть и глубина, и лёгкость. Где можно быть серьёзным и играть. Где можно замедлиться и почувствовать движение. Этот баланс — сердце нашего метода.
            </p>
            <p style={{margin: 0}}>
              Одна из нас замечает, другая называет. Одна держит контекст, другая двигает процесс. В паре мы видим систему с двух сторон одновременно — и это ускоряет работу.
            </p>
          </div>
        </div>
      </section>

      {/* ЦЕННОСТИ */}
      <section className="section bg-deep">
        <div className="tag">§ во что мы верим</div>
        <h2 className="poster poster-md" style={{margin:'20px 0 40px'}}>НАШИ <span className="orange">ЦЕННОСТИ.</span></h2>
        <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap: 0, borderTop:'2px solid var(--cream)', borderBottom:'2px solid var(--cream)'}} className="princ-grid">
          {[
            ['01','Живость','Мы выбираем живой опыт вместо теории. Каждая встреча — не повторение шаблона, а уникальный процесс.'],
            ['02','Безопасность','Мы создаём пространство, где можно быть уязвимым. Без оценки, без ожиданий, без давления.'],
            ['03','Честность','Мы не обещаем того, чего не можем дать. Мы честны в своих ограничениях и возможностях. Если тело не изменилось — работа не завершена. Это наш критерий.'],
            ['04','Уважение','Каждый участник — эксперт своего опыта. Мы уважаем границы и темп каждого.'],
          ].map(([n,t,d],i)=>(
            <div key={n} style={{
              padding:'28px 32px',
              borderRight: i % 2 === 0 ? '1px solid var(--cream-33)' : 'none',
              borderBottom: i < 2 ? '1px solid var(--cream-33)' : 'none',
              display:'grid', gridTemplateColumns:'56px 1fr', gap: 20,
            }}>
              <div style={{fontFamily:'var(--f-mono)', fontSize: 15, letterSpacing:'0.1em', color:'var(--accent)', fontWeight: 700}}>/{n}</div>
              <div>
                <div style={{fontFamily:'var(--f-display)', fontSize: 15, fontWeight: 900, letterSpacing:'-0.01em', marginBottom: 8}}>{t}</div>
                <p style={{margin: 0, fontSize: 15, lineHeight: 1.5, color:'var(--cream-99)'}}>{d}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ═════════════ КОНТАКТЫ ═════════════ */}
      <section id="contacts" className="section" style={{paddingTop: 64}}>
        <div className="tag">/контакты · с якорем #contacts</div>
        <h2 className="poster poster-lg" style={{margin:'20px 0 40px'}}>
          НАПИШИ<br/>
          <span className="orange"><i>НАМ.</i></span>
        </h2>

        <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap: 48}} className="contact-split">
          {/* ФОРМА */}
          <div>
            <div className="tag" style={{marginBottom: 16}}>§ форма обратной связи</div>
            {sent ? (
              <div style={{border:'2px solid var(--accent)', padding:'40px 36px', background:'rgba(227,104,62,0.08)'}}>
                <div style={{fontFamily:'var(--f-display)', fontSize: 32, fontWeight: 900, letterSpacing:'-0.02em', marginBottom: 12, color:'var(--accent)'}}>
                  Спасибо, {form.name}.
                </div>
                <p style={{margin:'0 0 16px', fontSize: 12, lineHeight: 1.5, color:'var(--cream-99)'}}>
                  Получили. Ответим в течение рабочего дня на {form.contact}. Если хочется — напиши сразу в Telegram: <a href="https://t.me/soulnovikovskaya" target="_blank" rel="noreferrer" style={{color:'var(--accent)'}}>@soulnovikovskaya</a>.
                </p>
                <button className="btn" onClick={()=>{setSent(false); setForm({name:'', contact:'', topic:'общий вопрос', message:''});}} style={{background:'transparent', border:'1.5px solid var(--cream-33)', color: cream}}>Написать ещё →</button>
              </div>
            ) : (
              <form onSubmit={submit} style={{display:'flex', flexDirection:'column', gap: 18}}>
                <label style={{display:'flex', flexDirection:'column', gap: 6}}>
                  <span style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', color:'var(--cream-77)'}}>/имя</span>
                  <input required value={form.name} onChange={e=>setForm({...form, name: e.target.value})}
                    style={{padding:'14px 16px', background:'transparent', border:'1.5px solid var(--cream-33)', color: cream, fontFamily:'var(--f-sans)', fontSize: 14}}
                    placeholder="как к тебе обращаться"/>
                </label>
                <label style={{display:'flex', flexDirection:'column', gap: 6}}>
                  <span style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', color:'var(--cream-77)'}}>/контакт</span>
                  <input required value={form.contact} onChange={e=>setForm({...form, contact: e.target.value})}
                    style={{padding:'14px 16px', background:'transparent', border:'1.5px solid var(--cream-33)', color: cream, fontFamily:'var(--f-sans)', fontSize: 14}}
                    placeholder="Telegram или e-mail"/>
                </label>
                <label style={{display:'flex', flexDirection:'column', gap: 6}}>
                  <span style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', color:'var(--cream-77)'}}>/тема</span>
                  <select value={form.topic} onChange={e=>setForm({...form, topic: e.target.value})}
                    style={{padding:'14px 16px', background:'transparent', border:'1.5px solid var(--cream-33)', color: cream, fontFamily:'var(--f-sans)', fontSize: 14}}>
                    {['общий вопрос','индивидуальная сессия','группа','миротворец','бизнес-разбор','обучение','другое'].map(x=>(
                      <option key={x} value={x} style={{background: navy}}>{x}</option>
                    ))}
                  </select>
                </label>
                <label style={{display:'flex', flexDirection:'column', gap: 6}}>
                  <span style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', color:'var(--cream-77)'}}>/сообщение</span>
                  <textarea rows="5" value={form.message} onChange={e=>setForm({...form, message: e.target.value})}
                    style={{padding:'14px 16px', background:'transparent', border:'1.5px solid var(--cream-33)', color: cream, fontFamily:'var(--f-sans)', fontSize: 14, resize:'vertical'}}
                    placeholder="коротко о том, с чем пришёл(ла)"/>
                </label>
                <button className="btn btn-orange btn-lg" type="submit" style={{alignSelf:'start', marginTop: 8}}>
                  Отправить →
                </button>
                <p style={{margin: 0, fontSize: 14, lineHeight: 1.5, color:'var(--cream-77)'}}>
                  Отправляя форму, ты соглашаешься с <a href="#" style={{color:'var(--cream-99)'}}>политикой конфиденциальности</a>. Мы не передаём данные третьим лицам.
                </p>
              </form>
            )}
          </div>

          {/* КОНТАКТЫ-БЛОК */}
          <div style={{display:'flex', flexDirection:'column', gap: 18}}>
            <div style={{border:'1.5px solid var(--cream-33)', padding:'22px 24px'}}>
              <div style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', color:'var(--cream-77)', marginBottom: 12}}>▷ КАНАЛЫ МЕТОДА</div>
              <div style={{display:'flex', flexDirection:'column', gap: 14}}>
                <a href="https://t.me/soulnovikovskaya" target="_blank" rel="noreferrer" style={{textDecoration:'none', color:'inherit'}}>
                  <div style={{fontFamily:'var(--f-mono)', fontSize: 11, letterSpacing:'0.12em', color:'var(--cream-77)', marginBottom: 4}}>TELEGRAM · канал</div>
                  <div style={{fontFamily:'var(--f-display)', fontSize: 15, fontWeight: 800, letterSpacing:'-0.01em', color:'var(--accent)'}}>t.me/soulnovikovskaya</div>
                </a>
              </div>
            </div>

            <div style={{border:'1.5px solid var(--cream-33)', padding:'22px 24px'}}>
              <div style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', color:'var(--cream-77)', marginBottom: 12}}>▷ ЛИЧНО</div>
              <div style={{display:'flex', flexDirection:'column', gap: 14, fontSize: 15, lineHeight: 1.5}}>
                <div>
                  <div style={{fontFamily:'var(--f-display)', fontSize: 12, fontWeight: 800, marginBottom: 6}}>Евгения Новиковская</div>
                  <div style={{display:'flex', flexDirection:'column', gap: 4}}>
                    <a href="https://t.me/soulnovikovskaya" target="_blank" rel="noreferrer" style={{color:'var(--accent)', textDecoration:'none', fontFamily:'var(--f-mono)', fontSize: 12}}>TG · @soulnovikovskaya</a>
                  </div>
                </div>
              </div>
            </div>

            <div style={{border:'1.5px solid var(--cream-33)', padding:'22px 24px', background:'rgba(227,104,62,0.06)'}}>
              <div className="tag" style={{marginBottom: 10}}>▷ ЗАМЕТКА</div>
              <p style={{margin: 0, fontSize: 14, lineHeight: 1.5, color:'var(--cream-99)'}}>
                Метод «ОСОЗНАНКА НАИЗНАНКУ» — новый. Мы сейчас в процессе патентования названия и протокола. Поэтому число клиентов и учеников — небольшое и честное, а не маркетинговое.
              </p>
            </div>
          </div>
        </div>
      </section>

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

window.About = About;