class CustomHero extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .hero-gradient {
                    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
                }
            </style>
            <section class="hero-gradient pt-24 pb-16 md:pt-32 md:pb-24">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
                        <div class="text-center lg:text-left mb-12 lg:mb-0">
                            <div class="inline-block px-3 py-1 mb-4 text-xs font-semibold text-accent-600 bg-accent-100 rounded-full">
                                New: Universe 2025 Recap
                            </div>
                            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
                                <span class="gradient-text">Build software</span> <br>together with AI
                            </h1>
                            <p class="text-lg md:text-xl text-gray-600 max-w-lg mb-8">
                                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 class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                                <input type="email" placeholder="Enter your email" class="px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-transparent w-full sm:w-64">
                                <button class="bg-accent-500 hover:bg-accent-600 text-white font-medium py-3 px-6 rounded-md transition-all">
                                    Sign up for free
                                </button>
                            </div>
                            <p class="text-sm text-gray-500 mt-3">
                                By signing up, you agree to our <a href="#" class="text-accent-500 hover:underline">Terms of Service</a> and <a href="#" class="text-accent-500 hover:underline">Privacy Policy</a>.
                            </p>
                        </div>
                        <div class="relative flex justify-center">
                            <div class="relative w-full max-w-md">
                                <img src="https://github.githubassets.com/assets/mona-head-3887875b2d69.webp" alt="Mona the Octocat" class="octocat-float w-full h-auto">
                                <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-lg border border-gray-200 w-64">
                                    <div class="flex items-start">
                                        <div class="flex-shrink-0 bg-accent-100 p-2 rounded-full">
                                            <i data-feather="zap" class="w-5 h-5 text-accent-500"></i>
                                        </div>
                                        <div class="ml-3">
                                            <h3 class="text-sm font-medium text-gray-900">Try Copilot for free</h3>
                                            <p class="text-xs text-gray-500">Your AI coding partner</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        `;
    }
}
customElements.define('custom-hero', CustomHero);