<div class="bg-gray-100 dark:bg-gray-900 py-16 px-4">
<div x-data="{
rtl: false,
activeSlide: 0,
slidesEn: [
{ image: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1000', title: 'E-commerce Platform', description: 'A modern online store with robust features.' },
{ image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?auto=format&fit=crop&w=1000', title: 'Fitness Application', description: 'Workout tracking with personalized plans.' },
{ image: 'https://images.unsplash.com/photo-1447933601403-0c6688de566e?auto=format&fit=crop&w=1000', title: 'Coffee Branding', description: 'Complete branding for a local coffee shop.' }
],
next() { this.activeSlide = (this.activeSlide + 1) % this.slidesEn.length; },
prev() { this.activeSlide = (this.activeSlide - 1 + this.slidesEn.length) % this.slidesEn.length; }
}"
x-init="
const handleDirectionChange = (event) => { rtl = event.detail.isRtl; };
window.addEventListener('set-direction', handleDirectionChange);
if (document.documentElement.dir === 'rtl') { rtl = true; }
"
:dir="rtl ? 'rtl' : 'ltr'">
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl font-bold text-center text-gray-900 dark:text-white mb-2">Image Carousel</h1>
<p class="text-gray-600 dark:text-gray-300 text-center mb-8">Browse our latest work</p>
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
<div class="relative h-96">
<template x-for="(slide, index) in slidesEn" :key="index">
<div x-show="activeSlide === index" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute inset-0">
<img :src="slide.image" :alt="slide.title" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-6 ltr:text-left rtl:text-right"><h2 class="text-2xl font-bold text-white" x-text="slide.title"></h2><p class="text-gray-200" x-text="slide.description"></p></div>
</div>
</template>
</div>
<button @click="prev()" class="absolute top-1/2 left-4 rtl:right-4 rtl:left-auto transform -translate-y-1/2 bg-white/50 hover:bg-white/80 rounded-full p-2 transition-colors"><svg class="w-6 h-6 text-gray-800 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg></button>
<button @click="next()" class="absolute top-1/2 right-4 rtl:left-4 rtl:right-auto transform -translate-y-1/2 bg-white/50 hover:bg-white/80 rounded-full p-2 transition-colors"><svg class="w-6 h-6 text-gray-800 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></button>
<div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2 rtl:space-x-reverse">
<template x-for="(slide, index) in slidesEn" :key="index">
<button @click="activeSlide = index" class="w-3 h-3 rounded-full transition-colors" :class="{'bg-white': activeSlide === index, 'bg-white/50 hover:bg-white': activeSlide !== index}"></button>
</template>
</div>
</div>
</div>
</div>
</section>