{% extends 'base.html' %}
{% block title %}Create Account – Chiez Stores{% endblock %}
{% block extra_css %}
<style>
  .auth-wrap {
    min-height: 90vh;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    background: #f9f7f4;
  }

  @media(min-width:900px) {
    .auth-wrap {
      grid-template-columns: 1fr 1fr;
      min-height: 100vh;
    }
  }

  .auth-visual {
    background: var(--black);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 48px 40px;
  }

  @media(min-width:900px) {
    .auth-visual {
      min-height: 100vh;
      position: sticky;
      top: 0;
    }
  }

  .auth-visual-title {
    font-family: var(--serif);
    font-size: 48px;
    font-weight: 300;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 16px;
  }

  .auth-visual-title em {
    font-style: italic;
    color: var(--gold);
  }

  .auth-perks {
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .perk {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, .65);
    font-size: 13px;
  }

  .perk i {
    color: var(--gold);
    width: 20px;
    text-align: center;
  }

  .auth-panel {
    padding: 40px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media(min-width:540px) {
    .auth-panel {
      padding: 60px 40px;
    }
  }

  .auth-box {
    width: 100%;
    max-width: 440px;
  }

  .auth-logo-sm {
    font-family: var(--serif);
    font-size: 28px;
    color: var(--black);
    margin-bottom: 6px;
  }

  .auth-logo-sm span {
    color: var(--gold);
  }

  .auth-heading {
    font-size: 22px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 4px;
  }

  .auth-sub {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 28px;
  }

  .auth-form-group {
    margin-bottom: 16px;
  }

  .auth-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #374151;
    margin-bottom: 6px;
  }

  .auth-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--black);
    outline: none;
    transition: all .2s;
    background: #fff;
  }

  .auth-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, .1);
  }

  .auth-btn {
    width: 100%;
    padding: 13px;
    background: var(--black);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    cursor: pointer;
    transition: all .2s;
    margin-top: 4px;
  }

  .auth-btn:hover {
    background: var(--gold);
  }

  .auth-divider {
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    margin: 16px 0;
    position: relative;
  }

  .auth-divider::before,
  .auth-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 42%;
    height: 1px;
    background: #e2e8f0;
  }

  .auth-divider::before {
    left: 0;
  }

  .auth-divider::after {
    right: 0;
  }

  .auth-link-row {
    text-align: center;
    font-size: 13px;
    color: #64748b;
    margin-top: 16px;
  }

  .auth-link-row a {
    color: var(--gold);
    font-weight: 600;
    text-decoration: none;
  }

  .auth-link-row a:hover {
    text-decoration: underline;
  }

  .name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .strength-bar {
    height: 4px;
    border-radius: 2px;
    background: #e2e8f0;
    margin-top: 6px;
    overflow: hidden;
  }

  .strength-fill {
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: all .3s;
  }
</style>
{% endblock %}
{% block content %}
<div class="auth-wrap">
  <!-- Visual panel -->
  <div class="auth-visual">
    <div>
      <div class="auth-visual-title">Join<br><em>Chiez</em><br>Stores</div>
      <p style="color:rgba(255,255,255,.5);font-size:13px;max-width:320px;line-height:1.7;">
        Create your free account and unlock the best of Nigerian fashion delivered to your door.
      </p>
      <div class="auth-perks">
        <div class="perk"><i class="fas fa-truck"></i> Free delivery on orders over ₦25,000</div>
        <div class="perk"><i class="fas fa-heart"></i> Save your favourite items to Wishlist</div>
        <div class="perk"><i class="fas fa-box"></i> Track your orders in real time</div>
        <div class="perk"><i class="fas fa-tag"></i> Exclusive member discounts & offers</div>
        <div class="perk"><i class="fas fa-undo"></i> Easy 7-day returns on all orders</div>
      </div>
    </div>
  </div>

  <!-- Form panel -->
  <div class="auth-panel">
    <div class="auth-box">
      <div class="auth-logo-sm">Chiez<span>.</span></div>
      <h1 class="auth-heading">Create your account</h1>
      <p class="auth-sub">It's free and takes less than a minute.</p>

      <form method="POST" novalidate>
        {% csrf_token %}
        <div class="name-row">
          <div class="auth-form-group">
            <label class="auth-label">First Name</label>
            <input type="text" class="auth-input" name="first_name" placeholder="Ada" value="{{ request.POST.first_name|default:'' }}" autocomplete="given-name">
          </div>
          <div class="auth-form-group">
            <label class="auth-label">Last Name</label>
            <input type="text" class="auth-input" name="last_name" placeholder="Okonkwo" value="{{ request.POST.last_name|default:'' }}" autocomplete="family-name">
          </div>
        </div>
        <div class="auth-form-group">
          <label class="auth-label">Username *</label>
          <input type="text" class="auth-input" name="username" required placeholder="adaokonkwo" value="{{ request.POST.username|default:'' }}" autocomplete="username">
        </div>
        <div class="auth-form-group">
          <label class="auth-label">Email Address *</label>
          <input type="email" class="auth-input" name="email" required placeholder="ada@example.com" value="{{ request.POST.email|default:'' }}" autocomplete="email">
        </div>
        <div class="auth-form-group">
          <label class="auth-label">Phone Number</label>
          <input type="tel" class="auth-input" name="phone" placeholder="+234 801 234 5678" value="{{ request.POST.phone|default:'' }}" autocomplete="tel">
        </div>
        <div class="auth-form-group">
          <label class="auth-label">Password * <span style="font-weight:400;color:#94a3b8;">(min 8 characters)</span></label>
          <input type="password" class="auth-input" name="password1" required id="pw1" oninput="checkStrength(this.value)" autocomplete="new-password">
          <div class="strength-bar"><div class="strength-fill" id="strengthBar"></div></div>
          <div id="strengthLabel" style="font-size:11px;color:#94a3b8;margin-top:3px;"></div>
        </div>
        <div class="auth-form-group">
          <label class="auth-label">Confirm Password *</label>
          <input type="password" class="auth-input" name="password2" required autocomplete="new-password">
        </div>
        <div style="font-size:12px;color:#64748b;margin-bottom:16px;line-height:1.6;">
          By creating an account you agree to our <a href="#" style="color:var(--gold);">Terms of Service</a> and <a href="#" style="color:var(--gold);">Privacy Policy</a>.
        </div>
        <button type="submit" class="auth-btn"><i class="fas fa-user-plus"></i> &nbsp;Create Account</button>
      </form>

      <div class="auth-divider">or</div>
      <div class="auth-link-row">Already have an account? <a href="{% url 'accounts:login' %}">Sign in</a></div>
    </div>
  </div>
</div>
{% endblock %}
{% block extra_js %}
<script>
function checkStrength(pw) {
  let score = 0;
  if (pw.length >= 8) score++;
  if (/[A-Z]/.test(pw)) score++;
  if (/[0-9]/.test(pw)) score++;
  if (/[^A-Za-z0-9]/.test(pw)) score++;
  const bar = document.getElementById('strengthBar');
  const lbl = document.getElementById('strengthLabel');
  const levels = [
    {w:'0%', c:'', t:''},
    {w:'25%', c:'#ef4444', t:'Weak'},
    {w:'50%', c:'#f59e0b', t:'Fair'},
    {w:'75%', c:'#3b82f6', t:'Good'},
    {w:'100%', c:'#10b981', t:'Strong ✓'},
  ];
  const l = levels[score];
  bar.style.width = l.w; bar.style.background = l.c;
  lbl.textContent = l.t; lbl.style.color = l.c;
}
</script>
{% endblock %}