@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 Descripción --}}
        <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">
                    {{ __('General Information') }}
                </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 identification of the machine.') }}
            </p>
        </div>

        {{-- Grid de Inputs: Mantiene la lógica de Livewire y componentes internos --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 required">
            {{-- Componente de Estado --}}
            <div class="col-span-1 md:col-span-2">
                <x-used-machine.sections.status-information :mode="$mode" :form="$form" />
            </div>

            <x-input wire:model.defer="form.brand" placeholder="e.g. Toyota" label="{{ __('Brand') }}" required />

            <x-input wire:model.defer="form.model" placeholder="{{ __('enter model') }}" label="{{ __('Model') }}"
                required />

            <x-input wire:model.defer="form.year" maxlength="5" placeholder="e.g. 2020"
                label="{{ __('Manufacturing Year') }}" required />

            <x-input inputmode="decimal" wire:model.defer="form.generalInfo.width" maxlength="10"
                placeholder="e.g. 2200" label="{{ __('Width (mm)') }}" />

            <x-input inputmode="decimal" wire:model.defer="form.generalInfo.rpm" maxlength="10" placeholder="e.g. 1500"
                label="{{ __('RPM') }}" />
        </div>
    </div>
</div>