@php
    $formatMoney = $formatMoney ?? static fn ($value, string $currency = 'MXN') => $value !== null && $value !== ''
        ? '$'.number_format((float) $value, 2).' '.$currency
        : 'No definido';
    $formatPercent = static fn ($value) => $value !== null && $value !== '' ? number_format((float) $value, 2).'%' : 'No definido';
    $formatBool = $formatBool ?? static fn ($value) => $value === null ? 'No definido' : ($value ? 'Si' : 'No');
    $frequencyLabels = [
        'monthly' => 'Mensual',
        'biweekly' => 'Quincenal',
        'weekly' => 'Semanal',
        'annual' => 'Anual',
    ];
    $downPaymentStrategyLabels = [
        'max' => 'Mayor valor',
        'fixed' => 'Monto fijo',
        'percentage' => 'Porcentaje',
        'percent' => 'Porcentaje',
    ];
    $interestTypeLabels = [
        'annual' => 'Anual',
        'monthly' => 'Mensual',
        'flat' => 'Fijo',
        'simple_total' => 'Total simple',
    ];
@endphp

<section
    class="bg-surface-light dark:bg-surface-dark rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 p-6"
    id="pricing">
    <div class="flex items-center gap-2 mb-4 text-slate-900 dark:text-white">
        <span class="material-symbols-outlined text-primary">payments</span>
        <h3 class="text-lg font-bold">Precio &amp; Reglas</h3>
    </div>

    <div class="space-y-5">
        @forelse ($loteTypes as $loteType)
            @php
                $currency = $loteType['currency'] ?? 'MXN';
                $plans = collect($loteType['paymentPlans'] ?? []);
            @endphp
            <article class="rounded-2xl border border-slate-100 bg-slate-50/80 p-4 dark:border-slate-700/60 dark:bg-slate-800/40">
                <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                    <div>
                        <div class="flex items-center gap-2">
                            <h4 class="font-black text-slate-900 dark:text-white">{{ $loteType['name'] }}</h4>
                            <span
                                class="rounded-full px-2 py-0.5 text-[10px] font-bold uppercase {{ ($loteType['isActive'] ?? true) ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300' : 'bg-slate-200 text-slate-500 dark:bg-slate-700 dark:text-slate-300' }}">
                                {{ ($loteType['isActive'] ?? true) ? 'Activo' : 'Inactivo' }}
                            </span>
                        </div>
                        @if (!empty($loteType['pricingNote']))
                            <p class="mt-1 text-xs leading-5 text-slate-500">{{ $loteType['pricingNote'] }}</p>
                        @endif
                    </div>
                    <div class="text-left sm:text-right">
                        <p class="text-[10px] font-bold uppercase tracking-wide text-slate-500">Moneda</p>
                        <p class="text-sm font-bold text-slate-900 dark:text-white">{{ $currency }}</p>
                    </div>
                </div>

                <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-3">
                    <div class="rounded-xl bg-white p-3 dark:bg-slate-900/60">
                        <p class="text-[10px] font-bold uppercase tracking-wide text-slate-500">Precio base m²</p>
                        <p class="mt-1 text-sm font-bold text-slate-900 dark:text-white">
                            {{ $formatMoney($loteType['basePricePerSqm'] ?? null, $currency) }}
                        </p>
                    </div>
                    <div class="rounded-xl bg-white p-3 dark:bg-slate-900/60">
                        <p class="text-[10px] font-bold uppercase tracking-wide text-slate-500">Contado m²</p>
                        <p class="mt-1 text-sm font-bold text-slate-900 dark:text-white">
                            {{ $formatMoney($loteType['cashPricePerSqm'] ?? null, $currency) }}
                        </p>
                    </div>
                    <div class="rounded-xl bg-white p-3 dark:bg-slate-900/60">
                        <p class="text-[10px] font-bold uppercase tracking-wide text-slate-500">Financiado m²</p>
                        <p class="mt-1 text-sm font-bold text-slate-900 dark:text-white">
                            {{ $formatMoney($loteType['financedPricePerSqm'] ?? null, $currency) }}
                        </p>
                    </div>
                </div>

                <div class="mt-4 space-y-3">
                    @forelse ($plans as $paymentPlan)
                        @php
                            $planCurrency = $paymentPlan['currency'] ?: $currency;
                        @endphp
                        <div class="rounded-xl border border-slate-100 bg-white p-4 dark:border-slate-700/60 dark:bg-slate-900/60">
                            <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                                <div>
                                    <p class="font-bold text-slate-900 dark:text-white">{{ $paymentPlan['name'] }}</p>
                                    <p class="text-xs text-slate-500">
                                        {{ $paymentPlan['financingMonths'] }} meses ·
                                        {{ $frequencyLabels[$paymentPlan['installmentFrequency'] ?? 'monthly'] ?? ($paymentPlan['installmentFrequency'] ?? 'Mensual') }}
                                    </p>
                                </div>
                                <div class="text-left sm:text-right">
                                    <p class="text-[10px] font-bold uppercase tracking-wide text-slate-500">Precio m²</p>
                                    <p class="text-sm font-black text-slate-900 dark:text-white">
                                        {{ $formatMoney($paymentPlan['pricePerSqm'] ?? null, $planCurrency) }}
                                    </p>
                                </div>
                            </div>

                            <dl class="mt-4 grid grid-cols-1 gap-3 text-xs sm:grid-cols-2">
                                <div class="flex justify-between gap-3">
                                    <dt class="text-slate-500">Enganche mínimo</dt>
                                    <dd class="font-semibold text-slate-900 dark:text-white">
                                        {{ $formatMoney($paymentPlan['minDownPaymentAmount'] ?? null, $planCurrency) }} ·
                                        {{ $formatPercent($paymentPlan['minDownPaymentPercent'] ?? null) }}
                                    </dd>
                                </div>
                                <div class="flex justify-between gap-3">
                                    <dt class="text-slate-500">Enganche sugerido</dt>
                                    <dd class="font-semibold text-slate-900 dark:text-white">
                                        {{ $formatMoney($paymentPlan['suggestedDownPaymentAmount'] ?? null, $planCurrency) }} ·
                                        {{ $formatPercent($paymentPlan['suggestedDownPaymentPercent'] ?? null) }}
                                    </dd>
                                </div>
                                <div class="flex justify-between gap-3">
                                    <dt class="text-slate-500">Estrategia</dt>
                                    <dd class="font-semibold text-slate-900 dark:text-white">
                                        {{ $downPaymentStrategyLabels[$paymentPlan['downPaymentStrategy'] ?? 'max'] ?? ($paymentPlan['downPaymentStrategy'] ?? 'No definido') }}
                                    </dd>
                                </div>
                                <div class="flex justify-between gap-3">
                                    <dt class="text-slate-500">Mensualidades</dt>
                                    <dd class="font-semibold text-slate-900 dark:text-white">
                                        {{ $paymentPlan['minimumInstallments'] ?? '-' }} /
                                        {{ $paymentPlan['defaultInstallments'] ?? '-' }} /
                                        {{ $paymentPlan['maximumInstallments'] ?? '-' }}
                                    </dd>
                                </div>
                                <div class="flex justify-between gap-3">
                                    <dt class="text-slate-500">Interés</dt>
                                    <dd class="font-semibold text-slate-900 dark:text-white">
                                        {{ $formatBool($paymentPlan['interestFree'] ?? null) === 'Si' ? 'Sin intereses' : $formatPercent($paymentPlan['interestRate'] ?? null).' '.($interestTypeLabels[$paymentPlan['interestType'] ?? 'annual'] ?? '') }}
                                    </dd>
                                </div>
                                <div class="flex justify-between gap-3">
                                    <dt class="text-slate-500">Descuento máx.</dt>
                                    <dd class="font-semibold text-slate-900 dark:text-white">
                                        {{ $formatPercent($paymentPlan['maxDiscountPercent'] ?? null) }}
                                    </dd>
                                </div>
                                <div class="flex justify-between gap-3">
                                    <dt class="text-slate-500">Anualidad</dt>
                                    <dd class="font-semibold text-slate-900 dark:text-white">
                                        {{ $formatMoney($paymentPlan['annuityAmount'] ?? null, $planCurrency) }}
                                    </dd>
                                </div>
                                <div class="flex justify-between gap-3">
                                    <dt class="text-slate-500">Penalización</dt>
                                    <dd class="font-semibold text-slate-900 dark:text-white">
                                        {{ $formatMoney($paymentPlan['earlyPaymentPenalty'] ?? null, $planCurrency) }}
                                    </dd>
                                </div>
                                <div class="flex justify-between gap-3 sm:col-span-2">
                                    <dt class="text-slate-500">Vigencia</dt>
                                    <dd class="font-semibold text-slate-900 dark:text-white">
                                        {{ $paymentPlan['effectiveFrom'] ?: 'Sin inicio' }} - {{ $paymentPlan['effectiveTo'] ?: 'Sin fin' }}
                                    </dd>
                                </div>
                            </dl>
                        </div>
                    @empty
                        <div class="rounded-xl border border-dashed border-slate-300 p-4 text-sm text-slate-500 dark:border-slate-700">
                            Sin planes configurados para este tipo de lote.
                        </div>
                    @endforelse
                </div>
            </article>
        @empty
            <div class="rounded-xl border border-dashed border-slate-300 p-4 text-sm text-slate-500 dark:border-slate-700">
                Sin tipos de lote configurados.
            </div>
        @endforelse
    </div>
</section>