Опишите друга мечты

Своими словами — мы поймём вид, размер, возраст, пол и окрас.

setDesc(e.target.value)} placeholder="Например: молодая рыжая кошка, ласковая и небольшая…"
              style={{width:'100%',minHeight:110,resize:'vertical',padding:'15px 17px',borderRadius:'var(--radius-sm)',border:'1.5px solid var(--line-strong)',fontSize:16,fontFamily:'var(--font-body)',lineHeight:1.5,background:'var(--surface)'}}/>
            <div className="chips" style={{marginTop:14}}>
              {DESC_EXAMPLES.map(ex=><button key={ex} className="chip" onClick={()=>setDesc(ex)}>{ex}</button>)}
            </div>
            <div className="spread" style={{marginTop:22}}>
              <button className="btn btn-soft btn-sm" onClick={()=>go('catalog')}>Показать всех</button>
              <button className="btn btn-primary btn-lg" onClick={submitText} disabled={!desc.trim()} style={{opacity:desc.trim()?1:.45}}><Icons.search/>Найти друга</button>
            </div>
          </div>
        : <div className="quiz-card">
            <div className="quiz-progress"><div style={{width:pct+'%'}}/></div>
            <div style={{textAlign:'center',margin:'24px 0 6px'}}>
              <div className="muted" style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:13,marginBottom:8}}>Шаг {step+1} из {total}</div>
              <h2 style={{fontSize:'clamp(24px,3.4vw,34px)'}}>{q.title}</h2>
              {q.sub && <p className="muted" style={{fontSize:16,marginTop:8}}>{q.sub}</p>}
            </div>
            <div className="quiz-opts" style={{'--qcols':q.cols}}>
              {q.opts.map(o=>{
                const on = ans[q.key]===o.id;
                return (
                  <button key={o.id} className={'quiz-opt'+(on?' on':'')} onClick={()=>choose(o.id)}>
                    <span className="qo-ico" style={o.sc?{transform:`scale(${o.sc})`}:null}><o.Ico/></span>
                    <span className="qo-label">{o.label}</span>
                    {o.hint && <span className="qo-hint">{o.hint}</span>}
                  </button>
                );
              })}
            </div>
            <div className="spread" style={{marginTop:24}}>
              <button className="btn btn-ghost btn-sm" onClick={back} disabled={step===0} style={{opacity:step===0?.4:1}}><Icons.arrowLeft/>Назад</button>
              <button className="btn btn-soft btn-sm" onClick={()=>go('catalog')}>Показать всех</button>
            </div>
          </div>}
    </div>
  );
}

/* ---- Mobile filter sheet ---- */
function FilterSheet({ f, setF, onClose, count }){
  return (
    <div onClick={onClose} style={{position:'fixed',inset:0,zIndex:90,background:'rgba(20,30,28,.45)',backdropFilter:'blur(3px)',display:'flex',alignItems:'flex-end'}}>
      <div onClick={e=>e.stopPropagation()} className="page" style={{background:'var(--bg)',width:'100%',maxHeight:'88vh',borderRadius:'26px 26px 0 0',overflow:'auto',padding:'8px 20px 24px'}}>
        <div style={{position:'sticky',top:0,background:'var(--bg)',paddingTop:12,paddingBottom:12,zIndex:2}}>
          <div style={{width:42,height:5,borderRadius:99,background:'var(--line-strong)',margin:'0 auto 14px'}}/>
          <div className="spread"><span style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:20}}>Фильтры</span>
            <button className="iconbtn" onClick={onClose}><Icons.x/></button></div>
        </div>
        <FilterControls f={f} setF={setF}/>
        <div style={{position:'sticky',bottom:0,background:'var(--bg)',paddingTop:14,paddingBottom:4,marginTop:18,display:'flex',gap:12}}>
          <button className="btn btn-soft" onClick={()=>setF(emptyFilter())}><Icons.refresh/></button>
          <button className="btn btn-primary" style={{flex:1}} onClick={onClose}>Показать {count}</button>
        </div>
      </div>
    </div>
  );
}

function plural(n,one,few,many){
  const m10=n%10, m100=n%100;
  if(m10===1&&m100!==11) return one;
  if(m10>=2&&m10<=4&&!(m100>=12&&m100<=14)) return few;
  return many;
}

Object.assign(window, { CatalogScreen, FilterScreen, FilterControls, ResultsGrid, filterMatch, emptyFilter, plural });

Все животные

{list.length>0?'Кажется, это ваши друзья':'Пока никто не подошёл'}

Подбираем друзей…

Опишите друга мечты