PAGE TYPE: Member Registration Form Page
CONVERSION GOAL: Convert visitors into registered members with a beautiful, premium registration form.

CRITICAL — FORM REQUIREMENTS:
The form MUST use these exact attributes and field names — the backend depends on them.
You may use any classes, icons, styling, and layout you want. Just keep these exact values:

- form action="{{ config('app.url') }}/registration" method="POST" enctype="multipart/form-data"
- The %csrf% token div MUST be hidden with: style="display:none ;visibility:hidden ;height:0 ;overflow:hidden ;" — it must NEVER be visible on the page
- Honeypot fields (hidden with CSS opacity:0;position:absolute;left:-9999px;height:0;width:0): name="hp_name" and name="hp_email"
- name="registername" type="text" required placeholder="Full Name"
- name="registerphone" type="tel" placeholder="Phone Number"
- name="registeremail" type="email" required placeholder="Email Address"
- name="registerusername" type="text" required placeholder="Create Username"
- name="registerpassword" type="password" required placeholder="Create Password"
- name="registerpasswordconfirm" type="password" required placeholder="Confirm Password"
- Submit button

MANDATORY HIDDEN FIELDS — MUST BE INCLUDED EXACTLY AS SHOWN — DO NOT OMIT:
<input data-gjs-type="input" type="hidden" id="memberid" name="memberid" value="%memberid%"/>
<input data-gjs-type="input" type="hidden" id="url" name="url" value="%url%"/>
These two hidden inputs MUST appear in the form exactly as written above. The %memberid% and %url% tokens are replaced dynamically by the system. Never hardcode values, never omit these fields, never change their names or IDs.

FORM VALIDATION — REQUIRED:
Add client-side validation before submission. The form must NOT submit if any required field is empty or invalid.

document.getElementById('register-form').addEventListener('submit', function(e) {
  e.preventDefault();
  let valid = true;
  const errors = [];

  const name = document.getElementById('registername').value.trim();
  const email = document.getElementById('registeremail').value.trim();
  const username = document.getElementById('registerusername').value.trim();
  const password = document.getElementById('registerpassword').value;
  const confirm = document.getElementById('registerpasswordconfirm').value;

  if (!name) { valid = false; errors.push('Full name is required.'); }
  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { valid = false; errors.push('A valid email address is required.'); }
  if (!username) { valid = false; errors.push('Username is required.'); }
  if (username && username.length < 3) { valid = false; errors.push('Username must be at least 3 characters.'); }
  if (username && username.includes('@')) { valid = false; errors.push('Email addresses are not allowed as usernames.'); }
  if (username && /\s/.test(username)) { valid = false; errors.push('Username cannot contain spaces.'); }
  if (!password) { valid = false; errors.push('Password is required.'); }
  if (password && password.length < 8) { valid = false; errors.push('Password must be at least 8 characters.'); }
  if (password !== confirm) { valid = false; errors.push('Passwords do not match.'); }

  if (document.querySelector('.field-taken')) { valid = false; errors.push('Please fix the errors above before submitting.'); }

  const status = document.getElementById('returnstatus');
  if (!valid) {
    status.innerHTML = errors.map(e => '<div>' + e + '</div>').join('');
    status.style.display = 'block';
    status.style.padding = '0.75rem 1rem';
    status.style.marginBottom = '1rem';
    status.style.borderRadius = '8px';
    status.style.background = 'rgba(239,68,68,0.15)';
    status.style.color = '#ef4444';
    status.style.border = '1px solid rgba(239,68,68,0.3)';
    status.style.fontSize = '0.875rem';
    status.scrollIntoView({ behavior: 'smooth', block: 'center' });
    return;
  }

  status.innerHTML = '';
  status.style.display = 'none';
  this.submit();
});

REGISTRATION FORM — button[data-submit] HANDLER — MANDATORY:
document.querySelectorAll('#register-form button[data-submit]').forEach(function(btn){
  btn.setAttribute('role','button');
  if(!btn.getAttribute('tabindex'))btn.setAttribute('tabindex','0');
  btn.addEventListener('click',function(){
    var emailEl=document.getElementById('registeremail');
    if(emailEl){
      var v=emailEl.value.trim();
      if(!v||!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)){
        emailEl.style.border='2px solid red';
        emailEl.focus();
        return;
      } else { emailEl.style.border=''; }
    }
    var f=btn.closest('form');
    if(f)f.dispatchEvent(new Event('submit',{bubbles:true,cancelable:true}));
  });
  btn.addEventListener('keydown',function(e){
    if(e.key==='Enter'||e.key===' '){e.preventDefault();btn.click();}
  });
});

