<?php
require_once __DIR__ . '/lib.php';
session_start_safe();
if (customer_logged_in()) { header('Location: customer/dashboard.php'); exit; }
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Create Account — <?= esc(APP_NAME) ?></title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet"/>
<style>
*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f4f5f7;--surface:#fff;--border:#e8eaed;--border-hi:#d1d5db;--accent:#e09500;--accent-hi:#f5a623;--accent-d:#b87800;--accent-pale:#fff8eb;--accent-glow:rgba(224,149,0,.18);--accent-border:rgba(224,149,0,.3);--red:#dc2626;--red-pale:#fef2f2;--red-border:#fecaca;--green:#16a34a;--green-pale:#f0fdf4;--green-border:#bbf7d0;--text:#111827;--text-2:#4b5563;--text-3:#9ca3af;--font-d:'Syne',sans-serif;--font-b:'DM Sans',sans-serif;--font-m:'DM Mono',monospace}
html,body{min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font-b);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.6}
a{text-decoration:none;color:inherit}
.wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.brand-logo{width:36px;height:36px;background:linear-gradient(135deg,var(--accent-hi),var(--accent-d));border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px var(--accent-glow)}
.brand-logo svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.brand-name{font-family:var(--font-d);font-size:16px;font-weight:800}
.card{width:100%;max-width:420px;background:var(--surface);border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.05),0 12px 40px rgba(0,0,0,.08);border:1px solid var(--border);overflow:hidden}
.card-hdr{background:linear-gradient(135deg,var(--accent-hi),var(--accent-d));padding:24px 28px}
.card-eye{font-family:var(--font-m);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:4px}
.card-title{font-family:var(--font-d);font-size:20px;font-weight:800;color:#fff}
.card-sub{font-size:13px;color:rgba(255,255,255,.75);margin-top:2px}
.card-body{padding:28px}
.row{margin-bottom:18px}
label{display:block;font-size:12px;font-weight:600;color:var(--text-2);letter-spacing:.03em;margin-bottom:6px}
input[type=text],input[type=email],input[type=password]{width:100%;padding:11px 14px;border:1.5px solid var(--border-hi);border-radius:10px;font-family:var(--font-b);font-size:14px;color:var(--text);background:var(--surface);transition:border-color .15s,box-shadow .15s;outline:none;-webkit-appearance:none}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.pw-strength{height:3px;border-radius:3px;margin-top:7px;background:#e8eaed;overflow:hidden}
.pw-bar{height:100%;border-radius:3px;transition:width .3s,background .3s;width:0}
.btn{display:block;width:100%;padding:13px;background:var(--accent);color:#fff;font-family:var(--font-b);font-size:14px;font-weight:700;border:none;border-radius:10px;cursor:pointer;transition:background .15s,box-shadow .15s;margin-top:4px}
.btn:hover{background:var(--accent-hi);box-shadow:0 4px 12px var(--accent-glow)}
.btn:active{background:var(--accent-d)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.footer{text-align:center;margin-top:20px;font-size:13px;color:var(--text-3)}
.footer a{color:var(--accent);font-weight:600}
.alert{padding:12px 14px;border-radius:10px;font-size:13px;margin-bottom:16px;display:none}
.err{background:var(--red-pale);color:var(--red);border:1px solid var(--red-border)}
.ok{background:var(--green-pale);color:var(--green);border:1px solid var(--green-border)}
.show{display:block}
</style>
</head>
<body>
<div class="wrap">
  <div class="brand">
    <div class="brand-logo"><svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg></div>
    <span class="brand-name"><?= esc(APP_NAME) ?></span>
  </div>
  <div class="card">
    <div class="card-hdr">
      <div class="card-eye">Customer Portal</div>
      <div class="card-title">Create your account</div>
      <div class="card-sub">Book services &amp; manage your memberships</div>
    </div>
    <div class="card-body">
      <div class="alert err" id="errBox"></div>
      <div class="alert ok"  id="okBox"></div>
      <div class="row">
        <label for="name">Full name</label>
        <input type="text" id="name" placeholder="Jane Smith" autocomplete="name"/>
      </div>
      <div class="row">
        <label for="email">Email address</label>
        <input type="email" id="email" placeholder="jane@example.com" autocomplete="email"/>
      </div>
      <div class="row">
        <label for="pw">Password <span style="color:var(--text-3);font-weight:400">(min 8 chars)</span></label>
        <input type="password" id="pw" placeholder="Choose a strong password" autocomplete="new-password"/>
        <div class="pw-strength"><div class="pw-bar" id="pwBar"></div></div>
      </div>
      <button class="btn" id="btn" onclick="go()">Create Account</button>
      <div class="footer">Already have an account? <a href="login.php">Sign in</a></div>
    </div>
  </div>
</div>
<script>
document.getElementById('pw').addEventListener('input',function(){
  const v=this.value,b=document.getElementById('pwBar');
  let s=0;if(v.length>=8)s++;if(/[A-Z]/.test(v))s++;if(/[0-9]/.test(v))s++;if(/[^A-Za-z0-9]/.test(v))s++;
  b.style.width=(s*25)+'%';b.style.background=['','#dc2626','#f59e0b','#16a34a','#16a34a'][s]||'';
});
async function go(){
  const btn=document.getElementById('btn'),e=document.getElementById('errBox'),o=document.getElementById('okBox');
  e.className='alert err';o.className='alert ok';
  const name=document.getElementById('name').value.trim(),email=document.getElementById('email').value.trim(),pw=document.getElementById('pw').value;
  if(!name||!email||!pw){e.textContent='Please fill in all fields.';e.classList.add('show');return;}
  btn.disabled=true;btn.textContent='Creating account…';
  try{
    const r=await fetch('api/auth.php',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'register',name,email,password:pw})});
    const d=await r.json();
    if(d.ok){o.textContent=d.message;o.classList.add('show');btn.textContent='✓ Done';}
    else{e.textContent=d.error||'Registration failed.';e.classList.add('show');btn.disabled=false;btn.textContent='Create Account';}
  }catch(err){e.textContent='Network error — please try again.';e.classList.add('show');btn.disabled=false;btn.textContent='Create Account';}
}
document.addEventListener('keydown',ev=>{if(ev.key==='Enter')go();});
</script>
</body>
</html>
