Initial ASPHP website

app/Countdown.js

@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+function getRemaining(target) {
+  const diff = Math.max(0, target - Date.now());
+  const days = Math.floor(diff / 86400000);
+  const hours = Math.floor((diff % 86400000) / 3600000);
+  const minutes = Math.floor((diff % 3600000) / 60000);
+  const seconds = Math.floor((diff % 60000) / 1000);
+  return { days, hours, minutes, seconds };
+}
+
+export default function Countdown() {
+  const target = useMemo(() => Date.now() + 72 * 60 * 60 * 1000, []);
+  const [time, setTime] = useState(() => getRemaining(target));
+  const [isMounted, setIsMounted] = useState(false);
+  const units = [
+    ["seconds", "ثانیه", time.seconds],
+    ["minutes", "دقیقه", time.minutes],
+    ["hours", "ساعت", time.hours],
+    ["days", "روز", time.days]
+  ];
+
+  useEffect(() => {
+    setIsMounted(true);
+    const timer = setInterval(() => setTime(getRemaining(target)), 1000);
+    return () => clearInterval(timer);
+  }, [target]);
+
+  return (
+    <div className="sale-countdown" aria-label="زمان باقی مانده فروش ویژه">
+      <span className="sale-countdown-label">پایان فروش ویژه</span>
+      {units.map(([name, label, value]) => {
+        const display = String(value).padStart(2, "0");
+        return (
+          <span className="flip-unit" key={name}>
+            <strong className={`flip-card ${isMounted ? "flip-changing" : ""}`} key={`${name}-${display}`}>{display}</strong>
+            <small>{label}</small>
+          </span>
+        );
+      })}
+    </div>
+  );
+}