class CustomFeatures extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .feature-icon {
                    width: 60px;
                    height: 60px;
                }
            </style>
            <section id="features" 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-16">
                        <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">Powerful Features</h2>
                        <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                            Discover the cutting-edge capabilities of our quantum-enhanced AI platform
                        </p>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        <div class="feature-card bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md transition duration-300">
                            <div class="feature-icon gradient-bg rounded-full flex items-center justify-center mb-6 mx-auto">
                                <i data-feather="zap" class="text-white w-6 h-6"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 text-center">Quantum Cognition</h3>
                            <p class="text-gray-600 dark:text-gray-300 text-center">
                                Leveraging quantum computing principles for parallel thought processing and complex problem solving.
                            </p>
                        </div>
                        
                        <div class="feature-card bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md transition duration-300">
                            <div class="feature-icon gradient-bg rounded-full flex items-center justify-center mb-6 mx-auto">
                                <i data-feather="search" class="text-white w-6 h-6"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 text-center">Deep Web Search</h3>
                            <p class="text-gray-600 dark:text-gray-300 text-center">
                                Comprehensive internet exploration with semantic understanding and context-aware results.
                            </p>
                        </div>
                        
                        <div class="feature-card bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md transition duration-300">
                            <div class="feature-icon gradient-bg rounded-full flex items-center justify-center mb-6 mx-auto">
                                <i data-feather="layers" class="text-white w-6 h-6"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 text-center">Multi-Layer Analysis</h3>
                            <p class="text-gray-600 dark:text-gray-300 text-center">
                                Simultaneous processing of data across multiple abstraction layers for deeper insights.
                            </p>
                        </div>
                        
                        <div class="feature-card bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md transition duration-300">
                            <div class="feature-icon gradient-bg rounded-full flex items-center justify-center mb-6 mx-auto">
                                <i data-feather="clock" class="text-white w-6 h-6"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 text-center">Real-Time Learning</h3>
                            <p class="text-gray-600 dark:text-gray-300 text-center">
                                Continuous adaptation and knowledge expansion from user interactions and new data.
                            </p>
                        </div>
                        
                        <div class="feature-card bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md transition duration-300">
                            <div class="feature-icon gradient-bg rounded-full flex items-center justify-center mb-6 mx-auto">
                                <i data-feather="shield" class="text-white w-6 h-6"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 text-center">Secure Framework</h3>
                            <p class="text-gray-600 dark:text-gray-300 text-center">
                                Quantum-resistant encryption and privacy-focused architecture for all operations.
                            </p>
                        </div>
                        
                        <div class="feature-card bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md transition duration-300">
                            <div class="feature-icon gradient-bg rounded-full flex items-center justify-center mb-6 mx-auto">
                                <i data-feather="users" class="text-white w-6 h-6"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 text-center">Collaborative AI</h3>
                            <p class="text-gray-600 dark:text-gray-300 text-center">
                                Seamless integration with human teams for enhanced decision-making and creativity.
                            </p>
                        </div>
                    </div>
                </div>
            </section>
        `;
    }
}

customElements.define('custom-features', CustomFeatures);