@php
    $whatsappDigits = preg_replace('/\D+/', '', $contact['whatsapp']);
    $socials = [
        ['name' => 'Instagram', 'url' => $contact['instagram']],
        ['name' => 'TikTok', 'url' => $contact['tiktok']],
        ['name' => 'Facebook', 'url' => $contact['facebook']],
        ['name' => 'YouTube', 'url' => $contact['youtube']],
    ];
    $socials = array_values(array_filter($socials, fn (array $social): bool => $social['url'] !== ''));
    $hasChannel = $contact['phone'] !== '' || $contact['phone_secondary'] !== '' || $whatsappDigits !== '' || $contact['email'] !== '' || $contact['address'] !== '' || $contact['hours'] !== '';
@endphp

<x-store.layout title="Contact BeiGoods | Get in Touch" description="Find the phone, WhatsApp, email, or address BeiGoods has published." :canonical="$canonical">
    <x-store.header />
    <x-store.category-nav :items="$navItems" />
    <main class="info-page mx-auto w-full max-w-3xl px-4 py-6 lg:max-w-5xl lg:py-8">
        <p class="text-[12px] text-muted"><a href="{{ route('home') }}" class="font-medium text-brand">{{ __('ui.home') }}</a> / {{ __('ui.contact_us') }}</p>
        <h1 class="mt-2 text-[26px] font-bold leading-tight text-navy lg:text-4xl">{{ __('ui.get_in_touch') }}</h1>
        <p class="mt-1 max-w-xl text-sm leading-relaxed text-muted">Have a question about our products or need assistance? Find the best way to reach BeiGoods below.</p>

        @if (! $hasChannel)
            <p class="mt-5 rounded-2xl border border-[#E6E2F6] bg-[#F4F1FF] px-4 py-4 text-sm text-navy">{{ __('ui.contact_empty') }}</p>
        @else
            <div class="mt-5 grid gap-3 sm:grid-cols-2">
                @if ($contact['phone'] !== '')
                    <article class="info-card">
                        <x-store.icon name="phone" class="text-brand" width="20" height="20" />
                        <h2 class="mt-2 text-sm font-bold text-navy">{{ __('ui.phone') }}</h2>
                        <a href="tel:{{ preg_replace('/[^\d+]/', '', $contact['phone']) }}" class="mt-1 block text-sm font-semibold text-brand">{{ $contact['phone'] }}</a>
                    </article>
                @endif
                @if ($contact['phone_secondary'] !== '')
                    <article class="info-card">
                        <x-store.icon name="phone" class="text-brand" width="20" height="20" />
                        <h2 class="mt-2 text-sm font-bold text-navy">{{ __('ui.second_phone') }}</h2>
                        <a href="tel:{{ preg_replace('/[^\d+]/', '', $contact['phone_secondary']) }}" class="mt-1 block text-sm font-semibold text-brand">{{ $contact['phone_secondary'] }}</a>
                    </article>
                @endif
                @if ($whatsappDigits !== '')
                    <article class="info-card">
                        <x-store.icon name="phone" class="text-brand" width="20" height="20" />
                        <h2 class="mt-2 text-sm font-bold text-navy">{{ __('ui.whatsapp') }}</h2>
                        <a href="https://wa.me/{{ $whatsappDigits }}" class="mt-1 block text-sm font-semibold text-brand">{{ __('ui.chat_whatsapp') }}</a>
                    </article>
                @endif
                @if ($contact['email'] !== '')
                    <article class="info-card">
                        <x-store.icon name="mail" class="text-brand" width="20" height="20" />
                        <h2 class="mt-2 text-sm font-bold text-navy">{{ __('ui.email') }}</h2>
                        <a href="mailto:{{ $contact['email'] }}" class="mt-1 block text-sm font-semibold text-brand">{{ $contact['email'] }}</a>
                    </article>
                @endif
                @if ($contact['address'] !== '')
                    <article class="info-card">
                        <x-store.icon name="pin" class="text-brand" width="20" height="20" />
                        <h2 class="mt-2 text-sm font-bold text-navy">{{ __('ui.location') }}</h2>
                        <p class="mt-1 text-sm text-navy">{{ $contact['address'] }}</p>
                        @if ($contact['maps_url'] !== '')
                            <a href="{{ $contact['maps_url'] }}" class="mt-1 inline-block text-sm font-semibold text-brand" target="_blank" rel="noopener noreferrer">{{ __('ui.open_map') }}</a>
                        @endif
                    </article>
                @endif
                @if ($contact['hours'] !== '')
                    <article class="info-card">
                        <x-store.icon name="clock" class="text-brand" width="20" height="20" />
                        <h2 class="mt-2 text-sm font-bold text-navy">{{ __('ui.hours') }}</h2>
                        <p class="mt-1 text-sm text-navy">{{ $contact['hours'] }}</p>
                    </article>
                @endif
            </div>
        @endif

        @if ($socials !== [])
            <h2 class="mt-7 text-lg font-bold text-navy">{{ __('ui.connect') }}</h2>
            <ul class="mt-3 flex flex-wrap items-center gap-2.5">
                @foreach ($socials as $social)
                    <li>
                        <a href="{{ $social['url'] }}" target="_blank" rel="noopener noreferrer" class="store-social footer-social" aria-label="{{ $social['name'] }}">
                            @include('components.store.social-icon', ['name' => $social['name']])
                        </a>
                    </li>
                @endforeach
            </ul>
        @endif

        <section class="mt-7 rounded-2xl border border-[#E6E2F6] bg-[#F4F1FF] px-4 py-4">
            <h2 class="text-base font-bold text-navy">{{ __('ui.need_help') }}</h2>
            <p class="mt-1 text-sm leading-relaxed text-[#3d4663]">{{ __('ui.need_help_body') }}</p>
        </section>
    </main>
    <x-store.footer />
    <x-store.mobile-bottom-nav />
    <x-store.drawers :categories="$categories" />
</x-store.layout>