blocks-dusted 0.1.0 → 0.1.2

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

@@ -1,15 +1,15 @@
-"use client";
+'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";
+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),
+  () => import('@lottiefiles/dotlottie-react').then((m) => m.DotLottieReact),
   { ssr: false, loading: () => null },
-);
+)
 import {
   PencilRuler,
   Code2,
@@ -30,63 +30,57 @@ import {
   Send,
   ArrowUp,
   Hammer,
-} from "lucide-react";
-import type { LucideIcon } from "lucide-react";
-type Media = { url?: string | null; alt?: string | null; [key: string]: any };
+} 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);
+if (typeof window !== 'undefined') {
+  gsap.registerPlugin(ScrollTrigger)
 }
 
 /* ── Types ─────────────────────────────────────────────────────── */
 
 interface TagItem {
-  id?: string;
-  tag: string;
+  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;
+  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;
+  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;
+  lime: { hex: '#84cc16', rgb: '132,204,22' },
+  purple: { hex: '#9803e2', rgb: '152,3,226' },
+} as const
 
-type AccentKey = keyof typeof ACCENTS;
+type AccentKey = keyof typeof ACCENTS
 
 function getAccent(key?: string | null) {
-  return ACCENTS[(key as AccentKey) ?? "lime"] ?? ACCENTS.lime;
+  return ACCENTS[(key as AccentKey) ?? 'lime'] ?? ACCENTS.lime
 }
 
 /* ── Icon map ───────────────────────────────────────────────────── */
@@ -106,25 +100,25 @@ const ICON_MAP: Record<string, LucideIcon> = {
   lightbulb: Lightbulb,
   puzzle: Puzzle,
   star: Star,
-};
+}
 
 function SlideIcon({
   name,
   size = 14,
   style,
 }: {
-  name?: string | null;
-  size?: number;
-  style?: React.CSSProperties;
+  name?: string | null
+  size?: number
+  style?: React.CSSProperties
 }) {
-  const Icon = ICON_MAP[name ?? "star"] ?? Star;
-  return <Icon size={size} style={style} />;
+  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);
+  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">
@@ -136,17 +130,14 @@ function WireframeVisual({ accent }: { accent: string }) {
           }}
         >
           <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-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)" }}
+              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)" }}
+              style={{ background: 'rgba(255,255,255,0.08)' }}
             />
             <div className="grid grid-cols-2 gap-2 mt-4">
               <div
@@ -159,8 +150,8 @@ function WireframeVisual({ accent }: { accent: string }) {
               <div
                 className="h-16 rounded-lg"
                 style={{
-                  background: "rgba(255,255,255,0.04)",
-                  border: "1px solid rgba(255,255,255,0.08)",
+                  background: 'rgba(255,255,255,0.04)',
+                  border: '1px solid rgba(255,255,255,0.08)',
                 }}
               />
             </div>
@@ -178,52 +169,40 @@ function WireframeVisual({ accent }: { accent: string }) {
           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 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",
+            backgroundSize: '24px 24px',
           }}
         />
       </div>
     </section>
-  );
+  )
 }
 
 function CodeEditorVisual({ accent }: { accent: string }) {
-  const { hex, rgb } = getAccent(accent);
+  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)` }}
+        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)" }}
+          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" }}
-          />
+          <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" }}
+            style={{ color: 'rgba(255,255,255,0.3)', fontFamily: 'monospace' }}
           >
             index.tsx
           </span>
@@ -231,65 +210,61 @@ function CodeEditorVisual({ accent }: { accent: string }) {
         {/* 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>
+            <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>
+            <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>
+            <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: '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: '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>
+            <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: '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>
+            <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>
+            <span style={{ color: 'rgba(255,255,255,0.4)' }}>)</span>
           </div>
           <div>
-            <span style={{ color: "rgba(255,255,255,0.4)" }}>{"}"}</span>
+            <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 }}
-            />
+            <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 },
-  ];
+    { 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">
@@ -299,17 +274,17 @@ function PipelineVisual() {
               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)",
+                  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.status === 'done'
+                    ? 'rgba(132,204,22,0.4)'
+                    : step.status === 'active'
+                      ? 'rgba(152,3,226,0.5)'
+                      : 'rgba(255,255,255,0.1)'
                 }`,
               }}
             >
