<div class="auth-page auth-page-wide">
  <div class="auth-card auth-card-wide">
    <div class="auth-header">
      <a href="/" class="auth-logo"><svg width="40" height="40" viewBox="0 0 36 36" fill="none"><rect width="36" height="36" rx="8" fill="#1a56db"/><path d="M8 10h8v16H8zM20 10h8v8h-8zM20 22h8v4h-8z" fill="white" opacity="0.9"/></svg></a>
      <h1>Join Biz2Biz Chamber</h1>
      <p>Create your account and start connecting your business today.</p>
    </div>

    <% if (error && error.length) { %><div class="alert alert-error"><i class="bi bi-exclamation-circle-fill"></i> <%= error[0] %></div><% } %>

    <% if (typeof ref !== 'undefined' && ref) { %>
    <div style="background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:10px 14px;margin-bottom:16px;display:flex;align-items:center;gap:8px;font-size:.85rem;color:#1e40af">
      <i class="bi bi-people-fill"></i> <strong>You were referred by a Biz2Biz Chamber member!</strong>
    </div>
    <% } %>
    <form action="/register" method="POST" class="auth-form">
      <input type="hidden" name="ref" value="<%= typeof ref !== 'undefined' ? ref : '' %>">
      <div class="form-section-label">Personal Information</div>
      <div class="form-row">
        <div class="form-group"><label>First Name *</label><input type="text" name="first_name" required placeholder="John" autofocus></div>
        <div class="form-group"><label>Last Name *</label><input type="text" name="last_name" required placeholder="Smith"></div>
      </div>
      <div class="form-row">
        <div class="form-group"><label>Email Address *</label><input type="email" name="email" required placeholder="john@company.com"></div>
        <div class="form-group"><label>Phone</label><input type="tel" name="phone" placeholder="(555) 555-5555"></div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label>Password *</label>
          <div class="input-icon"><i class="bi bi-lock-fill"></i><input type="password" name="password" id="passwordField" required placeholder="Min 8 chars, upper, lower, number, symbol">
          <button type="button" class="input-toggle" onclick="togglePassword('passwordField',this)"><i class="bi bi-eye"></i></button></div>
          <small class="form-help">Must contain uppercase, lowercase, number, and symbol.</small>
        </div>
      </div>

      <div class="form-section-label">Organization Information</div>
      <div class="form-row">
        <div class="form-group"><label>Business Name *</label><input type="text" name="org_name" required placeholder="Acme Corporation"></div>
        <div class="form-group"><label>Website</label><input type="url" name="org_website" placeholder="https://yourcompany.com"></div>
      </div>
      <div class="form-group"><label>Industry Category</label>
        <select name="org_category">
          <option value="">Select a category...</option>
          <option value="1">Technology</option>
          <option value="2">Healthcare</option>
          <option value="3">Finance</option>
          <option value="4">Real Estate</option>
          <option value="5">Legal Services</option>
          <option value="6">Marketing & Advertising</option>
          <option value="7">Construction</option>
          <option value="8">Food & Beverage</option>
          <option value="9">Retail</option>
          <option value="10">Education</option>
          <option value="11">Manufacturing</option>
          <option value="12">Transportation</option>
          <option value="13">Non-Profit</option>
          <option value="14">Hospitality</option>
          <option value="15">Professional Services</option>
        </select>
      </div>

      <div class="form-check">
        <input type="checkbox" name="agree_terms" id="agreeTerms" required>
        <label for="agreeTerms">I agree to the <a href="/terms" target="_blank">Terms of Service</a> and <a href="/privacy" target="_blank">Privacy Policy</a></label>
      </div>

      <div class="membership-summary">
        <div class="ms-price"><span>Annual Membership</span><strong>$299/year</strong></div>
        <div style="background:#d1fae5;border-radius:8px;padding:10px 14px;margin-top:10px;display:flex;align-items:center;gap:8px">
          <i class="bi bi-gift-fill" style="color:#065f46"></i>
          <strong style="color:#065f46;font-size:.875rem">Free 30-Day Trial Included!</strong>
        </div>
        <p style="margin-top:8px;font-size:.78rem">Start with a free 30-day trial. No credit card required to sign up.</p>
      </div>

      <div class="form-group">
        <label>Promo Code <span style="font-weight:400;color:#9ca3af">(optional)</span></label>
        <div style="display:flex;gap:8px">
          <input type="text" name="promo_code" id="promoCode" placeholder="Enter promo code..." style="text-transform:uppercase;flex:1">
          <button type="button" class="btn btn-outline-primary btn-sm" onclick="validatePromo()"><i class="bi bi-tag-fill"></i> Apply</button>
        </div>
        <div id="promoResult" style="margin-top:6px;font-size:.78rem;display:none"></div>
      </div>

      <button type="submit" class="btn btn-primary btn-block btn-lg">Create Account & Continue <i class="bi bi-arrow-right"></i></button>
    </form>

    <div class="auth-divider"><span>Already a member?</span></div>
    <a href="/login" class="btn btn-outline-primary btn-block">Sign In</a>
  </div>
</div>

<script>
function togglePassword(id, btn) { const f=document.getElementById(id); const icon=btn.querySelector('i'); f.type=f.type==='password'?'text':'password'; icon.className=f.type==='password'?'bi bi-eye':'bi bi-eye-slash'; }
async function validatePromo() {
  const code = document.getElementById('promoCode').value.trim();
  if (!code) return;
  const res  = await fetch('/api/promo/validate', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({code})});
  const data = await res.json();
  const el   = document.getElementById('promoResult');
  el.style.display = 'block';
  if (data.valid) {
    const p = data.promo;
    let msg = '';
    if (p.discount_type === 'trial_extension') msg = `+${p.trial_extension_days} extra days trial!`;
    else if (p.discount_type === 'percent') msg = `${p.discount_value}% off membership!`;
    else if (p.discount_type === 'fixed') msg = `$${p.discount_value} off membership!`;
    else msg = 'Special offer applied!';
    el.innerHTML = `<span style="color:#065f46"><i class="bi bi-check-circle-fill"></i> Code applied: ${msg}</span>`;
  } else {
    el.innerHTML = `<span style="color:#ef4444"><i class="bi bi-x-circle-fill"></i> ${data.message || 'Invalid promo code.'}</span>`;
  }
}
document.getElementById('promoCode').addEventListener('input', function() {
  this.value = this.value.toUpperCase();
  document.getElementById('promoResult').style.display = 'none';
});
</script>
