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

$__newAttributes = [];
$__propNames = \Illuminate\View\ComponentAttributeBag::extractPropNames(([
    'name',
    'title',
    'image',
    'bio',
    'id'
]));

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(([
    'name',
    'title',
    'image',
    'bio',
    'id'
]), '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); ?>

<div 
    x-data="{ open: false }"
    class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden group flex flex-col"
>

    <!-- Image -->
    <div class="overflow-hidden relative">
        <img 
            src="<?php echo e(asset($image)); ?>" 
            alt="<?php echo e($name); ?>"
            class="w-full h-64 object-cover transform transition duration-500 filter grayscale group-hover:grayscale-0"
        >
        <div class="absolute inset-0 bg-black/60 group-hover:bg-black/0 transition duration-500"></div>
    </div>

    <!-- Content -->
    <div class="p-6 flex flex-col font-monst flex-1 justify-between">
        <div>
            <h3 class="text-xl font-semibold text-gray-900 dark:text-white"><?php echo e($name); ?></h3>
            <p class="text-sky-700 dark:text-sky-400 font-medium tracking-wide text-sm mt-1"><?php echo e($title); ?></p>
        </div>

        <button 
            @click="open = true"
            type="button"
            class="mt-6 inline-flex items-center justify-center gap-2 text-sm font-semibold text-sky-700 hover:text-white hover:bg-sky-700 border border-sky-700 px-4 py-2 rounded-lg transition-all duration-200"
        >
            Read More
            <?php if (isset($component)) { $__componentOriginal5c84e1af936cb00c34687173a7f14ca8 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal5c84e1af936cb00c34687173a7f14ca8 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'e60dd9d2c3a62d619c9acb38f20d5aa5::icon.arrow-right','data' => ['class' => 'w-4 h-4 group-hover:rotate-45']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('flux::icon.arrow-right'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['class' => 'w-4 h-4 group-hover:rotate-45']); ?>
<?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::processComponentKey($component); ?>

<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal5c84e1af936cb00c34687173a7f14ca8)): ?>
<?php $attributes = $__attributesOriginal5c84e1af936cb00c34687173a7f14ca8; ?>
<?php unset($__attributesOriginal5c84e1af936cb00c34687173a7f14ca8); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal5c84e1af936cb00c34687173a7f14ca8)): ?>
<?php $component = $__componentOriginal5c84e1af936cb00c34687173a7f14ca8; ?>
<?php unset($__componentOriginal5c84e1af936cb00c34687173a7f14ca8); ?>
<?php endif; ?>
        </button>
    </div>

    <!-- Modal ... -->
    <div 
    x-show="open" 
    x-transition.opacity
    x-cloak
    x-effect="document.body.classList.toggle('overflow-hidden', open)"
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 px-4 py-6"
    style="display: none;"
>
    <div 
        @click.away="open = false"
        class="bg-white dark:bg-gray-900 rounded-xl w-full max-w-2xl shadow-2xl relative max-h-[90vh] flex flex-col"
    >
        <!-- Header -->
        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
            <button 
                @click="open = false"
                class="absolute top-4 right-4 text-gray-500 hover:text-gray-900 dark:hover:text-white"
            >
                ✕
            </button>

            <h3 class="text-2xl font-semibold text-gray-900 dark:text-white">
                <?php echo e($name); ?>

            </h3>

            <p class="text-sky-700 dark:text-sky-400 font-medium mt-1">
                <?php echo e($title); ?>

            </p>
        </div>

        <!-- Scrollable Content -->
        <div class="p-6 overflow-y-auto">
            <div class="text-gray-700 dark:text-gray-300 leading-relaxed space-y-4">
                <?php echo $bio; ?>

            </div>
        </div>
    </div>
</div>

</div>

<?php /**PATH /Users/macuser/Herd/Novabank/resources/views/components/team-card.blade.php ENDPATH**/ ?>