class CustomUploadArea extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .upload-area {
                    transition: all 0.3s ease;
                }
            </style>
            <div>
                <div id="upload-area" class="upload-area bg-white rounded-xl border-2 border-dashed border-gray-300 p-12 text-center cursor-pointer mb-8">
                    <div class="max-w-md mx-auto">
                        <i data-feather="upload" class="w-10 h-10 text-indigo-400 mx-auto mb-4 pulse"></i>
                        <h2 class="text-xl font-semibold text-gray-700 mb-2">Drag & drop your files here</h2>
                        <p class="text-gray-500 mb-4">or</p>
                        <label for="file-input" class="inline-flex items-center px-4 py-2 bg-indigo-500 hover:bg-indigo-600 text-white rounded-lg font-medium cursor-pointer transition">
                            <i data-feather="folder" class="mr-2"></i> Select Files
                            <input id="file-input" type="file" class="hidden" multiple>
                        </label>
                        <p class="text-sm text-gray-400 mt-4">Supports: JPEG, PNG, PDF, DOCX up to 50MB</p>
                    </div>
                </div>
                
                <div id="file-list" class="mb-6"></div>
                
                <button id="upload-btn" class="w-full md:w-auto px-8 py-3 bg-gradient-to-r from-indigo-500 to-indigo-600 hover:from-indigo-600 hover:to-indigo-700 text-white rounded-lg font-semibold shadow-md transition flex items-center justify-center">
                    <i data-feather="upload" class="mr-2"></i> Upload Files
                </button>
            </div>
        `;
    }
}
customElements.define('custom-upload-area', CustomUploadArea);