From 8ef973d63def0e34798aaafbf86eaeda88d210fe Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Thu, 30 Apr 2026 17:46:36 -0400
Subject: [PATCH] OnSet: populate with real content from wilddragon.net +
 ShareGrid

---
 src/components/OnSet.tsx | 214 ++++++++++++++++++++-------------------
 1 file changed, 112 insertions(+), 102 deletions(-)

diff --git a/src/components/OnSet.tsx b/src/components/OnSet.tsx
index 6d31700..9e73eef 100644
--- a/src/components/OnSet.tsx
+++ b/src/components/OnSet.tsx
@@ -3,55 +3,65 @@
 import { useState } from "react";
 import Image from "next/image";
 import ScrollReveal from "./ScrollReveal";
-import { X, Camera, Film, Package, Award } from "lucide-react";
+import { X, Camera, Film, Package, Monitor } 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";
+const REEL_URL = "https://player.vimeo.com/video/805286240";
 
-// ── 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: "" },
-];
+// Drop on-set stills into /public/images/on-set/ and add them here
+const photos: { src: string; alt: string; caption: string }[] = [];
 
-// ── 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" },
+  { title: "Joe Vogel For Congress", role: "Camera Op / Trinity Op", format: "Political", year: "2024" },
+  { title: "I Am a Champion", role: "Camera Op / Trinity Op", format: "Sports", year: "2023" },
+  { title: "Washington Commanders Schedule Release", role: "Director of Photography", format: "Sports", year: "2023" },
+  { title: "Stephen Sharer – MIDNIGHT", role: "DP / Trinity Operator", format: "Narrative", year: "2023" },
+  { title: "Stephen Sharer – YOU and I", role: "DP / Trinity Operator", format: "Narrative", year: "2023" },
+  { title: "A Chocolate Lens", role: "Camera Operator", format: "Narrative", year: "2023" },
+  { title: "Capital One: Pride Month", role: "Director of Photography", format: "Corporate", year: "2021" },
+  { title: "Tafon Nchukwi: My Goal Is to Be UFC Champion", role: "Camera Operator", format: "Sports Doc", year: "2020" },
+  { title: "Conewago", role: "DP / Editor", format: "Documentary", year: "2020" },
+  { title: "Tinder", role: "Director of Photography", format: "Commercial", year: "—" },
+  { title: "In Memoriam", role: "Director of Photography", format: "Documentary", year: "2019" },
 ];
 
-// ── Gear / kit list ───────────────────────────────────────────────────────
 const gear = [
   {
-    category: "Cameras",
+    category: "Cinema Cameras",
     icon: Camera,
-    items: ["RED KOMODO 6K", "Sony FX6", "GoPro HERO 12"],
+    items: [
+      "RED Komodo-X",
+      "RED DSMC3 V-Raptor-X 8K VV + 6K S35 Dual-Format (Canon RF)",
+    ],
   },
   {
     category: "Lenses",
     icon: Film,
-    items: ["Sigma 18-35mm T2", "Canon L Series Primes", "Rokinon Cine DS Set"],
+    items: [
+      "Mamiya 645 Sekor C PL 7 Lens Set",
+      "Mamiya 645 Sekor C 35mm",
+      "Mamiya 645 Sekor C 110mm",
+      "Mamiya 645 Sekor C 150mm",
+      "16-30mm / 28-75mm / 75-180mm T2.9 Zoom Set",
+    ],
   },
   {
-    category: "Support",
+    category: "Monitoring & Transmission",
+    icon: Monitor,
+    items: [
+      "SmallHD DSMC3 7\"",
+      "SmallHD Cine7 with Bolt 6 1500RX",
+      "Teradek Bolt 6 Max XT Kit (TX + RX)",
+      "DJI SDR Transmission",
+    ],
+  },
+  {
+    category: "Camera 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"],
+    items: [
+      "Arri Trinity — Certified Owner & Operator",
+      "Dana Dolly Kit (8 / 4ft Speedrail, 2× Matthews Stands)",
+      "DJI Focus Pro All In One",
+    ],
   },
 ];
 
@@ -74,9 +84,9 @@ export default function OnSet() {
                 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.
+                Camera Operator &amp; DP local to the DMV. Certified Arri Trinity owner and operator
+                with RED camera packages and specialized live production gear — from run-and-gun
+                documentary to multi-camera sports and political campaigns.
               </p>
             </div>
           </ScrollReveal>
@@ -87,8 +97,10 @@ export default function OnSet() {
               <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%" }}>
+              <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"
@@ -110,7 +122,7 @@ export default function OnSet() {
                 {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"
+                    className="grid grid-cols-2 md:grid-cols-4 gap-2 py-4 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>
@@ -122,79 +134,81 @@ export default function OnSet() {
             </div>
           </ScrollReveal>
 
-          {/* ── Photo Gallery ── */}
+          {/* ── Photo Gallery — add images to /public/images/on-set/ to enable ── */}
+          {photos.length > 0 && (
+            <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 ── */}
           <div>
             <ScrollReveal>
               <p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-6">
-                On Set
+                Kit
               </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="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 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>
+                    <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>
 
-          {/* ── 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 && (
+      {lightbox !== null && photos.length > 0 && (
         <div
           className="fixed inset-0 z-[100] bg-black/90 backdrop-blur-sm flex items-center justify-center p-6"
           onClick={() => setLightbox(null)}
@@ -228,18 +242,14 @@ export default function OnSet() {
               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>
+            >&#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>
+            >&#8250;</button>
           )}
         </div>
       )}