const { Button, Icon, Input, Select, Checkbox, RadioGroup } = window.HaileyAlexanderRealtorDesignSystem_1e3b8f;
function Contact({toast}){
  const P=window.HA_PROFILE;
  const [intent,setIntent]=React.useState('buy');const [pref,setPref]=React.useState('text');const [alerts,setAlerts]=React.useState(true);const [sent,setSent]=React.useState(false);
  const [f,setF]=React.useState({name:'',phone:'',email:'',timeline:'Just curious',area:'Not sure yet',message:'',company:''});
  const [busy,setBusy]=React.useState(false);const [err,setErr]=React.useState(null);const [fe,setFe]=React.useState({});
  const set=k=>e=>{const v=e&&e.target?e.target.value:e;setF(s=>({...s,[k]:v}));setFe(s=>s[k]?{...s,[k]:undefined}:s)};
  async function submit(e){
    e.preventDefault();if(busy)return;
    setBusy(true);setErr(null);setFe({});
    try{
      const r=await fetch('/api/contact',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({kind:'contact',...f,intent,pref,alerts})});
      const d=await r.json().catch(()=>({}));
      if(!r.ok||!d.ok){setFe(d.errors||{});setErr(d.error||"I couldn't send that just now — please call or text me instead.");return;}
      setSent(true);toast("Got it! I'll be in touch within the day.",'success');
    }catch{
      setErr("I couldn't reach the server — check your connection, or just call or text me.");
    }finally{setBusy(false)}
  }
  return <main>
    <section className="wrap g57" style={{paddingTop:'clamp(40px,6vw,64px)',alignItems:'start'}}>
      <div><div className="eyebrow">Book a call</div><h1 className="display" style={{fontSize:D.lg,margin:'12px 0 16px'}}>Let's <em>talk</em>.</h1><p style={{fontSize:17,color:'var(--text-secondary)',margin:'0 0 28px',maxWidth:440}}>Tell me a little about what you're after and I'll reach out within the day to set up a 15-minute call. Or skip the form:</p>
        <div style={{display:'grid',gap:14,fontSize:15,fontWeight:500}}>{[
            ['phone',P.phone,P.phoneHref],
            P.email&&['mail',P.email,'mailto:'+P.email],
            P.instagram&&['instagram',P.instagramHandle,P.instagram],
            P.facebook&&['facebook','Facebook',P.facebook],
          ].filter(Boolean).map(([i,l,h])=><a key={i} href={h} {...(h.startsWith('http')?{target:'_blank',rel:'noopener noreferrer'}:{})} style={{display:'flex',gap:10,alignItems:'center',color:'var(--text-primary)'}}><Icon name={i} size={18} style={{color:'var(--rasp-500)'}}/>{l}</a>)}</div>
        <div style={{marginTop:40,display:'flex',gap:16,alignItems:'center',padding:20,background:'var(--white)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-lg)'}}><img className="photo" src="../../assets/photos/hailey-teal-wall-headshot.jpg" alt="" style={{width:56,height:56,borderRadius:'50%',objectFit:'cover',objectPosition:'50% 30%'}}/><div style={{fontSize:14,color:'var(--text-secondary)'}}><div style={{fontWeight:600,color:'var(--text-primary)',fontSize:15}}>{P.name}, {P.title}</div>{P.brokerage}{P.officeAddress?' · '+P.officeAddress:''} · TX Lic. #{P.license}</div></div></div>
      <div className="panel" style={{background:'var(--white)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-xl)',boxShadow:'var(--shadow-sm)'}}>
        {sent?<div style={{textAlign:'center',padding:'32px 0'}}><span style={{width:64,height:64,borderRadius:'50%',background:'var(--turq-100)',color:'var(--turq-700)',display:'inline-grid',placeItems:'center'}}><Icon name="check" size={30} stroke={2.5}/></span><h2 className="display" style={{fontSize:D.md,margin:'20px 0 10px'}}>Got it!</h2><p style={{color:'var(--text-secondary)',margin:0}}>I'll be in touch within the day — by {pref==='text'?'text':pref==='call'?'phone':'email'}.</p></div>
        :<form onSubmit={submit} noValidate style={{display:'grid',gap:18}}>
          {err&&<div role="alert" style={{display:'flex',gap:12,alignItems:'flex-start',padding:'14px 16px',borderRadius:'var(--radius-md)',background:'var(--danger-soft)',color:'var(--danger)',fontSize:14,lineHeight:1.5}}><Icon name="triangle-alert" size={18} style={{flexShrink:0,marginTop:1}}/><span>{err}</span></div>}
          <div><div style={{fontSize:14,fontWeight:600,marginBottom:10}}>I'm…</div><RadioGroup name="intent" direction="row" value={intent} onChange={setIntent} options={[{value:'buy',label:'Buying'},{value:'sell',label:'Selling'},{value:'both',label:'Both'},{value:'curious',label:'Just curious'}]}/></div>
          <div className="g2s" style={{gap:16}}><Input label="Name" placeholder="First and last" value={f.name} onChange={set('name')} error={fe.name} autoComplete="name"/><Input label="Phone" type="tel" placeholder="(903) 555-0100" value={f.phone} onChange={set('phone')} error={fe.phone} autoComplete="tel"/></div>
          <Input label="Email" type="email" placeholder="you@example.com" value={f.email} onChange={set('email')} error={fe.email} autoComplete="email"/>
          <div className="g2s" style={{gap:16}}><Select label="Timeline" value={f.timeline} onChange={set('timeline')} options={['Just curious','Next 3 months','3–6 months','6+ months']}/><Select label="Area" value={f.area} onChange={set('area')} options={['Not sure yet','Greenville','Commerce','Quinlan','Forney','Somewhere else']}/></div>
          <div><label htmlFor="ha-msg" style={{fontSize:14,fontWeight:600,display:'block',marginBottom:8}}>Anything else?</label><textarea id="ha-msg" rows={3} value={f.message} onChange={set('message')} placeholder="What you're looking for, questions, the best time to reach you…" style={{width:'100%',padding:'12px 14px',fontFamily:'inherit',fontSize:16,border:'1px solid var(--border-strong)',borderRadius:'var(--radius-input, 12px)',background:'var(--white)',resize:'vertical',color:'var(--text-primary)'}}></textarea></div>
          <div><div style={{fontSize:14,fontWeight:600,marginBottom:10}}>Reach me by</div><RadioGroup name="pref" direction="row" value={pref} onChange={setPref} options={[{value:'text',label:'Text'},{value:'call',label:'Call'},{value:'email',label:'Email'}]}/></div>
          <Checkbox checked={alerts} onChange={setAlerts} label="Text me new listings" description="Most weeks, never spam."/>
          <input type="text" name="company" tabIndex={-1} autoComplete="off" aria-hidden="true" value={f.company} onChange={set('company')} style={{position:'absolute',left:'-9999px',width:1,height:1,opacity:0}}/>
          <Button size="lg" type="submit" loading={busy} disabled={busy} iconRight={busy?null:<Icon name="arrow-right" size={20}/>} style={{justifySelf:'start'}}>{busy?'Sending':'Book my call'}</Button>
        </form>}
      </div>
    </section>
  </main>;
}
window.Contact=Contact;