<div x-data="{ files: [], dragging: false }">
    <div @drop.prevent="dragging = false; files = Array.from($event.dataTransfer.files).map(f => ({ name: f.name, size: (f.size / 1024).toFixed(2) + ' KB' }));"
         @dragover.prevent="dragging = true"
         @dragleave.prevent="dragging = false"
         :class="dragging ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600'"
         class="border-2 border-dashed rounded-lg p-8 text-center transition">
        <p class="text-sm text-gray-600 dark:text-gray-400">Drag and drop files here, or click to select</p>
    </div>
</div>