"use client";

import { useState } from "react";
import Image from "next/image";
import ScrollReveal from "./ScrollReveal";
import { X, Camera, Film, Package, Award } from "lucide-react";

// ── Replace this with your actual Vimeo or YouTube embed URL ──────────────
// Vimeo:   https://player.vimeo.com/video/YOUR_VIDEO_ID?autoplay=0
// YouTube: https://www.youtube.com/embed/YOUR_VIDEO_ID
const REEL_URL = "https://player.vimeo.com/video/YOUR_VIDEO_ID";

// ── On-set stills ─────────────────────────────────────────────────────────
// Drop files into /public/images/on-set/ and update this list
const photos = [
  { src: "/images/on-set/on-set-1.jpg", alt: "On set", caption: "" },
  { src: "/images/on-set/on-set-2.jpg", alt: "On set", caption: "" },
  { src: "/images/on-set/on-set-3.jpg", alt: "On set", caption: "" },
  { src: "/images/on-set/on-set-4.jpg", alt: "On set", caption: "" },
  { src: "/images/on-set/on-set-5.jpg", alt: "On set", caption: "" },
  { src: "/images/on-set/on-set-6.jpg", alt: "On set", caption: "" },
];

// ── Production credits ────────────────────────────────────────────────────
const credits = [
  { title: "Production Title", role: "Camera Operator", format: "Feature Film", year: "2024" },
  { title: "Production Title", role: "Camera Operator", format: "Commercial", year: "2024" },
  { title: "Production Title", role: "1st AC", format: "Short Film", year: "2023" },
  { title: "Production Title", role: "Camera Operator", format: "Documentary", year: "2023" },
  { title: "Production Title", role: "DIT", format: "Music Video", year: "2022" },
  { title: "Production Title", role: "Camera Operator", format: "TV / Broadcast", year: "2022" },
];

// ── Gear / kit list ───────────────────────────────────────────────────────
const gear = [
  {
    category: "Cameras",
    icon: Camera,
    items: ["RED KOMODO 6K", "Sony FX6", "GoPro HERO 12"],
  },
  {
    category: "Lenses",
    icon: Film,
    items: ["Sigma 18-35mm T2", "Canon L Series Primes", "Rokinon Cine DS Set"],
  },
  {
    category: "Support",
    icon: Package,
    items: ["DJI RS 3 Pro Gimbal", "Sachtler Fluid Head", "Dana Dolly"],
  },
  {
    category: "Accessories",
    icon: Award,
    items: ["SmallHD 502 Monitor", "Teradek Bolt 500", "Litepanels Astra 1x1"],
  },
];

