<dialog
ref={dialogRef}
className="h-screen max-h-none w-screen max-w-none border-0 bg-transparent p-0 backdrop:bg-black/80"
onClick={handleDialogClose}>
<button className="absolute top-6 right-6 z-10 flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-black/50 text-lg text-white transition-colors hover:text-gray-300">
✕
</button>
<div className="flex h-screen flex-col overflow-hidden">
<div className="flex min-h-0 flex-1 items-center justify-center">
{imageProps && (
<Image
placeholder="blur"
blurDataURL={artwork.image?.asset?.metadata?.lqip ?? ''}
onClick={(e) => e.stopPropagation()}
src={imageProps.src}
alt={artwork.title || ''}
width={artwork.image?.asset?.metadata?.dimensions?.width ?? 1920}
height={artwork.image?.asset?.metadata?.dimensions?.height ?? 1080}
className="h-full w-auto max-w-full object-contain"
priority
style={{
viewTransitionName: `artwork-${artwork._id}`,
}}
/>
)}
</div>
{/* Info overlay in dialog */}
<div
onClick={(e) => e.stopPropagation()}
className="bg-black/70 p-6 text-center text-white">
<h3 className="mb-2 text-xl">{artwork.title}</h3>
<p className="text-lg font-light opacity-90">
{artwork.style} • {artwork.year}
{artwork.size ? ` • ${artwork.size}` : ''}
</p>
</div>
</div>
</dialog>
<dialog
ref={dialogRef}
className="h-screen max-h-none w-screen max-w-none border-0 bg-transparent p-0 backdrop:bg-black/80"
onClick={handleDialogClose}>
<button className="absolute top-6 right-6 z-10 flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-black/50 text-lg text-white transition-colors hover:text-gray-300">
✕
</button>
<div className="flex h-screen flex-col overflow-hidden">
<div className="flex min-h-0 flex-1 items-center justify-center">
{imageProps && (
<Image
placeholder="blur"
blurDataURL={artwork.image?.asset?.metadata?.lqip ?? ''}
onClick={(e) => e.stopPropagation()}
src={imageProps.src}
alt={artwork.title || ''}
width={artwork.image?.asset?.metadata?.dimensions?.width ?? 1920}
height={artwork.image?.asset?.metadata?.dimensions?.height ?? 1080}
className="h-full w-auto max-w-full object-contain"
priority
style={{
viewTransitionName: `artwork-${artwork._id}`,
}}
/>
)}
</div>
{/* Info overlay in dialog */}
<div
onClick={(e) => e.stopPropagation()}
className="bg-black/70 p-6 text-center text-white">
<h3 className="mb-2 text-xl">{artwork.title}</h3>
<p className="text-lg font-light opacity-90">
{artwork.style} • {artwork.year}
{artwork.size ? ` • ${artwork.size}` : ''}
</p>
</div>
</div>
</dialog>