@sonordev/agency-site-kit 0.1.0

package/dist/FeatureSpotlightSection-WRHXS7TU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/FeatureSpotlightSection.tsx"],"names":["useRef","useEffect","gsap","jsxs","jsx","useState","useCallback","ScrollReveal"],"mappings":";;;;;;;;;;;AAWA,SAAS,aAAA,CAAc;AAAA,EACrB,UAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAKG;AACD,EAAA,MAAM,MAAA,GAASA,aAA0B,IAAI,CAAA;AAC7C,EAAA,MAAM,WAAW,WAAA,KAAgB,KAAA;AAEjC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAO,OAAA,EAAS;AAErB,IAAA,IAAI,QAAA,EAAU;AACZ,MAAAC,qBAAA,CAAK,EAAA,CAAG,OAAO,OAAA,EAAS;AAAA,QACtB,KAAA,EAAO,GAAA;AAAA,QACP,QAAA,EAAU,GAAA;AAAA,QACV,IAAA,EAAM;AAAA,OACP,CAAA;AAAA,IACH,CAAA,MAAO;AACL,MAAAA,qBAAA,CAAK,EAAA,CAAG,OAAO,OAAA,EAAS;AAAA,QACtB,KAAA,EAAO,CAAA;AAAA,QACP,QAAA,EAAU,GAAA;AAAA,QACV,IAAA,EAAM;AAAA,OACP,CAAA;AAAA,IACH;AAAA,EACF,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,uBACEC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,MAAA;AAAA,MACL,OAAA,EAAS,MAAM,QAAA,CAAS,QAAA,GAAW,OAAO,KAAK,CAAA;AAAA,MAC/C,SAAA,EAAU,wHAAA;AAAA,MACV,KAAA,EAAO;AAAA,QACL,IAAA,EAAM,CAAA,EAAG,UAAA,CAAW,CAAC,CAAA,CAAA,CAAA;AAAA,QACrB,GAAA,EAAK,CAAA,EAAG,UAAA,CAAW,CAAC,CAAA,CAAA,CAAA;AAAA,QACpB,SAAA,EAAW,uBAAA;AAAA,QACX,UAAA,EAAY,WACR,4BAAA,GACA,iEAAA;AAAA,QACJ,KAAA,EAAO,SAAA;AAAA,QACP,SAAA,EAAW,WACP,0EAAA,GACA,4BAAA;AAAA,QACJ,MAAA,EAAQ,iCAAA;AAAA,QACR,UAAA,EAAY;AAAA,OACd;AAAA,MACA,cAAY,UAAA,CAAW,KAAA;AAAA,MAEtB,QAAA,EAAA;AAAA,QAAA,KAAA,GAAQ,CAAA;AAAA,QAGR,QAAA,oBACCA,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,kEAAA;AAAA,YACV,KAAA,EAAO;AAAA,cACL,SAAA,EAAW,kBAAA;AAAA,cACX,UAAA,EAAY,2CAAA;AAAA,cACZ,cAAA,EAAgB,YAAA;AAAA,cAChB,MAAA,EAAQ,mDAAA;AAAA,cACR,SAAA,EAAW;AAAA,aACb;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAAC,cAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,4BAAA;AAAA,kBACV,KAAA,EAAO,EAAE,KAAA,EAAO,iCAAA,EAAkC;AAAA,kBAEjD,QAAA,EAAA,UAAA,CAAW;AAAA;AAAA,eACd;AAAA,8BACAA,cAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,yBAAA;AAAA,kBACV,KAAA,EAAO,EAAE,KAAA,EAAO,kCAAA,EAAmC;AAAA,kBAElD,QAAA,EAAA,UAAA,CAAW;AAAA;AAAA,eACd;AAAA,8BAEAA,cAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,oCAAA;AAAA,kBACV,KAAA,EAAO;AAAA,oBACL,SAAA,EAAW,kBAAA;AAAA,oBACX,UAAA,EAAY,uBAAA;AAAA,oBACZ,WAAA,EAAa,uBAAA;AAAA,oBACb,SAAA,EAAW;AAAA;AACb;AAAA;AACF;AAAA;AAAA;AACF;AAAA;AAAA,GAEJ;AAEJ;AAEe,SAAR,uBAAA,CAAyC,EAAE,IAAA,EAAK,EAAiC;AACtF,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAIC,eAAwB,IAAI,CAAA;AAE5E,EAAA,MAAM,QAAA,GAAW,IAAA,CAAK,KAAA,EAAO,KAAA,EAAO,IAAA,IAAQ,EAAA;AAC5C,EAAA,MAAM,MAAA,GAAS,KAAK,MAAA,IAAU,MAAA;AAE9B,EAAA,MAAM,YAAA,GAAeC,iBAAA,CAAY,CAAC,KAAA,KAAyB;AACzD,IAAA,mBAAA,CAAoB,KAAK,CAAA;AAAA,EAC3B,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,UAAA,mBACJH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iBAAA,EACb,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,QAAA;AAAA,QACL,KAAK,IAAA,CAAK,KAAA;AAAA,QACV,SAAA,EAAU,0BAAA;AAAA,QACV,KAAA,EAAO;AAAA,UACL,MAAA,EAAQ;AAAA,SACV;AAAA,QACA,OAAA,EAAQ;AAAA;AAAA,KACV;AAAA,IAEC,IAAA,CAAK,WAAA,CAAY,GAAA,CAAI,CAAC,YAAY,KAAA,qBACjCA,cAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QAEC,UAAA;AAAA,QACA,KAAA;AAAA,QACA,WAAA,EAAa,gBAAA;AAAA,QACb,QAAA,EAAU;AAAA,OAAA;AAAA,MAJL;AAAA,KAMR;AAAA,GAAA,EACH,CAAA;AAGF,EAAA,MAAM,SAAA,mBACJD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oCAAA,EACb,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,gCAAA;AAAA,QACV,KAAA,EAAO;AAAA,UACL,KAAA,EAAO,iCAAA;AAAA,UACP,UAAA,EAAY;AAAA,SACd;AAAA,QAEC,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,KACR;AAAA,oBACAA,cAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,sCAAA;AAAA,QACV,KAAA,EAAO,EAAE,KAAA,EAAO,mCAAA,EAAoC;AAAA,QAEnD,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,KACR;AAAA,IAGC,IAAA,CAAK,WAAA,CAAY,MAAA,GAAS,CAAA,oBACzBA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0BAAA,EACZ,QAAA,EAAA,IAAA,CAAK,WAAA,CAAY,GAAA,CAAI,CAAC,YAAY,KAAA,qBACjCD,eAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QAEC,SAAS,MAAM,YAAA,CAAa,gBAAA,KAAqB,KAAA,GAAQ,OAAO,KAAK,CAAA;AAAA,QACrE,SAAA,EAAU,kFAAA;AAAA,QACV,KAAA,EAAO;AAAA,UACL,UAAA,EACE,gBAAA,KAAqB,KAAA,GACjB,iEAAA,GACA;AAAA,SACR;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,kFAAA;AAAA,cACV,KAAA,EAAO;AAAA,gBACL,UAAA,EAAY,iEAAA;AAAA,gBACZ,KAAA,EAAO;AAAA,eACT;AAAA,cAEC,QAAA,EAAA,KAAA,GAAQ;AAAA;AAAA,WACX;AAAA,yCACC,KAAA,EAAA,EACC,QAAA,kBAAAA,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,qBAAA;AAAA,cACV,KAAA,EAAO,EAAE,KAAA,EAAO,iCAAA,EAAkC;AAAA,cAEjD,QAAA,EAAA,UAAA,CAAW;AAAA;AAAA,WACd,EACF;AAAA;AAAA,OAAA;AAAA,MA1BK;AAAA,KA4BR,CAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAGF,EAAA,uBACEA,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,uBAAA;AAAA,MACV,KAAA,EAAO,EAAE,UAAA,EAAY,uBAAA,EAAwB;AAAA,MAE7C,QAAA,kBAAAA,cAAA,CAAC,SAAI,SAAA,EAAU,wBAAA,EACZ,qBAAW,MAAA,mBACVD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EACb,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACG,8BAAA,EAAA,EAAa,CAAA,EAAG,EAAA,EAAK,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,wBAChCH,cAAA,CAACG,8BAAA,EAAA,EAAa,CAAA,EAAG,EAAA,EAAI,KAAA,EAAO,IAAA,EAC1B,QAAA,kBAAAH,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAAY,QAAA,EAAA,UAAA,EAAW,CAAA,EACxC;AAAA,OAAA,EACF,CAAA,mBAEAD,eAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,CAAA,wCAAA,EACT,MAAA,KAAW,OAAA,GAAU,iDAAiD,EACxE,CAAA,CAAA;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAAC,cAAA,CAACG,8BAAA,EAAA,EAAa,CAAA,EAAG,EAAA,EAAK,QAAA,EAAA,UAAA,EAAW,CAAA;AAAA,2CAChCA,8BAAA,EAAA,EAAa,CAAA,EAAG,EAAA,EAAI,KAAA,EAAO,MAAO,QAAA,EAAA,SAAA,EAAU;AAAA;AAAA;AAAA,OAC/C,EAEJ;AAAA;AAAA,GACF;AAEJ","file":"FeatureSpotlightSection-WRHXS7TU.cjs","sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState, useCallback } from 'react';\nimport gsap from 'gsap';\nimport type { PortfolioFeatureSpotlightData, PortfolioAnnotation } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\n\ninterface FeatureSpotlightSectionProps {\n  data: PortfolioFeatureSpotlightData;\n}\n\nfunction AnnotationPin({\n  annotation,\n  index,\n  activeIndex,\n  onSelect,\n}: {\n  annotation: PortfolioAnnotation;\n  index: number;\n  activeIndex: number | null;\n  onSelect: (index: number | null) => void;\n}) {\n  const pinRef = useRef<HTMLButtonElement>(null);\n  const isActive = activeIndex === index;\n\n  useEffect(() => {\n    if (!pinRef.current) return;\n\n    if (isActive) {\n      gsap.to(pinRef.current, {\n        scale: 1.2,\n        duration: 0.3,\n        ease: 'back.out(2)',\n      });\n    } else {\n      gsap.to(pinRef.current, {\n        scale: 1,\n        duration: 0.2,\n        ease: 'power2.out',\n      });\n    }\n  }, [isActive]);\n\n  return (\n    <button\n      ref={pinRef}\n      onClick={() => onSelect(isActive ? null : index)}\n      className=\"absolute z-10 flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold transition-colors cursor-pointer\"\n      style={{\n        left: `${annotation.x}%`,\n        top: `${annotation.y}%`,\n        transform: 'translate(-50%, -50%)',\n        background: isActive\n          ? 'var(--sk-primary, #6366f1)'\n          : 'color-mix(in srgb, var(--sk-primary, #6366f1) 80%, transparent)',\n        color: '#ffffff',\n        boxShadow: isActive\n          ? '0 0 20px color-mix(in srgb, var(--sk-primary, #6366f1) 50%, transparent)'\n          : '0 4px 12px rgba(0,0,0,0.3)',\n        border: '2px solid rgba(255,255,255,0.3)',\n        willChange: 'transform',\n      }}\n      aria-label={annotation.label}\n    >\n      {index + 1}\n\n      {/* Tooltip */}\n      {isActive && (\n        <div\n          className=\"absolute bottom-full left-1/2 mb-3 w-56 p-3 rounded-xl text-left\"\n          style={{\n            transform: 'translateX(-50%)',\n            background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n            backdropFilter: 'blur(16px)',\n            border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n            boxShadow: '0 8px 32px rgba(0,0,0,0.3)',\n          }}\n        >\n          <div\n            className=\"text-sm font-semibold mb-1\"\n            style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n          >\n            {annotation.label}\n          </div>\n          <div\n            className=\"text-xs leading-relaxed\"\n            style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n          >\n            {annotation.description}\n          </div>\n          {/* Arrow */}\n          <div\n            className=\"absolute top-full left-1/2 w-0 h-0\"\n            style={{\n              transform: 'translateX(-50%)',\n              borderLeft: '6px solid transparent',\n              borderRight: '6px solid transparent',\n              borderTop: '6px solid var(--sk-border, rgba(255,255,255,0.1))',\n            }}\n          />\n        </div>\n      )}\n    </button>\n  );\n}\n\nexport default function FeatureSpotlightSection({ data }: FeatureSpotlightSectionProps) {\n  const [activeAnnotation, setActiveAnnotation] = useState<number | null>(null);\n\n  const imageUrl = data.image?.asset?._ref || '';\n  const layout = data.layout || 'left';\n\n  const handleSelect = useCallback((index: number | null) => {\n    setActiveAnnotation(index);\n  }, []);\n\n  const imageBlock = (\n    <div className=\"relative w-full\">\n      <img\n        src={imageUrl}\n        alt={data.title}\n        className=\"w-full h-auto rounded-xl\"\n        style={{\n          border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n        }}\n        loading=\"lazy\"\n      />\n      {/* Annotation pins */}\n      {data.annotations.map((annotation, index) => (\n        <AnnotationPin\n          key={index}\n          annotation={annotation}\n          index={index}\n          activeIndex={activeAnnotation}\n          onSelect={handleSelect}\n        />\n      ))}\n    </div>\n  );\n\n  const textBlock = (\n    <div className=\"flex flex-col justify-center gap-4\">\n      <h2\n        className=\"text-3xl md:text-4xl font-bold\"\n        style={{\n          color: 'var(--sk-text-primary, #ffffff)',\n          fontFamily: 'var(--sk-font-heading, inherit)',\n        }}\n      >\n        {data.title}\n      </h2>\n      <p\n        className=\"text-base md:text-lg leading-relaxed\"\n        style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n      >\n        {data.description}\n      </p>\n\n      {/* Annotation legend */}\n      {data.annotations.length > 0 && (\n        <div className=\"flex flex-col gap-2 mt-4\">\n          {data.annotations.map((annotation, index) => (\n            <button\n              key={index}\n              onClick={() => handleSelect(activeAnnotation === index ? null : index)}\n              className=\"flex items-start gap-3 text-left p-2 rounded-lg transition-colors cursor-pointer\"\n              style={{\n                background:\n                  activeAnnotation === index\n                    ? 'color-mix(in srgb, var(--sk-primary, #6366f1) 10%, transparent)'\n                    : 'transparent',\n              }}\n            >\n              <span\n                className=\"flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold shrink-0\"\n                style={{\n                  background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 20%, transparent)',\n                  color: 'var(--sk-primary, #6366f1)',\n                }}\n              >\n                {index + 1}\n              </span>\n              <div>\n                <span\n                  className=\"text-sm font-medium\"\n                  style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                >\n                  {annotation.label}\n                </span>\n              </div>\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-7xl mx-auto px-6\">\n        {layout === 'full' ? (\n          <div className=\"flex flex-col gap-8\">\n            <ScrollReveal y={30}>{textBlock}</ScrollReveal>\n            <ScrollReveal y={40} delay={0.15}>\n              <div className=\"relative\">{imageBlock}</div>\n            </ScrollReveal>\n          </div>\n        ) : (\n          <div\n            className={`grid lg:grid-cols-2 gap-12 items-center ${\n              layout === 'right' ? 'lg:[direction:rtl] lg:[&>*]:![direction:ltr]' : ''\n            }`}\n          >\n            <ScrollReveal y={40}>{imageBlock}</ScrollReveal>\n            <ScrollReveal y={40} delay={0.15}>{textBlock}</ScrollReveal>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/GallerySection-VMKORC47.js

@@ -0,0 +1,218 @@
+'use client';
+import { ScrollReveal } from './chunk-7CFFAKDM.js';
+import { useState, useCallback, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var typeBadgeColors = {
+  screenshot: {
+    bg: "color-mix(in srgb, #6366f1 12%, transparent)",
+    text: "#6366f1",
+    border: "color-mix(in srgb, #6366f1 20%, transparent)"
+  },
+  before: {
+    bg: "color-mix(in srgb, #f59e0b 12%, transparent)",
+    text: "#f59e0b",
+    border: "color-mix(in srgb, #f59e0b 20%, transparent)"
+  },
+  after: {
+    bg: "color-mix(in srgb, #10b981 12%, transparent)",
+    text: "#10b981",
+    border: "color-mix(in srgb, #10b981 20%, transparent)"
+  },
+  design: {
+    bg: "color-mix(in srgb, #ec4899 12%, transparent)",
+    text: "#ec4899",
+    border: "color-mix(in srgb, #ec4899 20%, transparent)"
+  }
+};
+function GallerySection({ data }) {
+  const [lightboxIndex, setLightboxIndex] = useState(null);
+  const layout = data.layout || "grid";
+  const openLightbox = useCallback((index) => {
+    setLightboxIndex(index);
+  }, []);
+  const closeLightbox = useCallback(() => {
+    setLightboxIndex(null);
+  }, []);
+  const goNext = useCallback(() => {
+    setLightboxIndex(
+      (prev) => prev !== null ? (prev + 1) % data.images.length : null
+    );
+  }, [data.images.length]);
+  const goPrev = useCallback(() => {
+    setLightboxIndex(
+      (prev) => prev !== null ? (prev - 1 + data.images.length) % data.images.length : null
+    );
+  }, [data.images.length]);
+  useEffect(() => {
+    if (lightboxIndex === null) return;
+    function handleKeyDown(e) {
+      if (e.key === "Escape") closeLightbox();
+      if (e.key === "ArrowRight") goNext();
+      if (e.key === "ArrowLeft") goPrev();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "";
+    };
+  }, [lightboxIndex, closeLightbox, goNext, goPrev]);
+  function getImageUrl(image) {
+    return image.image.asset._ref || "";
+  }
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto px-6", children: [
+          /* @__PURE__ */ jsx(ScrollReveal, { y: 30, children: /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: "text-3xl md:text-4xl font-bold mb-12",
+              style: {
+                color: "var(--sk-text-primary, #ffffff)",
+                fontFamily: "var(--sk-font-heading, inherit)"
+              },
+              children: "Gallery"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ScrollReveal, { stagger: 0.08, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: layout === "masonry" ? "columns-1 md:columns-2 lg:columns-3 gap-4 space-y-4" : "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+              children: data.images.map((img, index) => {
+                const url = getImageUrl(img);
+                const colors = typeBadgeColors[img.type || "screenshot"] || typeBadgeColors.screenshot;
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: `relative group cursor-pointer overflow-hidden rounded-xl ${layout === "masonry" ? "break-inside-avoid" : ""}`,
+                    style: {
+                      border: "1px solid var(--sk-border, rgba(255,255,255,0.1))"
+                    },
+                    onClick: () => openLightbox(index),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: url,
+                          alt: img.caption || `Gallery image ${index + 1}`,
+                          className: "w-full h-auto object-cover transition-transform duration-500 group-hover:scale-105",
+                          loading: "lazy"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "absolute inset-0 flex flex-col justify-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300",
+                          style: {
+                            background: "linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%)"
+                          },
+                          children: img.caption && /* @__PURE__ */ jsx("p", { className: "text-sm text-white font-medium", children: img.caption })
+                        }
+                      ),
+                      img.type && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "absolute top-3 left-3 px-2.5 py-1 rounded-full text-[11px] uppercase tracking-wider font-medium",
+                          style: {
+                            background: colors.bg,
+                            color: colors.text,
+                            border: `1px solid ${colors.border}`,
+                            backdropFilter: "blur(8px)"
+                          },
+                          children: img.type
+                        }
+                      )
+                    ]
+                  },
+                  index
+                );
+              })
+            }
+          ) })
+        ] }),
+        lightboxIndex !== null && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "fixed inset-0 z-50 flex items-center justify-center",
+            style: { background: "rgba(0,0,0,0.9)" },
+            onClick: closeLightbox,
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: closeLightbox,
+                  className: "absolute top-6 right-6 w-10 h-10 flex items-center justify-center rounded-full transition-colors z-10",
+                  style: {
+                    background: "rgba(255,255,255,0.1)",
+                    color: "#ffffff"
+                  },
+                  "aria-label": "Close lightbox",
+                  children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    goPrev();
+                  },
+                  className: "absolute left-4 md:left-8 w-12 h-12 flex items-center justify-center rounded-full transition-colors z-10",
+                  style: {
+                    background: "rgba(255,255,255,0.1)",
+                    color: "#ffffff"
+                  },
+                  "aria-label": "Previous image",
+                  children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M12.5 15l-5-5 5-5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    goNext();
+                  },
+                  className: "absolute right-4 md:right-8 w-12 h-12 flex items-center justify-center rounded-full transition-colors z-10",
+                  style: {
+                    background: "rgba(255,255,255,0.1)",
+                    color: "#ffffff"
+                  },
+                  "aria-label": "Next image",
+                  children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M7.5 5l5 5-5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "max-w-[90vw] max-h-[85vh] flex flex-col items-center gap-4",
+                  onClick: (e) => e.stopPropagation(),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: getImageUrl(data.images[lightboxIndex]),
+                        alt: data.images[lightboxIndex].caption || "",
+                        className: "max-w-full max-h-[80vh] object-contain rounded-lg"
+                      }
+                    ),
+                    data.images[lightboxIndex].caption && /* @__PURE__ */ jsx("p", { className: "text-sm text-white/70 text-center", children: data.images[lightboxIndex].caption })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { GallerySection as default };
+//# sourceMappingURL=GallerySection-VMKORC47.js.map
+//# sourceMappingURL=GallerySection-VMKORC47.js.map

