@props(['section', 'label' => 'Technical Specifications', 'buttonLabel' => 'Add Field', 'mode' => 'user'])

<div class="tw-wrapper">
    <div
        class="bg-white/50 dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 p-6 mb-8 shadow-sm transition-colors duration-300">

        {{-- Header de la sección con botón de acción --}}
        <div class="flex items-center justify-between mb-8">
            <div class="flex items-center gap-4 flex-1 mr-4">
                <h2 class="text-xl font-black uppercase tracking-widest text-main-two dark:text-main-one">
                    {{ __($label) }}
                </h2>
                <div class="h-[1px] flex-1 bg-gray-100 dark:bg-gray-700"></div>
            </div>

            @if ($mode === 'admin')
                <x-button wire:click="addExtraField('{{ $section }}')" icon="plus" sm
                    class="bg-main-two dark:bg-main-two text-white rounded-xl shadow-md hover:scale-105 active:scale-95 transition-all font-bold px-4"
                    label="{{ __($buttonLabel) }}" />
            @endif
        </div>

        {{-- Grid de Campos Dinámicos --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            @foreach ($this->form->extraFields[$section] ?? [] as $index => $field)
                <div
                    class="flex items-center gap-3 group animate-in fade-in slide-in-from-left-2 duration-300 hover:bg-white/40 dark:hover:bg-gray-900/40 p-2 rounded-xl transition-all">

                    <div class="w-1/3">
                        <x-input wire:model="form.extraFields.{{ $section }}.{{ $index }}.key"
                            placeholder="{{ __('Feature') }}" :disabled="$mode !== 'admin'"
                            class="text-sm uppercase tracking-tight font-medium" />
                    </div>

                    <div class="flex-1">
                        <x-input wire:model="form.extraFields.{{ $section }}.{{ $index }}.value"
                            placeholder="{{ __('Value') }}" :disabled="$mode !== 'admin'" class="text-sm font-semibold" />
                    </div>

                    @if ($mode === 'admin')
                        <button type="button"
                            wire:click="confirmRemoveExtraField('{{ $section }}', {{ $index }})"
                            class="text-red-400 hover:text-red-600 dark:text-red-500/70 dark:hover:text-red-400 transition-all opacity-0 group-hover:opacity-100 p-2 hover:scale-110">
                            <i class="fas fa-times-circle text-lg"></i>
                        </button>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
</div>