const { Button, Icon, ListingCard } = window.HaileyAlexanderRealtorDesignSystem_1e3b8f;
function Home({go,saved,toggleSave}){
  const P=window.HA_PROFILE;
  const L=window.HA_LISTINGS.filter(l=>l.status!=='sold').slice(0,3);const T=window.HA_TESTIMONIALS.slice(0,3);const C=window.HA_COMMUNITIES;
  return <main>
    <section className="wrap g75" style={{paddingTop:'clamp(40px,6vw,72px)',paddingBottom:40}}>
      <div><div className="eyebrow">Realtor® · REMAX Four Corners · Hunt County</div><h1 className="display" style={{fontSize:D.xl,margin:'16px 0 20px'}}>Let's find a place that feels like <em>you</em>.</h1><p style={{fontSize:'var(--text-body-lg)',color:'var(--text-secondary)',maxWidth:520,margin:'0 0 32px'}}>I'm Hailey — a Hunt County local who'll keep it honest, keep it moving, and keep you in the loop from first showing to closing day. Homes, land, and farm & ranch across Northeast Texas.</p><div style={{display:'flex',gap:12,flexWrap:'wrap'}}><Button size="lg" iconRight={<Icon name="arrow-right" size={20}/>} onClick={()=>go('contact')}>Book a call</Button><Button size="lg" variant="secondary" onClick={()=>go('listings')}>See listings</Button></div>
        <div style={{marginTop:40}}><div className="eyebrow" style={{marginBottom:12}}>What I work in</div><div style={{display:'flex',gap:8,flexWrap:'wrap'}}>{P.specialties.map(s=><span key={s} style={{padding:'8px 14px',borderRadius:'var(--radius-pill)',border:'1px solid var(--border-default)',background:'var(--white)',fontSize:14,fontWeight:600}}>{s}</span>)}</div></div></div>
      <div style={{position:'relative',justifySelf:'center',width:'100%',maxWidth:420,display:'flex',justifyContent:'flex-end'}}><div style={{position:'absolute',inset:'40px 0 -24px 40px',background:'var(--rasp-500)',borderRadius:'var(--radius-portrait)',zIndex:0}}></div><img className="photo hero-img" src="../../assets/photos/hailey-white-chair-01.jpg" alt="Hailey Alexander" style={{position:'relative',zIndex:1,objectFit:'cover',objectPosition:'50% 45%',borderRadius:'var(--radius-portrait)',display:'block'}}/></div>
    </section>
    <section className="wrap" style={{paddingTop:56}}>
      <div className="row" style={{marginBottom:24}}><div><div className="eyebrow">Featured</div><h2 className="display" style={{fontSize:D.md,marginTop:8}}>Just <em>listed</em>.</h2></div>{L.length>0&&<Button variant="ghost" iconRight={<Icon name="arrow-right" size={18}/>} onClick={()=>go('listings')}>All featured listings</Button>}</div>
      {L.length>0
        ? <div className="g3">{L.map(l=><ListingCard key={l.id} {...l} image={(l.photos||[])[0]} saved={saved.has(l.id)} onSave={()=>toggleSave(l.id)} onClick={()=>go('listing',l.id)}/>)}</div>
        : <Empty icon="house" title={<>My current listings live on <em>REMAX</em>.</>} body="Everything I have on the market right now — homes, land, and farm & ranch across Hunt County." action="See my listings on REMAX" href={P.remax}/>}
    </section>
    <section className="wrap sec">
      <div className="g2s" style={{gap:24}}>
        <div onClick={()=>go('buyers')} style={{cursor:'pointer',background:'var(--white)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-xl)',padding:'40px 36px',display:'flex',flexDirection:'column',gap:14,boxShadow:'var(--shadow-sm)'}}><span style={{width:48,height:48,borderRadius:'50%',background:'var(--rasp-100)',color:'var(--rasp-600)',display:'grid',placeItems:'center'}}><Icon name="key-round" size={22}/></span><h3 className="display" style={{fontSize:D.sm}}>Buying your first home shouldn't feel <em>scary</em>.</h3><p style={{margin:0,color:'var(--text-secondary)'}}>The money, the paperwork, and the stuff nobody tells you — in plain English.</p><span style={{fontWeight:600,color:'var(--rasp-600)',display:'inline-flex',gap:6,alignItems:'center',marginTop:'auto'}}>Read the buyer guide<Icon name="arrow-right" size={16}/></span></div>
        <div onClick={()=>go('sellers')} style={{cursor:'pointer',background:'var(--cognac-100)',borderRadius:'var(--radius-xl)',padding:'40px 36px',display:'flex',flexDirection:'column',gap:14}}><span style={{width:48,height:48,borderRadius:'50%',background:'var(--white)',color:'var(--cognac-600)',display:'grid',placeItems:'center'}}><Icon name="sign-post" size={22}/></span><h3 className="display" style={{fontSize:D.sm}}>Selling? Let's get you <em>top dollar</em> without the drama.</h3><p style={{margin:0,color:'var(--text-secondary)'}}>Pricing, prep, and what actually moves a house in Hunt County right now.</p><span style={{fontWeight:600,color:'var(--rasp-600)',display:'inline-flex',gap:6,alignItems:'center',marginTop:'auto'}}>Read the seller guide<Icon name="arrow-right" size={16}/></span></div>
      </div>
    </section>
    <section className="wrap sec">
      <div className="row" style={{marginBottom:24}}><div><div className="eyebrow">Where I work</div><h2 className="display" style={{fontSize:D.md,marginTop:8}}>The towns I know <em>by heart</em>.</h2></div><Button variant="ghost" iconRight={<Icon name="arrow-right" size={18}/>} onClick={()=>go('communities')}>All communities</Button></div>
      <div className="g4">{C.map(c=><a key={c.slug} href={'#/community/'+c.slug} onClick={e=>{e.preventDefault();go('community',c.slug)}} style={{display:'flex',flexDirection:'column',justifyContent:'flex-end',gap:6,minHeight:180,padding:24,borderRadius:'var(--radius-lg)',background:c.color,color:c.text,textDecoration:'none'}}><div className="eyebrow" style={{color:c.text,opacity:.8}}>{c.tag}</div><div className="display" style={{fontSize:32,color:c.text}}>{c.name}</div></a>)}</div>
    </section>
    <section className="wrap sec">
      <div className="g57 panel" style={{background:'var(--paper)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-xl)'}}>
        <img className="photo" src="../../assets/photos/hailey-pink-armchair.jpg" alt="" style={{width:'100%',maxWidth:400,height:420,objectFit:'cover',objectPosition:'50% 35%',borderRadius:'var(--radius-portrait)',display:'block',justifySelf:'center'}}/>
        <div><div className="eyebrow">About Hailey</div><h2 className="display" style={{fontSize:D.lg,margin:'12px 0 16px'}}>Kind, quick, and <em>on your side</em>.</h2><p style={{fontSize:17,color:'var(--text-secondary)',margin:'0 0 12px'}}>Born and raised in Hunt County, second-generation Realtor®. I know these towns street by street, and I'll text you back fast.</p><ul style={{margin:'0 0 28px',padding:0,listStyle:'none',display:'grid',gap:10}}>{['Straight answers, no pressure','Homes, land, farm & ranch, new construction','Every document explained in plain English'].map(t=><li key={t} style={{display:'flex',gap:10,alignItems:'center',fontSize:15,fontWeight:500}}><span style={{width:22,height:22,borderRadius:'50%',background:'var(--rasp-500)',color:'#fff',display:'grid',placeItems:'center',flexShrink:0}}><Icon name="check" size={13} stroke={3}/></span>{t}</li>)}</ul><Button variant="ink" onClick={()=>go('about')}>Read my story</Button></div>
      </div>
    </section>
    {T.length>0&&<section className="wrap sec">
      <div className="row" style={{marginBottom:24}}><div><div className="eyebrow">Kind words</div><h2 className="display" style={{fontSize:D.md,marginTop:8}}>In their own <em>words</em>.</h2></div><Button variant="ghost" iconRight={<Icon name="arrow-right" size={18}/>} onClick={()=>go('testimonials')}>{T.length>1?'More kind words':'Read the review'}</Button></div>
      <div className={T.length===1?'g1':T.length===2?'g2s':'g3'}>{T.map(t=><Quote key={t.n} {...t}/>)}</div>
    </section>}
    <CTABand go={go} title={<>Let's talk about your <em style={{color:'var(--rasp-300)'}}>next move</em>.</>} body="A 15-minute call, no pressure. Tell me what you're after and I'll tell you honestly how I can help."/>
  </main>;
}
window.Home=Home;