<?php

declare(strict_types=1);

require __DIR__ . '/includes/bootstrap.php';

$pageTitle = 'Create your account';
$pageScript = 'register';

ob_start();
?>
<div class="col-xl-5 col-lg-6 col-md-7 position-relative mx-auto">
  <div class="auth-content flex-column pt-8 pb-md-8 pb-13">
    <div class="uh-auth-brand text-center mb-4">
      <span class="uh-auth-brand-mark" aria-hidden="true"><?= uh_brand_svg('icon', 'uh-auth-brand-svg uh-brand-adaptive', '') ?></span>
      <span class="navbar-brand me-0 fw-bold fs-3"><?= h(UH_APP_NAME) ?></span>
    </div>
    <div class="uh-auth-divider mb-6" aria-hidden="true"></div>

    <!-- Step 1: registration form — a multi-step wizard, reusing
         includes/helpers.php's uh_subnav() step-rail visual language
         (.uh-steps/.uh-step/.uh-step-marker) verbatim, the same way
         settings/kyc.php's own wizard already does: rendered here as
         <button>s (assets/js/pages/register.js), not <a href>s, since
         this is in-page step-switching, not real navigation. Every
         field from every step lives in this one #uh-register-form the
         whole time — a step change is only ever a .d-none toggle on
         that step's <section>, never removing/recreating inputs, so a
         value typed on a step the developer has since navigated away
         from survives exactly as before this pass. Field names, the
         backend contract, and every existing validation rule are
         unchanged — see register.js's own comment. -->
    <form class="w-100" id="uh-register-form" novalidate>
      <div class="row">
        <div class="col-xl-9 col-sm-10 mx-auto">
          <div class="text-center mb-4">
            <h4 class="uh-auth-title">Create your developer account</h4>
            <p class="text-muted uh-auth-subtitle">Start integrating with the Ureh API in minutes.</p>
          </div>

          <nav class="uh-steps uh-register-steps" aria-label="Registration steps">
            <ol class="uh-steps-list" id="uh-register-steps-list"></ol>
          </nav>

          <!-- Step: Your Details -->
          <section class="uh-register-step" data-step="details">
            <?= uh_form_field('full_name', 'Full name', 'text', ['placeholder' => 'John Doe', 'autocomplete' => 'name', 'required' => 'required']) ?>
            <?= uh_form_field('email', 'Email', 'email', ['placeholder' => 'Email@example.com', 'autocomplete' => 'email', 'required' => 'required']) ?>
          </section>

          <!-- Step: Business Info — company_name's backend contract
               (name=, developer/v1/auth/register.php's Validator rule,
               clients.company_name) is entirely unchanged; only the
               user-facing label reads "Business Name" now. Required
               client-side only (register.js's own validateStep()) — the
               server's own Validator rule stays `nullable`, unchanged,
               so the existing API contract is preserved exactly; this
               is a UI completeness requirement, not a new security
               boundary. -->
          <section class="uh-register-step" data-step="business">
            <?= uh_form_field('company_name', 'Business Name', 'text', ['placeholder' => 'Acme Inc.', 'autocomplete' => 'organization', 'required' => 'required']) ?>
            <?= uh_form_field('phone', 'Phone number', 'tel', ['placeholder' => '0801 234 5678', 'autocomplete' => 'tel', 'required' => 'required']) ?>
          </section>

          <!-- Step: Password & Security -->
          <section class="uh-register-step" data-step="security">
            <div class="form-group">
              <label class="form-label" for="uh-field-password">Password</label>
              <div class="uh-password-field">
                <input class="form-control" id="uh-field-password" name="password" placeholder="At least 8 characters" type="password" autocomplete="new-password" required>
                <button type="button" class="uh-password-toggle" id="uh-register-password-toggle" aria-controls="uh-field-password" aria-pressed="false" aria-label="Show password">
                  <span class="uh-password-toggle-icon uh-password-toggle-icon--show"><?= uh_icon('eye', 18) ?></span>
                  <span class="uh-password-toggle-icon uh-password-toggle-icon--hide"><?= uh_icon('eye-off', 18) ?></span>
                </button>
              </div>
              <div class="invalid-feedback uh-field-error d-block" data-error-for="password"></div>

              <!-- Password Strength — live checklist, driven entirely by
                   components/password-strength.js. Every requirement item
                   renders both icon states up front (pending dot + check,
                   CSS-toggled by the `.is-met` class JS adds) rather than
                   JS injecting markup, the same "PHP renders, JS only
                   toggles" split every other component in this app follows. -->
              <div class="uh-password-strength" id="uh-password-strength">
                <div class="uh-password-strength-meter" aria-hidden="true">
                  <span class="uh-password-strength-meter-bar" data-strength-meter></span>
                </div>
                <ul class="uh-password-strength-list">
                  <li class="uh-password-strength-item" data-requirement="length">
                    <span class="uh-password-strength-icon-dot" aria-hidden="true"></span>
                    <span class="uh-password-strength-icon-check" aria-hidden="true"><?= uh_icon('check', 12) ?></span>
                    <span>At least 8 characters</span>
                  </li>
                  <li class="uh-password-strength-item" data-requirement="uppercase">
                    <span class="uh-password-strength-icon-dot" aria-hidden="true"></span>
                    <span class="uh-password-strength-icon-check" aria-hidden="true"><?= uh_icon('check', 12) ?></span>
                    <span>One uppercase letter</span>
                  </li>
                  <li class="uh-password-strength-item" data-requirement="lowercase">
                    <span class="uh-password-strength-icon-dot" aria-hidden="true"></span>
                    <span class="uh-password-strength-icon-check" aria-hidden="true"><?= uh_icon('check', 12) ?></span>
                    <span>One lowercase letter</span>
                  </li>
                  <li class="uh-password-strength-item" data-requirement="number">
                    <span class="uh-password-strength-icon-dot" aria-hidden="true"></span>
                    <span class="uh-password-strength-icon-check" aria-hidden="true"><?= uh_icon('check', 12) ?></span>
                    <span>One number</span>
                  </li>
                  <li class="uh-password-strength-item" data-requirement="special">
                    <span class="uh-password-strength-icon-dot" aria-hidden="true"></span>
                    <span class="uh-password-strength-icon-check" aria-hidden="true"><?= uh_icon('check', 12) ?></span>
                    <span>One special character</span>
                  </li>
                </ul>
                <p class="uh-password-strength-status" data-strength-status aria-live="polite"></p>
              </div>
            </div>

            <div class="form-group">
              <label class="form-label" for="uh-field-password_confirmation">Confirm password</label>
              <input class="form-control" id="uh-field-password_confirmation" name="password_confirmation" placeholder="Re-enter your password" type="password" autocomplete="new-password" required>
              <div class="invalid-feedback uh-field-error d-block" data-error-for="password_confirmation"></div>
            </div>

            <?= uh_turnstile_widget() ?>

            <!-- Consent — static copy only, not a checkbox/required
                 field; developer/v1/auth/register.php has no consent
                 field and never reads one, so this has no effect on
                 validation or the request payload. href="#" placeholders
                 — real Terms/Privacy Policy pages don't exist yet.
                 Scoped to this step (like the button it sits above)
                 since it only makes sense right next to the actual
                 submit action. -->
            <p class="uh-register-consent-note fs-7 text-muted mb-0">By clicking Create Account, you agree to Ureh's <a href="#">Terms of Acceptable Use</a> and <a href="#">Privacy Policy</a>.</p>
          </section>

          <div class="uh-register-step-actions">
            <button type="button" class="btn btn-outline-light btn-sm d-none" id="uh-register-step-back">Back</button>
            <div class="ms-auto d-flex align-items-center gap-2">
              <span class="text-muted fs-8 d-none d-sm-inline" id="uh-register-step-position"></span>
              <button type="button" class="btn btn-primary btn-sm" id="uh-register-step-continue">Continue</button>
              <!-- disabled by default (not just d-none) — updateSubmitButtonState()
                   only ever re-enables it once every step is valid; a JS
                   load failure fails closed. -->
              <button type="submit" class="btn btn-primary btn-sm d-none" id="uh-register-submit" disabled>Create Account</button>
            </div>
          </div>

          <div class="text-center mt-4 fs-8 text-muted">
            Already have an account? <a href="<?= h(uh_url('login.php')) ?>">Sign in</a>
          </div>
        </div>
      </div>
    </form>

    <!-- Step 2: success — "check your email"; API keys are generated
         later, deliberately, from the Dashboard's API section (API Key
         Lifecycle Refactor) — no credentials are issued at signup. -->
    <div class="w-100 d-none" id="uh-register-success">
      <div class="row">
        <div class="col-xl-9 col-sm-10 mx-auto text-center">
          <div class="mb-3 text-success"><?= uh_icon('check', 40) ?></div>
          <h4 class="uh-auth-title">Account created</h4>
          <p class="text-muted uh-auth-subtitle mb-4">You can sign in right away. We've also sent a verification link to your email — verify it whenever you get the chance.</p>
          <?= uh_card(
              '<div class="uh-detail-list">'
              . '<div class="row py-2"><div class="col-5 text-muted fs-8 text-uppercase">Client ID</div><div class="col-7"><code id="uh-register-client-identifier"></code></div></div>'
              . '</div>',
              'Your Client ID'
          ) ?>
          <p class="fs-8 text-muted mt-3">Once signed in, generate your API keys from the Dashboard's API section.</p>
          <a href="<?= h(uh_url('login.php')) ?>" class="btn btn-flush-primary btn-block mt-2">Go to sign in</a>
        </div>
      </div>
    </div>
  </div>
  <div class="hk-footer border-0">
    <?php require __DIR__ . '/layouts/footer.php'; ?>
  </div>
</div>
<?php
// Hero copy: none set here — auth-hero.php's own default is now the
// platform-wide positioning statement (see that file's own comment).
require __DIR__ . '/includes/auth-hero.php';
$content = ob_get_clean();
require __DIR__ . '/layouts/auth.php';
