@props(['mode' => 'user', 'form' => null])

<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 estilo consistente --}}
        <div class="flex items-center gap-4 mb-6">
            <h2 class="text-xl font-black uppercase tracking-widest text-main-two dark:text-main-one">
                {{ __('Additional Information') }}
            </h2>
            <div class="h-[1px] flex-1 bg-gray-100 dark:bg-gray-700"></div>
        </div>

        {{-- Textarea: Se mantiene la lógica intacta --}}
        <div class="dark:text-gray-300">
            <x-textarea wire:model="form.other_info.additional_information"
                placeholder="{{ __('Enter technical details...') }}"
                label="{{ __('Technical Info / Included Materials') }}"
                class="dark:bg-gray-900 dark:border-gray-600 dark:text-gray-200" />
        </div>
    </div>
</div>