<nav>
  <a href="/" class="nl">
    <div class="li"><svg width="14" height="14" viewBox="0 0 18 18" fill="none"><rect x="3" y="3" width="12" height="2.5" rx="1.25" fill="white" opacity=".95"/><rect x="3" y="7.75" width="8" height="2.5" rx="1.25" fill="white" opacity=".85"/><rect x="3" y="3" width="2.5" height="12" rx="1.25" fill="white" opacity=".95"/><circle cx="13" cy="13.5" r="1.8" fill="white" opacity=".7"/></svg></div>
    Floxo
  </a>
  <a href="/themes" class="nav-link">Browse themes</a>
</nav>

<div class="auth-wrap">
  <div class="auth-box">
    <div class="auth-logo-center">
      <div class="auth-logo-icon">
        <svg width="26" height="26" viewBox="0 0 18 18" fill="none"><rect x="3" y="3" width="12" height="2.5" rx="1.25" fill="white" opacity=".95"/><rect x="3" y="7.75" width="8" height="2.5" rx="1.25" fill="white" opacity=".85"/><rect x="3" y="3" width="2.5" height="12" rx="1.25" fill="white" opacity=".95"/><circle cx="13" cy="13.5" r="1.8" fill="white" opacity=".7"/></svg>
      </div>
      <div class="auth-title" id="auth-heading">Welcome <span class="gt">back</span></div>
      <div class="auth-sub" id="auth-sub">Sign in to your Floxo account</div>
    </div>

    <div class="auth-tabs">
      <div class="at on" id="tab-signin" onclick="switchMode('signin')">Sign in</div>
      <div class="at" id="tab-signup" onclick="switchMode('signup')">Create account</div>
    </div>

    <div class="auth-card">
      
      <div class="error-msg" id="err-msg"></div>
      <div class="success-msg" id="suc-msg"></div>

      
      <div class="form-p on" id="form-signin">
        <div class="fg">
          <label class="fl">Email address</label>
          <input class="fi" type="email" id="si-email" placeholder="you@example.com" autocomplete="email"/>
        </div>
        <div class="fg">
          <label class="fl">Password</label>
          <div class="pw-wrap">
            <input class="fi" type="password" id="si-pass" placeholder="Your password" autocomplete="current-password"/>
            <button class="pw-toggle" onclick="togglePw('si-pass',this)" type="button">👁</button>
          </div>
        </div>
        <div class="row-between">
          <label class="remember"><input type="checkbox" checked/>Remember me</label>
          <a class="forgot" onclick="switchMode('forgot')">Forgot password?</a>
        </div>
        <button class="btn-submit" onclick="handleSignin()" id="btn-signin">
          <span id="signin-label">Sign in →</span>
        </button>
        <div class="switch-mode">Don't have an account? <a onclick="switchMode('signup')">Create one →</a></div>
      </div>

      
      <div class="form-p" id="form-signup">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
          <div class="fg" style="margin-bottom:0">
            <label class="fl">First name</label>
            <input class="fi" type="text" id="su-first" placeholder="Sarah" autocomplete="given-name"/>
          </div>
          <div class="fg" style="margin-bottom:0">
            <label class="fl">Last name</label>
            <input class="fi" type="text" id="su-last" placeholder="Chen" autocomplete="family-name"/>
          </div>
        </div>
        <div class="fg" style="margin-top:14px">
          <label class="fl">Email address</label>
          <input class="fi" type="email" id="su-email" placeholder="you@example.com" autocomplete="email"/>
        </div>
        <div class="fg">
          <label class="fl">Password</label>
          <div class="pw-wrap">
            <input class="fi" type="password" id="su-pass" placeholder="Min. 8 characters" autocomplete="new-password" oninput="checkStrength(this.value)"/>
            <button class="pw-toggle" onclick="togglePw('su-pass',this)" type="button">👁</button>
          </div>
          <div class="pw-strength">
            <div class="ps-track"><div class="ps-fill" id="ps-fill" style="width:0%"></div></div>
            <div class="ps-label" id="ps-label">Enter a password</div>
          </div>
        </div>
        <button class="btn-submit" onclick="handleSignup()" id="btn-signup">
          <span id="signup-label">Create account →</span>
        </button>
        <div class="terms">By creating an account you agree to our <a href="/">Terms of Service</a> and <a href="/">Privacy Policy</a>.</div>
        <div class="switch-mode">Already have an account? <a onclick="switchMode('signin')">Sign in →</a></div>
      </div>

      
      <div class="form-p" id="form-forgot">
        <p style="font-size:14px;color:var(--mut);margin-bottom:18px">Enter your email and we'll send you a link to reset your password.</p>
        <div class="fg">
          <label class="fl">Email address</label>
          <input class="fi" type="email" id="fp-email" placeholder="you@example.com"/>
        </div>
        <button class="btn-submit" onclick="handleForgot()">Send reset link →</button>
        <div class="switch-mode" style="margin-top:14px"><a onclick="switchMode('signin')">← Back to sign in</a></div>
      </div>
    </div>
  </div>
