@php
    $seoTitle = __('Neurodivergent community') . ' — ' . config('app.name');
    $seoDesc  = __('ND-Link connects people with ADHD, autism, giftedness, HSP and learning disabilities. Find your community.');
@endphp
<x-app-layout :title="$seoTitle" :description="$seoDesc">

    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
        <h1 class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">
            {{ __('Who is ND-Link for?') }}
        </h1>
        <p class="text-lg text-gray-500 dark:text-gray-400 max-w-xl mx-auto mb-14">
            {{ __('ND-Link is built for neurodivergent people. Whatever your diagnosis — or none at all — you belong here.') }}
        </p>

        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($diagnoses as $diagnosis)
            <a href="{{ route('neurodivergent.show', $diagnosis['slug']) }}"
               class="group block bg-white dark:bg-gray-800 rounded-2xl p-6 text-left border border-gray-100 dark:border-gray-700 shadow-sm hover:shadow-md transition hover:-translate-y-0.5">
                <div class="text-4xl mb-4">{{ $diagnosis['icon'] }}</div>
                <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-1 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition">
                    {{ __($diagnosis['name']) }}
                </h2>
                <p class="text-sm text-gray-500 dark:text-gray-400">{{ __($diagnosis['tagline']) }}</p>
            </a>
            @endforeach
        </div>

        <div class="mt-14">
            @guest
            <a href="{{ route('register') }}"
               class="inline-flex items-center justify-center px-8 py-3.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-base shadow-sm transition">
                {{ __('Join for free') }}
            </a>
            @endguest
        </div>
    </div>

</x-app-layout>