components/testimonials.js

class CustomTestimonials extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .testimonial-quote::before {
                    content: '"';
                    font-size: 4rem;
                    color: #3b82f6;
                    opacity: 0.2;
                    position: absolute;
                    top: -1rem;
                    left: 0;
                }
            </style>
            <section id="testimonials" class="py-16 bg-gray-50">
                <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">Ce que disent nos clients</h2>
                        <p class="text-gray-600 max-w-2xl mx-auto">
                            Découvrez les retours de nos clients satisfaits par nos services médias.
                        </p>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        <div class="testimonial-card bg-white p-8 rounded-lg shadow-sm border border-gray-100">
                            <div class="flex items-center mb-4">
                                <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
                                <div>
                                    <h4 class="font-semibold text-gray-800">Sophie Martin</h4>
                                    <p class="text-blue-500 text-sm">Directrice Marketing</p>
                                </div>
                            </div>
                            <div class="relative pl-6">
                                <p class="testimonial-quote text-gray-600 italic">
                                    Leur expertise en production vidéo a transformé notre communication. Les résultats ont dépassé nos attentes.
                                </p>
                            </div>
                        </div>
                        <div class="testimonial-card bg-white p-8 rounded-lg shadow-sm border border-gray-100">
                            <div class="flex items-center mb-4">
                                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
                                <div>
                                    <h4 class="font-semibold text-gray-800">Thomas Leroy</h4>
                                    <p class="text-blue-500 text-sm">PDG, TechStart</p>
                                </div>
                            </div>
                            <div class="relative pl-6">
                                <p class="testimonial-quote text-gray-600 italic">
                                    Leur approche stratégique des médias nous a permis de doubler notre audience en 6 mois. Impressionnant !
                                </p>
                            </div>
                        </div>
                        <div class="testimonial-card bg-white p-8 rounded-lg shadow-sm border border-gray-100">
                            <div class="flex items-center mb-4">
                                <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
                                <div>
                                    <h4 class="font-semibold text-gray-800">Émilie Dubois</h4>
                                    <p class="text-blue-500 text-sm">Responsable Communication</p>
                                </div>
                            </div>
                            <div class="relative pl-6">
                                <p class="testimonial-quote text-gray-600 italic">
                                    Professionnalisme et créativité. Notre campagne radio a eu un impact immédiat sur nos ventes.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        `;
    }
}
customElements.define('custom-testimonials', CustomTestimonials);