/* ===== Подари вторую жизнь — About ===== */
function AboutScreen(){
  const { go } = useNav();
  const steps = [
    { Ico:Icons.camera, t:'Загрузите фото', d:'Снимок питомца, которого ищете, или просто похожего — наш умный поиск найдёт совпадения по окрасу и чертам.' },
    { Ico:Icons.tune, t:'Или подберите по параметрам', d:'Вид, размер, возраст, окрас, пол — отметьте, что важно, и увидите подходящих хвостиков.' },
    { Ico:Icons.phone, t:'Свяжитесь с куратором', d:'Понравился друг? Откройте карточку и напишите куратору напрямую. Без регистрации и оплат.' },
  ];
  return (
    <div className="page wrap section" style={{paddingTop:32}}>
      <div className="center" style={{maxWidth:680,margin:'0 auto 8px'}}>
        <span className="eyebrow"><span className="dot"/>О проекте</span>
        <h2 style={{fontSize:'clamp(28px,4.5vw,46px)',margin:'16px 0 14px'}}>Соединяем сердца, а не продаём питомцев</h2>
        <p className="muted" style={{fontSize:18,lineHeight:1.6,textWrap:'pretty'}}>«Подари вторую жизнь» — некоммерческий проект. Мы собираем животных из проверенных приютов и передержек Москвы в одном месте и помогаем им найти дом. Никаких аккаунтов, оплат и посредников — только вы и ваш будущий друг.</p>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:18,margin:'44px 0'}} className="about-steps">
        {steps.map((s,i)=>(
          <div key={i} style={{background:'var(--surface)',border:'1px solid var(--line)',borderRadius:'var(--radius)',padding:'26px 24px',boxShadow:'var(--shadow-sm)',position:'relative'}}>
            <div style={{position:'absolute',top:20,right:22,fontFamily:'var(--font-display)',fontWeight:900,fontSize:40,color:'var(--bg-warm)'}}>{i+1}</div>
            <span style={{width:54,height:54,borderRadius:16,background:'var(--primary-50)',color:'var(--primary)',display:'grid',placeItems:'center',marginBottom:16}}><s.Ico style={{width:27,height:27}}/></span>
            <h3 style={{fontSize:19,marginBottom:8}}>{s.t}</h3>
            <p className="muted" style={{fontSize:15,lineHeight:1.55}}>{s.d}</p>
          </div>
        ))}
      </div>

      <div style={{display:'flex',justifyContent:'center',gap:34,flexWrap:'wrap',padding:'10px 0 34px'}}>
        <Stat value="40+" label="животных ищут дом"/>
        <Stat value="320" label="счастливых историй"/>
        <Stat value="12" label="приютов-партнёров"/>
        <Stat value="0 ₽" label="всегда бесплатно"/>
      </div>

      <div className="center">
        <button className="btn btn-primary btn-lg" onClick={()=>go('photo')}><Icons.camera/>Начать поиск друга</button>
      </div>
    </div>
  );
}
window.AboutScreen = AboutScreen;