---
const PHOTOS = [
	{
		src: 'https://imrs.danielmorrisey.com/https://danielmorrisey.com/media/images/20240622_235041500_iOS.avif',
	},
	{
		src: 'https://imrs.danielmorrisey.com/https://danielmorrisey.com/media/images/DSC_3773.avif',
	},
	{
		src: 'https://imrs.danielmorrisey.com/https://danielmorrisey.com/media/images/DSC_3766.avif',
	},
	{
		src: 'https://imrs.danielmorrisey.com/https://danielmorrisey.com/media/images/DSC_3765.avif',
	},
	{
		src: 'https://imrs.danielmorrisey.com/https://danielmorrisey.com/media/images/grain-drop-1.jpg',
	},
	{
		src: 'https://imrs.danielmorrisey.com/https://danielmorrisey.com/media/images/grain-drop-2.jpg',
	},
	{
		src: 'https://imrs.danielmorrisey.com/https://danielmorrisey.com/media/images/grain-drop-3.jpg',
	},
	{
		src: 'https://imrs.danielmorrisey.com/https://danielmorrisey.com/media/images/grain-drop-4.jpg',
	},
	{
		src: 'https://imrs.danielmorrisey.com/https://danielmorrisey.com/media/images/grain-drop-5.jpg',
	},
	{
		src: 'https://imrs.danielmorrisey.com/https://danielmorrisey.com/media/images/grain-drop-6.jpg',
	},
	{
		src: 'https://imrs.danielmorrisey.com/https://danielmorrisey.com/media/images/grain-drop-7.jpg',
	},
	{
		src: 'https://imrs.danielmorrisey.com/https://danielmorrisey.com/media/images/grain-drop-8.jpg',
	},
];
---

<div id="home-photo-strip" class="photo-strip">
	{PHOTOS.map((photo) => (
		<div class="photo-strip-item" role="button" tabindex="0" aria-label="View photo">
			<img src={photo.src} alt="Photo" loading="lazy" />
		</div>
	))}
</div>

<div id="photo-modal" class="photo-modal" role="dialog" aria-modal="true" aria-label="Photo viewer">
	<button id="modal-close" class="modal-close" aria-label="Close">✕</button>
	<img id="modal-photo" src="" alt="" class="modal-img" />
</div>

<script is:inline>
	function openPhotoModal(src, alt) {
		const modal = document.getElementById('photo-modal');
		const modalImg = document.getElementById('modal-photo');
		if (!modal || !modalImg) return;
		modalImg.src = src;
		modalImg.alt = alt;
		modal.classList.add('active');
		document.body.style.overflow = 'hidden';
	}

	function closePhotoModal() {
		const modal = document.getElementById('photo-modal');
		if (!modal) return;
		modal.classList.remove('active');
		document.body.style.overflow = '';
	}

	// Setup photo strip items
	const strip = document.getElementById('home-photo-strip');
	if (strip) {
		const items = strip.querySelectorAll('.photo-strip-item');
		items.forEach((item) => {
			const img = item.querySelector('img');
			if (img) {
				item.addEventListener('click', () => openPhotoModal(img.src, 'Photo'));
				item.addEventListener('keydown', (e) => {
					if (e.key === 'Enter' || e.key === ' ') {
						e.preventDefault();
						openPhotoModal(img.src, 'Photo');
					}
				});
			}
		});
	}

	// Setup modal
	const modal = document.getElementById('photo-modal');
	const modalClose = document.getElementById('modal-close');

	if (modalClose) {
		modalClose.addEventListener('click', closePhotoModal);
	}

	if (modal) {
		modal.addEventListener('click', (e) => {
			if (e.target === modal) closePhotoModal();
		});

		document.addEventListener('keydown', (e) => {
			if (e.key === 'Escape' && modal.classList.contains('active')) {
				closePhotoModal();
			}
		});
	}
</script>

<style>
	.photo-strip {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 1rem;
		margin: 2rem 0;
	}

	.photo-strip-item {
		position: relative;
		overflow: hidden;
		border-radius: 0.5rem;
		cursor: pointer;
		border: 1px solid var(--accent-dim);
		transition: all 0.3s ease;
		aspect-ratio: 1;
	}

	.photo-strip-item:hover {
		transform: scale(1.05);
		box-shadow: 0 4px 12px rgba(212, 151, 92, 0.2);
	}

	.photo-strip-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.photo-modal {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.95);
		z-index: 1000;
		align-items: center;
		justify-content: center;
	}

	.photo-modal.active {
		display: flex;
	}

	.modal-close {
		position: absolute;
		top: 1rem;
		right: 1rem;
		background: none;
		border: none;
		color: white;
		font-size: 2rem;
		cursor: pointer;
		z-index: 1001;
		transition: color 0.2s;
	}

	.modal-close:hover {
		color: var(--accent);
	}

	.modal-img {
		max-width: 90vw;
		max-height: 90vh;
		object-fit: contain;
		animation: fadeIn 0.3s ease;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@media (max-width: 600px) {
		.photo-strip {
			grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
			gap: 0.5rem;
		}

		.modal-img {
			max-width: 95vw;
			max-height: 95vh;
		}
	}
</style>