/* QZ Motors — homepage assembly */
const {useState:uS, useEffect:uE, useMemo:uM, useRef:uR} = React;
const {Toast:HToast} = window.QZMotorsDesignSystem_756851;

function HomePage(){
  const blank = {brand:ANY, body:ANY, trans:ANY, fuel:ANY, year:ANY, price:'0'};
  const [filters,setFilters]=uS(blank);
  const [tab,setTab]=uS('featured');
  const [vehicles,setVehicles]=uS(window.QZDB.configured?[]:window.QZ.vehicles);
  const [toast,setToast]=uS(null);
  const [favs,setFavs]=uS(()=>{try{return JSON.parse(localStorage.getItem('qz-favs')||'[]');}catch(e){return [];}});
  const inv = uR(null);
  const sell = uR(null);
  const contact = uR(null);
  uE(()=>{localStorage.setItem('qz-favs', JSON.stringify(favs));},[favs]);
  uE(()=>{if(!toast) return; const t=setTimeout(()=>setToast(null),3200); return ()=>clearTimeout(t);},[toast]);
  uE(()=>{window.QZ.loadPublished().then(rows=>{if(rows) setVehicles(rows);}).catch(()=>{});},[]);

  const onFav=(id)=>setFavs(f=>f.includes(id)?f.filter(x=>x!==id):[...f,id]);

  const matchFilters=(v)=>(filters.brand===ANY||v.brand===filters.brand)
    &&(filters.body===ANY||v.body===filters.body)
    &&(filters.trans===ANY||v.trans===filters.trans)
    &&(filters.fuel===ANY||v.fuel===filters.fuel)
    &&(filters.year===ANY||v.year>=+filters.year)
    &&(filters.price==='0'||v.price<=+filters.price);

  const filtered = uM(()=>vehicles.filter(matchFilters),[filters,vehicles]);
  const results = uM(()=>{
    if(tab==='featured'){const f=filtered.filter(v=>v.status==='featured'); return f.length?f:filtered.slice(0,6);}
    if(tab==='latest') return [...filtered].sort((a,b)=>a.days-b.days).slice(0,6);
    return filtered;
  },[filtered,tab]);

  const goInv=()=>{const el=inv.current; if(el) window.scrollTo({top: el.offsetTop-72, behavior:'smooth'});};
  const goSell=()=>{const el=sell.current; if(el) window.scrollTo({top: el.offsetTop-72, behavior:'smooth'});};
  const pickBrand=(b)=>{setFilters({...filters, brand:b}); setTab('all'); setTimeout(goInv,60);};

  return (
    <div className="qz-page">
      <a className="qz-skip" href="#main">Skip to content</a>
      <SiteNav favCount={favs.length} page="home"/>
      <main id="main">
        <Hero onBrowse={goInv} onSell={goSell}/>
        <SearchPanel filters={filters} setFilters={setFilters} matches={filtered.length} onSearch={()=>{setTab('all');goInv();}}/>
        <InventorySection anchorRef={inv} filters={filters} setFilters={setFilters} results={results} tab={tab} setTab={setTab}
          favs={favs} onFav={onFav} total={vehicles.length}/>
        <BrandsSection onPick={pickBrand} cars={vehicles}/>
        <WhySection onTalk={goSell}/>
        <SellTradeSection anchorRef={sell}/>
        <ContactSection anchorRef={contact}/>
        <TestimonialsSection/>
        <StatsSection cars={vehicles}/>
      </main>
      <SiteFooter/>
      {toast && <div className="qz-toast"><HToast tone="success">{toast}</HToast></div>}
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<HomePage/>);