package/dist/GallerySection-VMKORC47.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/GallerySection.tsx"],"names":[],"mappings":"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","file":"GallerySection-VMKORC47.js","sourcesContent":["'use client';\n\nimport React, { useState, useCallback, useEffect } from 'react';\nimport type { PortfolioGalleryData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\n\ninterface GallerySectionProps {\n  data: PortfolioGalleryData;\n}\n\nconst typeBadgeColors: Record<string, { bg: string; text: string; border: string }> = {\n  screenshot: {\n    bg: 'color-mix(in srgb, #6366f1 12%, transparent)',\n    text: '#6366f1',\n    border: 'color-mix(in srgb, #6366f1 20%, transparent)',\n  },\n  before: {\n    bg: 'color-mix(in srgb, #f59e0b 12%, transparent)',\n    text: '#f59e0b',\n    border: 'color-mix(in srgb, #f59e0b 20%, transparent)',\n  },\n  after: {\n    bg: 'color-mix(in srgb, #10b981 12%, transparent)',\n    text: '#10b981',\n    border: 'color-mix(in srgb, #10b981 20%, transparent)',\n  },\n  design: {\n    bg: 'color-mix(in srgb, #ec4899 12%, transparent)',\n    text: '#ec4899',\n    border: 'color-mix(in srgb, #ec4899 20%, transparent)',\n  },\n};\n\nexport default function GallerySection({ data }: GallerySectionProps) {\n  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);\n\n  const layout = data.layout || 'grid';\n\n  const openLightbox = useCallback((index: number) => {\n    setLightboxIndex(index);\n  }, []);\n\n  const closeLightbox = useCallback(() => {\n    setLightboxIndex(null);\n  }, []);\n\n  const goNext = useCallback(() => {\n    setLightboxIndex((prev) =>\n      prev !== null ? (prev + 1) % data.images.length : null,\n    );\n  }, [data.images.length]);\n\n  const goPrev = useCallback(() => {\n    setLightboxIndex((prev) =>\n      prev !== null ? (prev - 1 + data.images.length) % data.images.length : null,\n    );\n  }, [data.images.length]);\n\n  // Keyboard navigation\n  useEffect(() => {\n    if (lightboxIndex === null) return;\n\n    function handleKeyDown(e: KeyboardEvent) {\n      if (e.key === 'Escape') closeLightbox();\n      if (e.key === 'ArrowRight') goNext();\n      if (e.key === 'ArrowLeft') goPrev();\n    }\n\n    document.addEventListener('keydown', handleKeyDown);\n    document.body.style.overflow = 'hidden';\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.body.style.overflow = '';\n    };\n  }, [lightboxIndex, closeLightbox, goNext, goPrev]);\n\n  function getImageUrl(image: typeof data.images[0]) {\n    // Extract URL from SanityImageRef asset _ref or fall back\n    return image.image.asset._ref || '';\n  }\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-7xl mx-auto px-6\">\n        <ScrollReveal y={30}>\n          <h2\n            className=\"text-3xl md:text-4xl font-bold mb-12\"\n            style={{\n              color: 'var(--sk-text-primary, #ffffff)',\n              fontFamily: 'var(--sk-font-heading, inherit)',\n            }}\n          >\n            Gallery\n          </h2>\n        </ScrollReveal>\n\n        <ScrollReveal stagger={0.08}>\n          <div\n            className={\n              layout === 'masonry'\n                ? 'columns-1 md:columns-2 lg:columns-3 gap-4 space-y-4'\n                : 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'\n            }\n          >\n            {data.images.map((img, index) => {\n              const url = getImageUrl(img);\n              const colors = typeBadgeColors[img.type || 'screenshot'] || typeBadgeColors.screenshot;\n\n              return (\n                <div\n                  key={index}\n                  className={`relative group cursor-pointer overflow-hidden rounded-xl ${\n                    layout === 'masonry' ? 'break-inside-avoid' : ''\n                  }`}\n                  style={{\n                    border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n                  }}\n                  onClick={() => openLightbox(index)}\n                >\n                  <img\n                    src={url}\n                    alt={img.caption || `Gallery image ${index + 1}`}\n                    className=\"w-full h-auto object-cover transition-transform duration-500 group-hover:scale-105\"\n                    loading=\"lazy\"\n                  />\n\n                  {/* Overlay on hover */}\n                  <div\n                    className=\"absolute inset-0 flex flex-col justify-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300\"\n                    style={{\n                      background: 'linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%)',\n                    }}\n                  >\n                    {img.caption && (\n                      <p className=\"text-sm text-white font-medium\">{img.caption}</p>\n                    )}\n                  </div>\n\n                  {/* Type badge */}\n                  {img.type && (\n                    <span\n                      className=\"absolute top-3 left-3 px-2.5 py-1 rounded-full text-[11px] uppercase tracking-wider font-medium\"\n                      style={{\n                        background: colors.bg,\n                        color: colors.text,\n                        border: `1px solid ${colors.border}`,\n                        backdropFilter: 'blur(8px)',\n                      }}\n                    >\n                      {img.type}\n                    </span>\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </ScrollReveal>\n      </div>\n\n      {/* Lightbox modal */}\n      {lightboxIndex !== null && (\n        <div\n          className=\"fixed inset-0 z-50 flex items-center justify-center\"\n          style={{ background: 'rgba(0,0,0,0.9)' }}\n          onClick={closeLightbox}\n        >\n          {/* Close button */}\n          <button\n            onClick={closeLightbox}\n            className=\"absolute top-6 right-6 w-10 h-10 flex items-center justify-center rounded-full transition-colors z-10\"\n            style={{\n              background: 'rgba(255,255,255,0.1)',\n              color: '#ffffff',\n            }}\n            aria-label=\"Close lightbox\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n              <path d=\"M15 5L5 15M5 5l10 10\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n            </svg>\n          </button>\n\n          {/* Prev button */}\n          <button\n            onClick={(e) => { e.stopPropagation(); goPrev(); }}\n            className=\"absolute left-4 md:left-8 w-12 h-12 flex items-center justify-center rounded-full transition-colors z-10\"\n            style={{\n              background: 'rgba(255,255,255,0.1)',\n              color: '#ffffff',\n            }}\n            aria-label=\"Previous image\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n              <path d=\"M12.5 15l-5-5 5-5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n            </svg>\n          </button>\n\n          {/* Next button */}\n          <button\n            onClick={(e) => { e.stopPropagation(); goNext(); }}\n            className=\"absolute right-4 md:right-8 w-12 h-12 flex items-center justify-center rounded-full transition-colors z-10\"\n            style={{\n              background: 'rgba(255,255,255,0.1)',\n              color: '#ffffff',\n            }}\n            aria-label=\"Next image\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n              <path d=\"M7.5 5l5 5-5 5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n            </svg>\n          </button>\n\n          {/* Image */}\n          <div\n            className=\"max-w-[90vw] max-h-[85vh] flex flex-col items-center gap-4\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            <img\n              src={getImageUrl(data.images[lightboxIndex])}\n              alt={data.images[lightboxIndex].caption || ''}\n              className=\"max-w-full max-h-[80vh] object-contain rounded-lg\"\n            />\n            {data.images[lightboxIndex].caption && (\n              <p className=\"text-sm text-white/70 text-center\">\n                {data.images[lightboxIndex].caption}\n              </p>\n            )}\n          </div>\n        </div>\n      )}\n    </section>\n  );\n}\n"]}

package/dist/GallerySection-WJ4PQDBI.cjs

@@ -0,0 +1,219 @@
+'use strict';
+
+var chunkIKBK7HYX_cjs = require('./chunk-IKBK7HYX.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var typeBadgeColors = {
+  screenshot: {
+    bg: "color-mix(in srgb, #6366f1 12%, transparent)",
+    text: "#6366f1",
+    border: "color-mix(in srgb, #6366f1 20%, transparent)"
+  },
+  before: {
+    bg: "color-mix(in srgb, #f59e0b 12%, transparent)",
+    text: "#f59e0b",
+    border: "color-mix(in srgb, #f59e0b 20%, transparent)"
+  },
+  after: {
+    bg: "color-mix(in srgb, #10b981 12%, transparent)",
+    text: "#10b981",
+    border: "color-mix(in srgb, #10b981 20%, transparent)"
+  },
+  design: {
+    bg: "color-mix(in srgb, #ec4899 12%, transparent)",
+    text: "#ec4899",
+    border: "color-mix(in srgb, #ec4899 20%, transparent)"
+  }
+};
+function GallerySection({ data }) {
+  const [lightboxIndex, setLightboxIndex] = react.useState(null);
+  const layout = data.layout || "grid";
+  const openLightbox = react.useCallback((index) => {
+    setLightboxIndex(index);
+  }, []);
+  const closeLightbox = react.useCallback(() => {
+    setLightboxIndex(null);
+  }, []);
+  const goNext = react.useCallback(() => {
+    setLightboxIndex(
+      (prev) => prev !== null ? (prev + 1) % data.images.length : null
+    );
+  }, [data.images.length]);
+  const goPrev = react.useCallback(() => {
+    setLightboxIndex(
+      (prev) => prev !== null ? (prev - 1 + data.images.length) % data.images.length : null
+    );
+  }, [data.images.length]);
+  react.useEffect(() => {
+    if (lightboxIndex === null) return;
+    function handleKeyDown(e) {
+      if (e.key === "Escape") closeLightbox();
+      if (e.key === "ArrowRight") goNext();
+      if (e.key === "ArrowLeft") goPrev();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "";
+    };
+  }, [lightboxIndex, closeLightbox, goNext, goPrev]);
+  function getImageUrl(image) {
+    return image.image.asset._ref || "";
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-7xl mx-auto px-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: "text-3xl md:text-4xl font-bold mb-12",
+              style: {
+                color: "var(--sk-text-primary, #ffffff)",
+                fontFamily: "var(--sk-font-heading, inherit)"
+              },
+              children: "Gallery"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { stagger: 0.08, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: layout === "masonry" ? "columns-1 md:columns-2 lg:columns-3 gap-4 space-y-4" : "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+              children: data.images.map((img, index) => {
+                const url = getImageUrl(img);
+                const colors = typeBadgeColors[img.type || "screenshot"] || typeBadgeColors.screenshot;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: `relative group cursor-pointer overflow-hidden rounded-xl ${layout === "masonry" ? "break-inside-avoid" : ""}`,
+                    style: {
+                      border: "1px solid var(--sk-border, rgba(255,255,255,0.1))"
+                    },
+                    onClick: () => openLightbox(index),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "img",
+                        {
+                          src: url,
+                          alt: img.caption || `Gallery image ${index + 1}`,
+                          className: "w-full h-auto object-cover transition-transform duration-500 group-hover:scale-105",
+                          loading: "lazy"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: "absolute inset-0 flex flex-col justify-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300",
+                          style: {
+                            background: "linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%)"
+                          },
+                          children: img.caption && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white font-medium", children: img.caption })
+                        }
+                      ),
+                      img.type && /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: "absolute top-3 left-3 px-2.5 py-1 rounded-full text-[11px] uppercase tracking-wider font-medium",
+                          style: {
+                            background: colors.bg,
+                            color: colors.text,
+                            border: `1px solid ${colors.border}`,
+                            backdropFilter: "blur(8px)"
+                          },
+                          children: img.type
+                        }
+                      )
+                    ]
+                  },
+                  index
+                );
+              })
+            }
+          ) })
+        ] }),
+        lightboxIndex !== null && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "fixed inset-0 z-50 flex items-center justify-center",
+            style: { background: "rgba(0,0,0,0.9)" },
+            onClick: closeLightbox,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: closeLightbox,
+                  className: "absolute top-6 right-6 w-10 h-10 flex items-center justify-center rounded-full transition-colors z-10",
+                  style: {
+                    background: "rgba(255,255,255,0.1)",
+                    color: "#ffffff"
+                  },
+                  "aria-label": "Close lightbox",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    goPrev();
+                  },
+                  className: "absolute left-4 md:left-8 w-12 h-12 flex items-center justify-center rounded-full transition-colors z-10",
+                  style: {
+                    background: "rgba(255,255,255,0.1)",
+                    color: "#ffffff"
+                  },
+                  "aria-label": "Previous image",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.5 15l-5-5 5-5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    goNext();
+                  },
+                  className: "absolute right-4 md:right-8 w-12 h-12 flex items-center justify-center rounded-full transition-colors z-10",
+                  style: {
+                    background: "rgba(255,255,255,0.1)",
+                    color: "#ffffff"
+                  },
+                  "aria-label": "Next image",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 5l5 5-5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "max-w-[90vw] max-h-[85vh] flex flex-col items-center gap-4",
+                  onClick: (e) => e.stopPropagation(),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: getImageUrl(data.images[lightboxIndex]),
+                        alt: data.images[lightboxIndex].caption || "",
+                        className: "max-w-full max-h-[80vh] object-contain rounded-lg"
+                      }
+                    ),
+                    data.images[lightboxIndex].caption && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/70 text-center", children: data.images[lightboxIndex].caption })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+module.exports = GallerySection;
+//# sourceMappingURL=GallerySection-WJ4PQDBI.cjs.map
+//# sourceMappingURL=GallerySection-WJ4PQDBI.cjs.map

