components/hero.js

class CustomHero extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    width: 100%;
                }
                .hero-section {
                    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%);
                    position: relative;
                    overflow: hidden;
                }
                .hero-content {
                    position: relative;
                    z-index: 10;
                }
                .floating-element {
                    animation: float 6s ease-in-out infinite;
                }
                @keyframes float {
                    0%, 100% { transform: translateY(0px); }
                    50% { transform: translateY(-20px); }
                }
            </style>
            <section class="hero-section py-20 px-6">
                <div class="container mx-auto">
                    <div class="hero-content text-center max-w-4xl mx-auto">
                        <h1 class="text-5xl md:text-7xl font-bold text-emerald-900 mb-6">
                            Discover Earth's
                            <span class="gradient-text">Natural Wonders</span>
                        </h1>
                        <p class="text-xl md:text-2xl text-emerald-700 mb-8 leading-relaxed">
                            Embark on a journey through breathtaking landscapes, diverse ecosystems, and incredible wildlife. 
                            Explore, learn, and protect our planet's precious natural heritage.
                        </p>
                        
                        <div class="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-6">
                            <button class="btn-primary text-white px-8 py-4 rounded-full text-lg font-semibold shadow-lg">
                                <i data-feather="compass" class="inline mr-2"></i>
                                Start Exploring
                            </button>
                            <button class="bg-white text-emerald-700 border border-emerald-300 hover:bg-emerald-50 px-8 py-4 rounded-full text-lg font-semibold transition-all duration-300">
                                <i data-feather="play" class="inline mr-2"></i>
                                Watch Intro
                            </button>
                        </div>
                        
                        <!-- Interactive Stats -->
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-16">
                                <div class="bg-white rounded-2xl p-6 shadow-lg text-center">
                                    <div class="text-3xl font-bold text-emerald-600 mb-2">1M+</div>
                                    <div class="text-emerald-700">Species Cataloged</div>
                                </div>
                                <div class="bg-white rounded-2xl p-6 shadow-lg text-center">
                                    <div class="text-3xl font-bold text-emerald-600 mb-2">500+</div>
                                    <div class="text-emerald-700">Protected Areas</div>
                                </div>
                                <div class="bg-white rounded-2xl p-6 shadow-lg text-center">
                                    <div class="text-3xl font-bold text-emerald-600 mb-2">50K+</div>
                                    <div class="text-emerald-700">Community Members</div>
                                </div>
                                <div class="bg-white rounded-2xl p-6 shadow-lg text-center">
                                    <div class="text-3xl font-bold text-emerald-600 mb-2">24/7</div>
                                    <div class="text-emerald-700">Live Nature Cams</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Floating decorative elements -->
                    <div class="absolute top-10 left-10 floating-element">
                        <div class="w-20 h-20 bg-emerald-200 rounded-full opacity-30"></div>
                    </div>
                    <div class="absolute bottom-20 right-20 floating-element" style="animation-delay: 2s;">
                        <div class="w-16 h-16 bg-teal-200 rounded-full opacity-40"></div>
                    </div>
                    <div class="absolute top-1/2 left-1/4 floating-element" style="animation-delay: 4s;">
                        <div class="w-12 h-12 bg-emerald-300 rounded-full opacity-50"></div>
                    </div>
                </div>
            </section>
        `;
    }
}

customElements.define('custom-hero', CustomHero);