// Auth screens — login, signup, forgot, reset, MFA, magic-link, verify
// Sits between marketing and admin: own shell, no marketing nav

const Auth = ({ screen = 'login', setPage, setAuthScreen }) => {
  const goto = (s) => { setAuthScreen ? setAuthScreen(s) : null; window.scrollTo({top:0}); };

  return (
    <div style={{minHeight:'100vh', display:'grid', gridTemplateColumns:'1fr 1fr', background:'var(--bg)', color:'var(--ink)'}}>
      {/* Left brand panel */}
      <AuthBrandPanel screen={screen}/>

      {/* Right form panel */}
      <div style={{display:'flex',flexDirection:'column',padding:'32px 48px',position:'relative',minHeight:'100vh'}}>
        <header style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <button onClick={()=>setPage('home')} style={{display:'flex',alignItems:'center',gap:10}}>
            <span style={{display:'inline-flex',alignItems:'center',justifyContent:'center',width:28,height:28,border:'1px solid var(--line-2)',borderRadius:8,color:'var(--accent)'}}>{Icon.atom()}</span>
            <span style={{fontWeight:600,fontSize:14,letterSpacing:'-0.005em'}}>SolidAtoms</span>
          </button>
          <button onClick={()=>setPage('home')} className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>← BACK TO SITE</button>
        </header>

        <div style={{flex:1,display:'flex',alignItems:'center',justifyContent:'center'}}>
          <div style={{width:'100%',maxWidth:400}}>
            {screen === 'login' && <AuthLogin goto={goto} setPage={setPage}/>}
            {screen === 'signup' && <AuthSignup goto={goto} setPage={setPage}/>}
            {screen === 'forgot' && <AuthForgot goto={goto}/>}
            {screen === 'sent' && <AuthSent goto={goto}/>}
            {screen === 'reset' && <AuthReset goto={goto}/>}
            {screen === 'mfa' && <AuthMFA goto={goto} setPage={setPage}/>}
            {screen === 'verify' && <AuthVerify goto={goto}/>}
            {screen === 'magic' && <AuthMagicLink goto={goto}/>}
          </div>
        </div>

        <footer style={{display:'flex',justifyContent:'space-between',fontSize:11,color:'var(--ink-3)'}}>
          <span className="mono" style={{letterSpacing:'0.06em'}}>© 2026 SOLIDATOMS</span>
          <div style={{display:'flex',gap:14}}>
            <a className="mono" style={{letterSpacing:'0.06em'}}>PRIVACY</a>
            <a className="mono" style={{letterSpacing:'0.06em'}}>TERMS</a>
            <a className="mono" style={{letterSpacing:'0.06em'}}>HELP</a>
          </div>
        </footer>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────
// LEFT BRAND PANEL

const AuthBrandPanel = ({ screen }) => {
  const copy = {
    login:    {kicker:'Welcome back', headline:'Pick up where you left off.', sub:'Your dashboards, files, conversations — exactly as you left them.'},
    signup:   {kicker:'New here?', headline:'A place for the work to live.', sub:'One workspace for the studio, your team, every file, every revision.'},
    forgot:   {kicker:'Forgot it?', headline:'Happens to all of us.', sub:'Enter your email. We\'ll send a one-time link in under a minute.'},
    sent:     {kicker:'Sent', headline:'Check your inbox.', sub:'If we recognise that email, a reset link is on its way.'},
    reset:    {kicker:'Reset password', headline:'A fresh password, one last time.', sub:'Long, weird, and ideally generated by a manager.'},
    mfa:      {kicker:'One more thing', headline:'Two-factor verification.', sub:'Enter the 6-digit code from your authenticator app.'},
    verify:   {kicker:'Almost there', headline:'Confirm your email.', sub:'We sent a link to verify the address you signed up with.'},
    magic:    {kicker:'Magic link sent', headline:'Skip the password.', sub:'Click the link in your inbox. The session opens automatically.'},
  };
  const c = copy[screen] || copy.login;

  return (
    <div style={{
      borderRight:'1px solid var(--line)',
      background:'linear-gradient(135deg, var(--bg-2) 0%, var(--bg) 100%)',
      padding:'48px 56px',
      display:'flex',flexDirection:'column',justifyContent:'space-between',
      position:'relative',overflow:'hidden'
    }}>
      {/* Ambient glow */}
      <div aria-hidden style={{position:'absolute',top:-100,right:-100,width:500,height:500,background:'radial-gradient(circle, rgba(212,255,58,0.06), transparent 60%)',filter:'blur(40px)',pointerEvents:'none'}}/>

      {/* Decorative pattern */}
      <svg style={{position:'absolute',inset:0,width:'100%',height:'100%',opacity:0.06,pointerEvents:'none'}} preserveAspectRatio="xMidYMid slice">
        <defs>
          <pattern id="auth-grid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M0 20 L40 20 M20 0 L20 40" stroke="var(--accent)" strokeWidth="0.5"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#auth-grid)"/>
      </svg>

      <div style={{position:'relative',zIndex:1}}>
        <div className="eyebrow" style={{marginBottom:32}}><span className="dot"/>{c.kicker}</div>
      </div>

      <div style={{position:'relative',zIndex:1,marginBottom:24}}>
        <h1 style={{fontSize:'clamp(36px,4vw,52px)',lineHeight:1.02,letterSpacing:'-0.035em',fontWeight:500,marginBottom:20,maxWidth:480}}>
          {c.headline.split(' ').slice(0,-1).join(' ')} <span className="serif" style={{color:'var(--accent)'}}>{c.headline.split(' ').slice(-1)}</span>
        </h1>
        <p style={{fontSize:17,color:'var(--ink-2)',lineHeight:1.55,maxWidth:440}}>{c.sub}</p>
      </div>

      <div style={{position:'relative',zIndex:1,paddingTop:24,borderTop:'1px solid var(--line)'}}>
        <div style={{display:'flex',alignItems:'center',gap:14,marginBottom:14}}>
          <span style={{width:40,height:40,borderRadius:'50%',background:'linear-gradient(135deg,#7c9bff55,#7c9bff22)',border:'1px solid #7c9bff66',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',fontSize:13,fontWeight:600,color:'#7c9bff'}}>JC</span>
          <div>
            <div style={{fontSize:13,fontWeight:500}}>Jane Cooper</div>
            <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em'}}>CTO · LEDGERLINE</div>
          </div>
        </div>
        <blockquote style={{fontSize:15,lineHeight:1.55,color:'var(--ink-2)',fontStyle:'italic',maxWidth:440}}>
          "The shipped product was exactly what we'd discussed in week one — not what scope creep turned it into at week eighteen. That alone made it worth it."
        </blockquote>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────
// LOGIN

const AuthLogin = ({ goto, setPage }) => (
  <div>
    <h2 style={{fontSize:30,fontWeight:500,letterSpacing:'-0.025em',marginBottom:8}}>Sign in</h2>
    <p style={{fontSize:14,color:'var(--ink-3)',marginBottom:32}}>
      Don't have an account? <button onClick={()=>goto('signup')} style={{color:'var(--accent)',textDecoration:'underline',textUnderlineOffset:3}}>Create one</button>
    </p>

    {/* SSO row */}
    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginBottom:20}}>
      <SSOButton label="Google" icon="G" color="#fff"/>
      <SSOButton label="GitHub" icon="◆" color="#fff"/>
    </div>
    <Divider/>

    <form onSubmit={(e)=>{e.preventDefault();setPage('portal');}} style={{display:'flex',flexDirection:'column',gap:14}}>
      <AuthField label="Email" type="email" placeholder="jane@ledgerline.com"/>
      <AuthField label="Password" type="password" placeholder="••••••••••••" rightAction={<button type="button" onClick={()=>goto('forgot')} style={{fontSize:11,color:'var(--accent)'}}>Forgot?</button>}/>
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginTop:4}}>
        <Checkbox label="Keep me signed in for 30 days"/>
      </div>
      <button type="submit" className="btn btn-primary" style={{width:'100%',justifyContent:'center',marginTop:8,padding:'12px 16px'}}>
        Sign in {Icon.arrow()}
      </button>
      <button type="button" onClick={()=>goto('magic')} className="btn btn-ghost" style={{width:'100%',justifyContent:'center',padding:'11px 16px'}}>
        ✦ Send me a magic link instead
      </button>
    </form>
  </div>
);

// ─────────────────────────────────────────────────────────────────
// SIGNUP

const AuthSignup = ({ goto, setPage }) => {
  const [pwd, setPwd] = React.useState('');
  return (
    <div>
      <h2 style={{fontSize:30,fontWeight:500,letterSpacing:'-0.025em',marginBottom:8}}>Create your account</h2>
      <p style={{fontSize:14,color:'var(--ink-3)',marginBottom:32}}>
        Already have one? <button onClick={()=>goto('login')} style={{color:'var(--accent)',textDecoration:'underline',textUnderlineOffset:3}}>Sign in</button>
      </p>

      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginBottom:20}}>
        <SSOButton label="Google" icon="G"/>
        <SSOButton label="GitHub" icon="◆"/>
      </div>
      <Divider/>

      <form onSubmit={(e)=>{e.preventDefault();goto('verify');}} style={{display:'flex',flexDirection:'column',gap:14}}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
          <AuthField label="First name" placeholder="Jane" compact/>
          <AuthField label="Last name" placeholder="Cooper" compact/>
        </div>
        <AuthField label="Work email" type="email" placeholder="jane@ledgerline.com"/>
        <AuthField label="Password" type="password" placeholder="At least 12 characters" value={pwd} onChange={setPwd}/>
        <PasswordStrength value={pwd}/>
        <div style={{marginTop:6}}>
          <Checkbox label={<span>I agree to the <a style={{color:'var(--accent)',textDecoration:'underline',textUnderlineOffset:3}}>Terms</a> and <a style={{color:'var(--accent)',textDecoration:'underline',textUnderlineOffset:3}}>Privacy Policy</a></span>}/>
        </div>
        <button type="submit" className="btn btn-primary" style={{width:'100%',justifyContent:'center',marginTop:8,padding:'12px 16px'}}>
          Create account {Icon.arrow()}
        </button>
      </form>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────
// FORGOT PASSWORD

const AuthForgot = ({ goto }) => (
  <div>
    <h2 style={{fontSize:30,fontWeight:500,letterSpacing:'-0.025em',marginBottom:8}}>Forgot password?</h2>
    <p style={{fontSize:14,color:'var(--ink-3)',marginBottom:32}}>
      Enter your email and we'll send a one-time reset link.
    </p>
    <form onSubmit={(e)=>{e.preventDefault();goto('sent');}} style={{display:'flex',flexDirection:'column',gap:14}}>
      <AuthField label="Email" type="email" placeholder="jane@ledgerline.com" autoFocus/>
      <button type="submit" className="btn btn-primary" style={{width:'100%',justifyContent:'center',marginTop:8,padding:'12px 16px'}}>
        Send reset link {Icon.arrow()}
      </button>
      <button type="button" onClick={()=>goto('login')} className="btn btn-ghost" style={{width:'100%',justifyContent:'center',padding:'11px 16px'}}>
        ← Back to sign in
      </button>
    </form>
  </div>
);

// ─────────────────────────────────────────────────────────────────
// SENT (post-forgot)

const AuthSent = ({ goto }) => (
  <div style={{textAlign:'center'}}>
    <div style={{width:64,height:64,borderRadius:'50%',background:'rgba(212,255,58,0.1)',border:'1px solid var(--accent)',display:'inline-flex',alignItems:'center',justifyContent:'center',color:'var(--accent)',marginBottom:24,fontSize:24}}>✦</div>
    <h2 style={{fontSize:28,fontWeight:500,letterSpacing:'-0.02em',marginBottom:10}}>Check your inbox</h2>
    <p style={{fontSize:14,color:'var(--ink-3)',lineHeight:1.6,marginBottom:24}}>
      If <span style={{color:'var(--ink-2)',fontFamily:'var(--mono)',fontSize:13}}>jane@ledgerline.com</span> matches an account, a reset link is on its way. The link expires in <strong style={{color:'var(--ink-2)'}}>15 minutes</strong>.
    </p>
    <div className="card" style={{padding:'18px 20px',textAlign:'left',marginBottom:20}}>
      <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:8}}>NOT SEEING IT?</div>
      <ul style={{listStyle:'none',display:'flex',flexDirection:'column',gap:6,fontSize:13,color:'var(--ink-2)'}}>
        <li>· Check your spam folder</li>
        <li>· Allow up to 60 seconds</li>
        <li>· Triple-check the address</li>
      </ul>
    </div>
    <button onClick={()=>goto('forgot')} className="btn btn-ghost" style={{width:'100%',justifyContent:'center'}}>
      Try a different email
    </button>
    <div style={{marginTop:16}}>
      <button onClick={()=>goto('login')} className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>← BACK TO SIGN IN</button>
    </div>
  </div>
);

