/* /cases — кейсы, истории клиентов */

const Cases = () => {
  const navy = '#1A2535';
  const cream = '#F2EADA';
  const [filter, setFilter] = React.useState('ВСЕ');

  const topics = ['ВСЕ', 'ДЕНЬГИ', 'ОТНОШЕНИЯ', 'ТЕЛО', 'ДЕЛО', 'МАТЕРИНСТВО'];

  const cases = [
    {
      id: 'm-01', topic:'ДЕНЬГИ',
      who:'Марина, 38', role:'директор по маркетингу',
      title:'«Потолок в 400к не сдвигался три года. Три сессии — и тело разрешило больше»',
      before:['доход ₽400к', 'страх просить повышение', 'ощущение «мне хватит»'],
      after:['доход ₽750к + бонус', 'разговор с руководителем за неделю', 'стало узко — пошла в консалтинг'],
      format:'3 сессии · 2 месяца',
      method:['Разбор родовой фигуры в теме денег', 'Индивидуальная сессия', 'Практики между'],
      quote:'«Я думала, мне нужно тренинг по переговорам. Оказалось — нужно разрешение от бабушки, которая в войну считала копейки. После третьей сессии я просто позвонила и сказала цифру».',
      featured: true,
    },
    {
      id: 'm-02', topic:'ОТНОШЕНИЯ',
      who:'Алёна, 34', role:'владелица студии',
      title:'Три года подряд — один и тот же мужчина. Разные лица',
      before:['четвёртые отношения с женатым', '«я что, приманиваю их?»', 'ощущение, что время уходит'],
      after:['вышла из отношений без срыва', 'пауза 8 месяцев — без тревоги', 'новые отношения: свободный, её возраста'],
      format:'6 сессий + группа',
      method:['Открытая работа по методу Хеллингера на лояльность матери', 'Группа «Отношения как зеркало»', 'Сопровождение 3 месяца'],
      quote:'«Я не верила, что дело в маминой истории. А потом на сессии увидела: я всю жизнь была с мужчиной, который не приходит домой. Как её отец. Просто в разных телах».',
      featured: true,
    },
    {
      id: 'm-03', topic:'ТЕЛО',
      who:'Ольга, 44', role:'HR-директор',
      title:'Минус 14 кг за 7 месяцев — впервые за 20 лет качелей',
      before:['−10 +12 −8 +15 двадцать лет подряд', 'три диетолога, два нутрициолога', 'ощущение отвращения к себе'],
      after:['−14 кг и держится 11 месяцев', 'не считает калории', 'нашла, почему ела по вечерам'],
      format:'8 сессий · 4 месяца',
      method:['Индивидуальная сессия по методу Хеллингера на фигуру «еда = любовь»', 'Дневник тела 90 дней', 'Группа поддержки'],
      quote:'«Еда была единственным, что я себе разрешала. Когда появилось другое разрешение — еда стала просто едой».',
    },
    {
      id: 'm-04', topic:'ДЕЛО',
      who:'Сергей, 41', role:'собственник, оборот ₽240 млн/год',
      title:'Упёрся в потолок. Стратег сказал — маркетинг. Сессия показала — отец',
      before:['оборот ₽240 млн три года', 'выгорание, хочется всё продать', 'конфликты с ключевыми сотрудниками'],
      after:['оборот ₽410 млн за 14 месяцев', 'делегировал операционку', 'компания работает без него 2 недели'],
      format:'5 сессий + стратегическая сессия',
      method:['Системная работа с компанией', 'Работа с родовой линией отца', 'Реструктуризация команды после сессий'],
      quote:'«Я думал, у меня бизнес-проблема. Оказалось — я всю жизнь соревновался с мёртвым отцом. Когда попрощался — компания выдохнула».',
    },
    {
      id: 'm-05', topic:'МАТЕРИНСТВО',
      who:'Катя, 36', role:'мама двоих',
      title:'«Я не кричу на детей уже 4 месяца. До этого — каждый вечер»',
      before:['срывы на детей 4–5 раз в неделю', 'чувство вины, бессонница', 'страх повторить мать'],
      after:['срывы — раз в месяц', 'спит 7 часов', 'дети подходят обниматься'],
      format:'4 сессии + групповая программа',
      method:['Индивидуальная сессия на фигуру матери', 'Группа «Мама, которой ты хотела быть»', 'Практики самонаблюдения'],
      quote:'«Я не перестала быть уставшей. Я перестала быть уставшей И злой на детей за это».',
    },
    {
      id: 'm-06', topic:'ОТНОШЕНИЯ',
      who:'Дима, 42', role:'IT-руководитель',
      title:'Развод без войны. Двое детей, общая квартира, пять лет ненависти',
      before:['разъехались, но ссорятся каждую неделю', 'дети видят конфликт', 'суды два года'],
      after:['поделили имущество за месяц', 'общаются раз в неделю по детям', 'оба в новых отношениях'],
      format:'3 парных сессии',
      method:['Парная сессия по методу Хеллингера на развод', 'Работа с фигурой «бывшей семьи»', 'Сопровождение раздела'],
      quote:'«Мы не стали друзьями. Но перестали быть врагами. Этого оказалось достаточно, чтобы дети снова начали улыбаться».',
    },
    {
      id: 'm-07', topic:'ДЕНЬГИ',
      who:'Аня, 31', role:'фрилансер → агентство',
      title:'Открыла агентство за 9 месяцев. До этого 4 года не могла поднять цены',
      before:['доход ₽150–200к как фрилансер', 'стыдно брать предоплату', 'работала с клиентами, которые не платят'],
      after:['агентство, команда 6 человек', 'чек от ₽350к за проект', 'очередь клиентов на 3 месяца'],
      format:'6 сессий + мастермайнд',
      method:['Группа «Деньги: род и разрешение»', 'Индивидуальные сессии', 'Практики позиционирования'],
      quote:'«Оказалось, я не хотела денег. Я боялась обогнать отца. Когда разрешила — всё пошло».',
    },
    {
      id: 'm-08', topic:'ТЕЛО',
      who:'Лена, 52', role:'врач',
      title:'Менопауза без ада. Просто переход',
      before:['приливы, раздражение, бессонница', '«мне страшно стареть»', 'два психолога — не помогло'],
      after:['приливы в 3 раза реже', 'спит нормально', 'нашла новую профессию — коучинг'],
      format:'5 сессий + группа «Старость»',
      method:['Сессия по методу Хеллингера на возрастной переход', 'Группа «Старость»', 'Работа с фигурой матери'],
      quote:'«Я думала, климакс — это конец. А оказалось — просто ещё один переход. Как подростковый, только я уже не одна».',
    },
  ];

  const filtered = filter === 'ВСЕ' ? cases : cases.filter(c => c.topic === filter);
  const counts = topics.reduce((acc, t) => { acc[t] = t === 'ВСЕ' ? cases.length : cases.filter(c => c.topic === t).length; return acc; }, {});

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

      {/* 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: 440, 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(36px, 5.00vw, 64px)', fontWeight: 900, letterSpacing:'-0.03em', lineHeight: 1}}>{v}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ФИЛЬТР */}
      <section className="section" style={{paddingTop: 48, paddingBottom: 20}}>
        <div className="kicker-row">
          <div>
            <div className="tag">§ фильтр</div>
            <h2 className="poster poster-md" style={{marginTop: 12}}>ПО <span className="orange">ТЕМЕ.</span></h2>
          </div>
          <div className="right">{filtered.length} {filtered.length === 1 ? 'ИСТОРИЯ' : filtered.length < 5 ? 'ИСТОРИИ' : 'ИСТОРИЙ'}</div>
        </div>

        <div style={{display:'flex', flexWrap:'wrap', gap: 8}}>
          {topics.map(t=>{
            const sel = filter === t;
            return (
              <button key={t} onClick={()=>setFilter(t)} style={{
                padding:'10px 18px', fontSize: 12, fontWeight: 700, letterSpacing:'0.08em',
                textTransform:'uppercase', cursor:'pointer',
                background: sel ? 'var(--accent)' : 'transparent',
                color: sel ? navy : 'var(--cream)',
                border: sel ? '1.5px solid var(--accent)' : '1.5px solid var(--cream-33)',
                display:'inline-flex', alignItems:'center', gap: 10,
              }}>
                <span>{t}</span>
                <span style={{fontFamily:'var(--f-mono)', fontSize: 11, opacity: sel ? 0.7 : 0.5}}>/{counts[t]}</span>
              </button>
            );
          })}
        </div>
      </section>

      {/* КЕЙСЫ */}
      <section className="section" style={{paddingTop: 20}}>
        <div style={{display:'flex', flexDirection:'column', gap: 80}}>
          {filtered.map((c, i) => {
            const flip = i % 2 === 1;
            return (
              <article key={c.id} style={{
                display:'grid',
                gridTemplateColumns: '1fr 1.4fr',
                gap: 48,
                borderTop: '2px solid var(--cream)',
                paddingTop: 40,
                direction: flip ? 'rtl' : 'ltr',
              }} className="case-grid">
                {/* ЛЕВО: meta + who + placeholder */}
                <div style={{direction:'ltr'}}>
                  <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 24, fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.12em'}}>
                    <span style={{padding:'5px 10px', background:'var(--accent)', color: navy, fontWeight: 700}}>{c.topic}</span>
                    <span style={{color:'var(--cream-77)'}}>кейс /{c.id}</span>
                  </div>
                  <div className="ph" style={{height: 240, fontSize: 40, marginBottom: 20, border:'1.5px solid var(--cream-33)'}}>◐</div>
                  <div style={{fontFamily:'var(--f-display)', fontSize:'clamp(22px, 2.40vw, 29px)', fontWeight: 900, letterSpacing:'-0.01em', marginBottom: 6}}>
                    {c.who}
                  </div>
                  <div style={{fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.1em', color:'var(--cream-77)', marginBottom: 18}}>
                    {c.role}
                  </div>
                  <div style={{
                    padding:'14px 16px',
                    background:'rgba(242, 234, 218, 0.06)',
                    border:'1px solid var(--cream-33)',
                    fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.06em',
                  }}>
                    <div style={{color:'var(--cream-77)', marginBottom: 4}}>/формат работы</div>
                    <div style={{fontWeight: 700}}>{c.format}</div>
                  </div>
                </div>

                {/* ПРАВО: контент */}
                <div style={{direction:'ltr'}}>
                  <h3 className="poster" style={{
                    fontSize:'clamp(29px, 3.19vw, 44px)',
                    lineHeight: 1.1,
                    margin:'0 0 28px',
                    fontWeight: 900,
                    letterSpacing:'-0.025em',
                  }}>
                    {c.title}
                  </h3>

                  {/* ДО / ПОСЛЕ */}
                  <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 20, marginBottom: 28}} className="ba-grid">
                    <div style={{border:'1.5px solid var(--cream-33)', padding:'18px 20px'}}>
                      <div style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', color:'var(--cream-77)', marginBottom: 12}}>◀ ДО</div>
                      <ul style={{listStyle:'none', padding: 0, margin: 0, display:'flex', flexDirection:'column', gap: 8}}>
                        {c.before.map((b,k)=>(<li key={k} style={{fontSize: 15, lineHeight: 1.4, paddingLeft: 18, position:'relative', color:'var(--cream-99)'}}>
                          <span style={{position:'absolute', left: 0, color:'var(--cream-77)'}}>–</span>{b}
                        </li>))}
                      </ul>
                    </div>
                    <div style={{border:'1.5px solid var(--accent)', padding:'18px 20px', background:'rgba(227, 104, 62, 0.1)'}}>
                      <div style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', color:'var(--accent)', marginBottom: 12, fontWeight: 700}}>ПОСЛЕ ▶</div>
                      <ul style={{listStyle:'none', padding: 0, margin: 0, display:'flex', flexDirection:'column', gap: 8}}>
                        {c.after.map((b,k)=>(<li key={k} style={{fontSize: 15, lineHeight: 1.4, paddingLeft: 18, position:'relative'}}>
                          <span style={{position:'absolute', left: 0, color:'var(--accent)', fontWeight: 700}}>+</span>{b}
                        </li>))}
                      </ul>
                    </div>
                  </div>

                  {/* МЕТОД */}
                  <div style={{marginBottom: 28}}>
                    <div style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', color:'var(--cream-77)', marginBottom: 10}}>§ что делали</div>
                    <ol style={{listStyle:'none', padding: 0, margin: 0, display:'flex', flexDirection:'column', gap: 6}}>
                      {c.method.map((m,k)=>(
                        <li key={k} style={{display:'grid', gridTemplateColumns:'32px 1fr', gap: 12, fontSize: 14, lineHeight: 1.45}}>
                          <span style={{fontFamily:'var(--f-mono)', fontSize: 12, color:'var(--accent)', fontWeight: 700, paddingTop: 2}}>0{k+1}</span>
                          <span>{m}</span>
                        </li>
                      ))}
                    </ol>
                  </div>

                  {/* ЦИТАТА */}
                  <blockquote style={{
                    margin: 0,
                    padding:'24px 28px',
                    background: cream,
                    color: navy,
                    borderLeft:'6px solid '+navy,
                    position:'relative',
                  }}>
                    <div style={{position:'absolute', top: -4, right: 16, fontFamily:'var(--f-display)', fontSize: 81, lineHeight: 1, color: navy, opacity: 0.15, fontWeight: 900}}>"</div>
                    <p style={{
                      margin: 0,
                      fontFamily:'var(--f-display)',
                      fontStyle:'italic',
                      fontSize:'clamp(17px, 1.70vw, 21px)',
                      lineHeight: 1.45,
                      fontWeight: 500,
                    }}>
                      {c.quote}
                    </p>
                  </blockquote>
                </div>
              </article>
            );
          })}
        </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(3, 1fr)', gap: 0, borderTop:'2px solid var(--cream)', borderBottom:'2px solid var(--cream)'}} className="nope-grid">
          {[
            ['ЧУДА ЗА ОДНУ СЕССИЮ', 'Иногда одной достаточно. Чаще — нет. Кто обещает «одну и всё» — продаёт тебе надежду, а не работу.'],
            ['«ВСЁ БУДЕТ ИДЕАЛЬНО»', 'Станет яснее, тише, крепче. Идеала не обещаем никому — ни себе, ни тебе. Это не жизнь, это глянец.'],
            ['ПСИХИАТРИЮ', 'Клиническая депрессия, БАР, шизофрения — это к врачу. Мы — дополнение к терапии, а не замена. Честно скажем, если не к нам.'],
            ['РАБОТЫ БЕЗ ТЕБЯ', 'На сессии «увидеть» — 30% работы. Остальное — ты, дома, по своей жизни. Мы не чиним за тебя.'],
            ['БЫСТРО', 'Родовой сценарий складывался 80 лет. Разбираться с ним за две недели — не честно. Средний срок работы — 2–6 месяцев.'],
            ['ЧУЖОЙ ЖИЗНИ', 'Мужа не починим, свекровь не переделаем, начальника не уволим. Работаем только с тем, кто пришёл.'],
          ].map(([t,d],i)=>(
            <div key={i} style={{
              padding:'28px',
              borderRight: (i+1)%3 !== 0 ? '1px solid var(--cream-33)' : 'none',
              borderBottom: i < 3 ? '1px solid var(--cream-33)' : 'none',
            }}>
              <div style={{fontFamily:'var(--f-display)', fontSize: 15, fontWeight: 900, letterSpacing:'-0.01em', marginBottom: 12, color:'var(--accent)'}}>
                ✕ {t}
              </div>
              <p style={{margin: 0, fontSize: 15, lineHeight: 1.5, color:'var(--cream-99)'}}>{d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="bg-orange" style={{padding:'72px var(--px)', color: navy}}>
        <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap: 48, alignItems:'end'}} className="cta-split">
          <h2 className="poster poster-lg" style={{margin: 0}}>
            ХОЧЕШЬ —<br/><i>СВОЙ КЕЙС?</i>
          </h2>
          <div style={{paddingBottom: 12}}>
            <p style={{margin:'0 0 20px', fontSize: 12, lineHeight: 1.5, fontWeight: 500}}>
              Установочный разговор 30 минут. Честно скажем, к нам или нет, и с чего начать. Платишь, только если решаем продолжить.
            </p>
            <div style={{display:'flex', gap: 12, flexWrap:'wrap'}}>
              <a href="method.html" className="btn btn-lg" style={{background: navy, color: cream, border:'2px solid '+navy}}>Записаться на разбор →</a>
              <a href="method.html#faq" className="btn btn-lg btn-ghost" style={{color: navy, borderColor: navy}}>Вопросы о работе →</a>
            </div>
          </div>
        </div>
      </section>

      <NextSteps
        title={<>ПОСЛЕ <span className="orange">КЕЙСОВ.</span></>}
        items={[
          {label:'Как это работает', desc:'Разобрать метод: синхронизация, откаты, тело как критерий.', href:'method.html'},
          {label:'Кто авторы', desc:'Евгения и Ксения — почему собрали метод и как работают в паре.', href:'about.html'},
          {label:'Записаться', desc:'Если узнала себя — первый шаг: сессия 90 мин.', href:'session.html', primary:true},
        ]}
      />

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

window.Cases = Cases;
