klz-cables.com/components/home/GallerySection.tsx

'use client';
import React from 'react';
import Image from 'next/image';
import { useTranslations } from 'next-intl';
import { Section, Container, Heading } from '../../components/ui';
import Lightbox from '../Lightbox';
import { useSearchParams } from 'next/navigation';

export default function GallerySection() {
  const t = useTranslations('Home.gallery');
  const searchParams = useSearchParams();
  const images = [
    '/uploads/2024/12/DSC07433-Large-600x400.webp',
    '/uploads/2024/12/DSC07460-Large-600x400.webp',
    '/uploads/2024/12/DSC07469-Large-600x400.webp',
    '/uploads/2024/12/DSC07539-Large-600x400.webp',
    '/uploads/2024/12/DSC07655-Large.webp',
    '/uploads/2024/12/DSC07768-Large.webp',
  ];

  const photoParam = searchParams.get('photo');
  const lightboxOpen = photoParam !== null;
  const lightboxIndex = photoParam ? parseInt(photoParam, 10) : 0;

  return (
    <Section className="bg-white text-white py-32">
      <Container>
        <Heading level={2} subtitle={t('subtitle')} align="center">
          {t('title')}
        </Heading>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {images.map((src, idx) => (
            <button
              key={idx}
              type="button"
              aria-label={`${t('alt')} ${idx + 1}`}
              onClick={() => {
                const params = new URLSearchParams(searchParams.toString());
                params.set('photo', idx.toString());
                window.history.replaceState(null, '', `?${params.toString()}`);
                // Since we're using derive-from-url, the component will re-render with the new value
              }}
              className="relative aspect-[4/3] overflow-hidden rounded-3xl group shadow-lg hover:shadow-2xl transition-all duration-700 cursor-pointer"
            >
              <Image
                src={src}
                alt={`${t('alt')} ${idx + 1}`}
                fill
                className="object-cover transition-transform duration-1000 group-hover:scale-110"
                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
              />
              <div className="absolute inset-0 bg-primary-dark/20 group-hover:bg-transparent transition-all duration-500" />
              <div className="absolute inset-0 border-0 group-hover:border-[16px] border-white/10 transition-all duration-500 pointer-events-none" />
            </button>
          ))}
        </div>
      </Container>

      <Lightbox
        isOpen={lightboxOpen}
        images={images}
        initialIndex={lightboxIndex}
        onClose={() => {
          const params = new URLSearchParams(searchParams.toString());
          params.delete('photo');
          window.history.replaceState(null, '', `?${params.toString()}`);
        }}
      />
    </Section>
  );
}