klz-cables.com/components/team/Gallery.tsx

'use client';

import { useTranslations } from 'next-intl';
import { useState } from 'react';
import Image from 'next/image';
import dynamic from 'next/dynamic';
const Lightbox = dynamic(() => import('@/components/Lightbox'), { ssr: false });
import { Section, Container, Heading } from '@/components/ui';

export default function Gallery() {
  const t = useTranslations('Team');

  const [lightboxOpen, setLightboxOpen] = useState(false);
  const [lightboxIndex, setLightboxIndex] = useState(0);

  const teamGalleryImages = [
    '/uploads/2024/12/DSC07539-Large-600x400.webp',
    '/uploads/2024/12/DSC07460-Large-600x400.webp',
    '/uploads/2024/12/DSC07469-Large-600x400.webp',
    '/uploads/2024/12/DSC07433-Large-600x400.webp',
    '/uploads/2024/12/DSC07387-Large-600x400.webp'
  ];

  return (
    <Section className="bg-primary-dark py-16 md:py-32">
      <Container>
        <Heading level={2} subtitle={t('gallery.subtitle')} align="center" className="text-white mb-12 md:mb-20">
          <span className="text-white">{t('gallery.title')}</span>
        </Heading>
        <div className="grid grid-cols-2 md:grid-cols-5 gap-3 md:gap-6">
          {teamGalleryImages.map((src, idx) => (
            <button
              key={idx}
              onClick={() => {
                setLightboxIndex(idx);
                setLightboxOpen(true);
              }}
              className="relative aspect-[3/4] rounded-2xl md:rounded-[32px] overflow-hidden group shadow-2xl cursor-pointer"
            >
              <Image src={src} alt={t('gallery.title')} fill className="object-cover transition-transform duration-1000 group-hover:scale-110" />
              <div className="absolute inset-0 bg-primary-dark/40 group-hover:bg-transparent transition-all duration-500" />
              <div className="absolute inset-0 border-0 group-hover:border-[8px] md:group-hover:border-[12px] border-white/10 transition-all duration-500 pointer-events-none" />
            </button>
          ))}
        </div>
      </Container>

      <Lightbox
        isOpen={lightboxOpen}
        images={teamGalleryImages}
        initialIndex={lightboxIndex}
        onClose={() => setLightboxOpen(false)}
      />
    </Section>
  );
}