@@ -317,11 +292,11 @@ function PipelineVisual() {
                 size={14}
                 style={{
                   color:
-                    step.status === "done"
-                      ? "#84cc16"
-                      : step.status === "active"
-                        ? "#9803e2"
-                        : "rgba(255,255,255,0.2)",
+                    step.status === 'done'
+                      ? '#84cc16'
+                      : step.status === 'active'
+                        ? '#9803e2'
+                        : 'rgba(255,255,255,0.2)',
                 }}
               />
             </div>
@@ -331,40 +306,29 @@ function PipelineVisual() {
                   className="text-sm font-semibold"
                   style={{
                     color:
-                      step.status === "pending"
-                        ? "rgba(255,255,255,0.2)"
-                        : "rgba(255,255,255,0.8)",
+                      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" }}
-                  >
+                {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)" }}
+                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",
+                      step.status === 'done' ? '100%' : step.status === 'active' ? '60%' : '0%',
+                    background: step.status === 'done' ? '#84cc16' : '#9803e2',
                   }}
                 />
               </div>
@@ -373,17 +337,17 @@ function PipelineVisual() {
         ))}
       </div>
     </div>
-  );
+  )
 }
 
 function FunnelVisual({ accent }: { accent: string }) {
-  const { hex, rgb } = getAccent(accent);
+  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 },
-  ];
+    { 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">
@@ -393,17 +357,10 @@ function FunnelVisual({ accent }: { accent: string }) {
               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>
+              <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-2 rounded-full" style={{ background: 'rgba(255,255,255,0.06)' }}>
               <div
                 className="h-full rounded-full"
                 style={{ width: `${row.pct}%`, background: hex }}
@@ -432,7 +389,7 @@ function FunnelVisual({ accent }: { accent: string }) {
             <div
               className="text-xs"
               style={{
-                color: "rgba(255,255,255,0.3)",
+                color: 'rgba(255,255,255,0.3)',
                 fontFamily: "'Plus Jakarta Sans', sans-serif",
               }}
             >
@@ -442,33 +399,33 @@ function FunnelVisual({ accent }: { accent: string }) {
         </div>
       </div>
     </div>
-  );
+  )
 }
 
 function AutomationVisual() {
   const flows = [
     {
-      from: "New Lead",
-      to: "CRM",
+      from: 'New Lead',
+      to: 'CRM',
       Icon: UserPlus,
-      color: "#9803e2",
-      rgb: "152,3,226",
+      color: '#9803e2',
+      rgb: '152,3,226',
     },
     {
-      from: "CRM",
-      to: "Email Seq.",
+      from: 'CRM',
+      to: 'Email Seq.',
       Icon: Send,
-      color: "#84cc16",
-      rgb: "132,204,22",
+      color: '#84cc16',
+      rgb: '132,204,22',
     },
     {
-      from: "Email Seq.",
-      to: "Sales Team",
+      from: 'Email Seq.',
+      to: 'Sales Team',
       Icon: Users,
-      color: "#9803e2",
-      rgb: "152,3,226",
+      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">
@@ -477,19 +434,16 @@ function AutomationVisual() {
             <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)",
+                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="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={{
@@ -499,10 +453,7 @@ function AutomationVisual() {
               >
                 <flow.Icon size={10} style={{ color: flow.color }} />
               </div>
-              <div
-                className="flex-1 h-px"
-                style={{ background: `rgba(${flow.rgb},0.4)` }}
-              />
+              <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"
@@ -520,14 +471,14 @@ function AutomationVisual() {
         <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)",
+            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",
+              color: '#9803e2',
               fontFamily: "'Plus Jakarta Sans', sans-serif",
             }}
           >
@@ -537,7 +488,7 @@ function AutomationVisual() {
         </div>
       </div>
     </div>
-  );
+  )
 }
 
 const VISUAL_MAP: Record<string, React.ComponentType<{ accent: string }>> = {
@@ -546,47 +497,43 @@ const VISUAL_MAP: Record<string, React.ComponentType<{ accent: string }>> = {
   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;
+  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/");
+  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;
+  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 : "";
+    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 ?? "")
-      : "";
+    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" }}
+      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)",
+          fontSize: 'clamp(120px, 18vw, 220px)',
 
           lineHeight: 1,
         }}