export default function OnSet() {
  const [lightbox, setLightbox] = useState<number | null>(null);

  return (
    <>
      <section id="on-set" className="py-28 md:py-36 bg-surface">
        <div className="max-w-6xl mx-auto px-6 space-y-24">

          {/* ── Header ── */}
          <ScrollReveal>
            <div className="max-w-3xl">
              <div className="w-10 h-px bg-accent mb-6" />
              <p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-4">
                On Set
              </p>
              <h2 className="text-3xl md:text-4xl font-semibold text-primary leading-tight mb-5">
                Behind the lens.
              </h2>
              <p className="text-muted leading-relaxed">
                Camera operator and on-set technician for film, commercial, and broadcast productions.
                Comfortable in fast-paced environments — from documentary run-and-gun to multi-camera
                studio setups.
              </p>
            </div>
          </ScrollReveal>

          {/* ── Reel ── */}
          <ScrollReveal>
            <div>
              <p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-6">
                Reel
              </p>
              <div className="relative w-full rounded-xl overflow-hidden border border-neutral-200/80 shadow-lg shadow-neutral-200/40"
                style={{ paddingBottom: "56.25%" }}>
                <iframe
                  src={REEL_URL}
                  className="absolute inset-0 w-full h-full"
                  allow="autoplay; fullscreen; picture-in-picture"
                  allowFullScreen
                  title="Showreel"
                />
              </div>
            </div>
          </ScrollReveal>

          {/* ── Credits ── */}
          <ScrollReveal>
            <div>
              <p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-6">
                Selected Credits
              </p>
              <div className="divide-y divide-neutral-100">
                {credits.map((credit, i) => (
                  <div
                    key={i}
                    className="grid grid-cols-2 md:grid-cols-4 gap-2 py-4 group hover:bg-surface-dark -mx-3 px-3 rounded-lg transition-colors duration-200"
                  >
                    <span className="text-sm font-medium text-primary">{credit.title}</span>
                    <span className="text-sm text-muted">{credit.role}</span>
                    <span className="text-sm text-muted hidden md:block">{credit.format}</span>
                    <span className="font-mono text-[11px] text-muted text-right md:text-left">{credit.year}</span>
                  </div>
                ))}
              </div>
            </div>
          </ScrollReveal>

          {/* ── Photo Gallery ── */}
          <div>
            <ScrollReveal>
              <p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-6">
                On Set
              </p>
            </ScrollReveal>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4">
              {photos.map((photo, i) => (
                <ScrollReveal key={photo.src} delay={i * 60}>
                  <button
                    onClick={() => setLightbox(i)}
                    className="group relative block w-full overflow-hidden rounded-lg cursor-pointer"
                  >
                    <div className="relative h-44 md:h-56 w-full">
                      <Image
                        src={photo.src}
                        alt={photo.alt}
                        fill
                        className="object-cover group-hover:scale-105 transition-transform duration-500 ease-out"
                        sizes="33vw"
                      />
                      <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors duration-300" />
                      {photo.caption && (
                        <div className="absolute inset-0 flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                          <span className="text-xs font-medium text-white">{photo.caption}</span>
                        </div>
                      )}
                    </div>
                  </button>
                </ScrollReveal>
              ))}
            </div>
          </div>

          {/* ── Gear ── */}
          <ScrollReveal>
            <div>
              <p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-6">
                Kit
              </p>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
                {gear.map((g, i) => (
                  <ScrollReveal key={g.category} delay={i * 100}>
                    <div className="group bg-white rounded-xl p-7 border border-neutral-200/80 hover:border-accent/20 hover:shadow-lg hover:shadow-neutral-200/50 transition-all duration-300 h-full">
                      <div className="w-11 h-11 rounded-lg bg-neutral-50 border border-neutral-100 flex items-center justify-center mb-5 group-hover:bg-accent/5 group-hover:border-accent/20 transition-all duration-300">
                        <g.icon
                          size={20}
                          className="text-neutral-400 group-hover:text-accent transition-colors duration-300"
                          strokeWidth={1.5}
                        />
                      </div>
                      <h3 className="text-base font-semibold text-primary mb-4">{g.category}</h3>
                      <ul className="space-y-2">
                        {g.items.map((item) => (
                          <li key={item} className="text-[13px] text-muted flex items-start gap-2">
                            <span className="mt-1.5 w-1 h-1 rounded-full bg-accent/40 shrink-0" />
                            {item}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </ScrollReveal>
                ))}
              </div>
            </div>
          </ScrollReveal>

        </div>
      </section>

      {/* ── Lightbox ── */}
      {lightbox !== null && (
        <div
          className="fixed inset-0 z-[100] bg-black/90 backdrop-blur-sm flex items-center justify-center p-6"
          onClick={() => setLightbox(null)}
        >
          <button
            onClick={() => setLightbox(null)}
            className="absolute top-6 right-6 text-white/60 hover:text-white transition-colors"
            aria-label="Close"
          >
            <X size={28} />
          </button>
          <div
            className="relative max-w-5xl w-full max-h-[85vh]"
            onClick={(e) => e.stopPropagation()}
          >
            <Image
              src={photos[lightbox].src}
              alt={photos[lightbox].alt}
              width={1200}
              height={800}
              className="object-contain w-full h-auto max-h-[80vh] rounded-lg"
            />
            {photos[lightbox].caption && (
              <p className="text-center text-sm text-white/70 mt-4">
                {photos[lightbox].caption}
              </p>
            )}
          </div>
          {lightbox > 0 && (
            <button
              onClick={(e) => { e.stopPropagation(); setLightbox(lightbox - 1); }}
              className="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors"
              aria-label="Previous"
            >
              &#8249;
            </button>
          )}
          {lightbox < photos.length - 1 && (
            <button
              onClick={(e) => { e.stopPropagation(); setLightbox(lightbox + 1); }}
              className="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors"
              aria-label="Next"
            >
              &#8250;
            </button>
          )}
        </div>
      )}
    </>
  );
}