package/dist/GallerySection-WJ4PQDBI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/GallerySection.tsx"],"names":["useState","useCallback","useEffect","jsxs","jsx","ScrollReveal"],"mappings":"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","file":"GallerySection-WJ4PQDBI.cjs","sourcesContent":["'use client';\n\nimport React, { useState, useCallback, useEffect } from 'react';\nimport type { PortfolioGalleryData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\n\ninterface GallerySectionProps {\n  data: PortfolioGalleryData;\n}\n\nconst typeBadgeColors: Record<string, { bg: string; text: string; border: string }> = {\n  screenshot: {\n    bg: 'color-mix(in srgb, #6366f1 12%, transparent)',\n    text: '#6366f1',\n    border: 'color-mix(in srgb, #6366f1 20%, transparent)',\n  },\n  before: {\n    bg: 'color-mix(in srgb, #f59e0b 12%, transparent)',\n    text: '#f59e0b',\n    border: 'color-mix(in srgb, #f59e0b 20%, transparent)',\n  },\n  after: {\n    bg: 'color-mix(in srgb, #10b981 12%, transparent)',\n    text: '#10b981',\n    border: 'color-mix(in srgb, #10b981 20%, transparent)',\n  },\n  design: {\n    bg: 'color-mix(in srgb, #ec4899 12%, transparent)',\n    text: '#ec4899',\n    border: 'color-mix(in srgb, #ec4899 20%, transparent)',\n  },\n};\n\nexport default function GallerySection({ data }: GallerySectionProps) {\n  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);\n\n  const layout = data.layout || 'grid';\n\n  const openLightbox = useCallback((index: number) => {\n    setLightboxIndex(index);\n  }, []);\n\n  const closeLightbox = useCallback(() => {\n    setLightboxIndex(null);\n  }, []);\n\n  const goNext = useCallback(() => {\n    setLightboxIndex((prev) =>\n      prev !== null ? (prev + 1) % data.images.length : null,\n    );\n  }, [data.images.length]);\n\n  const goPrev = useCallback(() => {\n    setLightboxIndex((prev) =>\n      prev !== null ? (prev - 1 + data.images.length) % data.images.length : null,\n    );\n  }, [data.images.length]);\n\n  // Keyboard navigation\n  useEffect(() => {\n    if (lightboxIndex === null) return;\n\n    function handleKeyDown(e: KeyboardEvent) {\n      if (e.key === 'Escape') closeLightbox();\n      if (e.key === 'ArrowRight') goNext();\n      if (e.key === 'ArrowLeft') goPrev();\n    }\n\n    document.addEventListener('keydown', handleKeyDown);\n    document.body.style.overflow = 'hidden';\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.body.style.overflow = '';\n    };\n  }, [lightboxIndex, closeLightbox, goNext, goPrev]);\n\n  function getImageUrl(image: typeof data.images[0]) {\n    // Extract URL from SanityImageRef asset _ref or fall back\n    return image.image.asset._ref || '';\n  }\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-7xl mx-auto px-6\">\n        <ScrollReveal y={30}>\n          <h2\n            className=\"text-3xl md:text-4xl font-bold mb-12\"\n            style={{\n              color: 'var(--sk-text-primary, #ffffff)',\n              fontFamily: 'var(--sk-font-heading, inherit)',\n            }}\n          >\n            Gallery\n          </h2>\n        </ScrollReveal>\n\n        <ScrollReveal stagger={0.08}>\n          <div\n            className={\n              layout === 'masonry'\n                ? 'columns-1 md:columns-2 lg:columns-3 gap-4 space-y-4'\n                : 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'\n            }\n          >\n            {data.images.map((img, index) => {\n              const url = getImageUrl(img);\n              const colors = typeBadgeColors[img.type || 'screenshot'] || typeBadgeColors.screenshot;\n\n              return (\n                <div\n                  key={index}\n                  className={`relative group cursor-pointer overflow-hidden rounded-xl ${\n                    layout === 'masonry' ? 'break-inside-avoid' : ''\n                  }`}\n                  style={{\n                    border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n                  }}\n                  onClick={() => openLightbox(index)}\n                >\n                  <img\n                    src={url}\n                    alt={img.caption || `Gallery image ${index + 1}`}\n                    className=\"w-full h-auto object-cover transition-transform duration-500 group-hover:scale-105\"\n                    loading=\"lazy\"\n                  />\n\n                  {/* Overlay on hover */}\n                  <div\n                    className=\"absolute inset-0 flex flex-col justify-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300\"\n                    style={{\n                      background: 'linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%)',\n                    }}\n                  >\n                    {img.caption && (\n                      <p className=\"text-sm text-white font-medium\">{img.caption}</p>\n                    )}\n                  </div>\n\n                  {/* Type badge */}\n                  {img.type && (\n                    <span\n                      className=\"absolute top-3 left-3 px-2.5 py-1 rounded-full text-[11px] uppercase tracking-wider font-medium\"\n                      style={{\n                        background: colors.bg,\n                        color: colors.text,\n                        border: `1px solid ${colors.border}`,\n                        backdropFilter: 'blur(8px)',\n                      }}\n                    >\n                      {img.type}\n                    </span>\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </ScrollReveal>\n      </div>\n\n      {/* Lightbox modal */}\n      {lightboxIndex !== null && (\n        <div\n          className=\"fixed inset-0 z-50 flex items-center justify-center\"\n          style={{ background: 'rgba(0,0,0,0.9)' }}\n          onClick={closeLightbox}\n        >\n          {/* Close button */}\n          <button\n            onClick={closeLightbox}\n            className=\"absolute top-6 right-6 w-10 h-10 flex items-center justify-center rounded-full transition-colors z-10\"\n            style={{\n              background: 'rgba(255,255,255,0.1)',\n              color: '#ffffff',\n            }}\n            aria-label=\"Close lightbox\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n              <path d=\"M15 5L5 15M5 5l10 10\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n            </svg>\n          </button>\n\n          {/* Prev button */}\n          <button\n            onClick={(e) => { e.stopPropagation(); goPrev(); }}\n            className=\"absolute left-4 md:left-8 w-12 h-12 flex items-center justify-center rounded-full transition-colors z-10\"\n            style={{\n              background: 'rgba(255,255,255,0.1)',\n              color: '#ffffff',\n            }}\n            aria-label=\"Previous image\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n              <path d=\"M12.5 15l-5-5 5-5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n            </svg>\n          </button>\n\n          {/* Next button */}\n          <button\n            onClick={(e) => { e.stopPropagation(); goNext(); }}\n            className=\"absolute right-4 md:right-8 w-12 h-12 flex items-center justify-center rounded-full transition-colors z-10\"\n            style={{\n              background: 'rgba(255,255,255,0.1)',\n              color: '#ffffff',\n            }}\n            aria-label=\"Next image\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n              <path d=\"M7.5 5l5 5-5 5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n            </svg>\n          </button>\n\n          {/* Image */}\n          <div\n            className=\"max-w-[90vw] max-h-[85vh] flex flex-col items-center gap-4\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            <img\n              src={getImageUrl(data.images[lightboxIndex])}\n              alt={data.images[lightboxIndex].caption || ''}\n              className=\"max-w-full max-h-[80vh] object-contain rounded-lg\"\n            />\n            {data.images[lightboxIndex].caption && (\n              <p className=\"text-sm text-white/70 text-center\">\n                {data.images[lightboxIndex].caption}\n              </p>\n            )}\n          </div>\n        </div>\n      )}\n    </section>\n  );\n}\n"]}