@extends('layouts.app')

@section('content')
    <section class="a4w-section">
        <span class="a4w-kicker">About Us</span>
        <h1 class="mt-4 a4w-heading">About Aim4Wellness</h1>
        <p class="a4w-subheading">We provide integrated digital healthcare for mental and physical wellness using a secure, user-centered care experience.</p>

        <div class="mt-8 grid gap-6 lg:grid-cols-2">
            <x-card class="a4w-soft-panel bg-gradient-to-br from-blue-50 to-white">
                <h2 class="text-xl font-semibold text-blue-700">Mission</h2>
                <p class="mt-3 text-sm text-slate-600">Make quality healthcare accessible, affordable, and trusted through digital-first care delivery.</p>
            </x-card>
            <x-card class="a4w-soft-panel bg-gradient-to-br from-emerald-50 to-white">
                <h2 class="text-xl font-semibold text-emerald-700">Vision</h2>
                <p class="mt-3 text-sm text-slate-600">Build a connected healthcare ecosystem that supports every patient journey from first consultation to recovery.</p>
            </x-card>
        </div>

        <div class="mt-10 grid gap-6 md:grid-cols-3">
            @foreach ([['Trusted Clinicians', 'Experienced doctors and therapists.'], ['Secure Platform', 'Privacy-first architecture and compliance.'], ['Integrated Services', 'Mental and physical care in one platform.']] as $item)
                <x-card class="a4w-soft-panel p-5">
                    <h3 class="font-semibold text-slate-900">{{ $item[0] }}</h3>
                    <p class="mt-2 text-sm text-slate-600">{{ $item[1] }}</p>
                </x-card>
            @endforeach
        </div>
    </section>
@endsection