novalon-website/src/components/ui/flip-clock.tsx

'use client';

import { useReducer, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

interface FlipCardProps {
  value: number;
  label: string;
  maxDigits?: number;
}

interface FlipDigitProps {
  digit: number;
  prevDigit: number;
}

function FlipDigit({ digit, prevDigit }: FlipDigitProps) {
  return (
    <div className="relative w-14 h-20 sm:w-16 sm:h-24 md:w-20 md:h-28 perspective-1000">
      {/* 背景卡片 - 静态显示当前数字 */}
      <div className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] via-[var(--color-bg-primary)] to-[var(--color-bg-secondary)] rounded-lg shadow-xl overflow-hidden border border-[var(--color-border-primary)]">
        <div className="absolute top-0 left-0 right-0 h-1/2 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] overflow-hidden">
          <div className="absolute inset-0 flex items-center justify-center text-4xl sm:text-5xl md:text-6xl font-bold text-[var(--color-brand)]">
            {digit}
          </div>
        </div>
        <div className="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-bg-secondary)] overflow-hidden">
          <div className="absolute inset-0 flex items-center justify-center text-4xl sm:text-5xl md:text-6xl font-bold text-[var(--color-brand)]">
            {digit}
          </div>
        </div>
      </div>
      
      {/* 翻转动画层 */}
      <AnimatePresence custom={true}>
        {/* 上半部分翻转 */}
        <motion.div
          key={`top-${prevDigit}`}
          initial={{ rotateX: 0 }}
          animate={{ rotateX: -180 }}
          exit={{ rotateX: -180 }}
          transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
          className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-bg-secondary)] rounded-t-lg overflow-hidden border-t border-l border-r border-[var(--color-border-primary)]"
          style={{ 
            transformOrigin: 'bottom',
            backfaceVisibility: 'hidden',
          }}
        >
          <div className="absolute inset-0 flex items-center justify-center text-4xl sm:text-5xl md:text-6xl font-bold text-[var(--color-brand)]">
            {prevDigit}
          </div>
        </motion.div>
        
        {/* 下半部分翻转 */}
        <motion.div
          key={`bottom-${digit}`}
          initial={{ rotateX: 180 }}
          animate={{ rotateX: 0 }}
          exit={{ rotateX: 0 }}
          transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
          className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-bg-secondary)] rounded-b-lg overflow-hidden border-b border-l border-r border-[var(--color-border-primary)]"
          style={{ 
            transformOrigin: 'top',
            backfaceVisibility: 'hidden',
          }}
        >
          <div className="absolute inset-0 flex items-center justify-center text-4xl sm:text-5xl md:text-6xl font-bold text-[var(--color-brand)]">
            {digit}
          </div>
        </motion.div>
      </AnimatePresence>
      
      <div className="absolute top-1/2 left-0 right-0 h-px bg-[var(--color-border-primary)] transform -translate-y-1/2" />
      <div className="absolute top-0 left-0 right-0 h-px bg-[var(--color-border-light)]/50" />
      <div className="absolute bottom-0 left-0 right-0 h-px bg-[var(--color-border-light)]/50" />
      
      {/* 侧面阴影增强立体感 */}
      <div className="absolute inset-0 rounded-lg shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)] pointer-events-none" />
    </div>
  );
}

function FlipCard({ value, label, maxDigits = 2 }: FlipCardProps) {
  const [state, dispatch] = useReducer(
    (prev: { current: number; previous: number }, next: number) => {
      if (next === prev.current) {
        return prev;
      }
      return { current: next, previous: prev.current };
    },
    { current: value, previous: value }
  );
  useEffect(() => {
    dispatch(value);
  }, [value]);

  const formatNumber = (num: number) => {
    const str = num.toString().padStart(maxDigits, '0');
    return str.split('').map(c => parseInt(c));
  };

  const currentDigits = formatNumber(state.current);
  const prevDigits = formatNumber(state.previous);

  return (
    <div className="flex flex-col items-center">
      <div className="flex gap-1 sm:gap-2 mb-3">
        {currentDigits.map((digit, index) => (
          <FlipDigit
            key={index}
            digit={digit}
            prevDigit={prevDigits[index] ?? digit}
          />
        ))}
      </div>
      <div className="text-sm sm:text-base text-[var(--color-text-placeholder)] font-medium">{label}</div>
    </div>
  );
}

interface FlipClockProps {
  years: number;
  months: number;
  days: number;
}

export function FlipClock({ years, months, days }: FlipClockProps) {
  return (
    <div className="bg-[var(--color-bg-secondary)] rounded-2xl p-8 border border-[var(--color-border-primary)]">
      <h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-6">运营时长</h2>
      <p className="text-[var(--color-text-placeholder)] mb-6 leading-relaxed">
        自 <span className="font-semibold text-[var(--color-text-primary)]">2026 年 1 月 15 日</span> 成立以来
      </p>
      
      <div className="flex flex-wrap justify-center items-center gap-4 sm:gap-6 mb-6">
        <FlipCard value={years} label="年" maxDigits={2} />
        <div className="text-2xl sm:text-3xl font-bold text-[var(--color-brand)]">:</div>
        <FlipCard value={months} label="个月" maxDigits={2} />
        <div className="text-2xl sm:text-3xl font-bold text-[var(--color-brand)]">:</div>
        <FlipCard value={days} label="天" maxDigits={3} />
      </div>
      
      <p className="text-[var(--color-text-placeholder)] leading-relaxed font-medium">
        持续打磨产品，致力于为企业提供优质的数字化转型服务
      </p>
    </div>
  );
}