asset-homepage/components/HowItWorksSection.tsx

'use client';

import { useState, useEffect, useRef } from 'react';
import Image from 'next/image';
import { Card, CardBody, Chip } from '@heroui/react';
import { useLanguage } from '@/contexts/LanguageContext';
import { useTheme } from '@/contexts/ThemeContext';

// 数字增长动画Hook
function useCountUp(end: number, duration: number = 1500, startRangePercent: number = 0.75) {
  const [mounted, setMounted] = useState(false);
  const [count, setCount] = useState(end);
  const elementRef = useRef<HTMLDivElement>(null);
  const startValueRef = useRef<number>(end);
  const timerRef = useRef<NodeJS.Timeout | null>(null);

  useEffect(() => {
    setMounted(true);
    startValueRef.current = Math.floor(end * (startRangePercent + Math.random() * 0.15));
    setCount(startValueRef.current);
  }, [end, startRangePercent]);

  useEffect(() => {
    if (!mounted) return;

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          // 清除之前可能存在的 timer
          if (timerRef.current) {
            clearInterval(timerRef.current);
          }

          const start = startValueRef.current;
          const startTime = Date.now();

          const timer = setInterval(() => {
            const elapsed = Date.now() - startTime;
            const progress = Math.min(elapsed / duration, 1);

            const easeOutCubic = 1 - Math.pow(1 - progress, 3);
            const currentCount = Math.floor(start + (end - start) * easeOutCubic);

            setCount(currentCount);

            if (progress === 1) {
              setCount(end);
              clearInterval(timer);
              timerRef.current = null;
            }
          }, 16);

          timerRef.current = timer;
        } else {
          if (timerRef.current) {
            clearInterval(timerRef.current);
            timerRef.current = null;
          }
          setCount(startValueRef.current);
        }
      },
      { threshold: 0.1 }
    );

    if (elementRef.current) {
      observer.observe(elementRef.current);
    }

    return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current);
      }
      observer.disconnect();
    };
  }, [end, duration, mounted]);

  return { count, elementRef };
}

