<?php $attributes ??= new \Illuminate\View\ComponentAttributeBag;

$__newAttributes = [];
$__propNames = \Illuminate\View\ComponentAttributeBag::extractPropNames((['work', 'grid' => '']));

foreach ($attributes->all() as $__key => $__value) {
    if (in_array($__key, $__propNames)) {
        $$__key = $$__key ?? $__value;
    } else {
        $__newAttributes[$__key] = $__value;
    }
}

$attributes = new \Illuminate\View\ComponentAttributeBag($__newAttributes);

unset($__propNames);
unset($__newAttributes);

foreach (array_filter((['work', 'grid' => '']), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
    $$__key = $$__key ?? $__value;
}

$__defined_vars = get_defined_vars();

foreach ($attributes->all() as $__key => $__value) {
    if (array_key_exists($__key, $__defined_vars)) unset($$__key);
}

unset($__defined_vars, $__key, $__value); ?>

<?php
    // HARD STOP: agar work null hai toh kuch render hi mat karo
    if (!$work) {
        return;
    }

    use Illuminate\Support\Str;

    // MEDIA URL (external OR storage)
    $mediaUrl = $work->hero_media
        ? (Str::startsWith($work->hero_media, ['http://', 'https://'])
            ? $work->hero_media
            : asset($work->hero_media))
        : null;

    // Rotating text → always array
    $rotatingItems = is_array($work->rotating_text)
        ? $work->rotating_text
        : json_decode($work->rotating_text ?? '[]', true);
?>

<a href="<?php echo e(url('/work/'.$work->slug)); ?>"
   class="relative block w-full group <?php echo e($grid); ?>">

    <!-- ================= MEDIA ================= -->
    <div class="relative overflow-hidden bg-gray-100">

        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($work->hero_media_type === 'video' && $mediaUrl): ?>
            <video autoplay muted loop playsinline
                class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
                <source src="<?php echo e($mediaUrl); ?>" type="video/mp4">
            </video>
        <?php elseif($mediaUrl): ?>
            <img src="<?php echo e($mediaUrl); ?>"
                 class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                 alt="<?php echo e($work->title); ?>">
        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

        <!-- Overlay -->
        <div class="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-all duration-300"></div>
    </div>

    <!-- ================= CONTENT ================= -->
    <div
        x-data="{
            i: 0,
            items: <?php echo e(Js::from($rotatingItems)); ?>,
            start() {
                if (this.items.length <= 1) return;
                setTimeout(() => {
                    setInterval(() => {
                        this.i = (this.i + 1) % this.items.length
                    }, 2200)
                }, 700)
            }
        }"
        x-init="start()"
        class="mt-6 max-w-[90%]">

        
        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($work->client_name): ?>
            <p class="text-[12px] uppercase font-bold tracking-[0.08em] text-black/80 mb-2">
                <?php echo e($work->client_name); ?>

            </p>
        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

        
        <h3 class="text-[20px] sm:text-[22px] font-bold leading-snug inline-flex items-center gap-2">
            <?php echo e($work->title); ?>

            <span class="opacity-0 -translate-x-2 transition-all duration-300
                         group-hover:opacity-100 group-hover:translate-x-0">→</span>
        </h3>

        
        <div
            x-data="{
                i: 0,
                items: <?php echo e(Js::from($rotatingItems)); ?>,
                start() {
                    if (this.items.length <= 1) return;
                    setInterval(() => {
                        this.i = (this.i + 1) % this.items.length;
                    }, 2200);
                }
            }"
            x-init="start()"
            class="relative h-5 overflow-hidden mt-2"
        >
            <template x-for="(item, index) in items" :key="index">
                <span
                    x-show="i === index"
                    x-transition:enter="transition transform duration-500 ease-out"
                    x-transition:enter-start="translate-y-4 opacity-0"
                    x-transition:enter-end="translate-y-0 opacity-100"
                    x-transition:leave="transition transform duration-500 ease-in"
                    x-transition:leave-start="translate-y-0 opacity-100"
                    x-transition:leave-end="-translate-y-4 opacity-0"
                    class="absolute left-0 top-0 text-[13px] sm:text-sm text-black/80"
                    x-cloak
                    x-text="item"
                ></span>
            </template>
        </div>

    </div>
</a>
<?php /**PATH C:\new-ef\resources\views/components/work-card.blade.php ENDPATH**/ ?>