From fbf4cd7b645469277f528e55ba9e5dc7cb493b64 Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Thu, 30 Apr 2026 17:31:56 -0400
Subject: [PATCH] =?UTF-8?q?Add=20OnSet=20section=20=E2=80=94=20reel,=20gal?=
 =?UTF-8?q?lery,=20credits,=20gear?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/OnSet.tsx | 248 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 248 insertions(+)
 create mode 100644 src/components/OnSet.tsx

diff --git a/src/components/OnSet.tsx b/src/components/OnSet.tsx
new file mode 100644
index 0000000..6d31700
--- /dev/null
+++ b/src/components/OnSet.tsx
@@ -0,0 +1,248 @@
+"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>
+      )}
+    </>
+  );
+}