components/services.js

class CustomServices extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .service-card {
                    transition: all 0.3s ease;
                }
            </style>
            <section id="services" class="py-20 bg-white">
                <div class="container mx-auto px-6">
                    <div class="text-center mb-16">
                        <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Our Services</h2>
                        <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div>
                        <p class="text-gray-600 max-w-2xl mx-auto">
                            We offer a comprehensive range of private aviation services tailored to your needs.
                        </p>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        <div class="service-card bg-gray-50 rounded-lg overflow-hidden shadow-md p-8">
                            <div class="text-blue-600 mb-4">
                                <i data-feather="globe" class="w-10 h-10"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3">Global Charter</h3>
                            <p class="text-gray-600">
                                Access to over 5,000 airports worldwide with our global network of aircraft.
                            </p>
                        </div>
                        
                        <div class="service-card bg-gray-50 rounded-lg overflow-hidden shadow-md p-8">
                            <div class="text-blue-600 mb-4">
                                <i data-feather="clock" class="w-10 h-10"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3">On-Demand Flights</h3>
                            <p class="text-gray-600">
                                Fly whenever you want with as little as 4 hours notice for most destinations.
                            </p>
                        </div>
                        
                        <div class="service-card bg-gray-50 rounded-lg overflow-hidden shadow-md p-8">
                            <div class="text-blue-600 mb-4">
                                <i data-feather="users" class="w-10 h-10"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3">Group Travel</h3>
                            <p class="text-gray-600">
                                Comfortable group travel solutions for corporate teams or family gatherings.
                            </p>
                        </div>
                        
                        <div class="service-card bg-gray-50 rounded-lg overflow-hidden shadow-md p-8">
                            <div class="text-blue-600 mb-4">
                                <i data-feather="dollar-sign" class="w-10 h-10"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3">Jet Card Programs</h3>
                            <p class="text-gray-600">
                                Prepaid flight hours with guaranteed availability and fixed hourly rates.
                            </p>
                        </div>
                        
                        <div class="service-card bg-gray-50 rounded-lg overflow-hidden shadow-md p-8">
                            <div class="text-blue-600 mb-4">
                                <i data-feather="shield" class="w-10 h-10"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3">Safety First</h3>
                            <p class="text-gray-600">
                                Industry-leading safety standards with ARGUS Platinum-rated operators.
                            </p>
                        </div>
                        
                        <div class="service-card bg-gray-50 rounded-lg overflow-hidden shadow-md p-8">
                            <div class="text-blue-600 mb-4">
                                <i data-feather="heart" class="w-10 h-10"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3">VIP Services</h3>
                            <p class="text-gray-600">
                                White-glove service including catering, ground transportation, and more.
                            </p>
                        </div>
                    </div>
                </div>
            </section>
        `;
    }
}

customElements.define('custom-services', CustomServices);