const { Button, Icon } = window.HaileyAlexanderRealtorDesignSystem_1e3b8f;
const D={xl:'clamp(40px,6vw,72px)',lg:'clamp(34px,5vw,56px)',md:'clamp(30px,4vw,44px)',sm:'clamp(26px,3vw,34px)'};
function PageHead({eyebrow,title,lead,children}){
  return <section className="wrap" style={{padding:'56px 0 0'}}><div className="eyebrow">{eyebrow}</div><h1 className="display" style={{fontSize:D.lg,margin:'10px 0 16px',maxWidth:760}}>{title}</h1>{lead&&<p style={{fontSize:18,color:'var(--text-secondary)',maxWidth:620,margin:0}}>{lead}</p>}{children}</section>;
}
function CTABand({go,eyebrow='Ready when you are',title,body,button='Book a call',tone='ink'}){
  const ink=tone==='ink';
  return <section className="wrap sec"><div className="panel-lg" style={{background:ink?'var(--ink-800)':'var(--rasp-500)',borderRadius:'var(--radius-xl)',display:'flex',justifyContent:'space-between',alignItems:'center',gap:32,flexWrap:'wrap',color:'var(--paper)'}}>
    <div style={{maxWidth:640}}><div className="eyebrow" style={{color:ink?'var(--ink-200)':'var(--rasp-100)'}}>{eyebrow}</div><h2 className="display" style={{fontSize:D.md,margin:'12px 0 10px',color:'var(--paper)'}}>{title}</h2>{body&&<p style={{margin:0,color:ink?'var(--ink-100)':'var(--rasp-50)',fontSize:16}}>{body}</p>}</div>
    <Button size="lg" variant="inverse" iconRight={<Icon name="arrow-right" size={20}/>} onClick={()=>go('contact')}>{button}</Button>
  </div></section>;
}
function Quote({q,n,w,big}){
  return <figure style={{margin:0,background:'var(--white)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-lg)',padding:big?36:28,display:'flex',flexDirection:'column',gap:18,height:'100%'}}>
    <Icon name="quote" size={22} style={{color:'var(--rasp-500)'}}/>
    <blockquote className={big?'display':''} style={{margin:0,fontSize:big?26:16,lineHeight:big?1.25:1.55,color:big?'var(--text-primary)':'var(--text-secondary)',flex:1}}>{q}</blockquote>
    <figcaption><div style={{fontWeight:600,fontSize:15}}>{n}</div><div style={{fontSize:13,color:'var(--text-secondary)'}}>{w}</div></figcaption>
  </figure>;
}
function Stats({items,color}){
  return <div className="stats">{items.map(([n,l])=><div key={l}><div className="display" style={{fontSize:34,color}}>{n}</div><div style={{fontSize:13,color:color||'var(--text-secondary)',opacity:color?.8:1}}>{l}</div></div>)}</div>;
}
function Steps({steps}){
  return <ol style={{listStyle:'none',margin:0,padding:0,display:'grid',gap:0}}>{steps.map(([t,b],i)=><li key={t} style={{display:'grid',gridTemplateColumns:'56px 1fr',gap:20,padding:'28px 0',borderTop:'1px solid var(--border-subtle)'}}><div className="display" style={{fontSize:40,color:'var(--rasp-500)',lineHeight:1}}>{String(i+1).padStart(2,'0')}</div><div><h3 style={{fontSize:'var(--text-h3)',margin:'0 0 8px'}}>{t}</h3><p style={{margin:0,color:'var(--text-secondary)',fontSize:16,maxWidth:600}}>{b}</p></div></li>)}</ol>;
}
function FAQ({items}){
  const [o,setO]=React.useState(0);
  return <div style={{display:'grid',gap:0}}>{items.map(([q,a],i)=><div key={q} style={{borderTop:'1px solid var(--border-subtle)'}}><button onClick={()=>setO(o===i?-1:i)} style={{all:'unset',cursor:'pointer',width:'100%',display:'flex',justifyContent:'space-between',alignItems:'center',gap:16,padding:'20px 0',fontSize:17,fontWeight:600,color:o===i?'var(--rasp-600)':'var(--text-primary)'}}>{q}<Icon name={o===i?'minus':'plus'} size={18}/></button>{o===i&&<p style={{margin:'0 0 22px',color:'var(--text-secondary)',fontSize:16,maxWidth:640}}>{a}</p>}</div>)}</div>;
}
// Honest empty state. Used wherever real data hasn't been supplied yet —
// never replace one of these with sample content.
function Empty({icon='inbox',title,body,action,onAction,href}){
  return <div style={{border:'1px dashed var(--border-default)',borderRadius:'var(--radius-xl)',background:'var(--white)',padding:'48px 32px',textAlign:'center',display:'flex',flexDirection:'column',alignItems:'center',gap:14}}>
    <span style={{width:52,height:52,borderRadius:'50%',background:'var(--sand-100)',color:'var(--stone-500)',display:'grid',placeItems:'center'}}><Icon name={icon} size={22}/></span>
    <h3 className="display" style={{fontSize:'clamp(22px,2.4vw,28px)',margin:0}}>{title}</h3>
    {body&&<p style={{margin:0,color:'var(--text-secondary)',fontSize:16,maxWidth:460}}>{body}</p>}
    {action&&(href
      ? <Button as="a" href={href} target="_blank" rel="noopener noreferrer" variant="secondary" style={{marginTop:6}} iconRight={<Icon name="external-link" size={18}/>}>{action}</Button>
      : <Button variant="secondary" style={{marginTop:6}} onClick={onAction} iconRight={<Icon name="arrow-right" size={18}/>}>{action}</Button>)}
  </div>;
}

// Social icons. Only renders a network that HA_PROFILE actually has a URL for,
// so an unconfirmed account never ships as a dead or wrong link.
function SocialLinks({tone='light',size=18,style}){
  const P=window.HA_PROFILE||{};
  const nets=[['instagram',P.instagram,'Instagram'],['facebook',P.facebook,'Facebook']].filter(([,url])=>!!url);
  if(!nets.length) return null;
  const dark=tone==='dark';
  return <div style={{display:'flex',gap:8,...style}}>{nets.map(([icon,url,label])=>
    <a key={icon} href={url} target="_blank" rel="noopener noreferrer" aria-label={label} title={label}
       style={{width:40,height:40,borderRadius:'var(--radius-pill)',display:'inline-flex',alignItems:'center',justifyContent:'center',
               color:dark?'var(--paper)':'var(--char-900)',border:'1px solid '+(dark?'rgba(250,247,242,.25)':'var(--border-default)'),
               background:dark?'transparent':'var(--white)',textDecoration:'none'}}>
      <Icon name={icon} size={size}/></a>)}</div>;
}

Object.assign(window,{D,PageHead,CTABand,Quote,Stats,Steps,FAQ,Empty,SocialLinks});