@extends('layouts.public')

@section('content')
    <section class="container-shell section-gap">
        <div class="mesh-banner rounded-[36px] border border-white/60 px-6 py-12 dark:border-white/10 lg:px-10">
            <div class="max-w-4xl">
                <div class="eyebrow">{{ __('common.about') }}</div>
                <h1 class="headline-display mt-5 font-['Fraunces']">{{ $settings->localized_doctor_name }}</h1>
                <p class="mt-5 body-lg">{{ __('messages.about_page_title') }}</p>
            </div>
        </div>
    </section>

    @include('components.public.stats-counter', [
        'items' => [
            ['label' => __('messages.proof_experience'), 'value' => $settings->experience_years],
            ['label' => __('messages.proof_patients'), 'value' => $settings->total_patients],
            ['label' => __('messages.proof_surgeries'), 'value' => $settings->total_surgeries],
            ['label' => __('messages.proof_chambers'), 'value' => $activeChamberCount],
        ],
    ])

    <section class="container-shell section-gap">
        <div class="grid gap-8 lg:grid-cols-[0.85fr_1.15fr]">
            <div class="premium-card">
                <div class="text-sm font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400">{{ __('messages.about_doctor') }}</div>
                <div class="mt-4 space-y-4 text-sm text-slate-600 dark:text-slate-300">
                    <div><strong>{{ __('messages.proof_experience') }}:</strong> {{ \App\Helpers\BanglaNumber::convert($settings->experience_years) }}+</div>
                    <div><strong>{{ __('messages.proof_patients') }}:</strong> {{ \App\Helpers\BanglaNumber::convert($settings->total_patients) }}+</div>
                    <div><strong>BMDC:</strong> {{ $settings->registration_no ?: '-' }}</div>
                </div>
            </div>
            <div class="premium-card">
                <h2 class="text-2xl font-semibold text-slate-950 dark:text-white">{{ $settings->localized_specialization }}</h2>
                <p class="mt-5 whitespace-pre-line text-sm leading-8 text-slate-600 dark:text-slate-300">{{ $settings->localized_doctor_bio ?: __('messages.hero_subtitle') }}</p>
            </div>
        </div>
    </section>

    <section class="container-shell section-gap">
        <div class="grid gap-5 lg:grid-cols-3">
            @foreach([
                __('messages.practice_principle_1'),
                __('messages.practice_principle_2'),
                __('messages.practice_principle_3'),
            ] as $principle)
                <article class="premium-card">
                    <div class="eyebrow">{{ __('messages.why_choose') }}</div>
                    <p class="mt-5 text-lg font-semibold leading-8 text-slate-950 dark:text-white">{{ $principle }}</p>
                </article>
            @endforeach
        </div>
    </section>

    @include('components.public.appointment-cta')
@endsection