function Login(){
  const [mode,setMode]=React.useState('login');
  const redirectTo=(new URLSearchParams(location.search).get('redirect'))||'Account.html';
  const [email,setEmail]=React.useState('');
  const [password,setPassword]=React.useState('');
  const [emailTouched,setEmailTouched]=React.useState(false);
  const emailValid=BBValidate.isEmail(email);
  const [newPassword,setNewPassword]=React.useState('');
  const [error,setError]=React.useState('');
  const [notice,setNotice]=React.useState('');
  const [loading,setLoading]=React.useState(false);
  const [success,setSuccess]=React.useState(false);
  const [done,setDone]=React.useState(false);
  React.useEffect(()=>{document.title='Sign In — Bold Bee';if(window.lucide)window.lucide.createIcons();},[mode]);
  function submitLogin(e){
    e.preventDefault();
    setError('');setNotice('');
    setLoading(true);
    setTimeout(()=>{
      const res=BB_AUTH.login(email,password);
      setLoading(false);
      if(!res.ok){setError(res.error);return;}
      setSuccess(true);
      setTimeout(()=>{location.href=redirectTo;},700);
    },500);
  }
  function submitForgot(e){e.preventDefault();setDone(true);}
  function submitReset(e){
    e.preventDefault();
    BB_AUTH.resetPassword(email,newPassword);
    setMode('login');setDone(false);setError('');setPassword('');setNotice('Password updated — please sign in.');
  }
  return (
    <AuthShell eyebrow="Welcome" title={mode==='login'?'Sign In to Bold Bee':mode==='reset'?'Set a New Password':'Reset Your Password'} subtitle={mode==='login'?'An exclusive house of handwoven silk.':undefined} heroImg={4}>
      {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',animation:'bbFadeIn 400ms var(--ease-out)'}}><i data-lucide="check" style={{width:20,height:20,color:'var(--gold-deep)'}}></i></div>
          <p style={{fontSize:14,color:'var(--text-secondary)'}}>Welcome back — taking you to your account.</p>
        </div>
      ):mode==='login'?(<>
        <div style={{display:'grid',gap:12}}>
          <ProviderButton provider="google" onClick={()=>AuthProviderStub('Google',setNotice,()=>{setSuccess(true);setTimeout(()=>{location.href=redirectTo;},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={submitLogin} style={{display:'grid',gap:16}}>
          <div><label htmlFor="lemail" style={{display:'block',fontSize:12,color:'var(--text-muted)',marginBottom:6}}>Email</label><input required type="email" id="lemail" value={email} onChange={e=>setEmail(e.target.value)} onBlur={()=>setEmailTouched(true)} style={{width:'100%',border:fieldBorder(emailTouched,email,emailValid),borderRadius:'var(--radius-md)',padding:'12px 14px',fontSize:14}}/><FieldMsg touched={emailTouched} valid={emailValid} value={email} errMsg="Please enter a valid email address."/></div>
          <PasswordField id="lpass" label="Password" value={password} onChange={e=>setPassword(e.target.value)} error={error}/>
          {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?'Signing In…':'Sign In'}</PrimaryButton>
          <div style={{display:'flex',justifyContent:'space-between',fontSize:13}}>
            <button type="button" onClick={()=>{setMode('forgot');setError('');}} style={{background:'none',border:'none',color:'var(--gold-deep)',cursor:'pointer',padding:0}}>Forgot password?</button>
            <a href="Register.html" style={{color:'var(--gold-deep)'}}>Create an account</a>
          </div>
        </form>
        <div style={{textAlign:'center',marginTop:24}}><a href="Collections.html" style={{fontSize:13,color:'var(--text-muted)'}}>Continue as guest →</a></div>
      </>):mode==='forgot'?(done?(
        <div style={{textAlign:'center'}}>
          <p style={{color:'var(--text-secondary)',marginBottom:20}}>If an account exists for that email, a reset link has been sent.</p>
          <button type="button" onClick={()=>setMode('reset')} style={{background:'none',border:'none',color:'var(--gold-deep)',cursor:'pointer',fontSize:13}}>I have the reset link →</button>
        </div>
      ):(
        <form onSubmit={submitForgot} style={{display:'grid',gap:16}}>
          <div><label htmlFor="femail" style={{display:'block',fontSize:12,color:'var(--text-muted)',marginBottom:6}}>Email</label><input required type="email" id="femail" value={email} onChange={e=>setEmail(e.target.value)} style={{width:'100%',border:'1px solid var(--border-default)',borderRadius:'var(--radius-md)',padding:'12px 14px',fontSize:14}}/></div>
          <PrimaryButton type="submit" style={{width:'100%'}}>Send Reset Link</PrimaryButton>
          <button type="button" onClick={()=>setMode('login')} style={{background:'none',border:'none',color:'var(--gold-deep)',cursor:'pointer',fontSize:13,padding:0}}>← Back to sign in</button>
        </form>
      )):(
        <form onSubmit={submitReset} style={{display:'grid',gap:16}}>
          <PasswordField id="newpass" label="New Password" value={newPassword} onChange={e=>setNewPassword(e.target.value)}/>
          <PrimaryButton type="submit" style={{width:'100%'}}>Update Password</PrimaryButton>
        </form>
      )}
    </AuthShell>
  );
}
window.Login=Login;