@extends('layouts.app')

@section('content')
    <section class="a4w-section">
        <span class="a4w-kicker">Services</span>
        <h1 class="mt-4 a4w-heading">Our Services</h1>
        <p class="a4w-subheading">Comprehensive digital care designed for both emotional well-being and physical health outcomes.</p>

        <div class="mt-8 grid gap-6 lg:grid-cols-2">
            <x-card class="a4w-soft-panel bg-gradient-to-br from-emerald-50 to-white">
                <h2 class="text-2xl font-semibold text-emerald-700">Mental Health Services</h2>
                <ul class="mt-4 space-y-2 text-sm text-slate-600">
                    <li>One-on-one therapy sessions</li>
                    <li>Emotional wellness check-ins</li>
                    <li>Mood tracking and guidance</li>
                    <li>Stress and anxiety coping support</li>
                </ul>
            </x-card>
            <x-card class="a4w-soft-panel bg-gradient-to-br from-blue-50 to-white">
                <h2 class="text-2xl font-semibold text-blue-700">Physical Health Services</h2>
                <ul class="mt-4 space-y-2 text-sm text-slate-600">
                    <li>Virtual doctor consultations</li>
                    <li>Health screening and follow-up</li>
                    <li>Nutrition and lifestyle advice</li>
                    <li>Referral to partner hospitals</li>
                </ul>
            </x-card>
        </div>
    </section>
@endsection