{{-- Bank registration (beneficiary) for wire save — local vs international tabs, minimal required fields. --}}
<div class="space-y-3">
    <div class="flex rounded-lg border border-[#ECECEC] bg-white p-1 gap-1" role="tablist">
        <button
            type="button"
            role="tab"
            class="flex-1 rounded-md px-3 py-2 text-xs font-semibold transition-colors"
            :class="beneficiaryWireType === 'local' ? 'bg-[#012169] text-white' : 'text-[#012169] hover:bg-[#F5F7FA]'"
            @click="setBeneficiaryWireType('local')"
        >Local (US domestic)</button>
        <button
            type="button"
            role="tab"
            class="flex-1 rounded-md px-3 py-2 text-xs font-semibold transition-colors"
            :class="beneficiaryWireType === 'international' ? 'bg-[#012169] text-white' : 'text-[#012169] hover:bg-[#F5F7FA]'"
            @click="setBeneficiaryWireType('international')"
        >International</button>
    </div>
    <p class="text-[10px] text-[#7B7B7B] leading-relaxed" x-show="beneficiaryWireType === 'local'">
        Minimal for quick wire: legal name, name on bank records, US account number, ABA routing, email, and phone. Full address is optional.
    </p>
    <p class="text-[10px] text-[#7B7B7B] leading-relaxed" x-show="beneficiaryWireType === 'international'" x-cloak>
        Minimal for quick wire: legal name, name on bank records, IBAN or account number, SWIFT/BIC, country, email, and phone. Full address is optional.
    </p>

    <p class="text-xs font-semibold text-[#012169] uppercase tracking-wide border-t border-[#ECECEC] pt-3">Bank registration (beneficiary)</p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
        <label class="block text-xs font-semibold text-[#012169]">Legal entity name <span class="text-[#6F6F6F] font-normal">(required)</span>
            <input type="text" x-model="beneficiaryDraft.legalEntityName" maxlength="180" class="mt-1 w-full rounded-lg border border-[#ECECEC] px-3 py-2 text-sm text-[#111]" placeholder="Registered legal name">
        </label>
        <label class="block text-xs font-semibold text-[#012169]">Name on bank records <span class="text-[#6F6F6F] font-normal">(required)</span>
            <input type="text" x-model="beneficiaryDraft.bankRegisteredName" maxlength="180" class="mt-1 w-full rounded-lg border border-[#ECECEC] px-3 py-2 text-sm text-[#111]" placeholder="As printed on statements">
        </label>
    </div>

    <button type="button" class="text-[11px] font-semibold text-[#012169] hover:underline" @click="showBeneficiaryAddress = !showBeneficiaryAddress" x-text="showBeneficiaryAddress ? 'Hide optional address' : '+ Add full address (optional)'"></button>

    <div x-show="showBeneficiaryAddress" x-cloak class="grid grid-cols-1 md:grid-cols-2 gap-3">
        <label class="block text-xs font-semibold text-[#012169] md:col-span-2">Street address
            <input type="text" x-model="beneficiaryDraft.streetAddress" maxlength="120" class="mt-1 w-full rounded-lg border border-[#ECECEC] px-3 py-2 text-sm text-[#111]" placeholder="Line 1">
        </label>
        <label class="block text-xs font-semibold text-[#012169] md:col-span-2">Street address (line 2, optional)
            <input type="text" x-model="beneficiaryDraft.streetAddress2" maxlength="120" class="mt-1 w-full rounded-lg border border-[#ECECEC] px-3 py-2 text-sm text-[#111]">
        </label>
        <label class="block text-xs font-semibold text-[#012169]">City / locality
            <input type="text" x-model="beneficiaryDraft.locality" maxlength="80" class="mt-1 w-full rounded-lg border border-[#ECECEC] px-3 py-2 text-sm text-[#111]">
        </label>
        <label class="block text-xs font-semibold text-[#012169]">State / province (optional)
            <input type="text" x-model="beneficiaryDraft.adminArea" maxlength="80" class="mt-1 w-full rounded-lg border border-[#ECECEC] px-3 py-2 text-sm text-[#111]">
        </label>
        <label class="block text-xs font-semibold text-[#012169]">Postal code
            <input type="text" x-model="beneficiaryDraft.postalCode" maxlength="20" class="mt-1 w-full rounded-lg border border-[#ECECEC] px-3 py-2 text-sm text-[#111]">
        </label>
        <label class="block text-xs font-semibold text-[#012169]">Country (ISO-2)
            <input
                type="text"
                x-model="beneficiaryDraft.countryCode"
                maxlength="2"
                :readonly="beneficiaryWireType === 'local'"
                :class="beneficiaryWireType === 'local' ? 'bg-[#F5F7FA] text-[#6F6F6F]' : ''"
                @input="beneficiaryDraft.countryCode = (beneficiaryDraft.countryCode || '').toUpperCase()"
                class="mt-1 w-full rounded-lg border border-[#ECECEC] px-3 py-2 text-sm uppercase"
                placeholder="US"
            >
        </label>
    </div>

    <div x-show="beneficiaryWireType === 'local'" class="grid grid-cols-1 md:grid-cols-2 gap-3 border-t border-[#ECECEC] pt-3">
        <label class="block text-xs font-semibold text-[#012169]">Domestic account number <span class="text-[#6F6F6F] font-normal">(required)</span>
            <input
                type="text"
                x-model="beneficiaryDraft.accountNumber"
                maxlength="17"
                autocomplete="off"
                autocapitalize="off"
                autocorrect="off"
                spellcheck="false"
                name="wire_beneficiary_domestic_account"
                class="mt-1 w-full rounded-lg border border-[#ECECEC] px-3 py-2 text-sm text-[#111] font-mono"
                placeholder="4–17 digits"
            >
        </label>
        <label class="block text-xs font-semibold text-[#012169]">ABA routing <span class="text-[#6F6F6F] font-normal">(required, 9 digits)</span>
            <input
                type="text"
                x-model="beneficiaryDraft.routingAba"
                maxlength="9"
                inputmode="numeric"
                autocomplete="off"
                autocapitalize="off"
                autocorrect="off"
                spellcheck="false"
                name="wire_beneficiary_routing_aba"
                class="mt-1 w-full rounded-lg border border-[#ECECEC] px-3 py-2 text-sm text-[#111] font-mono"
                placeholder="e.g. 021000021"
            >
        </label>
        <label class="block text-xs font-semibold text-[#012169] md:col-span-2">SWIFT / BIC <span class="text-[#6F6F6F] font-normal">(from receiving bank)</span>
            <input type="text" x-model="beneficiaryDraft.swiftCode" maxlength="11" class="mt-1 w-full rounded-lg border border-[#ECECEC] px-3 py-2 text-sm text-[#111] font-mono uppercase" placeholder="Auto-filled from receiving institution">
        </label>
    </div>

    <div x-show="beneficiaryWireType === 'international'" x-cloak class="grid grid-cols-1 md:grid-cols-2 gap-3 border-t border-[#ECECEC] pt-3">
        <label class="block text-xs font-semibold text-[#012169] md:col-span-2">IBAN or account number <span class="text-[#6F6F6F] font-normal">(required)</span>
            <input
                type="text"
                x-model="beneficiaryDraft.iban"
                maxlength="34"
                autocomplete="off"
                autocapitalize="characters"
                autocorrect="off"
                spellcheck="false"
                name="wire_beneficiary_iban_or_account"
                class="mt-1 w-full rounded-lg border border-[#ECECEC] px-3 py-2 text-sm text-[#111] font-mono uppercase"
                placeholder="Full IBAN or international account number"
            >
            <span class="block mt-1 text-[10px] text-[#7B7B7B]" x-text="wireBankingHint.hint"></span>
        </label>
        <label class="block text-xs font-semibold text-[#012169]">SWIFT / BIC <span class="text-[#6F6F6F] font-normal">(required, 8 or 11 chars)</span>
            <input type="text" x-model="beneficiaryDraft.swiftCode" maxlength="11" class="mt-1 w-full rounded-lg border border-[#ECECEC] px-3 py-2 text-sm text-[#111] font-mono uppercase" placeholder="e.g. NBADAEAA">
        </label>
        <label class="block text-xs font-semibold text-[#012169]">Country (ISO-2) <span class="text-[#6F6F6F] font-normal">(required)</span>
            <input type="text" x-model="beneficiaryDraft.countryCode" maxlength="2" @input="beneficiaryDraft.countryCode = (beneficiaryDraft.countryCode || '').toUpperCase()" class="mt-1 w-full rounded-lg border border-[#ECECEC] px-3 py-2 text-sm uppercase" placeholder="AE">
        </label>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 border-t border-[#ECECEC] pt-3">
        <label class="block text-xs font-semibold text-[#012169]">Beneficiary contact email <span class="text-[#6F6F6F] font-normal">(required)</span>
            <input type="email" x-model="beneficiaryDraft.beneficiaryEmail" maxlength="255" class="mt-1 w-full rounded-lg border border-[#ECECEC] px-3 py-2 text-sm text-[#111]" placeholder="beneficiary@example.com">
        </label>
        <label class="block text-xs font-semibold text-[#012169]">Beneficiary contact phone <span class="text-[#6F6F6F] font-normal">(required)</span>
            <input type="text" x-model="beneficiaryDraft.beneficiaryPhone" maxlength="40" class="mt-1 w-full rounded-lg border border-[#ECECEC] px-3 py-2 text-sm text-[#111]" placeholder="+1 …">
        </label>
    </div>
</div>