@props(['user'])
<div class="rounded-xl bg-navy-900 p-6 text-white" x-data="{ copied: false, link: @js($user->referralLink()) }">
    <div class="flex items-center gap-3">
        <x-icon name="link" class="size-6 text-gold-300" />
        <h2 class="font-display text-lg font-semibold">Your Referral Link</h2>
    </div>
    <p class="mt-1 text-sm text-gray-300">Share this link — anyone who signs up with it is added to your referrals. Your code: <strong class="font-mono text-gold-300">{{ $user->referral_code }}</strong></p>
    <div class="mt-4 flex flex-col gap-2 sm:flex-row">
        <input type="text" readonly :value="link" class="form-input flex-1 bg-navy-800! font-mono text-xs text-white! border-navy-700!" aria-label="Referral link" @focus="$el.select()">
        <button type="button" class="btn-gold" @click="navigator.clipboard.writeText(link); copied = true; setTimeout(() => copied = false, 2000)">
            <x-icon name="copy" class="size-4" /> <span x-text="copied ? 'Copied!' : 'Copy Link'">Copy Link</span>
        </button>
    </div>
</div>