<section class="bg-cream py-12"><div class="mx-auto max-w-3xl px-5"><div class="rounded-[2rem] border border-slate-100 bg-white p-7 shadow-soft sm:p-10"><div class="flex items-center gap-3"><img src="/assets/images/tibaleta-mark.svg" class="h-11 w-11"><div><h1 class="font-display text-2xl font-extrabold"><?= $practitioner?'Join TibaLeta as a practitioner':'Create your TibaLeta account' ?></h1><p class="mt-1 text-sm text-slate-500"><?= $practitioner?'Submit your professional profile for verification.':'Request and manage home care for yourself and your family.' ?></p></div></div>
<?php if($errors=session()->getFlashdata('errors')): ?><div class="mt-5 rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-700"><?php foreach($errors as $e): ?><div><?= esc($e) ?></div><?php endforeach; ?></div><?php endif; ?>
<form action="<?= $practitioner?'/join-practitioner':'/register' ?>" method="post" class="mt-8 grid gap-5 sm:grid-cols-2"><?= csrf_field() ?>
 <div class="sm:col-span-2"><label class="mb-1.5 block text-xs font-bold text-slate-600">Full name</label><input name="full_name" value="<?= esc(old('full_name')) ?>" required class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm focus:border-teal-500 focus:outline-none"></div>
 <div><label class="mb-1.5 block text-xs font-bold text-slate-600">Email</label><input name="email" type="email" value="<?= esc(old('email')) ?>" required class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm focus:border-teal-500 focus:outline-none"></div><div><label class="mb-1.5 block text-xs font-bold text-slate-600">Phone</label><input name="phone" value="<?= esc(old('phone')) ?>" required class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm focus:border-teal-500 focus:outline-none"></div>
 <?php if($practitioner): ?><div class="sm:col-span-2"><label class="mb-1.5 block text-xs font-bold text-slate-600">Profession</label><select name="profession" class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm"><option>General Practitioner</option><option>Registered Nurse</option><option>Physiotherapist</option><option>Paediatrician</option><option>Other Healthcare Practitioner</option></select><p class="mt-2 text-xs text-slate-500">Professional registration and credentials are reviewed before you can receive patient requests.</p></div><?php endif; ?>
 <div><label class="mb-1.5 block text-xs font-bold text-slate-600">Password</label><input name="password" type="password" required minlength="10" class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm focus:border-teal-500 focus:outline-none"></div><div><label class="mb-1.5 block text-xs font-bold text-slate-600">Confirm password</label><input name="password_confirm" type="password" required class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm focus:border-teal-500 focus:outline-none"></div>
 <div class="sm:col-span-2"><label class="flex items-start gap-3 text-xs leading-5 text-slate-500"><input type="checkbox" required class="mt-1 rounded border-slate-300 text-teal-600"><span>I agree to the <a href="/terms" class="font-semibold text-teal-600">Terms</a> and acknowledge the <a href="/privacy" class="font-semibold text-teal-600">Privacy Notice</a>.</span></label></div>
 <button class="sm:col-span-2 rounded-xl bg-teal-600 px-5 py-3 text-sm font-extrabold text-white hover:bg-teal-700"><?= $practitioner?'Create practitioner account':'Create account' ?></button>
</form><p class="mt-6 text-center text-sm text-slate-500">Already have an account? <a href="/login" class="font-bold text-teal-600">Sign in</a></p></div></div></section>
