assetx/landingpage/components/WhyAssetXSection.tsx

'use client';

import { useRef } from 'react';
import { motion, useInView } from 'framer-motion';
import Image from 'next/image';
import { Card, CardBody, Chip } from '@heroui/react';
import { TrendingUp, ShieldCheck, ArrowLeftRight, Lock } from 'lucide-react';
import { useLanguage } from '@/contexts/LanguageContext';

export default function WhyAssetXSection() {
  const { t } = useLanguage();
  const sectionRef = useRef<HTMLElement>(null);
  const isInView = useInView(sectionRef, { once: true, amount: 0.2 });

  return (
    <section
      ref={sectionRef}
      className="flex flex-row items-center justify-center flex-wrap flex-shrink-0 w-full relative bg-bg-base"
      style={{
        padding: 'clamp(40px, 5vw, 100px) clamp(24px, 4vw, 80px)',
        gap: 'clamp(24px, 3vw, 64px)',
        alignContent: 'center'
      }}
    >
      <div className="flex flex-col items-center justify-center w-full max-w-[1440px] 2xl:max-w-[1760px] 3xl:max-w-[2200px]">
        <div className="flex flex-col gap-2 items-start justify-start flex-shrink-0 w-full relative mb-10">
          <motion.h2
            className="text-left relative font-domine font-bold text-text-primary"
            style={{
              fontSize: 'clamp(36px, 3.5vw, 80px)',
              lineHeight: '120%',
              letterSpacing: '-0.01em'
            }}
            initial={{ opacity: 0, y: 24 }}
            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 24 }}
            transition={{ duration: 0.6, ease: 'easeOut' }}
          >
            {t('why.title')}
          </motion.h2>

          <motion.p
            className="text-left relative font-domine text-text-tertiary"
            style={{ fontSize: 'clamp(16px, 1.2vw, 22px)', lineHeight: '140%' }}
            initial={{ opacity: 0, y: 24 }}
            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 24 }}
            transition={{ duration: 0.6, ease: 'easeOut', delay: 0.15 }}
          >
            {t('why.subtitle')}
          </motion.p>
        </div>

        <div className="flex flex-col md:flex-row gap-6 items-stretch justify-start w-full relative">

          <motion.div
            initial={{ opacity: 0, y: 32 }}
            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 32 }}
            transition={{ duration: 0.6, ease: 'easeOut', delay: 0.2 }}
            className="flex-1"
          >
            <Card
              className="self-stretch hover:-translate-y-2 bg-bg-surface border-border-normal h-full"
              shadow="sm"
              style={{
                transition: 'transform 0.3s ease-out, box-shadow 0.3s ease-out',
                willChange: 'transform'
              }}
            >
              <CardBody className="flex flex-col items-start justify-between p-6 md:p-10 gap-6">
                <div className="flex flex-col gap-6 items-start justify-start self-stretch">
                  <div className="rounded-2xl flex items-center justify-center w-12 h-12 bg-bg-elevated">
                    <TrendingUp size={24} className="text-text-primary" />
                  </div>

                  <div className="flex flex-col gap-4 items-start justify-start self-stretch">
                    <h3 className="text-2xl font-bold font-domine text-text-primary"
                      style={{
                        lineHeight: '130%',
                        letterSpacing: '-0.005em'
                      }}
                    >
                      {t('why.sustainable.title')}
                    </h3>
                    <p className="text-base font-domine text-text-tertiary"
                      style={{
                        lineHeight: '150%'
                      }}
                    >
                      {t('why.sustainable.desc')}
                    </p>
                  </div>
                </div>

                <Image
                  src="/frame-110.svg"
                  alt="Chart"
                  width={305}
                  height={162}
                  className="w-full h-auto"
                />
              </CardBody>
            </Card>
          </motion.div>

          <div className="flex flex-col gap-6 items-start justify-start w-full md:flex-1 relative self-stretch">

            <motion.div
              initial={{ opacity: 0, y: 32 }}
              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 32 }}
              transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
              className="w-full flex-1 flex flex-col"
            >
              <Card
                className="self-stretch hover:-translate-y-2 bg-bg-surface border-border-normal flex-1"
                shadow="sm"
                style={{
                  transition: 'transform 0.3s ease-out, box-shadow 0.3s ease-out',
                  willChange: 'transform'
                }}
              >
                <CardBody className="flex flex-col md:flex-row items-start md:items-center justify-between p-6 md:p-10 gap-6 md:gap-0">
                  <div className="flex flex-col gap-6 items-start justify-start w-full md:w-[414px]">
                    <div className="rounded-2xl flex items-center justify-center w-12 h-12 bg-bg-elevated">
                      <ShieldCheck size={24} className="text-text-primary" />
                    </div>

                    <div className="flex flex-col gap-4 items-start justify-start self-stretch">
                      <h3 className="text-2xl font-bold font-domine text-text-primary"
                        style={{
                          lineHeight: '130%',
                          letterSpacing: '-0.005em'
                        }}
                      >
                        {t('why.reliability.title')}
                      </h3>
                      <p className="text-base font-domine text-text-tertiary"
                        style={{
                          lineHeight: '150%'
                        }}
                      >
                        {t('why.reliability.desc')}
                      </p>
                    </div>
                  </div>

                  <div
                    className="relative bg-bg-elevated border border-border-strong rounded-2xl mx-auto md:mx-0"
                    style={{
                      width: '196px',
                      height: '180px',
                      flexShrink: 0
                    }}
                  >
                    {/* 外层圆环 */}
                    <div
                      className="absolute rounded-full border-2 border-border-strong"
                      style={{
                        width: '132px',
                        height: '132px',
                        left: '50%',
                        top: '50%',
                        transform: 'translate(-50%, -50%)'
                      }}
                    >
                      {/* 内层圆 */}
                      <div
                        className="absolute rounded-full bg-border-strong"
                        style={{
                          width: '88.59px',
                          height: '88.59px',
                          left: '50%',
                          top: '50%',
                          transform: 'translate(-50%, -50%)'
                        }}
                      >
                        {/* 图标 */}
                        <Lock
                          size={44}
                          className="text-white"
                          style={{
                            position: 'absolute',
                            left: '50%',
                            top: '50%',
                            transform: 'translate(-50%, -50%)'
                          }}
                        />
                      </div>
                    </div>
                  </div>
                </CardBody>
              </Card>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 32 }}
              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 32 }}
              transition={{ duration: 0.6, ease: 'easeOut', delay: 0.5 }}
              className="w-full flex-1 flex flex-col"
            >
              <Card
                className="self-stretch hover:-translate-y-2 bg-bg-surface border-border-normal flex-1"
                shadow="sm"
                style={{
                  transition: 'transform 0.3s ease-out, box-shadow 0.3s ease-out',
                  willChange: 'transform'
                }}
              >
                <CardBody className="flex flex-col md:flex-row items-start justify-between p-6 md:p-10 gap-6 md:gap-0">
                  <div className="flex flex-col gap-6 items-start justify-start w-full md:w-[550px]">
                    <div className="rounded-2xl flex items-center justify-center w-12 h-12 bg-bg-elevated">
                      <ArrowLeftRight size={24} className="text-text-primary" />
                    </div>

                    <div className="flex flex-col gap-4 items-start justify-start">
                      <h3 className="text-2xl font-bold font-domine text-text-primary"
                        style={{
                          lineHeight: '130%',
                          letterSpacing: '-0.005em'
                        }}
                      >
                        {t('why.liquidity.title')}
                      </h3>
                      <p className="text-base font-domine text-text-tertiary"
                        style={{
                          lineHeight: '150%'
                        }}
                      >
                        {t('why.liquidity.desc')}
                      </p>
                    </div>
                  </div>

                  <div className="flex flex-row gap-3 items-center justify-end">
                    <Chip
                      className="bg-accent-green-bg text-accent-green font-bold"
                      size="sm"
                    >
                      {t('why.liquidity.badge1')}
                    </Chip>
                    <Chip
                      className="bg-accent-blue-bg text-accent-blue font-bold"
                      size="sm"
                    >
                      {t('why.liquidity.badge2')}
                    </Chip>
                  </div>
                </CardBody>
              </Card>
            </motion.div>

          </div>

        </div>
      </div>
    </section>
  );
}