components/upload-zone.js

class AppHeader extends HTMLElement {
    constructor() {
        super();
    }
    
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    z-index: 1000;
                }
                
                header {
                    height: 60px;
                    background: rgba(255, 255, 255, 0.9);
                    backdrop-filter: blur(12px);
                    -webkit-backdrop-filter: blur(12px);
                    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
                    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
                }
                
                .container {
                    max-width: 1200px;
                    margin: 0 auto;
                    padding: 0 20px;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
                
                .brand {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    cursor: pointer;
                    text-decoration: none;
                }
                
                .logo-icon {
                    width: 36px;
                    height: 36px;
                    background: linear-gradient(135deg, #2563eb, #3b82f6);
                    border-radius: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
                }
                
                .brand-text {
                    font-size: 1.25rem;
                    font-weight: 700;
                    color: #1e40af;
                    letter-spacing: -0.02em;
                    font-family: 'Sarabun', sans-serif;
                }
                
                .badge {
                    font-size: 0.65rem;
                    background: #dbeafe;
                    color: #1e40af;
                    padding: 2px 8px;
                    border-radius: 12px;
                    font-weight: 600;
                    margin-left: 8px;
                    border: 1px solid #bfdbfe;
                }
                
                .reset-btn {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    padding: 8px 16px;
                    background: white;
                    border: 1px solid #e2e8f0;
                    border-radius: 8px;
                    color: #64748b;
                    font-size: 0.875rem;
                    font-weight: 500;
                    cursor: pointer;
                    transition: all 0.2s;
                    font-family: 'Sarabun', sans-serif;
                }
                
                .reset-btn:hover {
                    background: #f8fafc;
                    border-color: #cbd5e1;
                    color: #dc2626;
                    transform: translateY(-1px);
                    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
                }
                
                .reset-btn:active {
                    transform: translateY(0);
                }
                
                @media (max-width: 640px) {
                    .brand-text {
                        font-size: 1.1rem;
                    }
                    .badge {
                        display: none;
                    }
                    .reset-btn span {
                        display: none;
                    }
                    .reset-btn {
                        padding: 8px;
                    }
                }
            </style>
            
            <header>
                <div class="container">
                    <a href="#" class="brand" onclick="event.preventDefault(); window.scrollTo({top: 0, behavior: 'smooth'});">
                        <div class="logo-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                        </div>
                        <div style="display: flex; align-items: baseline;">
                            <span class="brand-text">DocuAnalyza</span>
                            <span class="badge">TH AI</span>
                        </div>
                    </a>
                    
                    <button class="reset-btn" id="reset-btn" title="เริ่มใหม่">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg>
                        <span>เริ่มใหม่</span>
                    </button>
                </div>
            </header>
        `;
        
        this.shadowRoot.getElementById('reset-btn').addEventListener('click', () => {
            if (confirm('ต้องการเริ่мใหม่? ข้อมูลที่ไม่ได้บันทึกจะหายไป')) {
                document.dispatchEvent(new CustomEvent('reset-app'));
            }
        });
    }
}

customElements.define('app-header', AppHeader);