@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 Sección con estilo consistente --}}
        <div class="mb-8">
            <div class="flex items-center gap-4">
                <h2 class="text-xl font-black uppercase tracking-widest text-main-two dark:text-main-one">
                    {{ __('Core Specifications') }}
                </h2>
                <div class="h-[1px] flex-1 bg-gray-100 dark:bg-gray-700"></div>
            </div>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2 italic">
                {{ __('Basic operational details and power requirements.') }}
            </p>
        </div>

        {{-- Contenedor de Inputs --}}
        <div class="required space-y-4">
            <x-input wire:model="form.machineSpecs.type_of_machine" label="{{ __('Type of Machine') }}"
                placeholder="{{ __('Enter machine type') }}" class="dark:bg-gray-900" />
        </div>
    </div>
</div>