class CustomHero extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .hero {
                    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
                }
                .cta-button {
                    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
                    transition: all 0.3s ease;
                }
                .cta-button:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
                }
            </style>
            <section class="hero py-20">
                <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-10 lg:mb-0">
                            <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">Your AI-Powered <span class="gradient-text">Selling Assistant</span></h1>
                            <p class="text-xl text-gray-600 mb-8">Create professional listings in seconds with our smart AI technology. Just upload a photo and let SBert handle the rest!</p>
                            <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                                <a href="/signup" class="cta-button text-white px-8 py-3 rounded-full text-lg font-medium shadow-md hover-scale">Start Free Trial</a>
                                <a href="#demo" class="bg-white text-gray-800 px-8 py-3 rounded-full text-lg font-medium shadow-md border border-gray-200 hover-scale">See Demo</a>
                            </div>
                        </div>
                        <div>
                            <img src="http://static.photos/technology/1024x576/10" alt="SBert AI Interface" class="rounded-xl shadow-xl hover-scale">
                        </div>
                    </div>
                </div>
            </section>
        `;
    }
}
customElements.define('custom-hero', CustomHero);