function Register(){
  const [name,setName]=React.useState('');
  const [email,setEmail]=React.useState('');
  const [mobile,setMobile]=React.useState('');
  const [password,setPassword]=React.useState('');
  const [confirm,setConfirm]=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 mobileValid=BBValidate.isMobile(mobile);
  const confirmValid=confirm&&confirm===password;
  const [marketing,setMarketing]=React.useState(true);
  const [error,setError]=React.useState('');
  const [notice,setNotice]=React.useState('');
  const [loading,setLoading]=React.useState(false);
  const [success,setSuccess]=React.useState(false);
  React.useEffect(()=>{document.title='Create Account — Bold Bee';},[]);
  const strength=BB_AUTH.passwordStrength(password);
  const strengthLabel=['Too weak','Weak','Fair','Good','Strong'][strength];
  const strengthColor=['#B3261E','#B3261E','#B89B5E','#8A8B4A','#3D6B4A'][strength];
  function submit(e){
    e.preventDefault();
    setError('');
    setTouched({name:true,email:true,mobile:true,confirm:true});
    if(!nameValid){setError('Please enter a valid full name.');return;}
    if(!emailValid){setError('Please enter a valid email address.');return;}
    if(!mobileValid){setError('Please enter a valid 10-digit mobile number.');return;}
    if(password.length<8){setError('Password must be at least 8 characters.');return;}
    if(password!==confirm){setError('Passwords do not match.');return;}
    setLoading(true);
    setTimeout(()=>{
      const res=BB_AUTH.register({name,email,mobile,password,marketing});
      setLoading(false);
      if(!res.ok){setError(res.error);return;}
      setSuccess(true);
      setTimeout(()=>{location.href='Account.html';},700);
    },500);
  }
  return (
    <AuthShell eyebrow="Join Bold Bee" title="Create Your Account" subtitle="Join an exclusive house of handwoven silk." heroImg={1}>
      {success?(
        <div style={{textAlign:'center',padding:'40px 0'}}>
          <div style={{width:48,height:48,borderRadius:'50%',border:'1px solid var(--gold-deep)',display:'flex',alignItems:'center',justifyContent:'center',margin:'0 auto 16px'}}><i data-lucide="check" style={{width:20,height:20,color:'var(--gold-deep)'}}></i></div>
          <p style={{fontSize:14,color:'var(--text-secondary)'}}>Welcome to Bold Bee — taking you to your account.</p>
        </div>
      ):(<>
        <div style={{display:'grid',gap:12}}>
          <ProviderButton provider="google" onClick={()=>AuthProviderStub('Google',setNotice,()=>{setSuccess(true);setTimeout(()=>{location.href='Account.html';},700);})}>Continue with Google</ProviderButton>
          <ProviderButton provider="apple" onClick={()=>AuthProviderStub('Apple',setNotice)}>Continue with Apple</ProviderButton>
        </div>
        <AuthDivider>or continue with email</AuthDivider>
        <form onSubmit={submit} style={{display:'grid',gap:16}}>
          <div><label htmlFor="rname" style={{display:'block',fontSize:12,color:'var(--text-muted)',marginBottom:6}}>Full Name</label><input required id="rname" maxLength={100} 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} okMsg="Name looks good." errMsg="Please enter a valid full name."/></div>
          <div><label htmlFor="remail" style={{display:'block',fontSize:12,color:'var(--text-muted)',marginBottom:6}}>Email</label><input required type="email" id="remail" 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} okMsg="Email looks good." errMsg="Please enter a valid email address."/></div>
          <div><label htmlFor="rmobile" style={{display:'block',fontSize:12,color:'var(--text-muted)',marginBottom:6}}>Mobile Number</label><input required id="rmobile" type="tel" inputMode="numeric" value={mobile} onChange={e=>setMobile(BBValidate.filterMobile(e.target.value))} onBlur={()=>touch('mobile')} style={{width:'100%',border:fieldBorder(touched.mobile,mobile,mobileValid),borderRadius:'var(--radius-md)',padding:'12px 14px',fontSize:14}}/><FieldMsg touched={touched.mobile} valid={mobileValid} value={mobile} okMsg="Mobile number looks good." errMsg="Please enter a valid 10-digit mobile number."/></div>
          <PasswordField id="rpass" label="Password" value={password} onChange={e=>setPassword(e.target.value)}/>
          {password&&(<div style={{marginTop:-8}}>
            <div style={{display:'flex',gap:4}}>{[0,1,2,3].map(i=>(<div key={i} style={{flex:1,height:3,borderRadius:2,background:i<strength?strengthColor:'var(--border-soft)',transition:'background 200ms var(--ease-out)'}}></div>))}</div>
            <div style={{fontSize:12,color:'var(--text-muted)',marginTop:4}}>{strengthLabel}</div>
          </div>)}
          <PasswordField id="rconfirm" label="Confirm Password" value={confirm} onChange={e=>setConfirm(e.target.value)} onBlur={()=>touch('confirm')}/>
          {touched.confirm&&confirm&&(confirmValid?<p style={{color:'#3D6B4A',fontSize:12,margin:'-8px 0 0'}}>Passwords match.</p>:<p style={{color:'#B3261E',fontSize:12,margin:'-8px 0 0'}}>Passwords do not match.</p>)}
          <label style={{display:'flex',alignItems:'flex-start',gap:8,fontSize:13,color:'var(--text-secondary)'}}>
            <input type="checkbox" checked={marketing} onChange={e=>setMarketing(e.target.checked)} style={{marginTop:2}}/>
            Send me new arrivals, collection launches and festival notes.
          </label>
          {error&&<p role="alert" style={{color:'#B3261E',fontSize:13,margin:0}}>{error}</p>}
          {notice&&<p style={{color:'var(--text-secondary)',fontSize:13,margin:0}}>{notice}</p>}
          <PrimaryButton type="submit" disabled={loading} style={{width:'100%'}}>{loading?'Creating Account…':'Create Account'}</PrimaryButton>
          <div style={{textAlign:'center',fontSize:13}}>Already have an account? <a href="Login.html" style={{color:'var(--gold-deep)'}}>Sign in</a></div>
        </form>
      </>)}
    </AuthShell>
  );
}
window.Register=Register;