'use client';

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

export default function WhyAssetXSection() {
  const { t } = useLanguage();
  const [animate, setAnimate] = useState(false);
  const sectionRef = useRef<HTMLElement>(null);

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

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          setAnimate(true);
          observer.disconnect(); // 触发后立即断开，不再监听
        }
      },
      { threshold: 0.5 } // 当50%可见时才触发
    );

    observer.observe(currentRef);

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

  return (
    <section
      ref={sectionRef}
      className="flex flex-row items-center justify-center flex-wrap flex-shrink-0 w-full relative"
      style={{
        padding: '80px 0px',
        gap: '40px',
        alignContent: 'center'
      }}
    >
      <div className="flex flex-col items-center justify-center w-[1440px]">
        {/* Header - .frame-27 */}
        <div className="flex flex-col gap-2 items-start justify-start flex-shrink-0 w-[1440px] relative mb-10">
          {/* Title - .why-assetx */}
          <h2
            className="text-[#111827] text-left relative font-inter"
            style={{
              fontSize: '48px',
              lineHeight: '120%',
              letterSpacing: '-0.01em',
              fontWeight: 700
            }}
          >
            {t('why.title')}
          </h2>

          {/* Subtitle */}
          <p
            className="text-[#9ca1af] text-left relative font-inter"
            style={{
              fontSize: '20px',
              lineHeight: '140%',
              fontWeight: 400
            }}
          >
            {t('why.subtitle')}
          </p>
        </div>

        {/* Cards Container - .frame-30 */}
        <div className="flex flex-row gap-6 items-center justify-start flex-shrink-0 w-[1440px] relative">

          {/* Left Large Card - Sustainable Real Yield */}
          <div
            className={`bg-white rounded-[24px] border border-[#e5e7eb] p-10 flex flex-col items-start justify-between self-stretch flex-1 relative overflow-hidden
              ${
                animate
                  ? 'translate-y-0 opacity-100'
                  : 'translate-y-12 opacity-0'
              }
              hover:-translate-y-2 hover:shadow-xl`}
            style={{
              transition: 'transform 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.7s ease-out, translate 0.7s ease-out'
            }}
          >
            {/* .frame-33 */}
            <div className="flex flex-col gap-6 items-start justify-start self-stretch flex-shrink-0 relative">
              {/* Icon Container - .container12 */}
              <div className="bg-[#f9fafb] rounded-[16px] flex flex-row items-center justify-center flex-shrink-0 w-12 h-12 relative">
                <Image
                  src="/system-data0.svg"
                  alt="System Data"
                  width={24}
                  height={24}
                />
              </div>

              {/* Text Content - .frame-31 */}
              <div className="flex flex-col gap-4 items-start justify-start self-stretch flex-shrink-0 relative">
                <h3
                  className="text-[#111827] text-left relative font-inter"
                  style={{
                    fontSize: '24px',
                    lineHeight: '130%',
                    letterSpacing: '-0.005em',
                    fontWeight: 700
                  }}
                >
                  {t('why.sustainable.title')}
                </h3>
                <p
                  className="text-[#9ca1af] text-left relative self-stretch font-inter"
                  style={{
                    fontSize: '16px',
                    lineHeight: '150%',
                    fontWeight: 400
                  }}
                >
                  {t('why.sustainable.desc')}
                </p>
              </div>
            </div>

            {/* Chart Image - .frame-11 */}
            <Image
              src="/frame-110.svg"
              alt="Chart"
              width={305}
              height={162}
              className="w-full h-auto flex-shrink-0 relative"
            />
          </div>

          {/* Right Column - .frame-29 */}
          <div className="flex flex-col gap-6 items-start justify-start flex-shrink-0 w-[850px] relative">

            {/* Proven Reliability Card */}
            <div
              className={`bg-white rounded-[24px] border border-[#e5e7eb] p-10 flex flex-col items-start justify-start self-stretch flex-shrink-0 relative overflow-hidden
                ${
                  animate
                    ? 'translate-y-0 opacity-100'
                    : 'translate-y-12 opacity-0'
                }
                hover:-translate-y-2 hover:shadow-xl`}
              style={{
                transition: 'transform 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.7s ease-out 0.15s, translate 0.7s ease-out 0.15s'
              }}
            >
              {/* .features2 */}
              <div className="flex flex-row items-center justify-between self-stretch flex-shrink-0 relative">
                {/* Left Content - .container13 */}
                <div className="flex flex-col gap-6 items-start justify-start flex-shrink-0 w-[414px] relative">
                  {/* Icon */}
                  <div className="bg-[#f9fafb] rounded-[16px] flex flex-row items-center justify-center flex-shrink-0 w-12 h-12 relative">
                    <Image
                      src="/warning-shield-check0.svg"
                      alt="Shield Check"
                      width={24}
                      height={24}
                    />
                  </div>

                  {/* Text - .frame-28 */}
                  <div className="flex flex-col gap-4 items-start justify-start self-stretch flex-shrink-0 relative">
                    <h3
                      className="text-[#111827] text-left relative self-stretch font-inter"
                      style={{
                        fontSize: '24px',
                        lineHeight: '130%',
                        letterSpacing: '-0.005em',
                        fontWeight: 700
                      }}
                    >
                      {t('why.reliability.title')}
                    </h3>
                    <p
                      className="text-[#9ca1af] text-left relative font-inter"
                      style={{
                        fontSize: '16px',
                        lineHeight: '150%',
                        fontWeight: 400
                      }}
                    >
                      {t('why.reliability.desc')}
                    </p>
                  </div>
                </div>

                {/* Right Icon */}
                <div
                  className="bg-[#f9fafb] rounded-[16px] border border-[#e5e7eb] flex items-center justify-center flex-shrink-0 relative"
                  style={{
                    padding: '32px',
                    height: '180px',
                    width: '196px',
                    isolation: 'isolate',
                    willChange: 'auto',
                    contain: 'layout style paint'
                  }}
                >
                  <div
                    className="rounded-full border-2 border-[#e5e7eb] flex items-center justify-center flex-shrink-0 relative"
                    style={{
                      width: '132px',
                      height: '132px',
                      minWidth: '132px',
                      minHeight: '132px',
                      maxWidth: '132px',
                      maxHeight: '132px'
                    }}
                  >
                    <div
                      className="bg-[#e5e7eb] rounded-full flex items-center justify-center flex-shrink-0 relative"
                      style={{
                        width: '88.59px',
                        height: '88.59px',
                        minWidth: '88.59px',
                        minHeight: '88.59px',
                        maxWidth: '88.59px',
                        maxHeight: '88.59px'
                      }}
                    >
                      <img
                        src="/icon0.svg"
                        alt="Lock Icon"
                        style={{
                          width: '44.29px',
                          height: '44.29px',
                          display: 'block'
                        }}
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Flexible Liquidity Card */}
            <div
              className={`bg-white rounded-[24px] border border-[#e5e7eb] p-10 flex flex-col items-start justify-start self-stretch flex-shrink-0 relative overflow-hidden
                ${
                  animate
                    ? 'translate-y-0 opacity-100'
                    : 'translate-y-12 opacity-0'
                }
                hover:-translate-y-2 hover:shadow-xl`}
              style={{
                transition: 'transform 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.7s ease-out 0.3s, translate 0.7s ease-out 0.3s'
              }}
            >
              <div className="flex flex-row items-start justify-between self-stretch flex-shrink-0 relative">
                {/* Left Content */}
                <div className="flex flex-col gap-6 items-start justify-start flex-shrink-0 w-[550px] relative">
                  {/* Icon */}
                  <div className="bg-[#f9fafb] rounded-[16px] flex flex-row items-center justify-center flex-shrink-0 w-12 h-12 relative">
                    <Image
                      src="/arrow-arrow-left-right0.svg"
                      alt="Arrow"
                      width={24}
                      height={24}
                    />
                  </div>

                  {/* Text Content */}
                  <div className="flex flex-col gap-4 items-start justify-start flex-shrink-0 relative">
                    <h3
                      className="text-[#111827] text-left relative font-inter"
                      style={{
                        fontSize: '24px',
                        lineHeight: '130%',
                        letterSpacing: '-0.005em',
                        fontWeight: 700
                      }}
                    >
                      {t('why.liquidity.title')}
                    </h3>
                    <p
                      className="text-[#9ca1af] text-left relative font-inter"
                      style={{
                        fontSize: '16px',
                        lineHeight: '150%',
                        fontWeight: 400
                      }}
                    >
                      {t('why.liquidity.desc')}
                    </p>
                  </div>
                </div>

                {/* Right Badges */}
                <div className="flex flex-row gap-3 items-center justify-end flex-shrink-0">
                  <div className="bg-[#e1f8ec] rounded-lg px-4 py-2 flex items-center justify-center">
                    <span className="text-[#10b981] font-inter font-bold" style={{ fontSize: '12px' }}>
                      {t('why.liquidity.badge1')}
                    </span>
                  </div>
                  <div className="bg-[#ebf2ff] rounded-lg px-4 py-2 flex items-center justify-center">
                    <span className="text-[#1447e6] font-inter font-bold" style={{ fontSize: '12px' }}>
                      {t('why.liquidity.badge2')}
                    </span>
                  </div>
                </div>
              </div>
            </div>

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