<div class="p-6 space-y-5">
    <h3 class="text-base font-semibold text-t1">Verify Domain</h3>
    <p class="text-sm text-t2">Add the following DNS records to <span class="text-t1 font-medium">{{ $hostname }}</span>:</p>

    <div class="space-y-3">
        {{-- CNAME --}}
        <div class="bg-s2 border border-white/[.06] rounded-lg p-4 space-y-2">
            <div class="text-xs font-medium text-t2 uppercase tracking-wider">CNAME Record</div>
            <div class="grid grid-cols-3 gap-3 text-xs">
                <div>
                    <div class="text-t3 mb-1">Name</div>
                    <code class="text-t1 font-mono">{{ $hostname }}</code>
                </div>
                <div>
                    <div class="text-t3 mb-1">Type</div>
                    <code class="text-t1 font-mono">CNAME</code>
                </div>
                <div>
                    <div class="text-t3 mb-1">Value</div>
                    <code class="text-blue font-mono">nimu.li</code>
                </div>
            </div>
        </div>

        {{-- TXT Verification --}}
        <div class="bg-s2 border border-white/[.06] rounded-lg p-4 space-y-2">
            <div class="text-xs font-medium text-t2 uppercase tracking-wider">TXT Record (verification)</div>
            <div class="grid grid-cols-3 gap-3 text-xs">
                <div>
                    <div class="text-t3 mb-1">Name</div>
                    <code class="text-t1 font-mono">_nimuli.{{ $hostname }}</code>
                </div>
                <div>
                    <div class="text-t3 mb-1">Type</div>
                    <code class="text-t1 font-mono">TXT</code>
                </div>
                <div>
                    <div class="text-t3 mb-1">Value</div>
                    <code class="text-blue font-mono text-[10px] break-all">nimuli-verify={{ $verificationToken }}</code>
                </div>
            </div>
        </div>
    </div>

    <p class="text-xs text-t3">DNS propagation can take up to 48 hours. Click verify once records are set.</p>

    <div class="flex justify-end gap-2 pt-2">
        <x-ui.button wire:click="closeModal" variant="ghost" label="Close" />
        <x-ui.button wire:click="verify" action="verify" label="Check & Verify" loading-label="Checking DNS..." />
    </div>
</div>
