@extends('layouts.operator-access')

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

@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">Sign in to your workspace</h1>
        <p class="mt-3 text-sm text-slate-600 sm:text-base">Choose <strong class="text-slate-800">hospital operations</strong> or <strong class="text-slate-800">Aim4Wellness module administration</strong>. Each side uses its own credentials.</p>
    </div>

    <div class="mx-auto mt-10 grid max-w-5xl gap-8 lg:grid-cols-2 lg:items-start">
        <x-auth.role-login-panel
            role="hospital_admin"
            accent="indigo"
            title="Hospital admin"
            description="Manage staff, patients, appointments, pharmacy, and billing for your facility."
        />

        <x-auth.role-login-panel
            role="aim4wellness_admin"
            accent="teal"
            title="Aim4Wellness admin"
            description="Operate the telehealth module: doctors, patients, consultations, content, and payments."
        />
    </div>

    <p class="mx-auto mt-10 max-w-2xl text-center text-sm text-slate-500">
        Need a hospital account?
        <a href="{{ route('access.register') }}" class="font-semibold text-teal-700 underline decoration-teal-700/30 underline-offset-2 hover:text-teal-900">Register your hospital</a>
        · Independent clinician?
        <a href="{{ route('doctor.login') }}" class="font-semibold text-teal-700 underline decoration-teal-700/30 underline-offset-2 hover:text-teal-900">Doctor login</a>
    </p>
@endsection