class CustomModal extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        
        const modalId = this.getAttribute('data-modal') || 'modal';
        const title = this.getAttribute('data-title') || 'Modal Title';
        const description = this.getAttribute('data-description') || '';
        
        this.shadowRoot.innerHTML = `
            <style>
                .modal-overlay {
                    display: none;
                    position: fixed !important;
                    top: 0 !important;
                    left: 0 !important;
                    width: 100% !important;
                    height: 100% !important;
                    background: rgba(0, 0, 0, 0.6);
                    backdrop-filter: blur(4px);
                    z-index: 9999 !important;
                    justify-content: center;
                    align-items: center;
                    opacity: 0;
                    transition: opacity 0.3s ease;
                }
.modal-overlay.open {
                    display: flex;
                    opacity: 1;
                }
                .modal-content {
                    background: white;
                    border-radius: 1rem;
                    max-width: 500px;
                    width: 90%;
                    max-height: 90vh;
                    overflow-y: auto;
                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
                    transform: scale(0.9);
                    transition: transform 0.3s ease;
                }
                .modal-overlay.open .modal-content {
                    transform: scale(1);
                }
                .modal-header {
                    padding: 1.5rem;
                    border-bottom: 1px solid #e2e8f0;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                .modal-title {
                    font-size: 1.5rem;
                    font-weight: 700;
                    color: #1e293b;
                    margin: 0;
                }
                .modal-close {
                    background: none;
                    border: none;
                    cursor: pointer;
                    color: #64748b;
                    padding: 0.5rem;
                    border-radius: 0.5rem;
                    transition: all 0.2s;
                }
                .modal-close:hover {
                    background: #f1f5f9;
                    color: #1e293b;
                }
                .modal-body {
                    padding: 1.5rem;
                }
                .modal-description {
                    color: #475569;
                    line-height: 1.6;
                    margin-bottom: 1.5rem;
                }
                .form-group {
                    margin-bottom: 1rem;
                }
                .form-label {
                    display: block;
                    font-weight: 500;
                    color: #374151;
                    margin-bottom: 0.5rem;
                    font-size: 0.875rem;
                }
                .form-input {
                    width: 100%;
                    padding: 0.75rem;
                    border: 1px solid #d1d5db;
                    border-radius: 0.5rem;
                    font-size: 1rem;
                    transition: border-color 0.2s;
                }
                .form-input:focus {
                    outline: none;
                    border-color: #4f46e5;
                    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
                }
                .form-textarea {
                    min-height: 100px;
                    resize: vertical;
                }
                .btn-submit {
                    width: 100%;
                    padding: 0.875rem;
                    background: #4f46e5;
                    color: white;
                    border: none;
                    border-radius: 0.5rem;
                    font-weight: 600;
                    font-size: 1rem;
                    cursor: pointer;
                    transition: background 0.2s;
                }
                .btn-submit:hover {
                    background: #4338ca;
                }
                .success-message {
                    display: none;
                    text-align: center;
                    padding: 2rem;
                }
                .success-icon {
                    width: 64px;
                    height: 64px;
                    background: #dcfce7;
                    color: #16a34a;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 0 auto 1rem;
                }
            </style>
            
            <div class="modal-overlay" id="${modalId}">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">${title}</h3>
                        <button class="modal-close" onclick="closeModal('${modalId}')">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <line x1="18" y1="6" x2="6" y2="18"></line>
                                <line x1="6" y1="6" x2="18" y2="18"></line>
                            </svg>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-content" id="form-${modalId}">
                            <p class="modal-description">${description}</p>
                            <form onsubmit="handleFormSubmit(event, '${modalId}')">
                                <div class="form-group">
                                    <label class="form-label">Full Name *</label>
                                    <input type="text" class="form-input" required placeholder="John Doe">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Work Email *</label>
                                    <input type="email" class="form-input" required placeholder="john@company.com">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Company *</label>
                                    <input type="text" class="form-input" required placeholder="Acme Inc.">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Job Title</label>
                                    <input type="text" class="form-input" placeholder="VP of Sales">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Message (Optional)</label>
                                    <textarea class="form-input form-textarea" placeholder="Tell us about your presales challenges..."></textarea>
                                </div>
                                <button type="submit" class="btn-submit">${title}</button>
                            </form>
                        </div>
                        <div class="success-message" id="success-${modalId}">
                            <div class="success-icon">
                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg>
                            </div>
                            <h4 class="text-xl font-bold text-gray-800 mb-2">Thank You!</h4>
                            <p class="text-gray-600">We've received your request and will reach out within 24 hours.</p>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
}
customElements.define('custom-modal', CustomModal);

// Global modal functions - explicitly attached to window for Shadow DOM access
window.openModal = function(modalId) {
    const modal = document.querySelector(`custom-modal[data-modal="${modalId}"]`);
    if (modal) {
        const overlay = modal.shadowRoot.getElementById(modalId);
        if (overlay) {
            overlay.classList.add('open');
            document.body.style.overflow = 'hidden';
        }
    }
};

window.closeModal = function(modalId) {
    const modal = document.querySelector(`custom-modal[data-modal="${modalId}"]`);
    if (modal) {
        const overlay = modal.shadowRoot.getElementById(modalId);
        if (overlay) {
            overlay.classList.remove('open');
            document.body.style.overflow = '';
        }
    }
};

window.handleFormSubmit = function(event, modalId) {
event.preventDefault();
    const modal = document.querySelector(`custom-modal[data-modal="${modalId}"]`);
    if (modal) {
        const formContent = modal.shadowRoot.getElementById(`form-${modalId}`);
        const successMessage = modal.shadowRoot.getElementById(`success-${modalId}`);
        
        formContent.style.display = 'none';
        successMessage.style.display = 'block';
        
        setTimeout(() => {
            closeModal(modalId);
            setTimeout(() => {
                formContent.style.display = 'block';
                successMessage.style.display = 'none';
            }, 300);
        }, 2000);
    }
}
// Close modals on Escape key (global handler for shadow DOM elements)
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
        const modals = document.querySelectorAll('custom-modal');
        modals.forEach(modal => {
            const overlay = modal.shadowRoot.querySelector('.modal-overlay.open');
            if (overlay) {
                const modalId = modal.getAttribute('data-modal');
                window.closeModal(modalId);
            }
        });
    }
});