@@ -601,7 +548,7 @@ function SlidePanel({ slide, index, total, panelRef }: SlidePanelProps) {
           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)",
+              'linear-gradient(to bottom, transparent, rgba(255,255,255,0.08), transparent)',
           }}
         />
       )}
@@ -610,7 +557,7 @@ function SlidePanel({ slide, index, total, panelRef }: SlidePanelProps) {
         {/* ── Left: content ── */}
         <div className="space-y-2 md:space-y-7">
           {/* Phase badge */}
-          <div className="anim-el flex items-center gap-3">
+          <div className="anim-el flex items-center justify-end gap-3">
             <div
               className="w-7 h-7 md:w-8 md:h-8 rounded-full flex items-center justify-center"
               style={{
@@ -634,15 +581,13 @@ function SlidePanel({ slide, index, total, panelRef }: SlidePanelProps) {
           <h2
             className="anim-el font-extrabold leading-none tracking-tight text-stone-900 dark:text-stone-50"
             style={{
-              fontSize: "clamp(42px, 5vw, 72px)",
+              fontSize: 'clamp(42px, 5vw, 72px)',
 
-              whiteSpace: "pre-line",
+              whiteSpace: 'pre-line',
             }}
           >
-            {" "}
-            <span className="relative">
-              {(slide.headline ?? "").replace(/\\n/g, "\n")}
-            </span>
+            {' '}
+            <span className="relative">{(slide.headline ?? '').replace(/\\n/g, '\n')}</span>
           </h2>
 
           {/* Sub */}
@@ -653,7 +598,7 @@ function SlidePanel({ slide, index, total, panelRef }: SlidePanelProps) {
                 color: hex,
               }}
             >
-              {" "}
+              {' '}
               <span className="relative">{slide.sub}</span>
             </p>
           )}
@@ -666,7 +611,7 @@ function SlidePanel({ slide, index, total, panelRef }: SlidePanelProps) {
               //   fontFamily: "'Plus Jakarta Sans', sans-serif",
               // }}
             >
-              {" "}
+              {' '}
               <span className="relative"> {slide.body}</span>
             </p>
           )}
@@ -710,7 +655,7 @@ function SlidePanel({ slide, index, total, panelRef }: SlidePanelProps) {
           <div className="relative z-10 w-full h-full">
             {slide.customMedia && safeMediaUrl ? (
               <>
-                {slide.customMediaType === "image" && (
+                {slide.customMediaType === 'image' && (
                   <div className="relative w-full h-full bg-dots">
                     <Image
                       src={safeMediaUrl}
@@ -723,7 +668,7 @@ function SlidePanel({ slide, index, total, panelRef }: SlidePanelProps) {
                     />
                   </div>
                 )}
-                {slide.customMediaType === "video" && (
+                {slide.customMediaType === 'video' && (
                   <video
                     src={safeMediaUrl}
                     autoPlay
@@ -732,10 +677,10 @@ function SlidePanel({ slide, index, total, panelRef }: SlidePanelProps) {
                     playsInline
                     preload="metadata"
                     className="w-full h-full object-cover bg-dots"
-                    aria-label={mediaAlt || "Video content"}
+                    aria-label={mediaAlt || 'Video content'}
                   />
                 )}
-                {slide.customMediaType === "lottie" && (
+                {slide.customMediaType === 'lottie' && (
                   <DotLottieReact
                     src={safeMediaUrl}
                     loop
@@ -745,123 +690,123 @@ function SlidePanel({ slide, index, total, panelRef }: SlidePanelProps) {
                 )}
               </>
             ) : (
-              <Visual accent={slide.accent ?? "lime"} />
+              <Visual accent={slide.accent ?? 'lime'} />
             )}
           </div>
         </div>
       </div>
     </div>
-  );
+  )
 }
 
 /* ── Main component ─────────────────────────────────────────────── */
 
 export function DDHorizontalScroll(props: DDHorizontalScrollProps) {
-  const { sectionLabel, slides, sectionId, enableCustomCSS, customCSS } = props;
+  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);
+  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;
+  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;
+    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;
+    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;
+      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());
+        .forEach((st) => st.kill())
 
       ctx = gsap.context(() => {
         ScrollTrigger.create({
           trigger: outerEl,
-          start: "top top",
+          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));
+            const newActive = Math.round(self.progress * (slideCount - 1))
             if (newActive !== activeSlideRef.current) {
-              activeSlideRef.current = newActive;
-              animateSlideIn(slideRefs.current[newActive]);
+              activeSlideRef.current = newActive
+              animateSlideIn(slideRefs.current[newActive])
             }
           },
-        });
-      }, outerEl);
+        })
+      }, outerEl)
 
       // Animate first slide in on mount