export default function HowItWorksSection() {
  const { t } = useLanguage();
  const { theme } = useTheme();
  const [animate, setAnimate] = useState(false);
  const [activeStep, setActiveStep] = useState(1);
  const sectionRef = useRef<HTMLElement>(null);

  const investAmount = useCountUp(100000, 1500, 0.85);
  const earnAmount = useCountUp(5150, 1500, 0.85);

  useEffect(() => {
    const currentRef = sectionRef.current;
    if (!currentRef) return;

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          setAnimate(true);
          observer.disconnect();
        }
      },
      { threshold: 0.3 }
    );

    observer.observe(currentRef);
    return () => observer.disconnect();
  }, []);

  const isDark = theme === 'dark';

  const steps = [
    {
      number: 1,
      title: t('how.step1.title'),
      description: t('how.step1.desc'),
      hasLine: true
    },
    {
      number: 2,
      title: t('how.step2.title'),
      description: t('how.step2.desc'),
      hasLine: true
    },
    {
      number: 3,
      title: t('how.step3.title'),
      description: t('how.step3.desc'),
      hasLine: false
    }
  ];

  return (
    <section
      ref={sectionRef}
      className={`flex flex-col items-center justify-center flex-shrink-0 w-full relative border-y ${
        isDark ? 'bg-[#0a0a0a] border-[#27272a]' : 'bg-[#f9fafb] border-[#e5e7eb]'
      }`}
      style={{
        padding: '80px 0px'
      }}
    >
      <div className="flex flex-row items-start justify-between flex-shrink-0 relative w-[1440px]">

        <div className="flex flex-col gap-10 items-start justify-start flex-shrink-0 relative w-[520px]">

          <div className="flex flex-col items-start justify-start flex-shrink-0 relative">
            <h2
              className={`text-left relative font-domine text-5xl font-bold ${
                isDark ? 'text-[#fafafa]' : 'text-[#111827]'
              }`}
              style={{
                lineHeight: '120%',
                letterSpacing: '-0.01em'
              }}
            >
              {t('how.title')}
            </h2>
          </div>

          <div className="flex flex-col gap-6 items-start justify-start flex-shrink-0 relative">

            {steps.map((step, index) => {
              const isActive = activeStep === step.number;

              return (
              <div
                key={step.number}
                onClick={() => setActiveStep(step.number)}
                className={`flex flex-row gap-6 items-start justify-start flex-shrink-0 relative cursor-pointer transition-all duration-300 ease-out hover:opacity-80 ${
                  animate ? 'translate-x-0 opacity-100' : '-translate-x-12 opacity-0'
                }`}
                style={{
                  transitionDelay: `${index * 150}ms`
                }}
              >
                <div className="pt-2 flex flex-col items-center justify-start self-stretch flex-shrink-0 relative">

                  {isActive ? (
                    <div
                      className={`rounded-full flex items-center justify-center flex-shrink-0 w-8 h-[21.63px] transition-all duration-300 ${
                        isDark ? 'bg-white' : 'bg-[#111827]'
                      }`}
                      style={{
                        padding: '0.31px 0px 1.32px 0px'
                      }}
                    >
                      <span
                        className={`text-center text-sm font-bold font-domine transition-all duration-300 ${
                          isDark ? 'text-[#0a0a0a]' : 'text-[#fcfcfd]'
                        }`}
                      >
                        {step.number}
                      </span>
                    </div>
                  ) : (
                    <div
                      className={`rounded-full border-2 flex items-center justify-center flex-shrink-0 w-8 h-[24.5px] transition-all duration-300 ${
                        isDark ? 'bg-[#0a0a0a] border-[#3f3f46]' : 'bg-[#f9fafb] border-[#d1d5db]'
                      }`}
                    >
                      <span
                        className={`text-center text-sm font-bold font-domine transition-all duration-300 ${
                          isDark ? 'text-[#71717a]' : 'text-[#9ca1af]'
                        }`}
                      >
                        {step.number}
                      </span>
                    </div>
                  )}

                  {step.hasLine && (
                    <div className="pt-6 flex flex-col items-start justify-center flex-1 w-[2px] relative">
                      <div className={`flex-1 w-[2px] ${isDark ? 'bg-[#27272a]' : 'bg-[#e5e7eb]'}`} />
                    </div>
                  )}
                </div>

                <div
                  className="flex flex-col gap-2 items-start justify-start flex-1 relative"
                  style={{
                    paddingBottom: step.hasLine ? '32px' : '0px'
                  }}
                >
                  <h3
                    className="text-left text-3xl font-semibold font-domine transition-all duration-300"
                    style={{
                      lineHeight: '130%',
                      letterSpacing: '-0.005em',
                      color: isActive
                        ? (isDark ? '#fafafa' : '#111827')
                        : (isDark ? '#52525b' : '#6b7280')
                    }}
                  >
                    {step.title}
                  </h3>
                  <p
                    className={`text-left text-base font-domine ${
                      isDark ? 'text-[#71717a]' : 'text-[#9ca1af]'
                    }`}
                    style={{
                      lineHeight: '150%'
                    }}
                  >
                    {step.description}
                  </p>
                </div>
              </div>
              );
            })}
          </div>
        </div>

        <div
          className="calculator-card-container flex flex-col items-start justify-start flex-shrink-0 w-[558px] relative"
          style={{
            height: '439px'
          }}
        >
          <>
            <Card
              className={`h-[162px] absolute z-0 transition-all duration-700 ease-out ${
                animate && activeStep === 1 ? 'opacity-100' : 'opacity-0'
              } ${
                isDark ? 'bg-white border-[#e5e7eb]' : 'bg-[#111827] border-transparent'
              }`}
              shadow="lg"
              style={{
                padding: '25px 25px 1px 25px',
                left: '205.43px',
                top: '15.96px',
                transformOrigin: '0 0',
                transform: animate && activeStep === 1
                  ? 'rotate(6.535deg) scale(1, 1) translateX(0)'
                  : 'rotate(6.535deg) scale(1, 1) translateX(3rem)',
                transitionDelay: activeStep === 1 ? '200ms' : '0ms',
                pointerEvents: activeStep === 1 ? 'auto' : 'none'
              }}
            >
              <Image
                src="/usd-coin-usdc-logo-10.svg"
                alt="USDC"
                width={64}
                height={64}
                className="flex-shrink-0"
              />

              <div className="flex-shrink-0 w-[66px] h-[66px] relative">
                <div className="absolute inset-0 rounded-full bg-gradient-to-br from-green-400 to-emerald-500" />
                <Image
                  src="/image-220.png"
                  alt="WUSD"
                  width={66}
                  height={66}
                  className="absolute inset-0 rounded-full"
                />
              </div>
            </Card>

          <Card
            className={`absolute left-0 top-[99px] w-full z-10 transition-all duration-700 ease-out ${
              animate && activeStep === 1 ? 'opacity-100' : 'opacity-0'
            } ${
              isDark ? 'bg-[#18181b]/85 border-[#27272a]' : 'bg-white/85 border-[#e5e7eb]'
            }`}
            shadow="lg"
            style={{
              backdropFilter: 'blur(12px)',
              transform: animate && activeStep === 1
                ? 'rotate(-3deg) translateX(0)'
                : 'rotate(-3deg) translateX(3rem)',
              transformOrigin: 'center center',
              transitionDelay: activeStep === 1 ? '200ms' : '0ms',
              pointerEvents: activeStep === 1 ? 'auto' : 'none'
            }}
          >

            <CardBody className="p-8">
              <div className="flex flex-row items-center justify-between mb-6">
                <div className="flex flex-row gap-3 items-center">
                  <div className={`rounded-xl w-10 h-10 flex items-center justify-center ${
                    isDark ? 'bg-white' : 'bg-[#111827]'
                  }`}>
                    <Image
                      src="/icon1.svg"
                      alt="Portfolio"
                      width={24}
                      height={24}
                      style={{
                        filter: isDark ? 'none' : 'invert(1)'
                      }}
                    />
                  </div>
                  <span
                    className={`font-domine text-base font-medium ${
                      isDark ? 'text-[#fafafa]' : 'text-[#111827]'
                    }`}
                  >
                    {t('how.simulator.title')}
                  </span>
                </div>

                <Chip className="bg-green-50 text-green-600 font-bold" size="sm">
                  +5.2% APY
                </Chip>
              </div>

              <div className="mb-4">
                <div className="flex flex-col gap-2">
                  <span
                    className={`font-domine text-sm ${
                      isDark ? 'text-[#71717a]' : 'text-[#9ca1af]'
                    }`}
                  >
                    {t('how.simulator.invest')}
                  </span>
                  <span
                    ref={investAmount.elementRef}
                    className={`font-domine text-3xl font-bold ${
                      isDark ? 'text-[#fafafa]' : 'text-[#111827]'
                    }`}
                    style={{
                      lineHeight: '120%',
                      letterSpacing: '-0.01em'
                    }}
                  >
                    ${investAmount.count.toLocaleString()}
                  </span>
                </div>

                <div className={`mt-4 h-2 rounded-full relative ${
                  isDark ? 'bg-[#27272a]' : 'bg-[#e5e7eb]'
                }`}>
                  <div className={`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full ${
                    isDark ? 'bg-white' : 'bg-[#111827]'
                  }`} />
                </div>
              </div>

              <div className={`mt-6 pt-6 border-t ${
                isDark ? 'border-[#27272a]' : 'border-[#e5e7eb]'
              }`}>
                <span
                  className={`font-domine text-sm block mb-2 ${
                    isDark ? 'text-[#71717a]' : 'text-[#9ca1af]'
                  }`}
                >
                  {t('how.simulator.earn')}
                </span>
                <div className="flex flex-row gap-2 items-center">
                  <Image
                    src="/icon2.svg"
                    alt="Earn"
                    width={24}
                    height={24}
                  />
                  <span
                    ref={earnAmount.elementRef}
                    className="text-green-600 font-domine text-3xl font-bold"
                    style={{
                      lineHeight: '120%',
                      letterSpacing: '-0.01em'
                    }}
                  >
                    +${earnAmount.count.toLocaleString()}
                  </span>
                </div>
              </div>
            </CardBody>
          </Card>
          </>

          <Card
            className={`absolute left-0 top-[99px] w-full transition-all duration-700 ease-out ${
              animate && activeStep === 2 ? 'opacity-100' : 'opacity-0'
            } ${
              isDark ? 'bg-[#18181b] border-[#27272a]' : 'bg-white border-[#f3f4f6]'
            }`}
            shadow="lg"
            style={{
              transform: animate && activeStep === 2
                ? 'rotate(3deg) translateX(0)'
                : 'rotate(3deg) translateX(3rem)',
              transformOrigin: '0 0',
              transitionDelay: activeStep === 2 ? '200ms' : '0ms',
              pointerEvents: activeStep === 2 ? 'auto' : 'none'
            }}
          >
            <CardBody className="p-6 flex flex-col gap-6">
              <div
                className={`border-b pb-4 flex flex-row items-center justify-between w-full ${
                  isDark ? 'border-[#27272a]' : 'border-[#f3f4f6]'
                }`}
              >
                <span className={`font-domine text-lg font-bold ${
                  isDark ? 'text-[#fafafa]' : 'text-[#000000]'
                }`}>
                  Fund Market
                </span>
                <span className="text-[#059669] font-domine text-base font-bold">
                  Connect Wallet
                </span>
              </div>

              <div className="flex flex-col gap-4 w-full">
                <div className={`rounded-xl border p-4 flex flex-row gap-4 items-center h-24 ${
                  isDark ? 'bg-[#27272a] border-[#3f3f46]' : 'bg-[#f9fafb] border-[#f3f4f6]'
                }`}>
                  <div className={`rounded-full w-12 h-12 flex items-center justify-center flex-shrink-0 ${
                    isDark ? 'bg-white' : 'bg-[#000000]'
                  }`}>
                    <span className={`font-domine text-base font-bold ${
                      isDark ? 'text-[#000000]' : 'text-white'
                    }`}>O</span>
                  </div>

                  <div className="flex flex-col gap-2 flex-1">
                    <div className={`rounded h-4 w-24 ${
                      isDark ? 'bg-[#3f3f46]' : 'bg-[#e5e7eb]'
                    }`} />
                    <div className={`rounded h-3 w-16 ${
                      isDark ? 'bg-[#52525b]' : 'bg-[#f3f4f6]'
                    }`} />
                  </div>

                  <div className="flex flex-col gap-2 items-end flex-shrink-0">
                    <div className={`rounded h-4 w-20 ${
                      isDark ? 'bg-[#3f3f46]' : 'bg-[#e5e7eb]'
                    }`} />
                    <span className="text-[#059669] font-domine text-base font-bold">
                      APY 30.2%
                    </span>
                  </div>
                </div>

                <div className={`rounded-xl border p-4 flex flex-row gap-4 items-center h-24 opacity-60 ${
                  isDark ? 'bg-[#27272a] border-[#3f3f46]' : 'bg-[#f9fafb] border-[#f3f4f6]'
                }`}>
                  <div className={`rounded-full w-12 h-12 flex-shrink-0 ${
                    isDark ? 'bg-[#52525b]' : 'bg-[#d1d5db]'
                  }`} />

                  <div className="flex flex-col gap-2 flex-1">
                    <div className={`rounded h-4 w-32 ${
                      isDark ? 'bg-[#3f3f46]' : 'bg-[#e5e7eb]'
                    }`} />
                    <div className={`rounded h-3 w-20 ${
                      isDark ? 'bg-[#52525b]' : 'bg-[#f3f4f6]'
                    }`} />
                  </div>

                  <div className="flex flex-col gap-2 items-end flex-shrink-0">
                    <div className={`rounded h-4 w-20 ${
                      isDark ? 'bg-[#3f3f46]' : 'bg-[#e5e7eb]'
                    }`} />
                    <span className="text-[#059669] font-domine text-base font-bold">
                      APY 15.2%
                    </span>
                  </div>
                </div>
              </div>
            </CardBody>
          </Card>

          <Card
            className={`absolute left-0 top-[99px] w-[520px] transition-all duration-700 ease-out ${
              animate && activeStep === 3 ? 'opacity-100' : 'opacity-0'
            } ${
              isDark ? 'bg-[#18181b] border-[#27272a]' : 'bg-white border-[#f3f4f6]'
            }`}
            shadow="lg"
            style={{
              transform: animate && activeStep === 3
                ? 'rotate(3deg) translateX(0)'
                : 'rotate(3deg) translateX(3rem)',
              transformOrigin: '0 0',
              transitionDelay: activeStep === 3 ? '200ms' : '0ms',
              overflow: 'hidden',
              pointerEvents: activeStep === 3 ? 'auto' : 'none'
            }}
          >
            <CardBody className="p-6 flex flex-col gap-6">
              <div className={`border-b pb-[17px] flex flex-row items-center justify-between ${
                isDark ? 'border-[#27272a]' : 'border-[#f3f4f6]'
              }`} style={{ width: '470px', height: '45px' }}>
                <span className={`font-domine text-lg font-bold ${
                  isDark ? 'text-[#fafafa]' : 'text-[#000000]'
                }`}>
                  Defi
                </span>
                <span className="text-[#059669] font-domine text-base font-bold">
                  +5.2% APY
                </span>
              </div>

              {/* Cards Grid Container */}
              <div
                className="relative"
                style={{
                  width: '466px',
                  height: '195px',
                  transform: 'rotate(-3deg)',
                  transformOrigin: '0 0',
                  overflow: 'hidden'
                }}
              >
                {/* Container 1 */}
                <div
                  className="absolute"
                  style={{
                    width: '135.53px',
                    height: '165.15px',
                    left: '8.58px',
                    top: '0.46px',
                    transform: 'rotate(3deg)',
                    transformOrigin: '0 0'
                  }}
                >
                  <div className="bg-[#f9fafb] rounded-[12px] border border-[#f3f4f6] p-4 flex flex-col gap-4 items-center absolute" style={{ width: '134.91px', height: '165.18px', left: '0px', top: '0px' }}>
                    <div className="bg-[#000000] rounded-full w-12 h-12 flex items-center justify-center flex-shrink-0">
                      <span className="text-white font-domine text-[16px] font-bold leading-6">O</span>
                    </div>
                    <span
                      className="text-[#000000] font-domine text-[16px] font-bold text-center"
                      style={{ width: '124px', height: '17px', transform: 'rotate(-3deg)', transformOrigin: '0 0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                    >
                      +10% APY
                    </span>
                    <div
                      className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
                      style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
                    >
                      <span className="text-white font-domine text-[12px] font-bold leading-4">
                        Boost
                      </span>
                    </div>
                  </div>
                </div>

                {/* Container 2 */}
                <div
                  className="absolute"
                  style={{
                    width: '135.53px',
                    height: '165.15px',
                    left: '160.18px',
                    top: '11.66px',
                    transform: 'rotate(3deg)',
                    transformOrigin: '0 0'
                  }}
                >
                  <div className="bg-[#f9fafb] rounded-[12px] border border-[#f3f4f6] p-4 flex flex-col gap-4 items-center absolute" style={{ width: '134.91px', height: '165.18px', left: '0px', top: '0px' }}>
                    <div className="bg-[#000000] rounded-full w-12 h-12 flex items-center justify-center flex-shrink-0">
                      <span className="text-white font-domine text-[16px] font-bold leading-6">O</span>
                    </div>
                    <span
                      className="text-[#000000] font-domine text-[16px] font-bold text-center"
                      style={{ width: '124px', height: '17px', transform: 'rotate(-3deg)', transformOrigin: '0 0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                    >
                      +10% APY
                    </span>
                    <div
                      className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
                      style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
                    >
                      <span className="text-white font-domine text-[12px] font-bold leading-4">
                        Boost
                      </span>
                    </div>
                  </div>
                </div>

                {/* Container 3 */}
                <div
                  className="absolute"
                  style={{
                    width: '135.53px',
                    height: '165.15px',
                    left: '312.18px',
                    top: '19.66px',
                    transform: 'rotate(3deg)',
                    transformOrigin: '0 0'
                  }}
                >
                  <div className="bg-[#f9fafb] rounded-[12px] border border-[#f3f4f6] p-4 flex flex-col gap-4 items-center absolute" style={{ width: '134.91px', height: '165.18px', left: '0px', top: '0px' }}>
                    <div className="bg-[#000000] rounded-full w-12 h-12 flex items-center justify-center flex-shrink-0">
                      <span className="text-white font-domine text-[16px] font-bold leading-6">O</span>
                    </div>
                    <span
                      className="text-[#000000] font-domine text-[16px] font-bold text-center"
                      style={{ width: '124px', height: '17px', transform: 'rotate(-3deg)', transformOrigin: '0 0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                    >
                      +10% APY
                    </span>
                    <div
                      className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
                      style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
                    >
                      <span className="text-white font-domine text-[12px] font-bold leading-4">
                        Boost
                      </span>
                    </div>
                  </div>
                </div>

                {/* Container 4 - with SWAP button */}
                <div
                  className="absolute"
                  style={{
                    width: '135.53px',
                    height: '165.15px',
                    left: '160.18px',
                    top: '11.66px',
                    transform: 'rotate(3deg)',
                    transformOrigin: '0 0'
                  }}
                >
                  <div className="bg-[#f9fafb] rounded-[12px] border border-[#f3f4f6] p-4 flex flex-col gap-4 items-center absolute" style={{ width: '134.91px', height: '165.18px', left: '0px', top: '0px' }}>
                    <div className="bg-[#000000] rounded-full w-12 h-12 flex items-center justify-center flex-shrink-0">
                      <span className="text-white font-domine text-[16px] font-bold leading-6">O</span>
                    </div>
                    <span
                      className="text-[#000000] font-domine text-[16px] font-bold text-center"
                      style={{ width: '124px', height: '17px', transform: 'rotate(-3deg)', transformOrigin: '0 0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                    >
                      Get USDC
                    </span>
                    <div
                      className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
                      style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
                    >
                      <span className="text-white font-domine text-[12px] font-bold leading-4">
                        SWAP
                      </span>
                    </div>
                  </div>
                </div>

                {/* Container 5 - with LP button */}
                <div
                  className="absolute"
                  style={{
                    width: '135.53px',
                    height: '165.15px',
                    left: '312.18px',
                    top: '19.66px',
                    transform: 'rotate(3deg)',
                    transformOrigin: '0 0'
                  }}
                >
                  <div className="bg-[#f9fafb] rounded-[12px] border border-[#f3f4f6] p-4 flex flex-col gap-4 items-center absolute" style={{ width: '134.91px', height: '165.18px', left: '0px', top: '0px' }}>
                    <div className="bg-[#000000] rounded-full w-12 h-12 flex items-center justify-center flex-shrink-0">
                      <span className="text-white font-domine text-[16px] font-bold leading-6">O</span>
                    </div>
                    <span
                      className="text-[#000000] font-domine text-[16px] font-bold text-center"
                      style={{ width: '124px', height: '17px', transform: 'rotate(-3deg)', transformOrigin: '0 0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                    >
                      10% APY
                    </span>
                    <div
                      className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
                      style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
                    >
                      <span className="text-white font-domine text-[12px] font-bold leading-4">
                        LP
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </CardBody>
          </Card>
        </div>

      </div>
    </section>
  );
}