asset-homepage/components/SecuritySection.tsx

'use client';

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

export default function SecuritySection() {
  const { t } = useLanguage();
  const [animate, setAnimate] = useState(false);
  const sectionRef = useRef<HTMLElement>(null);
  const [cardHovers, setCardHovers] = useState<{[key: number]: {x: number, y: number} | null}>({});

  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 handleCardMouseMove = (e: React.MouseEvent<HTMLDivElement>, index: number) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * 100;
    const y = ((e.clientY - rect.top) / rect.height) * 100;
    setCardHovers(prev => ({...prev, [index]: {x, y}}));
  };

  const handleCardMouseLeave = (index: number) => {
    setCardHovers(prev => ({...prev, [index]: null}));
  };

  const getBorderGradients = (index: number) => {
    const hover = cardHovers[index];
    if (!hover) return {
      showTop: false,
      showRight: false,
      showBottom: false,
      showLeft: false,
      topGradient: '',
      rightGradient: '',
      bottomGradient: '',
      leftGradient: ''
    };

    const { x, y } = hover;

    // 判断鼠标靠近哪两个边
    const nearTop = y < 50;
    const nearLeft = x < 50;

    // 计算渐变：以鼠标位置为中心向两边扩散
    const spreadRange = 25; // 扩散范围百分比

    // 上/下边框：以鼠标 x 位置为中心
    const horizontalGradient = `linear-gradient(to right,
      transparent 0%,
      rgba(136,136,136,0.3) ${Math.max(0, x - spreadRange)}%,
      rgba(136,136,136,1) ${x}%,
      rgba(136,136,136,0.3) ${Math.min(100, x + spreadRange)}%,
      transparent 100%)`;

    // 左/右边框：以鼠标 y 位置为中心
    const verticalGradient = `linear-gradient(to bottom,
      transparent 0%,
      rgba(136,136,136,0.3) ${Math.max(0, y - spreadRange)}%,
      rgba(136,136,136,1) ${y}%,
      rgba(136,136,136,0.3) ${Math.min(100, y + spreadRange)}%,
      transparent 100%)`;

    return {
      showTop: nearTop,
      showRight: !nearLeft,
      showBottom: !nearTop,
      showLeft: nearLeft,
      topGradient: horizontalGradient,
      rightGradient: verticalGradient,
      bottomGradient: horizontalGradient,
      leftGradient: verticalGradient
    };
  };

  const features = [
    {
      icon: '/interface-search-magnifying-glass0.svg',
      titleKey: 'security.audited.title',
      descKey: 'security.audited.desc',
      position: 'top-left'
    },
    {
      icon: '/navigation-building-010.svg',
      titleKey: 'security.segregated.title',
      descKey: 'security.segregated.desc',
      position: 'top-right'
    },
    {
      icon: '/interface-chart-bar-vertical-010.svg',
      titleKey: 'security.transparency.title',
      descKey: 'security.transparency.desc',
      position: 'bottom-left'
    },
    {
      icon: '/component-10.svg',
      titleKey: 'security.partners.title',
      descKey: null,
      position: 'bottom-right',
      special: true
    }
  ];

  return (
    <section
      ref={sectionRef}
      className="bg-black flex flex-col items-center justify-start self-stretch flex-shrink-0 w-full relative"
      style={{
        padding: '1px 24px 0px 24px',
        gap: '40px'
      }}
    >
      <div className="flex flex-row items-start justify-start flex-shrink-0 w-[1440px] relative">

        <div
          className={`flex flex-row items-center justify-center flex-shrink-0 w-[459px] h-[604px] relative transition-all duration-700 ease-out border-b border-[#222222] ${
            animate ? 'translate-x-0 opacity-100' : '-translate-x-12 opacity-0'
          }`}
          style={{
            padding: '180px 24px 180px 120px'
          }}
        >
          <div className="flex flex-col gap-6 items-start justify-start flex-1 relative">
            <h2
              className="text-[#fcfcfd] text-left relative self-stretch font-domine text-5xl select-none"
              style={{
                lineHeight: '120%',
                letterSpacing: '-0.01em'
              }}
            >
              {t('security.title')}
            </h2>
            <p
              className="text-[#9ca1af] text-left relative w-[290px] flex items-center justify-start font-domine text-base select-none"
              style={{
                lineHeight: '150%'
              }}
            >
              {t('security.subtitle')}
            </p>
          </div>
        </div>

        <div
          className="flex-shrink-0 grid gap-0 relative"
          style={{
            width: '981px',
            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
            gridTemplateRows: 'repeat(2, fit-content(100%))'
          }}
        >
          {features.map((feature, index) => {
            const borders = getBorderGradients(index);
            return (
            <div
              key={feature.titleKey}
              className="relative group"
              style={{
                gridColumn: feature.position.includes('left') ? '1 / span 1' : '2 / span 1',
                gridRow: feature.position.includes('top') ? '1 / span 1' : '2 / span 1',
              }}
              onMouseMove={(e) => handleCardMouseMove(e, index)}
              onMouseLeave={() => handleCardMouseLeave(index)}
            >
              {/* 上边框渐变 */}
              {borders.showTop && (
                <div
                  className="absolute top-0 left-0 right-0 h-[1px] z-10"
                  style={{
                    background: borders.topGradient,
                    pointerEvents: 'none'
                  }}
                />
              )}

              {/* 右边框渐变 */}
              {borders.showRight && (
                <div
                  className="absolute top-0 right-0 bottom-0 w-[1px] z-10"
                  style={{
                    background: borders.rightGradient,
                    pointerEvents: 'none'
                  }}
                />
              )}

              {/* 下边框渐变 */}
              {borders.showBottom && (
                <div
                  className="absolute bottom-0 left-0 right-0 h-[1px] z-10"
                  style={{
                    background: borders.bottomGradient,
                    pointerEvents: 'none'
                  }}
                />
              )}

              {/* 左边框渐变 */}
              {borders.showLeft && (
                <div
                  className="absolute top-0 left-0 bottom-0 w-[1px] z-10"
                  style={{
                    background: borders.leftGradient,
                    pointerEvents: 'none'
                  }}
                />
              )}

              <Card
                className={`rounded-none bg-black border-[#222222] transition-all duration-300 ${
                  animate ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
                }`}
                shadow="none"
                style={{
                  borderStyle: 'solid',
                  borderWidth:
                    feature.position === 'top-left' ? '0px 1px 1px 1px' :
                    feature.position === 'top-right' ? '0px 0px 1px 0px' :
                    feature.position === 'bottom-left' ? '0px 1px 1px 1px' :
                    '0px 1px 1px 0px',
                  height: '302px',
                  transitionDelay: animate ? `${index * 150}ms` : '0ms'
                }}
              >
              <CardBody className="p-[72px_48px] flex items-start justify-center overflow-hidden">
                {feature.special ? (
                  <div className="flex flex-col gap-6 items-start justify-center self-stretch h-[166px]">
                    <div className="flex flex-col gap-4 items-start justify-start self-stretch">
                      <h3
                        className="text-[#fcfcfd] text-left relative self-stretch font-domine text-2xl"
                        style={{
                          lineHeight: '140%'
                        }}
                      >
                        {t(feature.titleKey)}
                      </h3>
                      <Image
                        src={feature.icon}
                        alt="Icon"
                        width={24}
                        height={24}
                        className="flex-shrink-0 brightness-0 invert arrow-icon"
                      />
                    </div>
                  </div>
                ) : (
                  <div className="flex flex-col gap-6 items-start justify-start self-stretch">
                    <Image
                      src={feature.icon}
                      alt={t(feature.titleKey)}
                      width={32}
                      height={32}
                      className="flex-shrink-0"
                    />
                    <div className="flex flex-col gap-2 items-start justify-start self-stretch">
                      <h3
                        className="text-[#fcfcfd] text-left relative self-stretch font-domine text-2xl font-bold"
                        style={{
                          lineHeight: '130%',
                          letterSpacing: '-0.005em'
                        }}
                      >
                        {t(feature.titleKey)}
                      </h3>
                      <p
                        className="text-[#9ca1af] text-left relative self-stretch font-domine text-sm"
                        style={{
                          lineHeight: '150%'
                        }}
                      >
                        {feature.descKey && t(feature.descKey)}
                      </p>
                    </div>
                  </div>
                )}
              </CardBody>
            </Card>
            </div>
            );
          })}
        </div>
      </div>

      <div className="flex-shrink-0 w-[1200px] h-[187px] relative">
        <Image
          src="/logo1.svg"
          alt="Logo"
          width={1200}
          height={187}
          className="w-full h-full object-contain"
        />
      </div>
    </section>
  );
}