blocks-dusted 0.1.0

package/templates/blocks/DD-HorizontalScroll/Component.tsx

@@ -0,0 +1,995 @@
+"use client";
+
+import { useLayoutEffect, useRef, useMemo } from "react";
+import Image from "next/image";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import dynamic from "next/dynamic";
+
+const DotLottieReact = dynamic(
+  () => import("@lottiefiles/dotlottie-react").then((m) => m.DotLottieReact),
+  { ssr: false, loading: () => null },
+);
+import {
+  PencilRuler,
+  Code2,
+  Rocket,
+  TrendingUp,
+  Settings,
+  BarChart2,
+  Users,
+  Globe,
+  Zap,
+  Layers,
+  ShieldCheck,
+  Lightbulb,
+  Puzzle,
+  Star,
+  Check,
+  UserPlus,
+  Send,
+  ArrowUp,
+  Hammer,
+} from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+type Media = { url?: string | null; alt?: string | null; [key: string]: any };
+
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(ScrollTrigger);
+}
+
+/* ── Types ─────────────────────────────────────────────────────── */
+
+interface TagItem {
+  id?: string;
+  tag: string;
+}
+
+interface SlideItem {
+  id?: string;
+  phase?: string | null;
+  watermark?: string | null;
+  icon?: string | null;
+  accent?: "lime" | "purple" | null;
+  headline?: string | null;
+  sub?: string | null;
+  body?: string | null;
+  tags?: TagItem[] | null;
+  visualType?:
+    | "wireframe"
+    | "codeEditor"
+    | "pipeline"
+    | "funnel"
+    | "automation"
+    | null;
+  customMedia?: Media | string | null;
+  customMediaType?: "image" | "video" | "lottie" | null;
+}
+
+interface DDHorizontalScrollProps {
+  id?: string | null;
+  sectionLabel?: string | null;
+  slides?: SlideItem[] | null;
+  sectionId?: string | null;
+  enableCustomCSS?: boolean | null;
+  customCSS?: string | null;
+  [key: string]: unknown;
+}
+
+/* ── Accent helpers ─────────────────────────────────────────────── */
+
+const ACCENTS = {
+  lime: { hex: "#84cc16", rgb: "132,204,22" },
+  purple: { hex: "#9803e2", rgb: "152,3,226" },
+} as const;
+
+type AccentKey = keyof typeof ACCENTS;
+
+function getAccent(key?: string | null) {
+  return ACCENTS[(key as AccentKey) ?? "lime"] ?? ACCENTS.lime;
+}
+
+/* ── Icon map ───────────────────────────────────────────────────── */
+
+const ICON_MAP: Record<string, LucideIcon> = {
+  penRuler: PencilRuler,
+  code2: Code2,
+  rocket: Rocket,
+  trendingUp: TrendingUp,
+  settings: Settings,
+  barChart2: BarChart2,
+  users: Users,
+  globe: Globe,
+  zap: Zap,
+  layers: Layers,
+  shieldCheck: ShieldCheck,
+  lightbulb: Lightbulb,
+  puzzle: Puzzle,
+  star: Star,
+};
+
+function SlideIcon({
+  name,
+  size = 14,
+  style,
+}: {
+  name?: string | null;
+  size?: number;
+  style?: React.CSSProperties;
+}) {
+  const Icon = ICON_MAP[name ?? "star"] ?? Star;
+  return <Icon size={size} style={style} />;
+}
+
+/* ── Visual panels ─────────────────────────────────────────────── */
+
+function WireframeVisual({ accent }: { accent: string }) {
+  const { hex, rgb } = getAccent(accent);
+  return (
+    <section className="relative w-full h-full flex items-center justify-center">
+      <div className="relative w-64 h-64 scale-80 md:scale-100">
+        <div
+          className="absolute inset-0 rounded-2xl border"
+          style={{
+            borderColor: `rgba(${rgb},0.2)`,
+            background: `rgba(${rgb},0.03)`,
+          }}
+        >
+          <div className="p-4 space-y-3">
+            <div
+              className="h-3 rounded-full w-3/4"
+              style={{ background: `rgba(${rgb},0.3)` }}
+            />
+            <div
+              className="h-2 rounded-full w-full"
+              style={{ background: "rgba(255,255,255,0.08)" }}
+            />
+            <div
+              className="h-2 rounded-full w-5/6"
+              style={{ background: "rgba(255,255,255,0.08)" }}
+            />
+            <div className="grid grid-cols-2 gap-2 mt-4">
+              <div
+                className="h-16 rounded-lg"
+                style={{
+                  background: `rgba(${rgb},0.08)`,
+                  border: `1px solid rgba(${rgb},0.15)`,
+                }}
+              />
+              <div
+                className="h-16 rounded-lg"
+                style={{
+                  background: "rgba(255,255,255,0.04)",
+                  border: "1px solid rgba(255,255,255,0.08)",
+                }}
+              />
+            </div>
+            <div
+              className="h-8 rounded-full mt-2"
+              style={{
+                background: `rgba(${rgb},0.2)`,
+                border: `1px solid rgba(${rgb},0.4)`,
+              }}
+            />
+          </div>
+        </div>
+        {/* Cursor dot */}
+        <div
+          className="absolute -right-4 top-1/3 w-5 h-5 rounded-full border-2 flex items-center justify-center"
+          style={{ borderColor: hex, background: `rgba(${rgb},0.15)` }}
+        >
+          <div
+            className="w-1.5 h-1.5 rounded-full"
+            style={{ background: hex }}
+          />
+        </div>
+        {/* Grid bg */}
+        <div
+          className="absolute -inset-6 pointer-events-none"
+          style={{
+            backgroundImage: `linear-gradient(rgba(${rgb},0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(${rgb},0.05) 1px, transparent 1px)`,
+            backgroundSize: "24px 24px",
+          }}
+        />
+      </div>
+    </section>
+  );
+}
+
+function CodeEditorVisual({ accent }: { accent: string }) {
+  const { hex, rgb } = getAccent(accent);
+  return (
+    <div className="relative w-full h-full flex items-center justify-center scale-80 md:scale-100">
+      <div
+        className="relative w-72 rounded-xl overflow-hidden"
+        style={{ background: "#0d0d0d", border: `1px solid rgba(${rgb},0.15)` }}
+      >
+        {/* Title bar */}
+        <div
+          className="flex items-center gap-2 px-4 py-3 border-b"
+          style={{ borderColor: "rgba(255,255,255,0.06)" }}
+        >
+          <div
+            className="w-3 h-3 rounded-full"
+            style={{ background: "#ff5f57" }}
+          />
+          <div
+            className="w-3 h-3 rounded-full"
+            style={{ background: "#febc2e" }}
+          />
+          <div
+            className="w-3 h-3 rounded-full"
+            style={{ background: "#28c840" }}
+          />
+          <span
+            className="ml-2 text-xs"
+            style={{ color: "rgba(255,255,255,0.3)", fontFamily: "monospace" }}
+          >
+            index.tsx
+          </span>
+        </div>
+        {/* Code lines */}
+        <div className="p-4 space-y-1.5 font-mono text-xs">
+          <div>
+            <span style={{ color: "#9803e2" }}>const</span>{" "}
+            <span style={{ color: hex }}>Hero</span>{" "}
+            <span style={{ color: "rgba(255,255,255,0.4)" }}>=</span>{" "}
+            <span style={{ color: "#9803e2" }}>()</span>{" "}
+            <span style={{ color: "rgba(255,255,255,0.4)" }}>=&gt;</span>{" "}
+            <span style={{ color: "rgba(255,255,255,0.4)" }}>{"{"}</span>
+          </div>
+          <div className="pl-4">
+            <span style={{ color: "#9803e2" }}>return</span>{" "}
+            <span style={{ color: "rgba(255,255,255,0.4)" }}>(</span>
+          </div>
+          <div className="pl-8">
+            <span style={{ color: "rgba(255,255,255,0.3)" }}>&lt;</span>
+            <span style={{ color: hex }}>section</span>{" "}
+            <span style={{ color: "#9803e2" }}>className</span>
+            <span style={{ color: "rgba(255,255,255,0.3)" }}>=</span>
+            <span style={{ color: "#febc2e" }}>"hero"</span>
+            <span style={{ color: "rgba(255,255,255,0.3)" }}>&gt;</span>
+          </div>
+          <div className="pl-12">
+            <span style={{ color: "rgba(255,255,255,0.3)" }}>&lt;</span>
+            <span style={{ color: hex }}>h1</span>
+            <span style={{ color: "rgba(255,255,255,0.3)" }}>&gt;</span>
+            <span style={{ color: "rgba(255,255,255,0.6)" }}>Convert.</span>
+            <span style={{ color: "rgba(255,255,255,0.3)" }}>&lt;/</span>
+            <span style={{ color: hex }}>h1</span>
+            <span style={{ color: "rgba(255,255,255,0.3)" }}>&gt;</span>
+          </div>
+          <div className="pl-8">
+            <span style={{ color: "rgba(255,255,255,0.3)" }}>&lt;/</span>
+            <span style={{ color: hex }}>section</span>
+            <span style={{ color: "rgba(255,255,255,0.3)" }}>&gt;</span>
+          </div>
+          <div className="pl-4">
+            <span style={{ color: "rgba(255,255,255,0.4)" }}>)</span>
+          </div>
+          <div>
+            <span style={{ color: "rgba(255,255,255,0.4)" }}>{"}"}</span>
+          </div>
+          <div className="mt-2 flex items-center gap-2">
+            <span style={{ color: "rgba(255,255,255,0.2)" }}>{"// "}</span>
+            <span
+              className="inline-block w-2 h-4 animate-pulse"
+              style={{ background: hex }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function PipelineVisual() {
+  const steps = [
+    { label: "Build", status: "done", Icon: Hammer },
+    { label: "Test", status: "done", Icon: ShieldCheck },
+    { label: "Deploy", status: "active", Icon: Rocket },
+    { label: "Live", status: "pending", Icon: Globe },
+  ];
+  return (
+    <div className="relative w-full h-full flex items-center justify-center scale-80 md:scale-100">
+      <div className="relative w-64">
+        {steps.map((step, i) => (
+          <div key={i} className="flex items-center gap-3 mb-3">
+            <div
+              className="w-9 h-9 rounded-full flex items-center justify-center shrink-0"
+              style={{
+                background:
+                  step.status === "done"
+                    ? "rgba(132,204,22,0.15)"
+                    : step.status === "active"
+                      ? "rgba(152,3,226,0.2)"
+                      : "rgba(255,255,255,0.04)",
+                border: `1px solid ${
+                  step.status === "done"
+                    ? "rgba(132,204,22,0.4)"
+                    : step.status === "active"
+                      ? "rgba(152,3,226,0.5)"
+                      : "rgba(255,255,255,0.1)"
+                }`,
+              }}
+            >
+              <step.Icon
+                size={14}
+                style={{
+                  color:
+                    step.status === "done"
+                      ? "#84cc16"
+                      : step.status === "active"
+                        ? "#9803e2"
+                        : "rgba(255,255,255,0.2)",
+                }}
+              />
+            </div>
+            <div className="flex-1">
+              <div className="flex items-center justify-between">
+                <span
+                  className="text-sm font-semibold"
+                  style={{
+                    color:
+                      step.status === "pending"
+                        ? "rgba(255,255,255,0.2)"
+                        : "rgba(255,255,255,0.8)",
+                    fontFamily: "'Plus Jakarta Sans', sans-serif",
+                  }}
+                >
+                  {step.label}
+                </span>
+                {step.status === "done" && (
+                  <Check size={12} style={{ color: "#84cc16" }} />
+                )}
+                {step.status === "active" && (
+                  <span
+                    className="text-xs animate-pulse"
+                    style={{ color: "#9803e2" }}
+                  >
+                    Running…
+                  </span>
+                )}
+              </div>
+              <div
+                className="h-1 rounded-full mt-1.5"
+                style={{ background: "rgba(255,255,255,0.06)" }}
+              >
+                <div
+                  className="h-full rounded-full"
+                  style={{
+                    width:
+                      step.status === "done"
+                        ? "100%"
+                        : step.status === "active"
+                          ? "60%"
+                          : "0%",
+                    background: step.status === "done" ? "#84cc16" : "#9803e2",
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function FunnelVisual({ accent }: { accent: string }) {
+  const { hex, rgb } = getAccent(accent);
+  const rows = [
+    { label: "Visitors", value: "24,800", pct: 100 },
+    { label: "Engaged", value: "11,200", pct: 65 },
+    { label: "Leads", value: "3,840", pct: 40 },
+    { label: "Converted", value: "960", pct: 22 },
+  ];
+  return (
+    <div className="relative w-full h-full flex items-center justify-center scale-80 md:scale-100">
+      <div className="relative w-64 space-y-3">
+        {rows.map((row, i) => (
+          <div key={i}>
+            <div
+              className="flex justify-between text-xs mb-1"
+              style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}
+            >
+              <span style={{ color: "rgba(255,255,255,0.4)" }}>
+                {row.label}
+              </span>
+              <span style={{ color: "rgba(255,255,255,0.7)" }}>
+                {row.value}
+              </span>
+            </div>
+            <div
+              className="h-2 rounded-full"
+              style={{ background: "rgba(255,255,255,0.06)" }}
+            >
+              <div
+                className="h-full rounded-full"
+                style={{ width: `${row.pct}%`, background: hex }}
+              />
+            </div>
+          </div>
+        ))}
+        <div
+          className="mt-4 p-3 rounded-xl flex items-center gap-3"
+          style={{
+            background: `rgba(${rgb},0.08)`,
+            border: `1px solid rgba(${rgb},0.2)`,
+          }}
+        >
+          <ArrowUp size={18} style={{ color: hex }} />
+          <div>
+            <div
+              className="text-xs font-bold"
+              style={{
+                color: hex,
+                fontFamily: "'Plus Jakarta Sans', sans-serif",
+              }}
+            >
+              +3.2× Conversion Rate
+            </div>
+            <div
+              className="text-xs"
+              style={{
+                color: "rgba(255,255,255,0.3)",
+                fontFamily: "'Plus Jakarta Sans', sans-serif",
+              }}
+            >
+              vs. industry average
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function AutomationVisual() {
+  const flows = [
+    {
+      from: "New Lead",
+      to: "CRM",
+      Icon: UserPlus,
+      color: "#9803e2",
+      rgb: "152,3,226",
+    },
+    {
+      from: "CRM",
+      to: "Email Seq.",
+      Icon: Send,
+      color: "#84cc16",
+      rgb: "132,204,22",
+    },
+    {
+      from: "Email Seq.",
+      to: "Sales Team",
+      Icon: Users,
+      color: "#9803e2",
+      rgb: "152,3,226",
+    },
+  ];
+  return (
+    <div className="relative w-full h-full flex items-center justify-center scale-80 md:scale-100">
+      <div className="relative w-64">
+        {flows.map((flow, i) => (
+          <div key={i} className="flex items-center gap-2 mb-4">
+            <div
+              className="px-3 py-2 rounded-lg text-xs font-semibold whitespace-nowrap"
+              style={{
+                background: "rgba(255,255,255,0.05)",
+                border: "1px solid rgba(255,255,255,0.1)",
+                color: "rgba(255,255,255,0.6)",
+                fontFamily: "'Plus Jakarta Sans', sans-serif",
+              }}
+            >
+              {flow.from}
+            </div>
+            <div className="flex-1 flex items-center gap-1">
+              <div
+                className="flex-1 h-px"
+                style={{ background: `rgba(${flow.rgb},0.4)` }}
+              />
+              <div
+                className="w-6 h-6 rounded-full flex items-center justify-center"
+                style={{
+                  background: `rgba(${flow.rgb},0.15)`,
+                  border: `1px solid ${flow.color}`,
+                }}
+              >
+                <flow.Icon size={10} style={{ color: flow.color }} />
+              </div>
+              <div
+                className="flex-1 h-px"
+                style={{ background: `rgba(${flow.rgb},0.4)` }}
+              />
+            </div>
+            <div
+              className="px-3 py-2 rounded-lg text-xs font-semibold whitespace-nowrap"
+              style={{
+                background: `rgba(${flow.rgb},0.1)`,
+                border: `1px solid ${flow.color}40`,
+                color: flow.color,
+                fontFamily: "'Plus Jakarta Sans', sans-serif",
+              }}
+            >
+              {flow.to}
+            </div>
+          </div>
+        ))}
+        <div
+          className="mt-2 p-3 rounded-xl text-center"
+          style={{
+            background: "rgba(152,3,226,0.08)",
+            border: "1px solid rgba(152,3,226,0.2)",
+          }}
+        >
+          <div
+            className="text-xs font-bold flex items-center justify-center gap-1"
+            style={{
+              color: "#9803e2",
+              fontFamily: "'Plus Jakarta Sans', sans-serif",
+            }}
+          >
+            <Zap size={12} />
+            Fully automated. Zero manual steps.
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const VISUAL_MAP: Record<string, React.ComponentType<{ accent: string }>> = {
+  wireframe: WireframeVisual,
+  codeEditor: CodeEditorVisual,
+  pipeline: PipelineVisual as React.ComponentType<{ accent: string }>,
+  funnel: FunnelVisual,
+  automation: AutomationVisual as React.ComponentType<{ accent: string }>,
+};
+
+/* ── Slide panel ────────────────────────────────────────────────── */
+
+interface SlidePanelProps {
+  slide: SlideItem;
+  index: number;
+  total: number;
+  panelRef: (el: HTMLDivElement | null) => void;
+}
+
+function isLocalMediaSrc(src?: string | null): src is string {
+  return typeof src === "string" && src.startsWith("/api/media/file/");
+}
+
+function SlidePanel({ slide, index, total, panelRef }: SlidePanelProps) {
+  const { hex, rgb } = getAccent(slide.accent);
+  const Visual = VISUAL_MAP[slide.visualType ?? "wireframe"] ?? WireframeVisual;
+
+  // Extract media URL safely
+  const mediaUrl: string =
+    typeof slide.customMedia === "string"
+      ? slide.customMedia
+      : (slide.customMedia?.url ?? "");
+  const safeMediaUrl = isLocalMediaSrc(mediaUrl) ? mediaUrl : "";
+  const mediaAlt =
+    slide.customMedia && typeof slide.customMedia !== "string"
+      ? (slide.customMedia.alt ?? "")
+      : "";
+
+  return (
+    <div
+      ref={panelRef}
+      className={`shs-slide shs-slide--${index} relative shrink-0 h-full flex items-center overflow-hidden`}
+      style={{ width: "100vw" }}
+    >
+      {/* Watermark number */}
+      <div
+        className="absolute top-1/2 -translate-y-1/2 right-16 font-black select-none pointer-events-none text-stone-200/40 dark:text-stone-200/5"
+        style={{
+          fontSize: "clamp(120px, 18vw, 220px)",
+
+          lineHeight: 1,
+        }}
+      >
+        {slide.watermark}
+        {/* {String(index + 1).padStart(2, '0')} */}
+      </div>
+
+      {/* Vertical divider */}
+      {index < total - 1 && (
+        <div
+          className="absolute right-0 top-1/4 bottom-1/4 w-px"
+          style={{
+            background:
+              "linear-gradient(to bottom, transparent, rgba(255,255,255,0.08), transparent)",
+          }}
+        />
+      )}
+
+      <div className="relative z-10 w-full max-w-6xl mx-auto px-6 md:px-16 grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-20 items-center">
+        {/* ── Left: content ── */}
+        <div className="space-y-2 md:space-y-7">
+          {/* Phase badge */}
+          <div className="anim-el flex items-center gap-3">
+            <div
+              className="w-7 h-7 md:w-8 md:h-8 rounded-full flex items-center justify-center"
+              style={{
+                background: `rgba(${rgb},0.12)`,
+                border: `1px solid rgba(${rgb},0.3)`,
+              }}
+            >
+              <SlideIcon name={slide.icon} size={14} style={{ color: hex }} />
+            </div>
+            <span
+              className="text-xs scale-90 origin-top-left font-black tracking-widest uppercase"
+              style={{
+                color: hex,
+              }}
+            >
+              {slide.phase}
+            </span>
+          </div>
+
+          {/* Headline */}
+          <h2
+            className="anim-el font-extrabold leading-none tracking-tight text-stone-900 dark:text-stone-50"
+            style={{
+              fontSize: "clamp(42px, 5vw, 72px)",
+
+              whiteSpace: "pre-line",
+            }}
+          >
+            {" "}
+            <span className="relative">
+              {(slide.headline ?? "").replace(/\\n/g, "\n")}
+            </span>
+          </h2>
+
+          {/* Sub */}
+          {slide.sub && (
+            <p
+              className="anim-el text-sm md:text-md font-semibold"
+              style={{
+                color: hex,
+              }}
+            >
+              {" "}
+              <span className="relative">{slide.sub}</span>
+            </p>
+          )}
+
+          {/* Body */}
+          {slide.body && (
+            <p
+              className="anim-el text-sm md:text-md leading-relaxed max-w-md text-stone-600 dark:text-stone-200"
+              // style={{
+              //   fontFamily: "'Plus Jakarta Sans', sans-serif",
+              // }}
+            >
+              {" "}
+              <span className="relative"> {slide.body}</span>
+            </p>
+          )}
+
+          {/* Tags */}
+          {slide.tags && slide.tags.length > 0 && (
+            <div className="anim-el flex flex-wrap gap-2 scale-80 md:scale-100 origin-bottom-left">
+              {slide.tags.map((t, ti) => (
+                <span
+                  key={t.id ?? ti}
+                  className="px-3 py-1 rounded-full text-xs font-semibold bg-lines"
+                  style={{
+                    background: `rgba(${rgb},0.08)`,
+                    border: `1px solid rgba(${rgb},0.2)`,
+                    color: hex,
+                    fontFamily: "'Plus Jakarta Sans', sans-serif",
+                  }}
+                >
+                  {t.tag}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* ── Right: visual ── */}
+        <div
+          className="anim-el relative h-56 md:h-80 rounded-2xl overflow-hidden flex items-center justify-center"
+          style={{
+            background: `linear-gradient(135deg, rgba(${rgb},0.15) 0%, rgba(0,0,0,0) 100%)`,
+            border: `1px solid rgba(${rgb},0.5)`,
+          }}
+        >
+          {/* Glow */}
+          <div
+            className="absolute inset-0 pointer-events-none"
+            style={{
+              background: `radial-gradient(ellipse at 50% 50%, rgba(${rgb},0.08) 0%, transparent 70%)`,
+            }}
+          />
+          <div className="relative z-10 w-full h-full">
+            {slide.customMedia && safeMediaUrl ? (
+              <>
+                {slide.customMediaType === "image" && (
+                  <div className="relative w-full h-full bg-dots">
+                    <Image
+                      src={safeMediaUrl}
+                      alt={mediaAlt}
+                      fill
+                      sizes="(max-width: 1024px) 100vw, 50vw"
+                      className="object-cover"
+                      priority={index === 0}
+                      quality={90}
+                    />
+                  </div>
+                )}
+                {slide.customMediaType === "video" && (
+                  <video
+                    src={safeMediaUrl}
+                    autoPlay
+                    loop
+                    muted
+                    playsInline
+                    preload="metadata"
+                    className="w-full h-full object-cover bg-dots"
+                    aria-label={mediaAlt || "Video content"}
+                  />
+                )}
+                {slide.customMediaType === "lottie" && (
+                  <DotLottieReact
+                    src={safeMediaUrl}
+                    loop
+                    autoplay
+                    className="w-full h-full object-cover bg-dots"
+                  />
+                )}
+              </>
+            ) : (
+              <Visual accent={slide.accent ?? "lime"} />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ── Main component ─────────────────────────────────────────────── */
+
+export function DDHorizontalScroll(props: DDHorizontalScrollProps) {
+  const { sectionLabel, slides, sectionId, enableCustomCSS, customCSS } = props;
+
+  const outerRef = useRef<HTMLElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const trackRef = useRef<HTMLDivElement>(null);
+  const slideRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const activeSlideRef = useRef<number>(-1);
+
+  // Memoize normalized slides to avoid unnecessary re-renders
+  const normalSlides: SlideItem[] = useMemo(() => slides ?? [], [slides]);
+  const slideCount = normalSlides.length;
+
+  /* ── GSAP horizontal scroll + pin + snap ── */
+  useLayoutEffect(() => {
+    if (typeof window === "undefined") return;
+    if (slideCount === 0) return;
+
+    // Store ctx outside the timer so cleanup always reaches it
+    let ctx: ReturnType<typeof gsap.context> | null = null;
+    let initTimer: ReturnType<typeof setTimeout>;
+    let resizeTimer: ReturnType<typeof setTimeout>;
+    let rafId: number;
+
+    const init = () => {
+      const outerEl = outerRef.current;
+      const wrapper = wrapperRef.current;
+      const track = trackRef.current;
+      if (!outerEl || !wrapper || !track) return;
+
+      // Kill any stale ScrollTriggers on this element (e.g. from Strict-Mode double mount)
+      ScrollTrigger.getAll()
+        .filter((st) => st.vars.trigger === outerEl)
+        .forEach((st) => st.kill());
+
+      ctx = gsap.context(() => {
+        ScrollTrigger.create({
+          trigger: outerEl,
+          start: "top top",
+          end: () => `+=${(slideCount - 1) * window.innerWidth}`,
+          scrub: 0.5,
+          invalidateOnRefresh: true,
+          onUpdate: (self) => {
+            gsap.set(track, {
+              x: -(slideCount - 1) * window.innerWidth * self.progress,
+            });
+
+            const newActive = Math.round(self.progress * (slideCount - 1));
+            if (newActive !== activeSlideRef.current) {
+              activeSlideRef.current = newActive;
+              animateSlideIn(slideRefs.current[newActive]);
+            }
+          },
+        });
+      }, outerEl);
+
+      // Animate first slide in on mount
+      animateSlideIn(slideRefs.current[1]);
+      activeSlideRef.current = 1;
+
+      // Refresh so ScrollTrigger measures the fully-painted layout
+      ScrollTrigger.refresh();
+    };
+
+    // Double rAF inside a timeout: waits for SSR hydration, LocomotiveScroll init
+    // and web-font paint before measuring. 200 ms covers the loco 100 ms delay too.
+    initTimer = setTimeout(() => {
+      rafId = requestAnimationFrame(() => {
+        requestAnimationFrame(init);
+      });
+    }, 200);
+
+    // Debounced resize — recalculates pin length and slide positions
+    const onResize = () => {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(() => {
+        ScrollTrigger.refresh(true);
+      }, 150);
+    };
+
+    window.addEventListener("resize", onResize);
+    // Also respond to locomotive:resize dispatched by PageClient
+    window.addEventListener("locomotive:resize", onResize);
+
+    return () => {
+      clearTimeout(initTimer);
+      clearTimeout(resizeTimer);
+      cancelAnimationFrame(rafId);
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("locomotive:resize", onResize);
+      ctx?.revert();
+      ctx = null;
+    };
+  }, [slideCount, sectionId]);
+
+  // offset next block
+  const getOffset = () => {
+    if (typeof window === "undefined") return 25;
+
+    if (window.matchMedia("(max-width: 420px)").matches) return 550;
+    if (window.matchMedia("(max-width: 768px)").matches) return 300;
+
+    return 25;
+  };
+
+  const offset = getOffset();
+  return (
+    <section
+      ref={outerRef}
+      id={sectionId ?? undefined}
+      className="studio-hscrollblock relative z-30 top-0"
+      // !!Note: First & Last child slides set to opacity 0 to rectify scroll. offset for next block entry. Use svh to offset and FirstSlide_width(!vw)
+      style={{
+        height: `calc((${Math.max(0, slideCount + 2)} * 100svh + 100svh) - ${offset}svh)`,
+      }}
+    >
+      <div
+        ref={wrapperRef}
+        className="shs-wrapper sticky overflow-hidden top-0"
+        style={{
+          height: "100svh",
+        }}
+      >
+        {/* Custom CSS */}
+        {enableCustomCSS && customCSS && (
+          <style
+            dangerouslySetInnerHTML={{
+              __html: sectionId
+                ? customCSS.replace(/:host/g, `#${sectionId}`)
+                : customCSS.replace(/:host/g, ".shs-wrapper"),
+            }}
+          />
+        )}
+
+        {/* Subtle grid overlay */}
+        {/* <div
+        className="absolute inset-0 pointer-events-none z-0"
+        style={{
+          backgroundImage: `
+            linear-gradient(rgba(132,204,22,0.02) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(132,204,22,0.02) 1px, transparent 1px)
+          `,
+          backgroundSize: '60px 60px'
+        }}
+      /> */}
+
+        {/* Section eyebrow label */}
+        {sectionLabel && (
+          <div className="section-label absolute top-16 left-4 z-20 flex items-center gap-3">
+            <div className="w-6 h-px" style={{ background: "#84cc16" }} />
+            <span
+              className="text-[11.5px] font-semibold tracking-wide uppercase"
+              style={{
+                color: "#84cc16",
+              }}
+            >
+              {sectionLabel}
+            </span>
+          </div>
+        )}
+
+        {/* Slide dot counter */}
+        <div className="slide-counter absolute top-16 right-6 z-20 flex items-center gap-2">
+          {normalSlides.map((_, i) => (
+            <div
+              key={i}
+              className="w-1.5 h-1.5 rounded-full hidden"
+              style={{ background: "rgba(255,255,255,0.2)" }}
+            />
+          ))}
+        </div>
+
+        {/* Horizontal track */}
+        <div
+          ref={trackRef}
+          className="absolute top-0 left-0 flex h-full"
+          style={{ willChange: "transform" }}
+        >
+          {normalSlides.map((slide, i) => (
+            <SlidePanel
+              key={slide.id ?? i}
+              slide={slide}
+              index={i}
+              total={normalSlides.length - 1}
+              panelRef={(el) => {
+                slideRefs.current[i] = el;
+              }}
+            />
+          ))}
+        </div>
+
+        {/* Scroll hint */}
+        {/* <div
+          className="scroll-hint absolute bottom-16 left-1/2 -translate-x-1/2 z-20 flex flex-col items-center gap-2"
+          style={{ color: 'rgba(255,255,255,0.2)' }}
+        >
+          <span
+            className="text-xs tracking-widest uppercase"
+            style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}
+          >
+            Scroll to explore
+          </span>
+          <div className="flex gap-1">
+            {[0, 1, 2].map((d) => (
+              <div
+                key={d}
+                className="w-1 h-1 rounded-full animate-bounce"
+                style={{ background: 'rgba(255,255,255,0.3)', animationDelay: `${d * 0.15}s` }}
+              />
+            ))}
+          </div>
+        </div> */}
+      </div>
+    </section>
+  );
+}
+
+/* ── Entrance animation helper ──────────────────────────────────── */
+
+function animateSlideIn(el: HTMLDivElement | null) {
+  if (!el) return;
+  const animEls = el.querySelectorAll<HTMLElement>(".anim-el");
+  if (!animEls.length) return;
+  gsap.fromTo(
+    animEls,
+    { opacity: 1, y: 0 },
+    {
+      opacity: 1,
+      y: 0,
+      stagger: 0.07,
+      duration: 0.55,
+      ease: "power4.out",
+      overwrite: true,
+      clearProps: "transform",
+    },
+  );
+}