class CustomContact extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <section id="contact" class="py-16 bg-gray-50 dark:bg-gray-800">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div class="text-center mb-12">
                        <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">Get In Touch</h2>
                        <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                            Connect with our team for collaborations, inquiries, or to learn more about our technology
                        </p>
                    </div>
                    
                    <div class="grid md:grid-cols-2 gap-12">
                        <div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md">
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-6">Send Us a Message</h3>
                            <form class="space-y-6">
                                <div>
                                    <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>
                                    <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-800 dark:text-white">
                                </div>
                                <div>
                                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
                                    <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-800 dark:text-white">
                                </div>
                                <div>
                                    <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message</label>
                                    <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-800 dark:text-white"></textarea>
                                </div>
                                <button type="submit" class="w-full px-6 py-3 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-lg transition duration-300">
                                    Send Message
                                </button>
                            </form>
                        </div>
                        
                        <div>
                            <div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md mb-8">
                                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-6">Contact Information</h3>
                                <div class="space-y-4">
                                    <div class="flex items-start">
                                        <div class="flex-shrink-0 bg-primary-100 dark:bg-gray-600 p-2 rounded-lg">
                                            <i data-feather="mail" class="text-primary-500 dark:text-secondary-400 w-5 h-5"></i>
                                        </div>
                                        <div class="ml-4">
                                            <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400">Email</h4>
                                            <p class="text-base font-medium text-gray-900 dark:text-white">contact@yappertar-ai.com</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-start">
                                        <div class="flex-shrink-0 bg-primary-100 dark:bg-gray-600 p-2 rounded-lg">
                                            <i data-feather="send" class="text-primary-500 dark:text-secondary-400 w-5 h-5"></i>
                                        </div>
                                        <div class="ml-4">
                                            <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400">Telegram</h4>
                                            <a href="https://t.me/yappertar_ai_collab" target="_blank" class="text-base font-medium text-primary-500 dark:text-secondary-400 hover:underline">@yappertar_ai_collab</a>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-start">
                                        <div class="flex-shrink-0 bg-primary-100 dark:bg-gray-600 p-2 rounded-lg">
                                            <i data-feather="globe" class="text-primary-500 dark:text-secondary-400 w-5 h-5"></i>
                                        </div>
                                        <div class="ml-4">
                                            <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400">Website</h4>
                                            <a href="#" class="text-base font-medium text-primary-500 dark:text-secondary-400 hover:underline">www.yappertar-ai.com</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md">
                                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-6">Join Our Community</h3>
                                <p class="text-gray-600 dark:text-gray-300 mb-6">
                                    Be part of the quantum AI revolution. Connect with other developers, researchers, and enthusiasts.
                                </p>
                                <a href="https://t.me/yappertar_ai_collab" target="_blank" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-lg shadow-sm text-white bg-primary-500 hover:bg-primary-600 transition duration-300">
                                    <i data-feather="send" class="mr-2 w-5 h-5"></i> Join Telegram Group
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        `;
    }
}

customElements.define('custom-contact', CustomContact);