@php
    $hasDomain = filled($domain ?? null);
@endphp

<div
    class="space-y-5 text-sm text-gray-700 dark:text-gray-200"
    dir="{{ str_starts_with(app()->getLocale(), 'ar') ? 'rtl' : 'ltr' }}"
>
    @if ($hasDomain)
        <div class="rounded-lg border border-success-200 bg-success-50 p-3 dark:border-success-500/30 dark:bg-success-500/10">
            <p class="font-semibold text-success-700 dark:text-success-300">
                {{ __('Domain added') }}
            </p>
            <p class="mt-1">
                {{ __('Your custom domain :domain has been registered for this store.', ['domain' => $domain]) }}
            </p>
        </div>
    @endif

    <div class="space-y-2">
        <h4 class="font-semibold text-gray-950 dark:text-white">
            {{ __('How to connect your domain') }}
        </h4>

        <ol class="list-decimal space-y-3 ps-5">
            <li>
                <span class="font-medium">{{ __('Step 1: Enter your domain') }}</span>
                <p class="mt-1">
                    {{ __('Use the domain customers will visit, for example shop.example.com.') }}
                </p>
            </li>
            <li>
                <span class="font-medium">{{ __('Step 2: Open your DNS provider') }}</span>
                <p class="mt-1">
                    {{ __('Open the DNS management page for your domain at your registrar or DNS provider.') }}
                </p>
            </li>
            <li>
                <span class="font-medium">{{ __('Step 3: Add a CNAME record') }}</span>
                <p class="mt-1">
                    {{ __('Create the record using the values shown below.') }}
                </p>
            </li>
        </ol>
    </div>

    <div class="overflow-hidden rounded-lg border border-gray-200 bg-gray-50 dark:border-white/10 dark:bg-white/5">
        <p class="border-b border-gray-200 px-3 py-2 font-medium text-gray-950 dark:border-white/10 dark:text-white">
            {{ __('DNS record example') }}
        </p>

        <dl class="divide-y divide-gray-200 dark:divide-white/10">
            <div class="grid grid-cols-2 gap-3 px-3 py-2">
                <dt>{{ __('Type') }}</dt>
                <dd class="text-end"><code class="rounded bg-white px-1.5 py-0.5 font-mono text-xs dark:bg-white/10">CNAME</code></dd>
            </div>
            <div class="grid grid-cols-2 gap-3 px-3 py-2">
                <dt>{{ __('Name / Host') }}</dt>
                <dd class="text-end"><code class="rounded bg-white px-1.5 py-0.5 font-mono text-xs dark:bg-white/10">shop</code></dd>
            </div>
            <div class="grid grid-cols-2 gap-3 px-3 py-2">
                <dt>{{ __('Target / Value') }}</dt>
                <dd class="break-all text-end"><code class="rounded bg-white px-1.5 py-0.5 font-mono text-xs dark:bg-white/10">{{ $target }}</code></dd>
            </div>
        </dl>
    </div>

    <div class="space-y-2">
        <ol class="list-decimal space-y-3 ps-5" start="4">
            <li>
                <span class="font-medium">{{ __('Step 4: Save and wait') }}</span>
                <p class="mt-1">
                    {{ __('Save the record and wait for DNS changes to propagate. This may take a few minutes or up to 24 hours.') }}
                </p>
            </li>
        </ol>

        <p class="rounded-md bg-warning-50 p-3 text-warning-700 dark:bg-warning-500/10 dark:text-warning-300">
            {{ __('For a root domain such as example.com, use Name / Host = @ with ALIAS, ANAME, or CNAME flattening if your DNS provider supports it.') }}
        </p>
    </div>
</div>