function Contact(){
  const [sent,setSent]=React.useState(false);
  const [name,setName]=React.useState('');
  const [email,setEmail]=React.useState('');
  const [msg,setMsg]=React.useState('');
  const [touched,setTouched]=React.useState({});
  const touch=k=>setTouched(t=>({...t,[k]:true}));
  const nameValid=BBValidate.isFullName(name);
  const emailValid=BBValidate.isEmail(email);
  const msgValid=msg.trim().length>=10;
  React.useEffect(()=>{document.title='Contact — Bold Bee';},[]);
  function submit(e){
    e.preventDefault();
    if(!nameValid||!emailValid||!msgValid){setTouched({name:true,email:true,msg:true});return;}
    if(typeof NotificationStore!=='undefined')NotificationStore.publish('contact.message',{name,email});
    setSent(true);
  }
  return (
    <div style={{maxWidth:700,margin:'0 auto',padding:'var(--space-7) var(--container-pad) var(--space-section)'}}>
      <Breadcrumbs trail={[{label:'Home',href:'index.html'},{label:'Contact'}]}/>
      <div style={{textAlign:'center',margin:'24px 0 40px'}}>
        <Eyebrow style={{justifyContent:'center'}}>Contact</Eyebrow>
        <h1 style={{fontFamily:'var(--font-serif)',fontWeight:400,fontSize:'clamp(30px,4vw,42px)',margin:0,color:'var(--text-primary)'}}>We Read Every Note</h1>
      </div>
      {sent?(
        <p style={{textAlign:'center',color:'var(--text-secondary)',fontSize:16}}>Thank you — your message has been sent. We reply within five business days.</p>
      ):(
        <form onSubmit={submit} style={{display:'grid',gap:16}}>
          <div><label htmlFor="cname" style={{display:'block',fontSize:12,color:'var(--text-muted)',marginBottom:6}}>Name</label><input required id="cname" value={name} onChange={e=>setName(BBValidate.filterName(e.target.value))} onBlur={()=>{touch('name');setName(n=>n.trim());}} style={{width:'100%',border:fieldBorder(touched.name,name,nameValid),borderRadius:'var(--radius-md)',padding:'12px 14px',fontSize:14}}/><FieldMsg touched={touched.name} valid={nameValid} value={name} errMsg="Please enter a valid name."/></div>
          <div><label htmlFor="cemail" style={{display:'block',fontSize:12,color:'var(--text-muted)',marginBottom:6}}>Email</label><input required type="email" id="cemail" value={email} onChange={e=>setEmail(e.target.value)} onBlur={()=>touch('email')} style={{width:'100%',border:fieldBorder(touched.email,email,emailValid),borderRadius:'var(--radius-md)',padding:'12px 14px',fontSize:14}}/><FieldMsg touched={touched.email} valid={emailValid} value={email} errMsg="Please enter a valid email address."/></div>
          <div><label htmlFor="cmsg" style={{display:'block',fontSize:12,color:'var(--text-muted)',marginBottom:6}}>Message</label><textarea required id="cmsg" rows="5" maxLength={2000} value={msg} onChange={e=>setMsg(BBValidate.filterInstructions(e.target.value,2000))} onBlur={()=>touch('msg')} style={{width:'100%',border:fieldBorder(touched.msg,msg,msgValid),borderRadius:'var(--radius-md)',padding:'12px 14px',fontSize:14,fontFamily:'inherit'}}></textarea><FieldMsg touched={touched.msg} valid={msgValid} value={msg} errMsg="Please enter at least 10 characters."/></div>
          <PrimaryButton type="submit">Send Message</PrimaryButton>
        </form>
      )}
      <div style={{marginTop:56,textAlign:'center',fontSize:14,color:'var(--text-muted)'}}>contact@boldbee.store · +91 96670 56647 · Delhi, India</div>
    </div>
  );
}
window.Contact=Contact;