// ─────────────────────────────────────────────────────────────────
// RESET (from email link)

const AuthReset = ({ goto }) => {
  const [pwd, setPwd] = React.useState('');
  return (
    <div>
      <h2 style={{fontSize:30,fontWeight:500,letterSpacing:'-0.025em',marginBottom:8}}>Set a new password</h2>
      <p style={{fontSize:14,color:'var(--ink-3)',marginBottom:32}}>
        Resetting password for <span style={{color:'var(--ink-2)',fontFamily:'var(--mono)',fontSize:13}}>jane@ledgerline.com</span>
      </p>
      <form onSubmit={(e)=>{e.preventDefault();goto('login');}} style={{display:'flex',flexDirection:'column',gap:14}}>
        <AuthField label="New password" type="password" placeholder="At least 12 characters" value={pwd} onChange={setPwd}/>
        <PasswordStrength value={pwd}/>
        <AuthField label="Confirm new password" type="password" placeholder="Type it again"/>
        <div style={{padding:'14px 16px',borderRadius:8,background:'rgba(212,255,58,0.04)',border:'1px solid rgba(212,255,58,0.2)',marginTop:4}}>
          <div className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.06em',marginBottom:8}}>PASSWORD MUST</div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:6,fontSize:11,color:'var(--ink-2)'}}>
            {[
              ['12+ characters', pwd.length >= 12],
              ['One uppercase', /[A-Z]/.test(pwd)],
              ['One number', /\d/.test(pwd)],
              ['One symbol', /[^a-zA-Z0-9]/.test(pwd)],
            ].map(([l,ok]) => (
              <div key={l} style={{display:'flex',alignItems:'center',gap:6,color: ok ? 'var(--accent)' : 'var(--ink-3)'}}>
                <span>{ok ? Icon.check() : '○'}</span>{l}
              </div>
            ))}
          </div>
        </div>
        <button type="submit" className="btn btn-primary" style={{width:'100%',justifyContent:'center',marginTop:8,padding:'12px 16px'}}>
          Reset password {Icon.arrow()}
        </button>
      </form>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────
// MFA

const AuthMFA = ({ goto, setPage }) => {
  const [code, setCode] = React.useState(['','','','','','']);
  const refs = React.useRef([]);
  const handleChange = (i, v) => {
    if (!/^\d?$/.test(v)) return;
    const next = [...code]; next[i] = v; setCode(next);
    if (v && refs.current[i+1]) refs.current[i+1].focus();
  };
  return (
    <div>
      <h2 style={{fontSize:30,fontWeight:500,letterSpacing:'-0.025em',marginBottom:8}}>Two-factor code</h2>
      <p style={{fontSize:14,color:'var(--ink-3)',marginBottom:32}}>
        Open your authenticator app and enter the 6-digit code for <span style={{color:'var(--ink-2)',fontFamily:'var(--mono)',fontSize:13}}>SolidAtoms</span>.
      </p>
      <div style={{display:'flex',gap:8,marginBottom:20,justifyContent:'space-between'}}>
        {code.map((v,i) => (
          <input
            key={i}
            ref={el => refs.current[i] = el}
            value={v}
            maxLength={1}
            inputMode="numeric"
            onChange={(e)=>handleChange(i, e.target.value)}
            style={{
              width:54,height:64,textAlign:'center',
              fontFamily:'var(--mono)',fontSize:24,fontWeight:500,
              background:'var(--bg-3)',border:'1px solid', borderColor: v ? 'var(--accent)' : 'var(--line-2)',
              borderRadius:10,color:'var(--ink)',outline:'none',
              transition:'border-color .15s ease'
            }}
            onFocus={(e)=>e.target.style.borderColor='var(--accent)'}
            onBlur={(e)=>e.target.style.borderColor= v ? 'var(--accent)' : 'var(--line-2)'}
          />
        ))}
      </div>

      <div style={{padding:'14px 16px',borderRadius:8,background:'var(--bg-2)',border:'1px solid var(--line)',marginBottom:18,display:'flex',alignItems:'center',gap:10,fontSize:12,color:'var(--ink-2)'}}>
        <span style={{color:'var(--ink-3)'}}>◔</span>
        <span style={{flex:1}}>Code refreshes in <strong style={{fontFamily:'var(--mono)',color:'var(--accent)'}}>22s</strong></span>
        <button className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.06em'}}>RESEND</button>
      </div>

      <button onClick={()=>setPage('portal')} className="btn btn-primary" style={{width:'100%',justifyContent:'center',marginBottom:14,padding:'12px 16px'}}>
        Verify & continue {Icon.arrow()}
      </button>

      <div style={{textAlign:'center'}}>
        <button className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>USE BACKUP CODE INSTEAD</button>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────
// VERIFY EMAIL

const AuthVerify = ({ goto }) => (
  <div style={{textAlign:'center'}}>
    <div style={{width:64,height:64,borderRadius:'50%',background:'rgba(212,255,58,0.1)',border:'1px solid var(--accent)',display:'inline-flex',alignItems:'center',justifyContent:'center',color:'var(--accent)',marginBottom:24,fontSize:24}}>✉</div>
    <h2 style={{fontSize:28,fontWeight:500,letterSpacing:'-0.02em',marginBottom:10}}>Verify your email</h2>
    <p style={{fontSize:14,color:'var(--ink-3)',lineHeight:1.6,marginBottom:28}}>
      We sent a verification link to <span style={{color:'var(--ink-2)',fontFamily:'var(--mono)',fontSize:13}}>jane@ledgerline.com</span>. Click it to activate your account.
    </p>
    <button onClick={()=>goto('mfa')} className="btn btn-primary" style={{width:'100%',justifyContent:'center',marginBottom:10,padding:'12px 16px'}}>
      I've verified my email {Icon.arrow()}
    </button>
    <button className="btn btn-ghost" style={{width:'100%',justifyContent:'center'}}>
      Resend verification email
    </button>
    <div style={{marginTop:18}}>
      <span style={{fontSize:12,color:'var(--ink-3)'}}>Wrong address? </span>
      <button onClick={()=>goto('signup')} style={{fontSize:12,color:'var(--accent)',textDecoration:'underline',textUnderlineOffset:3}}>Change it</button>
    </div>
  </div>
);

// ─────────────────────────────────────────────────────────────────
// MAGIC LINK

const AuthMagicLink = ({ goto }) => (
  <div style={{textAlign:'center'}}>
    <div style={{width:64,height:64,borderRadius:'50%',background:'rgba(212,255,58,0.1)',border:'1px solid var(--accent)',display:'inline-flex',alignItems:'center',justifyContent:'center',color:'var(--accent)',marginBottom:24,fontSize:24}}>✦</div>
    <h2 style={{fontSize:28,fontWeight:500,letterSpacing:'-0.02em',marginBottom:10}}>Magic link sent</h2>
    <p style={{fontSize:14,color:'var(--ink-3)',lineHeight:1.6,marginBottom:28}}>
      Click the link in your inbox. It expires in <strong style={{color:'var(--ink-2)'}}>10 minutes</strong>. You can close this tab — the session will open in a new one.
    </p>

    <div className="card" style={{padding:'14px 18px',marginBottom:18,display:'flex',alignItems:'center',gap:14,textAlign:'left'}}>
      <div style={{width:36,height:36,borderRadius:8,background:'#ea4335',display:'flex',alignItems:'center',justifyContent:'center',fontWeight:700,color:'#fff',fontSize:13}}>G</div>
      <div style={{flex:1,minWidth:0}}>
        <div style={{fontSize:13,fontWeight:500}}>Open Gmail</div>
        <div style={{fontSize:11,color:'var(--ink-3)'}}>jane@ledgerline.com</div>
      </div>
      <span style={{color:'var(--ink-3)'}}>{Icon.arrow()}</span>
    </div>

    <button onClick={()=>goto('login')} className="btn btn-ghost" style={{width:'100%',justifyContent:'center'}}>
      Use password instead
    </button>
  </div>
);

// ─────────────────────────────────────────────────────────────────
// HELPERS

const AuthField = ({ label, type='text', placeholder, rightAction, value, onChange, autoFocus, compact }) => {
  const [v, setV] = React.useState('');
  const val = value != null ? value : v;
  const set = onChange || setV;
  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom: compact ? 6 : 8}}>
        <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',textTransform:'uppercase'}}>{label}</span>
        {rightAction}
      </div>
      <input
        type={type}
        placeholder={placeholder}
        value={val}
        onChange={e=>set(e.target.value)}
        autoFocus={autoFocus}
        style={{
          width:'100%', padding:'12px 14px', borderRadius:8,
          background:'var(--bg-3)', border:'1px solid var(--line-2)',
          color:'var(--ink)', fontSize:14, fontFamily: type==='password' ? 'var(--mono)' : 'var(--sans)',
          letterSpacing: type==='password' ? '0.08em' : 'normal',
          outline:'none', transition:'border-color .15s ease'
        }}
        onFocus={e=>e.target.style.borderColor='var(--accent)'}
        onBlur={e=>e.target.style.borderColor='var(--line-2)'}
      />
    </div>
  );
};

const SSOButton = ({ label, icon }) => (
  <button type="button" style={{
    display:'flex',alignItems:'center',justifyContent:'center',gap:10,
    padding:'11px 16px',borderRadius:8,
    background:'var(--bg-2)',border:'1px solid var(--line-2)',
    fontSize:13,fontWeight:500,color:'var(--ink)',
    transition:'all .15s ease'
  }}
  onMouseEnter={e=>{e.currentTarget.style.background='var(--bg-3)';e.currentTarget.style.borderColor='var(--ink-3)'}}
  onMouseLeave={e=>{e.currentTarget.style.background='var(--bg-2)';e.currentTarget.style.borderColor='var(--line-2)'}}>
    <span style={{fontFamily:'var(--mono)',fontSize:14,color:'var(--ink)'}}>{icon}</span>
    {label}
  </button>
);

const Divider = () => (
  <div style={{display:'flex',alignItems:'center',gap:14,margin:'20px 0',color:'var(--ink-3)'}}>
    <div style={{flex:1,height:1,background:'var(--line)'}}/>
    <span className="mono" style={{fontSize:10,letterSpacing:'0.08em'}}>OR</span>
    <div style={{flex:1,height:1,background:'var(--line)'}}/>
  </div>
);

const Checkbox = ({ label }) => {
  const [on, setOn] = React.useState(false);
  return (
    <label style={{display:'flex',alignItems:'center',gap:10,cursor:'pointer',fontSize:13,color:'var(--ink-2)'}}>
      <span onClick={()=>setOn(!on)} style={{
        width:16,height:16,borderRadius:4,
        border:'1px solid', borderColor: on ? 'var(--accent)' : 'var(--line-2)',
        background: on ? 'var(--accent)' : 'transparent',
        display:'flex',alignItems:'center',justifyContent:'center',
        color:'#0a0a0a',transition:'all .15s ease',flexShrink:0
      }}>{on && Icon.check()}</span>
      <span onClick={()=>setOn(!on)}>{label}</span>
    </label>
  );
};

const PasswordStrength = ({ value }) => {
  const score = Math.min(4, Math.floor((
    (value.length >= 12 ? 1 : 0) +
    (/[A-Z]/.test(value) ? 1 : 0) +
    (/\d/.test(value) ? 1 : 0) +
    (/[^a-zA-Z0-9]/.test(value) ? 1 : 0)
  )));
  const labels = ['','Weak','Okay','Strong','Excellent'];
  const colors = ['var(--line)','var(--accent-2)','var(--warn)','#7ee787','var(--accent)'];
  return (
    <div style={{marginTop:-6}}>
      <div style={{display:'flex',gap:4,marginBottom:6}}>
        {[1,2,3,4].map(i => (
          <div key={i} style={{flex:1,height:3,borderRadius:2,background: i <= score ? colors[score] : 'var(--line)',transition:'background .2s ease'}}/>
        ))}
      </div>
      <div style={{display:'flex',justifyContent:'space-between',fontSize:11,color:'var(--ink-3)'}}>
        <span>Password strength</span>
        <span style={{color: score ? colors[score] : 'var(--ink-3)',fontFamily:'var(--mono)',letterSpacing:'0.04em'}}>{labels[score] || '—'}</span>
      </div>
    </div>
  );
};

window.Auth = Auth;