REAL-TIME FIELD AVAILABILITY CHECK — REQUIRED:
async function checkFieldAvailability(field, value, inputEl) {
  if (!value) return;
  const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content
    || document.querySelector('input[name="_token"]')?.value || '';
  const existing = inputEl.parentElement.querySelector('.field-feedback');
  if (existing) existing.remove();
  inputEl.style.borderColor = '';
  inputEl.classList.remove('field-taken');
  try {
    const res = await fetch('/check-registration-field', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
      body: JSON.stringify({ field, value })
    });
    const data = await res.json();
    if (!data.available) {
      inputEl.style.borderColor = '#ef4444';
      inputEl.classList.add('field-taken');
      const msg = document.createElement('span');
      msg.className = 'field-feedback';
      msg.style.cssText = 'font-size:0.8rem;margin-top:0.35rem;display:block;color:#ef4444;';
      msg.textContent = field === 'email' ? 'This email is already registered.' : 'This username is already taken.';
      inputEl.closest('div').insertAdjacentElement('afterend', msg);
    }
  } catch(err) { /* Fail silently */ }
}

document.getElementById('registeremail').addEventListener('blur', function() {
  const val = this.value.trim().toLowerCase();
  if (val && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val)) checkFieldAvailability('email', val, this);
});

document.getElementById('registerusername').addEventListener('blur', function() {
  const val = this.value.trim().toLowerCase();
  if (val && val.length >= 3) checkFieldAvailability('username', val, this);
});

PASSWORD TOGGLE — MUST BE INLINE SCRIPT (not in javascript field):
Each password field must have an eye icon button that toggles between showing and hiding the password. Use Font Awesome fa-eye / fa-eye-slash. Add data-toggle-password="registerpassword" and data-toggle-password="registerpasswordconfirm" to the respective toggle buttons.

Place this EXACT script as an inline <script> tag immediately after the form's closing </section> tag:
<script>
document.addEventListener('DOMContentLoaded', () => {
    if (window.location.search.includes('grapesjs') || document.body.classList.contains('gjs-no-pointer')) return;
    document.querySelectorAll('[data-toggle-password]').forEach(btn => {
        btn.addEventListener('click', () => {
            const input = document.getElementById(btn.getAttribute('data-toggle-password'));
            if (!input) return;
            const icon = btn.querySelector('i');
            const showing = input.type === 'text';
            input.type = showing ? 'password' : 'text';
            if (icon) {
                icon.classList.toggle('fa-eye', showing);
                icon.classList.toggle('fa-eye-slash', !showing);
            }
        });
    });
});
</script>

PLATFORM-OWNED REGISTRATION FORM CSS — DO NOT WRITE THIS YOURSELF:
The platform's base stylesheet already fully implements the structural CSS for this form: `#registration` (full-height centering), `.reg-inner`, `.reg-card` (width/padding/centering), `.field`, `.field-inner`, `#register-form`, `#register-form input` (centering, padding, sizing), the left field icon positioning (`.field-inner > i.fa` etc.), and the `[data-toggle-password]` eye-icon button positioning — including the mobile breakpoint adjustments. Use exactly these class names and IDs in your markup (`.reg-inner`, `.reg-card`, `.field`, `.field-inner`) and do NOT write your own CSS for any of the layout/sizing/positioning properties on these selectors — the platform supplies them automatically. You ARE still responsible for all colors (card background, borders, input background, icon tint, text colors) and the design token values they reference — those remain fully yours to set per niche/brand.

STILL YOUR RESPONSIBILITY — CSS TO WRITE:
#im6kd{display:none;visibility:hidden;height:0;overflow:hidden;}
.iti{width:100%;}
#registerphone{text-align:center;padding-left:1rem;}
#registerphone::placeholder{text-align:center;}

PHONE FIELD — INTL-TEL-INPUT COMPATIBILITY:
- Do NOT add any flag, country code, or dial code UI — handled externally.
- Do NOT add a Font Awesome icon to the phone field.
- NEVER write CSS for ANY .iti__ classes — this breaks the dropdown.

DESIGN REQUIREMENTS:
- FORM WIDTH, PAGE CENTERING, CARD CENTERING, and the FIELD ICON + PASSWORD TOGGLE LAYOUT are all platform-owned (see PLATFORM-OWNED REGISTRATION FORM CSS above) — use the `.reg-inner`/`.reg-card`/`.field`/`.field-inner` classes and do not write your own CSS for these.
- PASSWORD FIELDS: Each on its own full-width line — NEVER side by side.
- NO LABELS ABOVE FIELDS: Do NOT render any <label> above any input. Placeholder text is the only field identifier.
- ICON COLOR: NEVER hardcode a color on form icons. Use CSS class inheritance only.
- Submit button: width:100%; display:block;
- Trust signals below submit: text-align:center
- Dark section background
- This is a {niche} registration page — surrounding copy must be niche-specific and benefit-driven.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
GRAPESJS MOBILE CHECKS — REGISTRATION FORM PAGE
[GRAPESJS BUILDER ONLY — page generator: ignore this section]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Registration fields (registername, registeremail, registerusername, registerpassword, registerpasswordconfirm): all 16px font-size on mobile
- Field wrappers: full width, 0 horizontal padding (outer card handles the 10px)
- Registration card: min-width:100%; max-width:100%; padding:1rem at mobile
- Password toggle buttons: min 48px tap target
- Submit button: full width on mobile
- 10px horizontal padding on page wrapper