</div>

<footer>© 2025 Floxo · <a href="/">Terms</a> · <a href="/">Privacy</a></footer>

<script>
function switchMode(m){
  ['signin','signup','forgot'].forEach(id=>{
    document.getElementById('form-'+id).classList.toggle('on',id===m);
    const tab=document.getElementById('tab-'+id);
    if(tab) tab.classList.toggle('on',id===m);
  });
  const titles={signin:{h:'Welcome <span class="gt">back</span>',s:'Sign in to your Floxo account'},signup:{h:'Create your <span class="gt">account</span>',s:'Start building your store today'},forgot:{h:'Reset your <span class="gt">password</span>',s:'We\'ll send you a link right away'}};
  const t=titles[m];
  document.getElementById('auth-heading').innerHTML=t.h;
  document.getElementById('auth-sub').textContent=t.s;
  clearMessages();
}

function showErr(msg){const e=document.getElementById('err-msg');e.textContent=msg;e.style.display='block';document.getElementById('suc-msg').style.display='none';}
function showSuc(msg){const s=document.getElementById('suc-msg');s.textContent=msg;s.style.display='block';document.getElementById('err-msg').style.display='none';}
function clearMessages(){document.getElementById('err-msg').style.display='none';document.getElementById('suc-msg').style.display='none';}

function setLoading(btnId,labelId,loading,text){
  const b=document.getElementById(btnId),l=document.getElementById(labelId);
  b.disabled=loading;l.textContent=loading?'Please wait…':text;
}

function togglePw(id,btn){
  const f=document.getElementById(id);
  f.type=f.type==='password'?'text':'password';
  btn.textContent=f.type==='password'?'👁':'🙈';
}

function checkStrength(v){
  const fill=document.getElementById('ps-fill'),lbl=document.getElementById('ps-label');
  const checks=[v.length>=8,/[A-Z]/.test(v),/[0-9]/.test(v),/[^A-Za-z0-9]/.test(v)];
  const score=checks.filter(Boolean).length;
  const map={0:{w:'0%',c:'#ef4444',t:'Too short'},1:{w:'25%',c:'#ef4444',t:'Weak'},2:{w:'50%',c:'#f59e0b',t:'Fair'},3:{w:'75%',c:'#3b82f6',t:'Good'},4:{w:'100%',c:'#22c55e',t:'Strong'}};
  const r=map[score];
  fill.style.width=r.w;fill.style.background=r.c;lbl.textContent=r.t;lbl.style.color=r.c;
}

function handleSignin(){
  const e=document.getElementById('si-email').value.trim();
  const p=document.getElementById('si-pass').value;
  clearMessages();
  if(!e||!p){showErr('Please fill in all fields.');return;}
  if(!e.includes('@')){showErr('Please enter a valid email address.');return;}
  setLoading('btn-signin','signin-label',true,'Sign in →');
  setTimeout(()=>{
    setLoading('btn-signin','signin-label',false,'Sign in →');
    if(e==='admin@floxo.com'){window.location.href='/admin';}
    else{showSuc('✓ Signed in! Redirecting to dashboard…');setTimeout(()=>window.location.href='/dashboard',1200);}
  },1600);
}

function handleSignup(){
  const f=document.getElementById('su-first').value.trim();
  const email=document.getElementById('su-email').value.trim();
  const pass=document.getElementById('su-pass').value;
  clearMessages();
  if(!f||!email||!pass){showErr('Please fill in all fields.');return;}
  if(!email.includes('@')){showErr('Please enter a valid email address.');return;}
  if(pass.length<8){showErr('Password must be at least 8 characters.');return;}
  setLoading('btn-signup','signup-label',true,'Create account →');
  setTimeout(()=>{
    setLoading('btn-signup','signup-label',false,'Create account →');
    showSuc('✓ Account created! Check your email to verify, then sign in.');
  },1800);
}

function handleForgot(){
  const e=document.getElementById('fp-email').value.trim();
  clearMessages();
  if(!e||!e.includes('@')){showErr('Please enter a valid email address.');return;}
  showSuc('✓ Reset link sent to '+e+'. Check your inbox.');
}
</script>