<div class="space-y-6">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
            <p class="text-sm text-gray-500">Customer Profile</p>
            <h2 class="text-2xl font-semibold text-gray-900">{{ $customer->full_name }}</h2>
        </div>
        <span class="inline-flex items-center rounded-full bg-emerald-50 px-3 py-1 text-sm font-medium text-emerald-700 capitalize">
            {{ $customer->type }}
        </span>
    </div>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
        <section class="rounded-xl border border-gray-100 bg-gray-50/60 p-5 shadow-sm">
            <h3 class="text-sm font-semibold uppercase tracking-wide text-gray-500">Personal Information</h3>
            <dl class="mt-4 space-y-3">
                <div class="flex items-start justify-between gap-3">
                    <dt class="text-sm text-gray-500">Preferred Name</dt>
                    <dd class="text-sm font-medium text-gray-900">{{ $customer->preferred_name ?? '—' }}</dd>
                </div>
                <div class="flex items-start justify-between gap-3">
                    <dt class="text-sm text-gray-500">Gender</dt>
                    <dd class="text-sm font-medium text-gray-900">{{ $customer->gender ?? '—' }}</dd>
                </div>
                <div class="flex items-start justify-between gap-3">
                    <dt class="text-sm text-gray-500">Date of Birth</dt>
                    <dd class="text-sm font-medium text-gray-900">{{ optional($customer->dob)->format('F j') ?? '—' }}</dd>
                </div>
                <div class="flex items-start justify-between gap-3">
                    <dt class="text-sm text-gray-500">Anniversary</dt>
                    <dd class="text-sm font-medium text-gray-900">{{ optional($customer->anniversary_date)->format('F j') ?? '—' }}</dd>
                </div>
            </dl>
        </section>

        <section class="rounded-xl border border-gray-100 bg-white p-5 shadow-sm">
            <h3 class="text-sm font-semibold uppercase tracking-wide text-gray-500">Contact Details</h3>
            <dl class="mt-4 space-y-3">
                <div class="flex items-start justify-between gap-3">
                    <dt class="text-sm text-gray-500">Mobile</dt>
                    <dd class="text-sm font-medium text-gray-900">{{ $customer->mobile }}</dd>
                </div>
                <div class="flex items-start justify-between gap-3">
                    <dt class="text-sm text-gray-500">Email</dt>
                    <dd class="text-sm font-medium text-gray-900 break-all">{{ $customer->email ?? '—' }}</dd>
                </div>
                <div class="flex items-start justify-between gap-3">
                    <dt class="text-sm text-gray-500">Preferred Contact</dt>
                    <dd class="text-sm font-medium text-gray-900">{{ $customer->preferred_contact_method ?? '—' }}</dd>
                </div>
                <div class="flex items-start justify-between gap-3">
                    <dt class="text-sm text-gray-500">Marketing Opt-in</dt>
                    <dd>
                        <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold {{ $customer->is_marketing_agreed ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-100 text-gray-600' }}">
                            {{ $customer->is_marketing_agreed ? 'Yes' : 'No' }}
                        </span>
                    </dd>
                </div>
            </dl>
        </section>

        <section class="md:col-span-2 rounded-xl border border-gray-100 bg-white p-5 shadow-sm">
            <h3 class="text-sm font-semibold uppercase tracking-wide text-gray-500">Location & Occupation</h3>
            <dl class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                <div>
                    <dt class="text-xs uppercase text-gray-500">Country</dt>
                    <dd class="mt-1 text-sm font-medium text-gray-900">{{ $customer->country ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs uppercase text-gray-500">City</dt>
                    <dd class="mt-1 text-sm font-medium text-gray-900">{{ $customer->city ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs uppercase text-gray-500">Occupation</dt>
                    <dd class="mt-1 text-sm font-medium text-gray-900">{{ $customer->occupation ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs uppercase text-gray-500">Tour Company</dt>
                    <dd class="mt-1 text-sm font-medium text-gray-900">{{ $customer->tour_company_name ?? '—' }}</dd>
                </div>
            </dl>
        </section>
    </div>

    <div class="flex items-center justify-between rounded-lg border border-dashed border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-600">
        <span>Member since</span>
        <span class="font-medium text-gray-900">{{ optional($customer->created_at)->format('M d, Y \\a\\t h:ia') }}</span>
    </div>
</div>
