class CustomServices extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .service-icon {
                    transition: all 0.3s ease;
                }
                .service-card:hover .service-icon {
                    transform: scale(1.1);
                    color: #3b82f6;
                }
            </style>
            <section id="services" class="py-16 bg-white">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div class="text-center mb-16">
                        <h2 class="section-title text-3xl font-bold text-gray-800 mb-4">Nos Services</h2>
                        <p class="text-gray-600 max-w-2xl mx-auto">
                            Des solutions complètes pour répondre à tous vos besoins en communication et médias.
                        </p>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        <div class="service-card bg-white p-8 rounded-lg shadow-md border border-gray-100 transition duration-300">
                            <div class="service-icon text-blue-500 mb-6">
                                <i data-feather="film" class="w-10 h-10"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3">Production Vidéo</h3>
                            <p class="text-gray-600">
                                Création de contenus vidéo professionnels pour promouvoir votre marque et engager votre audience.
                            </p>
                        </div>
                        <div class="service-card bg-white p-8 rounded-lg shadow-md border border-gray-100 transition duration-300">
                            <div class="service-icon text-blue-500 mb-6">
                                <i data-feather="radio" class="w-10 h-10"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3">Production Radio</h3>
                            <p class="text-gray-600">
                                Conception et production de spots radio percutants pour maximiser votre impact audio.
                            </p>
                        </div>
                        <div class="service-card bg-white p-8 rounded-lg shadow-md border border-gray-100 transition duration-300">
                            <div class="service-icon text-blue-500 mb-6">
                                <i data-feather="monitor" class="w-10 h-10"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3">Stratégie Digitale</h3>
                            <p class="text-gray-600">
                                Plans de communication digitale sur mesure pour atteindre vos objectifs business.
                            </p>
                        </div>
                        <div class="service-card bg-white p-8 rounded-lg shadow-md border border-gray-100 transition duration-300">
                            <div class="service-icon text-blue-500 mb-6">
                                <i data-feather="bar-chart-2" class="w-10 h-10"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3">Analyse Média</h3>
                            <p class="text-gray-600">
                                Mesure et optimisation de vos performances médias grâce à des analyses approfondies.
                            </p>
                        </div>
                        <div class="service-card bg-white p-8 rounded-lg shadow-md border border-gray-100 transition duration-300">
                            <div class="service-icon text-blue-500 mb-6">
                                <i data-feather="users" class="w-10 h-10"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3">Formation Média</h3>
                            <p class="text-gray-600">
                                Programmes de formation pour maîtriser les outils et techniques des médias modernes.
                            </p>
                        </div>
                        <div class="service-card bg-white p-8 rounded-lg shadow-md border border-gray-100 transition duration-300">
                            <div class="service-icon text-blue-500 mb-6">
                                <i data-feather="mic" class="w-10 h-10"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3">Relations Presse</h3>
                            <p class="text-gray-600">
                                Gestion de vos relations avec les médias pour maximiser votre couverture presse.
                            </p>
                        </div>
                    </div>
                </div>
            </section>
        `;
    }
}
customElements.define('custom-services', CustomServices);