@php
    $locale = app()->getLocale();
    $defaultJoinUsText = data_get(\App\Models\SiteSetting::defaultAttributes(), "join_us_text_translations.$locale", __('messages.join_us_description'));
    $joinUsDescription = trim($siteJoinUsText !== '' ? $siteJoinUsText : $defaultJoinUsText);
    $contactEmail = $siteSettings->contact_email;
    $contactPhone = $siteSettings->contact_phone;
    $whatsappDisplay = '00963994806517';
    $whatsappDigits = '963994806517';

    $parseStructuredText = static function (string $text): array {
        $paragraphs = [];
        $bullets = [];

        $lines = preg_split('/\R/u', $text) ?: [];
        foreach ($lines as $line) {
            $line = trim((string) $line);
            if ($line === '') {
                continue;
            }

            if (preg_match('/^[-*•]\s+/u', $line) === 1) {
                $bullets[] = trim((string) preg_replace('/^[-*•]\s+/u', '', $line));
                continue;
            }

            $paragraphs[] = $line;
        }

        return [
            'paragraphs' => $paragraphs,
            'bullets' => $bullets,
        ];
    };

    $joinUsParsed = $parseStructuredText($joinUsDescription);
@endphp

<x-layouts.public :title="__('messages.join_us')">
    <div class="px-4 sm:px-6 lg:px-8">
        <article class="theme-card overflow-hidden">
            <header class="theme-gradient px-6 py-7 sm:px-8">
                <h1 class="text-3xl font-bold">{{ __('messages.join_us') }}</h1>
                <p class="mt-2 text-sm sm:text-base opacity-90">{{ __('messages.join_us_title') }}</p>
            </header>

            <div class="p-6 sm:p-8 space-y-6">
                <section class="theme-surface-panel p-5">
                    <h2 class="text-xl font-semibold">{{ __('messages.join_us_title') }}</h2>
                    <div class="mt-3 space-y-3 text-[var(--theme-muted)] leading-7">
                        @foreach ($joinUsParsed['paragraphs'] as $paragraph)
                            <p>{{ $paragraph }}</p>
                        @endforeach
                    </div>
                </section>

                @if ($joinUsParsed['bullets'] !== [])
                    <section class="theme-surface-panel p-5">
                        <h2 class="text-xl font-semibold">{{ __('messages.join_us_benefits_title') }}</h2>
                        <ul class="mt-3 space-y-2.5 text-[var(--theme-muted)]">
                            @foreach ($joinUsParsed['bullets'] as $bullet)
                                <li class="flex items-start gap-2">
                                    <span class="mt-2 h-2 w-2 rounded-full theme-dot-brand"></span>
                                    <span>{{ $bullet }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </section>
                @endif

                <section class="theme-surface-panel p-5 space-y-3">
                    <h2 class="text-xl font-semibold">{{ __('messages.contact') }}</h2>
                    <div class="text-[var(--theme-muted)] space-y-1.5">
                        @if ($contactEmail)
                            <p>{{ __('messages.contact_email') }}: <a class="underline" href="mailto:{{ $contactEmail }}">{{ $contactEmail }}</a></p>
                        @endif
                        @if ($contactPhone)
                            <p>{{ __('messages.contact_phone') }}: {{ $contactPhone }}</p>
                        @endif
                    </div>
                    <a href="https://wa.me/{{ $whatsappDigits }}" class="theme-btn-primary inline-flex items-center justify-center mt-1">
                        WhatsApp {{ $whatsappDisplay }}
                    </a>
                </section>
            </div>
        </article>
    </div>
</x-layouts.public>