Shutter CTA

1"use client"
2
3import Link from "next/link"
4import { useRef, useState } from "react"
5import { useRouter } from "next/navigation"
6
7type Props = {
8    baseDelay?: number; // starting time offset
9};
10
11export function ArrowBlock({ baseDelay = 0 }: Props) {
12    const pattern = [
13        [1, 1, 0, 0],
14        [0, 1, 1, 0],
15        [0, 0, 1, 1],
16        [0, 1, 1, 0],
17        [1, 1, 0, 0],
18    ];
19
20    return (
21        <div className="grid gap-px grid-cols-4">
22            {pattern.flatMap((row, r) =>
23                row.map((cell, c) => {
24                    if (!cell) {
25                        return (
26                            <div
27                                key={`${r}-${c}`}
28                                className="h-[4px] w-[4px]"
29                            />
30                        );
31                    }
32                    const delay = baseDelay + (c * 120 + r * 60);
33                    return (
34                        <div
35                            key={`${r}-${c}`}
36                            className="h-[4px] w-[4px] bg-white rounded-full"
37                            style={{
38                                animation: `dotPulse 1.5s ease-in-out infinite`,
39                                animationDelay: `${delay}ms`,
40                            }}
41                        />
42                    );
43                })
44            )}
45            <style jsx>{`
46                @keyframes dotPulse {
47                    0%, 100% { opacity: 0.2; }
48                    50% { opacity: 1; }
49                }
50            `}</style>
51        </div>
52    );
53}
54
55const arrows = [
56    { delay: 0 },
57    { delay: 200 },
58    { delay: 400 },
59    { delay: 600 },
60    { delay: 800 },
61];
62
63const INITIAL_W = 42
64const SLIDE_THRESHOLD = 0.6 // 60% of max drag triggers navigation
65
66export function ShutterCta() {
67    const router = useRouter()
68    const buttonRef = useRef<HTMLButtonElement>(null)
69    const touchStartX = useRef(0)
70    const [dragWidth, setDragWidth] = useState<number | null>(null)
71    const isDragging = useRef(false)
72
73    const handleTouchStart = (e: React.TouchEvent) => {
74        touchStartX.current = e.touches[0].clientX
75        isDragging.current = true
76        setDragWidth(INITIAL_W)
77    }
78
79    const handleTouchMove = (e: React.TouchEvent) => {
80        if (!isDragging.current || !buttonRef.current) return
81        const btnW = buttonRef.current.offsetWidth
82// … truncated