@extends('layouts.public')

@section('title', 'CoCM for Providers — Meduvo Health')

@section('content')
<main class="mx-auto max-w-7xl px-5 sm:px-6 lg:px-8 py-10">
    <section class="grid gap-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
        <div>
            <p class="text-sm font-semibold text-brand-orange">CoCM for Providers</p>
            <h1 class="mt-3 text-3xl sm:text-4xl font-bold tracking-tight text-accent">Move from screening to live collaborative care without losing the room.</h1>
            <p class="mt-4 text-base text-ink-secondary leading-relaxed">Meduvo supports PCPs, BHCMs, psychiatrists, and clinic administrators with a shared workflow for screening, handoff, follow-up, psychiatric review, and billing evidence.</p>
            <div class="mt-6 flex flex-wrap gap-3">
                <a href="{{ route('public.register-practice') }}" class="btn-primary">Register practice</a>
                <a href="{{ route('public.provider-flow') }}" class="btn-secondary">Explore system flow</a>
                <a href="{{ route('login') }}" class="btn-secondary">Sign in</a>
            </div>
        </div>
        <div class="card p-5 bg-surface-1">
            <div class="grid grid-cols-2 gap-3 text-sm">
                <div class="rounded-lg border border-border-subtle bg-accent-muted p-4">
                    <p class="text-xs font-semibold text-ink-muted">Screening</p>
                    <p class="mt-1 text-2xl font-bold text-accent">PHQ-9</p>
                </div>
                <div class="rounded-lg border border-border-subtle bg-brand-orange-muted p-4">
                    <p class="text-xs font-semibold text-ink-muted">Safety</p>
                    <p class="mt-1 text-2xl font-bold text-brand-orange">Live</p>
                </div>
                <div class="rounded-lg border border-border-subtle bg-white p-4">
                    <p class="text-xs font-semibold text-ink-muted">Care team</p>
                    <p class="mt-1 text-2xl font-bold text-status-good">Ready</p>
                </div>
                <div class="rounded-lg border border-border-subtle bg-white p-4">
                    <p class="text-xs font-semibold text-ink-muted">Billing</p>
                    <p class="mt-1 text-2xl font-bold text-accent">Tracked</p>
                </div>
            </div>
        </div>
    </section>

    <section class="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        @foreach ([
            ['role' => 'PCP', 'text' => 'Assign screenings, review scores, discuss results, and start a live referral.'],
            ['role' => 'BHCM', 'text' => 'Receive referral queues, open chart context, track outreach, and maintain the care plan.'],
            ['role' => 'Psychiatrist', 'text' => 'Review escalated cases and send recommendations back through the care team.'],
            ['role' => 'Clinic Admin', 'text' => 'Oversee compliance, activation, billing thresholds, audit trail, and staffing.'],
        ] as $item)
            <article class="card p-5">
                <h2 class="text-sm font-semibold text-accent">{{ $item['role'] }}</h2>
                <p class="mt-2 text-sm text-ink-secondary leading-relaxed">{{ $item['text'] }}</p>
            </article>
        @endforeach
    </section>
</main>
@endsection