"use client"; import React, { useState, useCallback, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import * as TooltipPrimitive from "@radix-ui/react-tooltip"; // ========================================== // 1. HYDRATION-SAFE TOOLTIP COMPONENTS // ========================================== export function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps) { return ( ); } export function Tooltip({ ...props }: React.ComponentProps) { return ; } export function TooltipTrigger({ ...props }: React.ComponentProps) { return ( ); } export function TooltipContent({ className = "", sideOffset = 4, children, ...props }: React.ComponentProps) { return ( {children} ); } // ========================================== // 2. ACTION BUTTON COMPONENT // ========================================== export interface ActionButtonProps { label: string; active?: boolean; disabled?: boolean; onClick?: () => void; icon?: React.ReactNode; children?: React.ReactNode; } export function ActionButton({ label, active = false, disabled = false, onClick, icon, children, }: ActionButtonProps) { const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); if (!mounted) { return ( ); } return (

{label}

); } // ========================================== // 3. ACCORDION OS COMPONENT // ========================================== export interface AccordionItem { id?: string | number; title: string; badge?: string; claim: string; image: string; alt?: string; } export interface AccordionOSProps { items?: AccordionItem[]; staticImage?: string; defaultActiveIndex?: number | null; className?: string; containerHeight?: number | string; containerWidth?: number | string; autoPlay?: boolean; autoPlayInterval?: number; pauseOnHover?: boolean; onItemChange?: (index: number | null) => void; } const FA_DIGITS = "۰۱۲۳۴۵۶۷۸۹"; function toFaDigits(value: string | number) { return String(value).replace(/\d/g, (d) => FA_DIGITS[Number(d)] ?? d); } function toFaPad2(value: number) { return toFaDigits(String(value).padStart(2, "0")); } function FaDigits({ value, className = "", }: { value: string | number; className?: string; }) { const text = toFaDigits(value); return ( {[...text].map((ch, i) => ( ))} ); } const DEFAULT_ITEMS: AccordionItem[] = [ { id: 1, title: "مرکز کردن", badge: "۰۱", claim: "گل را تا مرکز مردهٔ چرخ فشار دهید. تا وقتی که نلرزد، هیچ کار دیگری دوام نمی‌آورد.", image: "/unsplash/1469474968028-56623f02e42e.webp", alt: "دست‌ها در حال مرکز کردن گل خیس روی چرخ سفالگری", }, { id: 2, title: "کشیدن دیواره", badge: "۰۲", claim: "دو انگشت داخل، یکی بیرون. آهسته و یکنواخت بکشید — دیواره بالا می‌آید یا فرو می‌ریزد.", image: "/unsplash/1469854523086-cc02fe5d8800.webp", alt: "سفالگر در حال کشیدن دیوارهٔ کاسه روی چرخ", }, { id: 3, title: "آماده‌سازی لعاب", badge: "۰۳", claim: "اکسیدها در کاسه‌های کوچک مخلوط می‌شوند و روی خرده‌کاشی آزمایش می‌شوند. کوره تصمیم می‌گیرد دستور شما درست بوده یا نه.", image: "/unsplash/1470071459604-3b5ec3a7fe05.webp", alt: "کاسه‌های لعاب سرامیکی رنگی روی میز کارگاه", }, { id: 4, title: "تراشیدن", badge: "۰۴", claim: "حلقهٔ پایه وقتی کاسه هنوز چرم‌سخت است بریده می‌شود. یک برش عمیق‌تر و ماه‌ها کار به سطل گل می‌رود.", image: "/unsplash/1470240731273-7821a6eeb6bd.webp", alt: "سفالگر در حال تراشیدن یک کاسهٔ سرامیکی پهن در کارگاه", }, { id: 5, title: "اثر نهایی", badge: "۰۵", claim: "ترک خنک‌شدن، درهایی که جا می‌خورند، دسته‌هایی به ضخامت چای داغ. کوره تأیید کرد.", image: "/unsplash/1470770841072-f978cf4d019e.webp", alt: "کاسه‌ها و گلدان‌های سرامیکی دست‌ساز در ویترین", }, ]; const DEFAULT_STATIC_IMAGE = "/unsplash/1472099645785-5658abf4ff4e.webp"; const springPhysics = { type: "spring" as const, stiffness: 340, damping: 28, mass: 0.8, }; const bouncySpring = { type: "spring" as const, stiffness: 400, damping: 22, }; export function AccordionOS({ items = DEFAULT_ITEMS, staticImage = DEFAULT_STATIC_IMAGE, defaultActiveIndex = 0, className = "", containerHeight = 520, containerWidth = 840, autoPlay = true, autoPlayInterval = 3500, pauseOnHover = true, onItemChange, }: AccordionOSProps) { const [activeIndex, setActiveIndex] = useState(defaultActiveIndex); const [isHovered, setIsHovered] = useState(false); const handleToggle = useCallback( (index: number) => { setActiveIndex((prev) => { const next = prev === index ? null : index; onItemChange?.(next); return next; }); }, [onItemChange] ); const handlePrev = useCallback(() => { setActiveIndex((prev) => { if (prev === null) return 0; const next = prev > 0 ? prev - 1 : items.length - 1; onItemChange?.(next); return next; }); }, [items.length, onItemChange]); const handleNext = useCallback(() => { setActiveIndex((prev) => { if (prev === null) return 0; const next = prev < items.length - 1 ? prev + 1 : 0; onItemChange?.(next); return next; }); }, [items.length, onItemChange]); // Automatic slide changing (AutoPlay) useEffect(() => { if (!autoPlay || (pauseOnHover && isHovered)) return; const interval = setInterval(() => { handleNext(); }, autoPlayInterval); return () => clearInterval(interval); }, [autoPlay, autoPlayInterval, pauseOnHover, isHovered, handleNext]); // Global Keyboard Navigation (ArrowUp, ArrowDown, W/S, 1-5, Escape) useEffect(() => { const handleGlobalKeyDown = (e: KeyboardEvent) => { const tag = (e.target as HTMLElement)?.tagName?.toLowerCase(); if (tag === "input" || tag === "textarea" || (e.target as HTMLElement)?.isContentEditable) { return; } if (e.key === "ArrowDown" || e.key === "ArrowRight" || e.key.toLowerCase() === "s") { e.preventDefault(); handleNext(); } else if (e.key === "ArrowUp" || e.key === "ArrowLeft" || e.key.toLowerCase() === "w") { e.preventDefault(); handlePrev(); } else if (e.key === "Escape") { e.preventDefault(); setActiveIndex(null); onItemChange?.(null); } else if (["1", "2", "3", "4", "5"].includes(e.key)) { const num = parseInt(e.key, 10) - 1; if (num < items.length) { e.preventDefault(); setActiveIndex(num); onItemChange?.(num); } } }; window.addEventListener("keydown", handleGlobalKeyDown); return () => window.removeEventListener("keydown", handleGlobalKeyDown); }, [handleNext, handlePrev, items.length, onItemChange]); return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} className={`accordion-os-root ${className}`} style={{ width: typeof containerWidth === "number" ? `${containerWidth}px` : containerWidth, maxWidth: "100%", }} > {/* Left Interactive Column */}

{/* Accordion Items */}

{items.map((item, index) => { const isOpen = activeIndex === index; return ( handleToggle(index)} tabIndex={0} role="button" aria-expanded={isOpen} whileHover={{ scale: isOpen ? 1.01 : 1.03, x: 3 }} whileTap={{ scale: 0.98 }} className={`accordion-os-pill ${isOpen ? "accordion-os-pill-open" : "accordion-os-pill-closed"}`} >

{item.title} {isOpen && item.badge ? ( ) : null}

{isOpen && ( {item.claim} )} ); })}

{/* Bottom Floating Navigation Deck */}

{activeIndex !== null && (

)}

{/* Persistent Pre-Decoded Instant GPU Layers */}

{/* Static Default Image */} ظروف سرامیکی دست‌ساز روی قفسهٔ کارگاه

{/* 5 Slide Images */} {items.map((item, idx) => { const isActive = activeIndex === idx; return ( {item.alt

); })}

{/* Embedded Component Styles */}