const { Button, Icon, ListingCard } = window.HaileyAlexanderRealtorDesignSystem_1e3b8f;
function Communities({go}){
  const C=window.HA_COMMUNITIES;const P=window.HA_PROFILE;
  return <main>
    <PageHead eyebrow="Where I work" title={<>The towns I know <em>by heart</em>.</>} lead={P.areaLine+'. If you don\'t see your town here, ask — I cover more ground than this.'}/>
    <section className="wrap" style={{paddingTop:40}}><div className="g2s">{C.map(c=><a key={c.slug} href={'#/community/'+c.slug} onClick={e=>{e.preventDefault();go('community',c.slug)}} style={{display:'grid',gridTemplateColumns:'auto 1fr',gap:24,padding:28,borderRadius:'var(--radius-xl)',background:'var(--white)',border:'1px solid var(--border-subtle)',textDecoration:'none',color:'var(--text-primary)',alignItems:'center'}}><span style={{width:72,height:96,borderRadius:'var(--radius-portrait)',background:c.color,display:'block'}}></span><span><span className="eyebrow">{c.tag}</span><span className="display" style={{display:'block',fontSize:34,margin:'6px 0 8px'}}>{c.name}</span><span style={{display:'block',color:'var(--text-secondary)',fontSize:15}}>Homes, land and farm &amp; ranch</span></span></a>)}</div></section>
    <CTABand go={go} eyebrow="Not sure which town?" title={<>Tell me how you live. I'll tell you <em style={{color:'var(--rasp-300)'}}>where</em>.</>} body="Commute, schools, acreage, budget — a 15-minute call usually narrows it down fast."/>
  </main>;
}
function Community({param,go,saved,toggleSave}){
  const C=window.HA_COMMUNITIES;const P=window.HA_PROFILE;
  const c=C.find(x=>x.slug===param)||C[0];
  const L=window.HA_LISTINGS.filter(l=>l.slug===c.slug);const others=C.filter(x=>x.slug!==c.slug);
  return <main>
    <section style={{background:c.color,color:c.text,padding:'clamp(48px,7vw,96px) 0'}}><div className="wrap">
      <a href="#/communities" onClick={e=>{e.preventDefault();go('communities')}} style={{display:'inline-flex',alignItems:'center',gap:6,fontSize:14,fontWeight:600,color:c.text,opacity:.85,marginBottom:20}}><Icon name="arrow-left" size={16}/>All communities</a>
      <div className="eyebrow" style={{color:c.text,opacity:.8}}>{c.tag}</div>
      <h1 className="display" style={{fontSize:D.xl,margin:'12px 0 20px',color:c.text}}>{c.name}<em style={{color:c.text,opacity:.75}}>, Texas</em>.</h1>
      <p style={{fontSize:18,margin:0,maxWidth:560,opacity:.92}}>I work {c.name} and the rest of Hunt County — homes, raw land, farm &amp; ranch, and new construction.</p>
    </div></section>
    <section className="wrap sec"><div className="g57" style={{alignItems:'start'}}>
      <div><div className="eyebrow">What I handle here</div><ul style={{listStyle:'none',padding:0,margin:'12px 0 0',display:'grid',gap:12}}>{P.specialties.map(g=><li key={g} style={{display:'flex',gap:10,alignItems:'center',fontSize:17,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>{g}</li>)}</ul></div>
      <div style={{background:'var(--white)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-xl)',padding:32,display:'flex',gap:20,alignItems:'flex-start'}}><img className="photo" src="../../assets/photos/hailey-teal-wall-headshot.jpg" alt="" style={{width:56,height:56,borderRadius:'50%',objectFit:'cover',objectPosition:'50% 30%',flexShrink:0}}/><div><div className="eyebrow">Thinking about {c.name}?</div><p className="display" style={{fontSize:'clamp(20px,2vw,26px)',margin:'8px 0 16px',lineHeight:1.3}}>Call me and I'll tell you what the listings <em>don't</em> say.</p><Button size="sm" onClick={()=>go('contact')} iconRight={<Icon name="arrow-right" size={16}/>}>Book a call</Button></div></div>
    </div></section>
    {L.length>0&&<section className="wrap sec"><div className="row" style={{marginBottom:24}}><h2 className="display" style={{fontSize:D.md}}>In <em>{c.name}</em> right now.</h2><Button variant="ghost" iconRight={<Icon name="arrow-right" size={18}/>} onClick={()=>go('listings')}>All featured</Button></div><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></section>}
    <CTABand go={go} eyebrow={'Thinking about '+c.name+'?'} title={<>Let's go look at it <em style={{color:'var(--rasp-300)'}}>together</em>.</>} body="I'll drive you through the neighborhoods and tell you honestly what I'd pay."/>
    <section className="wrap sec"><div className="eyebrow" style={{marginBottom:16}}>Nearby</div><div style={{display:'flex',gap:10,flexWrap:'wrap'}}>{others.map(o=><a key={o.slug} href={'#/community/'+o.slug} onClick={e=>{e.preventDefault();go('community',o.slug)}} style={{padding:'10px 18px',borderRadius:999,background:o.color,color:o.text,fontWeight:600,fontSize:14,textDecoration:'none'}}>{o.name}</a>)}</div></section>
  </main>;
}
Object.assign(window,{Communities,Community});