<script lang="ts">
	// Sample portfolio images - replace with your actual nail art images
	const portfolioImages = [
		{
			src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Hand%2C_fingers_-_back.jpg/1024px-Hand%2C_fingers_-_back.jpg',
			alt: 'lorem ipsum'
		},
		{
			src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Palm%2C_fingers.jpg/1024px-Palm%2C_fingers.jpg',
			alt: 'lorem ipsum'
		},
		{
			src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Hand_parts_-_en.svg/1920px-Hand_parts_-_en.svg.png',
			alt: 'lorem ipsum'
		},
		{
			src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Scheme_human_hand_bones-en.svg/1920px-Scheme_human_hand_bones-en.svg.png',
			alt: 'lorem ipsum'
		},
		{
			src: 'https://upload.wikimedia.org/wikipedia/commons/a/a1/3D_Medical_Animation_Human_Wrist.jpg',
			alt: 'lorem ipsum'
		},
		{
			src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Wrist_and_hand_deeper_palmar_dissection-en.svg/1920px-Wrist_and_hand_deeper_palmar_dissection-en.svg.png',
			alt: 'lorem ipsum'
		},
		{
			src: 'https://upload.wikimedia.org/wikipedia/commons/3/38/Wrist_extensor_compartments_%28numbered%29.PNG',
			alt: 'lorem ipsum'
		},
		{
			src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Gray812and814.svg/1920px-Gray812and814.svg.png',
			alt: 'lorem ipsum'
		}
	];
</script>

<section class="w-full overflow-hidden py-16">
	<div class="mx-auto max-w-6xl px-6">
		<h2 class="mb-12 text-center text-2xl font-semibold">Our Portfolio</h2>
	</div>

	<div class="relative w-full overflow-hidden">
		<div class="animate-scroll flex">
			{#each [...portfolioImages, ...portfolioImages] as image, i (i)}
				<div class="group flex-shrink-0">
					<img
						src={image.src}
						alt={image.alt}
						class="h-80 w-64 object-cover saturate-100 transition-all duration-500 md:saturate-75 md:group-hover:saturate-100"
						loading="lazy"
					/>
				</div>
			{/each}
		</div>
	</div>
</section>

<style>
	@keyframes scroll {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-50%);
		}
	}

	.animate-scroll {
		animation: scroll 40s linear infinite;
		width: calc(256px * 16); /* 16 images total (8 duplicated) * 256px width */
	}

	/* images scale on hover */
	.group:hover img {
		transform: scale(1.05);
	}
</style>
