/* ===== Подари вторую жизнь — Home (2 варианта hero) ===== */
function HeroStats(){
  return (
    <div className="hero-stats">
      <Stat value="40+" label="ждут дом"/>
      <span className="div"/>
      <Stat value="320" label="нашли семью"/>
      <span className="div"/>
      <Stat value="12" label="приютов с нами"/>
    </div>
  );
}

/* Вариант A — тёплый сплит с коллажем */
function HeroA(){
  const { go } = useNav();
  const U = PF.U;
  const imgs = [
    { id:'1543466835-00a7907e9de1', cls:'p1' },
    { id:'1574158622682-e40e69881006', cls:'p2' },
    { id:'1537151625747-768eb6cf92b2', cls:'p3' },
  ];
  return (
    <section className="hero">
      <div className="wrap hero-grid">
        <div>
          <span className="eyebrow"><span className="dot"/>Найди того, кто ждёт именно тебя</span>
          <h1>Подари <span className="hl">вторую жизнь<svg viewBox="0 0 200 16" preserveAspectRatio="none"><path d="M2 11C40 4 160 3 198 9" fill="none" stroke="currentColor" strokeWidth="5" strokeLinecap="round"/></svg></span></h1>
          <p className="lede">Загрузите фото — и умный поиск найдёт похожих животных из приютов и передержек. Или пройдите тёплый подбор по описанию. Бесплатно, без регистрации.</p>
          <div className="hero-cta">
            <button className="btn btn-primary btn-lg" onClick={()=>go('photo')}><Icons.camera/>Поиск по фото</button>
            <button className="btn btn-ghost btn-lg" onClick={()=>go('filter')}><Icons.tune/>Подобрать друга</button>
          </div>
          <HeroStats/>
        </div>
        <div className="hero-collage">
          <span className="hero-blob" style={{width:'55%',height:'55%',left:'8%',top:'18%',background:'var(--primary-100)'}}/>
          <span className="hero-blob" style={{width:'40%',height:'40%',right:'2%',bottom:'6%',background:'var(--accent-50)'}}/>
          {imgs.map(i=>(<div key={i.cls} className={'ph '+i.cls}><img src={U(i.id,700)} alt=""/></div>))}
          <span className="hero-floater" style={{left:'-2%',bottom:'12%'}}>
            <span className="av"><Icons.heart fill="currentColor" style={{width:17,height:17}}/></span>
            Нашли дом сегодня · 3
          </span>
          <span className="hero-floater" style={{right:'-4%',top:'10%'}}>
            <span className="av" style={{background:'var(--accent-50)',color:'var(--accent)'}}><Icons.sparkle style={{width:17,height:17}}/></span>
            AI-поиск по фото
          </span>
        </div>
      </div>
    </section>
  );
}

/* Вариант B — крупный иммерсивный hero (farmersdog-style) */
function HeroB(){
  const { go } = useNav();
  const star = PF.animals.find(a=>a.id==='lucky') || PF.animals[0];
  return (
    <section className="hero">
      <div className="wrap">
        <div className="hero-b">
          <img className="hero-b-bg" src={PF.U('1552053831-71594a27632d',1300)} alt=""/>
          <div className="hero-b-shade"/>
          <div className="hero-b-content">
            <span className="eyebrow" style={{background:'rgba(255,255,255,.18)',color:'#fff'}}><span className="dot"/>Найди того, кто ждёт именно тебя</span>
            <h1>Подари <span className="hl-light">вторую жизнь</span></h1>
            <p className="lede" style={{color:'rgba(255,255,255,.92)'}}>Тысячи тёплых глаз ждут одного — твоего «да». Загрузи фото или пройди подбор, и мы познакомим тебя с тем, кто создан именно для тебя.</p>
            <div className="hero-cta">
              <button className="btn btn-accent btn-lg" onClick={()=>go('photo')}><Icons.camera/>Поиск по фото</button>
              <button className="btn btn-ghost btn-lg" onClick={()=>go('filter')}><Icons.tune/>Подобрать друга</button>
            </div>
          </div>
          {star && <button className="hero-b-pet" onClick={()=>go('detail',{id:star.id,from:'home'})}>
            <span className="hbp-photo"><img src={star.photoUrlSm} alt={star.name}/></span>
            <span className="hbp-txt"><span className="hbp-eyebrow">Питомец дня</span><span className="hbp-name">{star.name} <SexMark sex={star.sex}/></span></span>
            <Icons.arrowRight style={{width:18,height:18,color:'var(--primary)'}}/>
          </button>}
        </div>
        <div style={{display:'flex',justifyContent:'center',marginTop:30}}><HeroStats/></div>
      </div>
    </section>
  );
}