-      animateSlideIn(slideRefs.current[1]);
-      activeSlideRef.current = 1;
+      animateSlideIn(slideRefs.current[1])
+      activeSlideRef.current = 1
 
       // Refresh so ScrollTrigger measures the fully-painted layout
-      ScrollTrigger.refresh();
-    };
+      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);
+        requestAnimationFrame(init)
+      })
+    }, 200)
 
     // Debounced resize — recalculates pin length and slide positions
     const onResize = () => {
-      clearTimeout(resizeTimer);
+      clearTimeout(resizeTimer)
       resizeTimer = setTimeout(() => {
-        ScrollTrigger.refresh(true);
-      }, 150);
-    };
+        ScrollTrigger.refresh(true)
+      }, 150)
+    }
 
-    window.addEventListener("resize", onResize);
+    window.addEventListener('resize', onResize)
     // Also respond to locomotive:resize dispatched by PageClient
-    window.addEventListener("locomotive:resize", onResize);
+    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]);
+      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 (typeof window === 'undefined') return 25
 
-    if (window.matchMedia("(max-width: 420px)").matches) return 550;
-    if (window.matchMedia("(max-width: 768px)").matches) return 300;
+    if (window.matchMedia('(max-width: 420px)').matches) return 550
+    if (window.matchMedia('(max-width: 768px)').matches) return 300
 
-    return 25;
-  };
+    return 25
+  }
 
-  const offset = getOffset();
+  const offset = getOffset()
   return (
     <section
       ref={outerRef}
@@ -876,7 +821,7 @@ export function DDHorizontalScroll(props: DDHorizontalScrollProps) {
         ref={wrapperRef}
         className="shs-wrapper sticky overflow-hidden top-0"
         style={{
-          height: "100svh",
+          height: '100svh',
         }}
       >
         {/* Custom CSS */}
@@ -885,11 +830,10 @@ export function DDHorizontalScroll(props: DDHorizontalScrollProps) {
             dangerouslySetInnerHTML={{
               __html: sectionId
                 ? customCSS.replace(/:host/g, `#${sectionId}`)
-                : customCSS.replace(/:host/g, ".shs-wrapper"),
+                : customCSS.replace(/:host/g, '.shs-wrapper'),
             }}
           />
         )}
-
         {/* Subtle grid overlay */}
         {/* <div
         className="absolute inset-0 pointer-events-none z-0"
@@ -901,38 +845,36 @@ export function DDHorizontalScroll(props: DDHorizontalScrollProps) {
           backgroundSize: '60px 60px'
         }}
       /> */}
-
         {/* Section eyebrow label */}
+        #BlockName-DDHorizontalScroll
         {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" }} />
+          <div className="section-label absolute top-8 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",
+                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)" }}
+              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" }}
+          style={{ willChange: 'transform' }}
         >
           {normalSlides.map((slide, i) => (
             <SlidePanel
@@ -941,12 +883,11 @@ export function DDHorizontalScroll(props: DDHorizontalScrollProps) {
               index={i}
               total={normalSlides.length - 1}
               panelRef={(el) => {
-                slideRefs.current[i] = 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"
@@ -970,15 +911,15 @@ export function DDHorizontalScroll(props: DDHorizontalScrollProps) {
         </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;
+  if (!el) return
+  const animEls = el.querySelectorAll<HTMLElement>('.anim-el')
+  if (!animEls.length) return
   gsap.fromTo(
     animEls,
     { opacity: 1, y: 0 },
@@ -987,9 +928,9 @@ function animateSlideIn(el: HTMLDivElement | null) {
       y: 0,
       stagger: 0.07,
       duration: 0.55,
-      ease: "power4.out",
+      ease: 'power4.out',
       overwrite: true,
-      clearProps: "transform",
+      clearProps: 'transform',
     },
-  );
+  )
 }