/* ===== Подари вторую жизнь — Второй шанс ===== */
function SecondChanceScreen(){
  const { go } = useNav();
  const list = useMemo(()=> PF.animals.filter(a=>a.second).sort((a,b)=>b.waiting-a.waiting), []);
  const hero = list[0];
  const rest = list.slice(1);

  return (
    <div className="page wrap section" style={{paddingTop:30}}>
      <div className="center" style={{maxWidth:680,margin:'0 auto 30px'}}>
        <span className="eyebrow"><span className="dot"/>Они ждут дольше всех</span>
        <h2 style={{fontSize:'clamp(28px,4.6vw,46px)',margin:'16px 0 12px'}}>Второй шанс</h2>
        <p className="muted" style={{fontSize:18,lineHeight:1.6,textWrap:'pretty'}}>Пожилые, застенчивые, всю жизнь в приюте — их реже выбирают, но именно они умеют любить особенно благодарно. Подарите вторую жизнь тому, кто уже всё понял про преданность.</p>
      </div>

      {hero &&
        <div className="sc-hero" style={{display:'grid',gridTemplateColumns:'minmax(0,440px) 1fr',gap:'clamp(22px,4vw,46px)',alignItems:'center',marginBottom:'clamp(40px,5vw,64px)'}}>
          <div style={{position:'relative',borderRadius:'var(--radius)',overflow:'hidden',aspectRatio:'4/3',boxShadow:'var(--shadow-lg)',border:'5px solid #fff'}}>
            <img src={hero.photoUrl} alt={hero.name} style={{width:'100%',height:'100%',objectFit:'cover'}}/>
            <span className="wait-badge"><Icons.clock/>{PF.waitLabel(hero.waiting)}</span>
          </div>
          <div>
            <span className="tag accent"><Icons.heart style={{width:14,height:14}}/>Дольше всех ждёт дом</span>
            <h3 style={{fontSize:'clamp(26px,3.4vw,38px)',margin:'14px 0 10px',display:'flex',alignItems:'center',gap:10}}>{hero.name} <span style={{fontSize:'.6em'}}><SexMark sex={hero.sex}/></span></h3>
            <p style={{color:'var(--ink-soft)',fontSize:17,lineHeight:1.62,textWrap:'pretty',marginBottom:18}}>{hero.desc}</p>
            <div className="row" style={{gap:18,flexWrap:'wrap'}}>
              <button className="btn btn-primary btn-lg" onClick={()=>go('detail',{id:hero.id,from:'second'})}><Icons.heart/>Познакомиться поближе</button>
              <div className="row" style={{gap:8,color:'var(--ink-soft)',fontWeight:600,fontSize:14.5}}>
                <Icons.pin style={{width:16,height:16,color:'var(--accent)'}}/>{hero.loc.split(',').slice(0,2).join(',')}
              </div>
            </div>
          </div>
        </div>}

      <div className="sec-head">
        <div><h2 style={{fontSize:26}}>Им тоже очень нужен дом</h2><p>{rest.length} {plural(rest.length,'друг','друга','друзей')}, которые ждут уже долго</p></div>
      </div>
      <div className="pet-grid stagger">
        {rest.map((a,i)=><AnimalCard key={a.id} a={a} wait style={{animationDelay:Math.min(i,8)*45+'ms'}}/>)}
      </div>

      <div style={{marginTop:'clamp(40px,6vw,72px)',background:'var(--surface)',border:'1px solid var(--line)',borderRadius:'calc(var(--radius) + 6px)',padding:'clamp(26px,4vw,46px)',textAlign:'center',boxShadow:'var(--shadow-sm)'}}>
        <span style={{width:62,height:62,borderRadius:18,background:'var(--accent-50)',color:'var(--accent-600)',display:'grid',placeItems:'center',margin:'0 auto 16px'}}><Icons.heart fill="currentColor" style={{width:30,height:30}}/></span>
        <h3 style={{fontSize:'clamp(20px,2.6vw,26px)',marginBottom:10}}>Не готовы забрать, но хотите помочь?</h3>
        <p className="muted" style={{fontSize:16,maxWidth:'34em',margin:'0 auto 22px'}}>Расскажите о наших подопечных близким — иногда один репост находит дом тому, кто ждал годами.</p>
        <div className="row" style={{justifyContent:'center',gap:12,flexWrap:'wrap'}}>
          <button className="btn btn-ghost" onClick={()=>go('photo')}><Icons.camera/>Поиск по фото</button>
          <button className="btn btn-primary" onClick={()=>go('catalog')}>Смотреть всех<Icons.arrowRight/></button>
        </div>
      </div>
    </div>
  );
}
window.SecondChanceScreen = SecondChanceScreen;