components/hero.js

class CustomHero extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .hero {
                    height: 100vh;
                    min-height: 600px;
                }
                .video-overlay {
                    background-color: rgba(0, 0, 0, 0.5);
                }
            </style>
            <section class="hero relative flex items-center justify-center">
                <div class="absolute inset-0 video-overlay"></div>
                <video autoplay muted loop class="absolute inset-0 w-full h-full object-cover">
                    <source src="https://assets.mixkit.co/videos/preview/mixkit-airplane-flying-in-a-blue-sky-1582-large.mp4" type="video/mp4">
                </video>
                
                <div class="container mx-auto px-6 z-10 text-center text-white">
                    <h1 class="text-4xl md:text-6xl font-bold mb-6">Premium Private Aviation</h1>
                    <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">
                        Experience the pinnacle of luxury air travel with our bespoke charter services.
                    </p>
                    <div class="flex flex-col sm:flex-row justify-center gap-4">
                        <button class="bg-blue-600 hover:bg-blue-700 px-8 py-3 rounded-md font-medium text-lg transition duration-300">
                            Explore Fleet
                        </button>
                        <button class="bg-transparent border-2 border-white hover:bg-white hover:text-gray-900 px-8 py-3 rounded-md font-medium text-lg transition duration-300">
                            Contact Us
                        </button>
                    </div>
                </div>
                
                <div class="absolute bottom-10 left-0 right-0 flex justify-center">
                    <a href="#services" class="animate-bounce">
                        <i data-feather="chevron-down" class="text-white w-10 h-10"></i>
                    </a>
                </div>
            </section>
        `;
    }
}

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