"use client"; import React, { useState, useEffect, useCallback, useLayoutEffect, useRef, } from "react"; import { motion, AnimatePresence, useReducedMotion } from "motion/react"; import { Pizza04Icon, CommandFreeIcons, GlobalSearchIcon, AiCloudIcon, SmartPhone01Icon, CheckmarkCircle01Icon, DashboardSquare01Icon, MagicWandIcon, } from "@hugeicons/core-free-icons"; import { cn } from "@/lib/utils"; import { HugeiconsIcon } from "@hugeicons/react"; const FEATURES = [ { id: "sustainable", label: "تأمین پایدار", icon: Pizza04Icon, image: "/unsplash/1469474968028-56623f02e42e.webp", description: "مواد اولیهٔ اخلاقی از کشاورزان محلی.", }, { id: "community", label: "تمرکز روی جامعه", icon: CommandFreeIcons, image: "/unsplash/1441974231531-c6227db76b6e.webp", description: "پیوندهای قوی‌تر با تجربه‌های مشترک.", }, { id: "global", label: "دسترسی جهانی", icon: GlobalSearchIcon, image: "/unsplash/1470071459604-3b5ec3a7fe05.webp", description: "اتصال رؤیاپردازان در همهٔ قاره‌ها.", }, { id: "award", label: "برندهٔ جایزه", icon: CheckmarkCircle01Icon, image: "/unsplash/1506905925346-21bda4d32df4.webp", description: "کیفیت و نوآوری به‌رسمیت‌شناخته‌شده.", }, { id: "cloud", label: "آمادهٔ ابر", icon: AiCloudIcon, image: "/unsplash/1500530855697-b586d89ba3ee.webp", description: "زیرساخت را بدون دردسر بزرگ کنید.", }, { id: "mobile", label: "موبایل‌محور", icon: SmartPhone01Icon, image: "/unsplash/1492691527719-9d1e07e534b4.webp", description: "تجربه‌ای عالی روی هر دستگاه.", }, { id: "analytics", label: "تحلیل لحظه‌ای", icon: DashboardSquare01Icon, image: "/unsplash/1460925895917-afdab827c52f.webp", description: "بینش دم‌دست، به‌روز در لحظه.", }, { id: "security", label: "امنیت سازمانی", icon: CheckmarkCircle01Icon, image: "/unsplash/1502920917128-1aa500764cbd.webp", description: "پروتکل‌های امنیتی بانکی برای دادهٔ شما.", }, { id: "magic", label: "خودکارسازی جادویی", icon: MagicWandIcon, image: "/unsplash/1511285560929-80b456fea0bc.webp", description: "کارهای تکراری را به هوش مصنوعی بسپارید.", }, { id: "local", label: "مالکیت محلی", icon: CheckmarkCircle01Icon, image: "/unsplash/1500530855697-b586d89ba3ee.webp", description: "حمایت از کسب‌وکارها و سازندگان محلی.", }, ]; const AUTO_PLAY_INTERVAL = 3000; const ITEM_HEIGHT = 65; function shortestOffset(index: number, current: number, len: number) { let d = ((index - current) % len + len) % len; if (d > len / 2) d -= len; return d; } function toFaDigits(n: number) { return n.toLocaleString("fa-IR"); } const chipSpring = { type: "tween" as const, duration: 0.42, ease: [0.4, 0, 0.2, 1] as const, }; const cardSpring = { type: "tween" as const, duration: 0.38, ease: [0.4, 0, 0.2, 1] as const, }; export default function FeatureCarousel() { const [step, setStep] = useState(0); const [isPaused, setIsPaused] = useState(false); const reduceMotion = useReducedMotion(); const len = FEATURES.length; const currentIndex = ((step % len) + len) % len; const nextStep = useCallback(() => { setStep((prev) => prev + 1); }, []); const handleChipClick = (index: number) => { const delta = shortestOffset(index, currentIndex, len); if (delta !== 0) setStep((s) => s + delta); }; useEffect(() => { if (isPaused) return; const interval = setInterval(nextStep, AUTO_PLAY_INTERVAL); return () => clearInterval(interval); }, [nextStep, isPaused]); const getCardStatus = (index: number) => { const d = shortestOffset(index, currentIndex, len); if (d === 0) return "active"; if (d === -1) return "prev"; if (d === 1) return "next"; return "hidden"; }; return (

{FEATURES.map((feature, index) => ( handleChipClick(index)} onPause={() => setIsPaused(true)} onResume={() => setIsPaused(false)} /> ))}

{FEATURES.map((feature, index) => { const status = getCardStatus(index); const isActive = status === "active"; const isPrev = status === "prev"; const isNext = status === "next"; return (

{isActive && (

{toFaDigits(index + 1)} • {feature.label}

{feature.description}

)} ); })}

); } function FeatureChip({ feature, index, currentIndex, total, reduceMotion, onSelect, onPause, onResume, }: { feature: (typeof FEATURES)[number]; index: number; currentIndex: number; total: number; reduceMotion: boolean; onSelect: () => void; onPause: () => void; onResume: () => void; }) { const offset = shortestOffset(index, currentIndex, total); const prevOffset = useRef(offset); const jumped = Math.abs(offset - prevOffset.current) > 1; useLayoutEffect(() => { prevOffset.current = offset; }, [offset]); const isActive = offset === 0; return ( ); }