@extends('layouts.operator-access')

@section('title', 'Operator registration')

@section('content')
    <div class="mx-auto max-w-3xl text-center">
        <h1 class="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">Register your organization</h1>
        <p class="mt-3 text-sm text-slate-600 sm:text-base">Hospitals can self-register below. Aim4Wellness module admins are provisioned separately—use the login page if you already have access.</p>
    </div>

    <div class="mx-auto mt-10 grid max-w-5xl gap-8 lg:grid-cols-2 lg:items-start">
        <div class="flex flex-col rounded-2xl border border-slate-200/80 bg-white/95 p-6 shadow-sm shadow-slate-200/50 ring-1 ring-inset ring-indigo-200/80 sm:p-8">
            <p class="text-xs font-semibold uppercase tracking-wider text-indigo-600">Hospital network</p>
            <h2 class="mt-2 text-xl font-bold tracking-tight text-slate-900">Register a hospital</h2>
            <p class="mt-2 text-sm text-slate-600">Creates your hospital record and the first <strong>hospital admin</strong> user. You can add doctors and staff after signing in.</p>
            <div class="mt-6">
                @include('auth.partials.hospital-register-form')
            </div>
        </div>

        <div class="flex flex-col rounded-2xl border border-slate-200/80 bg-white/95 p-6 shadow-sm shadow-slate-200/50 ring-1 ring-inset ring-teal-200/80 sm:p-8">
            <p class="text-xs font-semibold uppercase tracking-wider text-teal-600">Telehealth module</p>
            <h2 class="mt-2 text-xl font-bold tracking-tight text-slate-900">Aim4Wellness admin</h2>
            <p class="mt-2 text-sm text-slate-600">
                Module administrator accounts are <strong>not</strong> created through this public form. They are added by your platform <strong>super admin</strong> (or during system setup).
            </p>
            <ul class="mt-4 list-inside list-disc space-y-2 text-sm text-slate-600">
                <li>If you were invited, use your email and password on the <a href="{{ route('access.login') }}" class="font-semibold text-teal-700 hover:text-teal-900">operator login</a> page (Aim4Wellness admin).</li>
                <li>For demos, run <code class="rounded bg-slate-100 px-1.5 py-0.5 text-xs text-slate-800">php artisan db:seed</code> to create sample users.</li>
            </ul>
            <div class="mt-8 rounded-xl border border-teal-100 bg-teal-50/80 px-4 py-3 text-sm text-teal-950">
                Super admin console:
                <a href="{{ route('superadmin.login') }}" class="font-semibold text-teal-800 underline decoration-teal-800/30 underline-offset-2 hover:text-teal-950">Super admin login</a>
            </div>
        </div>
    </div>
@endsection