asset-homepage/components/WhyAssetXSection.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';

export default function WhyAssetXSection() {
  const { t } = useLanguage();
  const { theme } = useTheme();
  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 }
    );

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

  const isDark = theme === 'dark';

  return (
    <section
      ref={sectionRef}
      className={`flex flex-row items-center justify-center flex-wrap flex-shrink-0 w-full relative ${
        isDark ? 'bg-[#0a0a0a]' : 'bg-white'
      }`}
      style={{
        padding: '80px 0px',
        gap: '40px',
        alignContent: 'center'
      }}
    >
      <div className="flex flex-col items-center justify-center w-[1440px]">
        <div className="flex flex-col gap-2 items-start justify-start flex-shrink-0 w-[1440px] relative mb-10">
          <h2
            className={`text-left relative font-domine text-5xl font-bold ${
              isDark ? 'text-[#fafafa]' : 'text-[#111827]'
            }`}
            style={{
              lineHeight: '120%',
              letterSpacing: '-0.01em'
            }}
          >
            {t('why.title')}
          </h2>

          <p
            className={`text-left relative font-domine text-xl ${
              isDark ? 'text-[#a1a1aa]' : 'text-[#9ca1af]'
            }`}
            style={{
              lineHeight: '140%'
            }}
          >
            {t('why.subtitle')}
          </p>
        </div>

        <div className="flex flex-row gap-6 items-center justify-start flex-shrink-0 w-[1440px] relative">

          <Card
            className={`flex-1 self-stretch transition-all hover:-translate-y-2 ${
              animate ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
            } ${
              isDark ? 'bg-[#18181b] border-[#27272a]' : 'bg-white border-[#e5e7eb]'
            }`}
            shadow="sm"
            style={{
              transition: 'transform 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.7s ease-out, translate 0.7s ease-out'
            }}
          >
            <CardBody className="flex flex-col items-start justify-between 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 ${
                  isDark ? 'bg-[#27272a]' : 'bg-[#f9fafb]'
                }`}>
                  <Image
                    src="/system-data0.svg"
                    alt="System Data"
                    width={24}
                    height={24}
                    style={{
                      filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
                    }}
                  />
                </div>

                <div className="flex flex-col gap-4 items-start justify-start self-stretch">
                  <h3 className={`text-2xl font-bold font-domine ${
                    isDark ? 'text-[#fafafa]' : 'text-[#111827]'
                  }`}
                    style={{
                      lineHeight: '130%',
                      letterSpacing: '-0.005em'
                    }}
                  >
                    {t('why.sustainable.title')}
                  </h3>
                  <p className={`text-base font-domine ${
                    isDark ? 'text-[#a1a1aa]' : 'text-[#9ca1af]'
                  }`}
                    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>

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

            <Card
              className={`self-stretch transition-all hover:-translate-y-2 ${
                animate ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
              } ${
                isDark ? 'bg-[#18181b] border-[#27272a]' : 'bg-white border-[#e5e7eb]'
              }`}
              shadow="sm"
              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'
              }}
            >
              <CardBody className="flex flex-row items-center justify-between p-10">
                <div className="flex flex-col gap-6 items-start justify-start flex-shrink-0 w-[414px]">
                  <div className={`rounded-2xl flex items-center justify-center w-12 h-12 ${
                    isDark ? 'bg-[#27272a]' : 'bg-[#f9fafb]'
                  }`}>
                    <Image
                      src="/warning-shield-check0.svg"
                      alt="Shield Check"
                      width={24}
                      height={24}
                      style={{
                        filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
                      }}
                    />
                  </div>

                  <div className="flex flex-col gap-4 items-start justify-start self-stretch">
                    <h3 className={`text-2xl font-bold font-domine ${
                      isDark ? 'text-[#fafafa]' : 'text-[#111827]'
                    }`}
                      style={{
                        lineHeight: '130%',
                        letterSpacing: '-0.005em'
                      }}
                    >
                      {t('why.reliability.title')}
                    </h3>
                    <p className={`text-base font-domine ${
                      isDark ? 'text-[#a1a1aa]' : 'text-[#9ca1af]'
                    }`}
                      style={{
                        lineHeight: '150%'
                      }}
                    >
                      {t('why.reliability.desc')}
                    </p>
                  </div>
                </div>

                <div
                  className={`rounded-2xl border flex items-center justify-center ${
                    isDark ? 'bg-[#27272a] border-[#3f3f46]' : 'bg-[#f9fafb] border-[#e5e7eb]'
                  }`}
                  style={{
                    padding: '32px',
                    height: '180px',
                    width: '196px'
                  }}
                >
                  <div
                    className={`rounded-full border-2 flex items-center justify-center ${
                      isDark ? 'border-[#3f3f46]' : 'border-[#e5e7eb]'
                    }`}
                    style={{
                      width: '132px',
                      height: '132px'
                    }}
                  >
                    <div
                      className={`rounded-full flex items-center justify-center ${
                        isDark ? 'bg-[#3f3f46]' : 'bg-[#e5e7eb]'
                      }`}
                      style={{
                        width: '88.59px',
                        height: '88.59px'
                      }}
                    >
                      <img
                        src="/icon0.svg"
                        alt="Lock Icon"
                        style={{
                          width: '44.29px',
                          height: '44.29px',
                          display: 'block'
                        }}
                      />
                    </div>
                  </div>
                </div>
              </CardBody>
            </Card>

            <Card
              className={`self-stretch transition-all hover:-translate-y-2 ${
                animate ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
              } ${
                isDark ? 'bg-[#18181b] border-[#27272a]' : 'bg-white border-[#e5e7eb]'
              }`}
              shadow="sm"
              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'
              }}
            >
              <CardBody className="flex flex-row items-start justify-between p-10">
                <div className="flex flex-col gap-6 items-start justify-start flex-shrink-0 w-[550px]">
                  <div className={`rounded-2xl flex items-center justify-center w-12 h-12 ${
                    isDark ? 'bg-[#27272a]' : 'bg-[#f9fafb]'
                  }`}>
                    <Image
                      src="/arrow-arrow-left-right0.svg"
                      alt="Arrow"
                      width={24}
                      height={24}
                      style={{
                        filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
                      }}
                    />
                  </div>

                  <div className="flex flex-col gap-4 items-start justify-start">
                    <h3 className={`text-2xl font-bold font-domine ${
                      isDark ? 'text-[#fafafa]' : 'text-[#111827]'
                    }`}
                      style={{
                        lineHeight: '130%',
                        letterSpacing: '-0.005em'
                      }}
                    >
                      {t('why.liquidity.title')}
                    </h3>
                    <p className={`text-base font-domine ${
                      isDark ? 'text-[#a1a1aa]' : 'text-[#9ca1af]'
                    }`}
                      style={{
                        lineHeight: '150%'
                      }}
                    >
                      {t('why.liquidity.desc')}
                    </p>
                  </div>
                </div>

                <div className="flex flex-row gap-3 items-center justify-end">
                  <Chip
                    className="bg-[#e1f8ec] text-[#10b981] font-bold"
                    size="sm"
                  >
                    {t('why.liquidity.badge1')}
                  </Chip>
                  <Chip
                    className="bg-[#ebf2ff] text-[#1447e6] font-bold"
                    size="sm"
                  >
                    {t('why.liquidity.badge2')}
                  </Chip>
                </div>
              </CardBody>
            </Card>

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