function HomeScreen(){
  const { go, t } = useNav();
  const [tab, setTab] = useState('all');
  const [loading, setLoading] = useState(true);
  useEffect(()=>{ const tm=setTimeout(()=>setLoading(false), 850); return ()=>clearTimeout(tm); },[]);
  const list = useMemo(()=> PF.animals.filter(a=> tab==='all'||a.species===tab).slice(0,8), [tab]);
  const Hero = (t && (t.hero==='Крупный' || t.hero==='B')) ? HeroB : HeroA;

  return (
    <div className="page">
      <Hero/>

      {/* Второй шанс — тизер */}
      <section className="wrap" style={{paddingTop:'clamp(20px,3vw,36px)'}}>
        <button className="second-teaser" onClick={()=>go('second')}>
          <span className="st-ico"><Icons.heart fill="currentColor"/></span>
          <span className="st-txt">
            <b>Второй шанс</b>
            <span>Познакомьтесь с теми, кто ждёт дом дольше всех — пожилыми и застенчивыми</span>
          </span>
          <Icons.arrowRight style={{width:20,height:20,flex:'none'}}/>
        </button>
      </section>

      {/* Наши подопечные */}
      <section className="wrap section" style={{paddingTop:'clamp(34px,4vw,56px)'}}>
        <div className="sec-head">
          <div>
            <h2>Наши подопечные</h2>
            <p>Каждый из них мечтает о любящей семье. Может быть, о вашей?</p>
          </div>
          <a className="link hide-mobile" onClick={()=>go('catalog')}>Смотреть всех<Icons.arrowRight/></a>
        </div>
        <div className="seg" style={{marginBottom:24}}>
          <button className={tab==='all'?'on':''} onClick={()=>setTab('all')}>Все</button>
          <button className={tab==='cat'?'on':''} onClick={()=>setTab('cat')}><Icons.cat/>Кошки</button>
          <button className={tab==='dog'?'on':''} onClick={()=>setTab('dog')}><Icons.dog/>Собаки</button>
        </div>
        {loading
          ? <SkeletonGrid n={8}/>
          : <div className="pet-grid stagger">
              {list.map((a,i)=><AnimalCard key={a.id} a={a} style={{animationDelay:(i*45)+'ms'}}/>)}
            </div>}
        <div className="center hide-desktop" style={{marginTop:24}}>
          <button className="btn btn-ghost btn-block" onClick={()=>go('catalog')}>Смотреть всех<Icons.arrowRight/></button>
        </div>
      </section>

      {/* CTA — photo search */}
      <section className="wrap" style={{paddingBottom:'clamp(48px,7vw,96px)'}}>
        <div className="cta-band" style={{
          background:'linear-gradient(120deg,var(--primary) 0%,var(--primary-700) 100%)',
          borderRadius:'calc(var(--radius) + 8px)',color:'#fff',overflow:'hidden',position:'relative',
          padding:'clamp(30px,5vw,56px)',display:'grid',gridTemplateColumns:'1.3fr .7fr',gap:32,alignItems:'center'
        }}>
          <div style={{position:'relative',zIndex:2}}>
            <span className="tag" style={{background:'rgba(255,255,255,.16)',color:'#fff'}}><Icons.sparkle style={{width:14,height:14}}/>Умный поиск</span>
            <h2 style={{color:'#fff',fontSize:'clamp(26px,3.4vw,40px)',margin:'16px 0 12px'}}>Потеряли питомца или ищете похожего?</h2>
            <p style={{color:'rgba(255,255,255,.9)',fontSize:18,maxWidth:'34em',marginBottom:26}}>Загрузите фото любимого животного — система разберёт окрас, размер и черты морды и найдёт самых похожих подопечных из базы.</p>
            <button className="btn btn-accent btn-lg" onClick={()=>go('photo')}><Icons.camera/>Загрузить фото</button>
          </div>
          <div className="hide-mobile" style={{position:'relative',height:200}}>
            <div style={{position:'absolute',right:0,top:'50%',transform:'translateY(-50%)',width:200,height:200,borderRadius:30,overflow:'hidden',border:'6px solid rgba(255,255,255,.25)',rotate:'5deg'}}>
              <img src={PF.U('1513245543132-31f507417b26',500)} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
            </div>
          </div>
          <span style={{position:'absolute',right:-60,bottom:-60,width:240,height:240,borderRadius:'50%',background:'rgba(255,255,255,.07)'}}/>
          <span style={{position:'absolute',left:-40,top:-40,width:160,height:160,borderRadius:'50%',background:'rgba(255,255,255,.06)'}}/>
        </div>
      </section>
    </div>
  );
}
window.HomeScreen = HomeScreen;