{{--
    About page content.
    Edit each section below to fill in your own text.
    All section headings are translated via lang/*.json.
--}}

<div class="prose prose-gray dark:prose-invert max-w-none space-y-10 text-sm leading-relaxed text-gray-700 dark:text-gray-300">

    {{-- ── Mission & Vision ─────────────────────────────────────────────── --}}
    <section id="mission">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">{{ __('Mission & Vision') }}</h2>

        {!! __('about.mission') !!}
        <div class="mt-4">{!! __('about.vision') !!}</div>
    </section>

    {{-- ── Bio / Team ───────────────────────────────────────────────────── --}}
    <section>
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">{{ __('About the team') }}</h2>

        <p>{!! __('about.team') !!}</p>
    </section>

    {{-- ── Accessibility & ND Design ────────────────────────────────────── --}}
    <section>
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">{{ __('Accessibility & ND design') }}</h2>

        <p class="mb-3">{{ __('about.accessibility_intro') }}</p>
        <ul class="list-disc list-inside space-y-1">
            <li>{{ __('about.accessibility_1') }}</li>
            <li>{{ __('about.accessibility_2') }}</li>
            <li>{{ __('about.accessibility_3') }}</li>
            <li>{{ __('about.accessibility_4') }}</li>
        </ul>
    </section>

    {{-- ── Community Values ─────────────────────────────────────────────── --}}
    <section>
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">{{ __('Community values') }}</h2>

        <p class="mb-3">{{ __('about.values_intro') }}</p>
        <ul class="list-disc list-inside space-y-1">
            <li>{{ __('about.value_1') }}</li>
            <li>{{ __('about.value_2') }}</li>
            <li>{{ __('about.value_3') }}</li>
            <li>{{ __('about.value_4') }}</li>
        </ul>
    </section>

    {{-- ── Roadmap ──────────────────────────────────────────────────────── --}}
    <section>
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">{{ __('Roadmap') }}</h2>

        <p class="mb-3">{{ __('about.roadmap_intro') }}</p>
        <ul class="list-disc list-inside space-y-1">
            <li>{{ __('about.roadmap_2') }}</li>
            <li>{{ __('about.roadmap_tools') }}</li>
            <li>{{ __('about.roadmap_4') }}</li>
            <li>{{ __('about.roadmap_5') }}</li>
        </ul>
    </section>

    {{-- ── FAQ ─────────────────────────────────────────────────────────── --}}
    <section>
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">{{ __('Frequently asked questions') }}</h2>

        <div class="space-y-4">
            @foreach ([
                ['about.faq_q1', 'about.faq_a1'],
                ['about.faq_q2', 'about.faq_a2'],
                ['about.faq_q3', 'about.faq_a3'],
            ] as [$q, $a])
                <div>
                    <p class="font-medium text-gray-800 dark:text-white">{{ __($q) }}</p>
                    <p class="mt-1 text-gray-600 dark:text-gray-400">{{ __($a) }}</p>
                </div>
            @endforeach
        </div>
    </section>

    {{-- ── Legal & Fiscal Info ──────────────────────────────────────────── --}}
    <section id="legal">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">{{ __('Legal & fiscal information') }}</h2>

        <dl class="space-y-2">
            <div class="flex gap-3">
                <dt class="w-40 shrink-0 text-gray-500 dark:text-gray-400">{{ __('Name') }}</dt>
                <dd>Daniel Van Waeyenberg</dd>
            </div>
            <div class="flex gap-3">
                <dt class="w-40 shrink-0 text-gray-500 dark:text-gray-400">{{ __('Legal form') }}</dt>
                <dd>{{ __('Sole trader (eenmanszaak)') }}</dd>
            </div>
            <div class="flex gap-3">
                <dt class="w-40 shrink-0 text-gray-500 dark:text-gray-400">{{ __('Company number') }}</dt>
                <dd>0847.486.525</dd>
            </div>
            <div class="flex gap-3">
                <dt class="w-40 shrink-0 text-gray-500 dark:text-gray-400">{{ __('VAT number') }}</dt>
                <dd>BE0847486525</dd>
            </div>
            <div class="flex gap-3">
                <dt class="w-40 shrink-0 text-gray-500 dark:text-gray-400">{{ __('Registered address') }}</dt>
                <dd>Zavelvennestraat 141, 3500 Hasselt, België</dd>
            </div>
            <div class="flex gap-3">
                <dt class="w-40 shrink-0 text-gray-500 dark:text-gray-400">{{ __('Email') }}</dt>
                <dd><a href="mailto:contact@ndlink.app" class="text-indigo-600 dark:text-indigo-400 hover:underline">contact@ndlink.app</a></dd>
            </div>
        </dl>
    </section>

    {{-- ── Press / Media ────────────────────────────────────────────────── --}}
    <section>
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">{{ __('Press & media') }}</h2>

        <p>
            {{ __('about.press') }}
            <a href="{{ route('contact') }}" class="text-indigo-600 dark:text-indigo-400 hover:underline">{{ __('contact form') }}</a>.
        </p>
    </section>

</div>