blocks-dusted 0.1.12 → 0.1.13

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

@@ -1,936 +1,937 @@
-'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 justify-end 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 */}
-        #BlockName-DDHorizontalScroll
-        {sectionLabel && (
-          <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',
-              }}
-            >
-              {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',
-    },
-  )
-}
+'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 justify-end 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 min-w-full w-full"
+      // !!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)`,
+      }}
+    >
+      <style>{'body:has(.studio-hscrollblock) { overflow-x: clip; }'}</style>
+      <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-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',
+              }}
+            >
+              {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',
+    },
+  )
+}