class CustomFeatures extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .feature-icon {
                    background: linear-gradient(135deg, #2EA44F 0%, #0366D6 100%);
                }
            </style>
            <section class="py-16 bg-white">
                <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 mb-4">Accelerate your entire workflow</h2>
                        <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                            From your first line of code to final deployment, CodeCollabX provides AI and automation tools to help you build and ship better software faster.
                        </p>
                    </div>
                    
                    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
                        <div class="feature-card bg-white p-6 rounded-xl border border-gray-200 transition-all">
                            <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
                                <i data-feather="code" class="text-white w-6 h-6"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-900 mb-2">Code</h3>
                            <p class="text-gray-600">
                                Write, test, and fix code quickly with AI assistance, from simple boilerplate to complex features.
                            </p>
                        </div>
                        <div class="feature-card bg-white p-6 rounded-xl border border-gray-200 transition-all">
                            <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
                                <i data-feather="clipboard" class="text-white w-6 h-6"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-900 mb-2">Plan</h3>
                            <p class="text-gray-600">
                                Organize everything from high-level roadmaps to everyday tasks with project management tools.
                            </p>
                        </div>
                        <div class="feature-card bg-white p-6 rounded-xl border border-gray-200 transition-all">
                            <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
                                <i data-feather="users" class="text-white w-6 h-6"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-900 mb-2">Collaborate</h3>
                            <p class="text-gray-600">
                                Work together seamlessly with built-in code review, discussions, and issue tracking.
                            </p>
                        </div>
                        <div class="feature-card bg-white p-6 rounded-xl border border-gray-200 transition-all">
                            <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
                                <i data-feather="refresh-cw" class="text-white w-6 h-6"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-900 mb-2">Automate</h3>
                            <p class="text-gray-600">
                                Automate your workflow with CI/CD pipelines, testing, and deployments.
                            </p>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 rounded-xl p-8 md:p-12 grid md:grid-cols-2 gap-12 items-center">
                        <div>
                            <h2 class="text-2xl font-bold text-gray-900 mb-4">Your AI partner everywhere</h2>
                            <p class="text-gray-600 mb-6">
                                Copilot is ready to work with you at each step of the software development lifecycle, from planning to deployment.
                            </p>
                            <a href="#" class="inline-flex items-center text-accent-500 font-medium">
                                Explore GitHub Copilot
                                <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                            </a>
                        </div>
                        <div class="relative">
                            <img src="http://static.photos/technology/1024x576/42" alt="AI Coding Assistant" class="w-full rounded-lg shadow-md border border-gray-200">
                            <div class="absolute -bottom-4 -right-4 bg-white p-4 rounded-lg shadow-lg border border-gray-200 w-56">
                                <div class="flex items-start">
                                    <div class="flex-shrink-0 bg-purple-100 p-2 rounded-full">
                                        <i data-feather="cpu" class="w-5 h-5 text-purple-500"></i>
                                    </div>
                                    <div class="ml-3">
                                        <h3 class="text-sm font-medium text-gray-900">AI Suggestions</h3>
                                        <p class="text-xs text-gray-500">Context-aware code</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        `;
    }
}
customElements.define('custom-features', CustomFeatures);