'use client'

import { useState } from 'react'
import Image from 'next/image'
import ScrollReveal from './ScrollReveal'
import styles from './Gallery.module.css'

const galleryImages = [
  { src: '/images/primepfp.jpg', alt: 'PRIME Cybernetic Warrior', title: 'The Awakening' },
  { src: '/images/ronin.jpg', alt: 'PRIME Ronin', title: 'Dark Ronin' },
  { src: '/images/jokeprime.jpg', alt: 'PRIME Chaos', title: 'Chaos Incarnate' },
  { src: '/images/docprime.jpg', alt: 'PRIME Doctor', title: 'The Surgeon' },
]

export default function Gallery() {
  const [selectedImage, setSelectedImage] = useState<typeof galleryImages[0] | null>(null)

  return (
    <section id="gallery" className={styles.gallery}>
      <div className={styles.container}>
        <ScrollReveal>
          <div className={styles.header}>
            <span className={styles.label}>THE COLLECTIVE</span>
            <h2 className={styles.title}>
              <span className="text-gradient">PRIME</span> Collective
            </h2>
            <p className={styles.subtitle}>
              Those who revealed their PRIME.
            </p>
          </div>
        </ScrollReveal>

        <div className={styles.grid}>
          {galleryImages.map((image, index) => (
            <ScrollReveal key={index} delay={index * 0.1}>
              <button
                className={styles.card}
                onClick={() => setSelectedImage(image)}
              >
                <div className={styles.imageWrapper}>
                  <Image
                    src={image.src}
                    alt={image.alt}
                    fill
                    className={styles.image}
                  />
                  <div className={styles.overlay}>
                    <span className={styles.viewIcon}>
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                        <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" />
                      </svg>
                    </span>
                  </div>
                </div>
                <div className={styles.cardInfo}>
                  <h3>{image.title}</h3>
                </div>
              </button>
            </ScrollReveal>
          ))}
        </div>
      </div>

      {/* Lightbox */}
      {selectedImage && (
        <div className={styles.lightbox} onClick={() => setSelectedImage(null)}>
          <button className={styles.closeBtn} onClick={() => setSelectedImage(null)}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M18 6L6 18M6 6l12 12" />
            </svg>
          </button>
          <div className={styles.lightboxContent} onClick={(e) => e.stopPropagation()}>
            <div className={styles.lightboxImage}>
              <Image
                src={selectedImage.src}
                alt={selectedImage.alt}
                fill
                className={styles.image}
              />
            </div>
            <div className={styles.lightboxInfo}>
              <h3>{selectedImage.title}</h3>
            </div>
          </div>
        </div>
      )}
    </section>
  )
}