function AuthShell({eyebrow,title,subtitle,heroImg,children}){
  return (
    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',minHeight:'calc(100vh - 260px)'}}>
      <div style={{position:'relative',display:'none'}} className="bb-auth-hero">
        <img src={photo(heroImg,1400)} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
        <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,rgba(31,31,31,0.05),rgba(31,31,31,0.4))'}}></div>
        <div style={{position:'absolute',left:40,bottom:40,color:'var(--ivory)',maxWidth:340}}>
          <div style={{fontFamily:'var(--font-serif)',fontSize:24,letterSpacing:'0.06em',marginBottom:8}}>Bold Bee</div>
          <p style={{fontSize:14,lineHeight:1.7,opacity:0.9}}>An exclusive house of handwoven silk, made to order for those who wear their heritage quietly.</p>
        </div>
      </div>
      <style>{`@media(min-width:900px){.bb-auth-hero{display:block !important}}`}</style>
      <div style={{display:'flex',alignItems:'center',justifyContent:'center',padding:'var(--space-7) var(--container-pad)'}}>
        <div style={{width:'100%',maxWidth:400}}>
          <a href="index.html" style={{fontSize:12,letterSpacing:'var(--tracking-wide)',textTransform:'uppercase',color:'var(--text-muted)',textDecoration:'none',display:'inline-flex',alignItems:'center',gap:6,marginBottom:32}}>← Back to Shopping</a>
          <Eyebrow>{eyebrow}</Eyebrow>
          <h1 style={{fontFamily:'var(--font-serif)',fontWeight:400,fontSize:'clamp(28px,3vw,36px)',margin:'0 0 8px',color:'var(--text-primary)'}}>{title}</h1>
          {subtitle&&<p style={{fontSize:14,color:'var(--text-muted)',margin:'0 0 32px'}}>{subtitle}</p>}
          {children}
        </div>
      </div>
    </div>
  );
}
function GoogleG(){
  return (<svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.9c1.7-1.57 2.7-3.87 2.7-6.62z"/><path fill="#34A853" d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.9-2.26c-.8.54-1.84.86-3.06.86-2.35 0-4.34-1.59-5.05-3.72H.9v2.33A9 9 0 0 0 9 18z"/><path fill="#FBBC05" d="M3.95 10.7A5.4 5.4 0 0 1 3.66 9c0-.59.1-1.17.29-1.7V4.97H.9A9 9 0 0 0 0 9c0 1.45.35 2.83.9 4.03l3.05-2.33z"/><path fill="#EA4335" d="M9 3.58c1.32 0 2.5.46 3.44 1.35l2.58-2.58C13.46.89 11.43 0 9 0A9 9 0 0 0 .9 4.97L3.95 7.3C4.66 5.17 6.65 3.58 9 3.58z"/></svg>);
}
function AppleLogo(){
  return (<svg width="16" height="16" viewBox="0 0 17 20" aria-hidden="true" fill="currentColor"><path d="M13.9 10.6c0-2.1 1.7-3.1 1.8-3.2-1-1.4-2.5-1.6-3-1.6-1.3-.1-2.5.7-3.1.7-.6 0-1.6-.7-2.7-.7-1.4 0-2.6.8-3.3 2-1.4 2.4-.4 6 1 8 .7 1 1.5 2.1 2.6 2 1-.1 1.4-.7 2.7-.7s1.6.7 2.7.6c1.1 0 1.8-1 2.5-2 .8-1.1 1.1-2.2 1.1-2.3-.1 0-2.1-.8-2.1-3.1zM11.6 3.5c.6-.7 1-1.7.9-2.7-.9 0-1.9.6-2.6 1.3-.5.6-1 1.6-.9 2.6 1 .1 1.9-.5 2.6-1.2z"/></svg>);
}
function ProviderButton({provider,children,onClick}){
  return (
    <button type="button" onClick={onClick} style={{width:'100%',display:'flex',alignItems:'center',justifyContent:'center',gap:10,border:'1px solid var(--border-default)',background:'var(--white)',borderRadius:'var(--radius-md)',padding:'13px 18px',fontSize:13,letterSpacing:'var(--tracking-wide)',color:'var(--text-primary)',cursor:'pointer',transition:'background 200ms var(--ease-out)'}}>
      {provider==='google'?<GoogleG/>:<AppleLogo/>}{children}
    </button>
  );
}
function AuthDivider({children}){
  return (
    <div style={{display:'flex',alignItems:'center',gap:14,margin:'24px 0'}}>
      <div style={{flex:1,height:1,background:'var(--border-soft)'}}></div>
      <span style={{fontSize:12,color:'var(--text-muted)',letterSpacing:'var(--tracking-wide)',textTransform:'uppercase'}}>{children}</span>
      <div style={{flex:1,height:1,background:'var(--border-soft)'}}></div>
    </div>
  );
}
function PasswordField({id,label,value,onChange,onBlur,error}){
  const [show,setShow]=React.useState(false);
  return (
    <div>
      <label htmlFor={id} style={{display:'block',fontSize:12,color:'var(--text-muted)',marginBottom:6}}>{label}</label>
      <div style={{position:'relative'}}>
        <input required id={id} type={show?'text':'password'} value={value} onChange={onChange} onBlur={onBlur} aria-invalid={!!error} style={{width:'100%',border:'1px solid '+(error?'#B3261E':'var(--border-default)'),borderRadius:'var(--radius-md)',padding:'12px 44px 12px 14px',fontSize:14,transition:'border-color 200ms var(--ease-out)'}}/>
        <button type="button" onClick={()=>setShow(s=>!s)} aria-label={show?'Hide password':'Show password'} style={{position:'absolute',right:10,top:'50%',transform:'translateY(-50%)',background:'none',border:'none',cursor:'pointer',display:'flex'}}>
          <i data-lucide={show?'eye-off':'eye'} style={{width:16,height:16,color:'var(--text-muted)'}}></i>
        </button>
      </div>
    </div>
  );
}
function AuthProviderStub(provider,setNotice,onSuccess){
  const cfg=BB_OAUTH_CONFIG[provider.toLowerCase()];
  if(!cfg||!cfg.configured){
    setNotice(`${provider} Sign-In will be available once ${provider} credentials are configured.`);
    return;
  }
  if(provider.toLowerCase()==='google'&&window.google&&window.google.accounts){
    try{
      window.google.accounts.id.initialize({
        client_id:cfg.clientId,
        callback:(resp)=>{
          try{
            const payload=JSON.parse(atob(resp.credential.split('.')[1]));
            const res=BB_AUTH.loginWithProvider('google',{email:payload.email,name:payload.name});
            if(res.ok&&onSuccess)onSuccess();else setNotice('Google sign-in failed — please try again.');
          }catch(e){setNotice('Could not verify Google response — please try again.');}
        }
      });
      window.google.accounts.id.prompt(notification=>{
        if(notification.isNotDisplayed()||notification.isSkippedMoment()){setNotice('Google sign-in was cancelled or blocked by the browser.');}
      });
    }catch(e){setNotice('Google sign-in is temporarily unavailable — please try again.');}
    return;
  }
  setNotice(`${provider} Sign-In is configured but the provider script did not load — check your connection and try again.`);
}
Object.assign(window,{AuthShell,ProviderButton,AuthDivider,PasswordField,AuthProviderStub});