const { Button, Icon, ListingCard, Tabs } = window.HaileyAlexanderRealtorDesignSystem_1e3b8f;
function Listings({go,saved,toggleSave,toast}){
  const [tab,setTab]=React.useState('active');const all=window.HA_LISTINGS;const P=window.HA_PROFILE;
  const act=all.filter(l=>l.status!=='sold'),sold=all.filter(l=>l.status==='sold');const shown=tab==='active'?act:sold;
  return <main>
    <PageHead eyebrow="Hunt County & Northeast Texas" title={<>A few homes I'm <em>proud</em> to show you.</>} lead="These are my current featured listings. For everything on the market, I'll set up a private search that texts you the moment something fits — no portal spam."/>
    <section className="wrap" style={{paddingTop:36}}>
      {all.length>0
        ? <>
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:16,flexWrap:'wrap'}}><Tabs items={[{value:'active',label:'For sale',count:act.length},{value:'sold',label:'Recently sold',count:sold.length}]} value={tab} onChange={setTab}/><Button variant="secondary" size="sm" iconRight={<Icon name="external-link" size={16}/>} onClick={()=>window.open(P.remax,'_blank','noopener')}>All my listings on REMAX</Button></div>
            <div className="g3" style={{marginTop:28}}>{shown.map(l=><ListingCard key={l.id} {...l} image={(l.photos||[])[0]} saved={saved.has(l.id)} onSave={()=>{toggleSave(l.id);toast(saved.has(l.id)?'Removed from favorites':'Saved to favorites')}} onClick={()=>go('listing',l.id)}/>)}</div>
          </>
        : <Empty icon="house" title={<>Everything I have is on <em>REMAX</em>.</>} body="My live inventory is kept up to date on my REMAX agent page — homes, land, and farm & ranch across Hunt County and the surrounding counties." action="See my listings on REMAX" href={P.remax}/>}
    </section>
    <section className="wrap sec">
      <div className="g2 panel" style={{background:'var(--white)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-xl)',boxShadow:'var(--shadow-sm)'}}>
        <div><div className="eyebrow">Don't see it yet?</div><h2 className="display" style={{fontSize:D.md,margin:'12px 0 14px'}}>I'll watch the market <em>for you</em>.</h2><p style={{color:'var(--text-secondary)',margin:0,fontSize:16}}>Tell me your towns, your budget, and your must-haves. I'll set up a custom MLS search and text you when something's worth a look — usually before it hits the big sites.</p></div>
        <div style={{display:'grid',gap:12}}>{[['bell','Alerts straight from the MLS, not a portal'],['eye-off','Off-market and coming-soon heads-ups'],['message-circle','A text, not a newsletter']].map(([i,t])=><div key={t} style={{display:'flex',gap:14,alignItems:'center',fontSize:15,fontWeight:500}}><span style={{width:40,height:40,borderRadius:'50%',background:'var(--rasp-100)',color:'var(--rasp-600)',display:'grid',placeItems:'center',flexShrink:0}}><Icon name={i} size={18}/></span>{t}</div>)}<Button size="lg" style={{justifySelf:'start',marginTop:8}} iconRight={<Icon name="arrow-right" size={20}/>} onClick={()=>go('contact')}>Set up my search</Button></div>
      </div>
    </section>
  </main>;
}
window.Listings=Listings;