'use client';

import { useState, useEffect, useRef } from 'react';
import Image from 'next/image';

export default function WhyAssetXSection() {
  const [mounted, setMounted] = useState(false);
  const [visible, setVisible] = useState(false);
  const sectionRef = useRef<HTMLElement>(null);

  useEffect(() => {
    setMounted(true);

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && !visible) {
            setVisible(true);
          }
        });
      },
      {
        threshold: 0.1,
      }
    );

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

    return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current);
      }
    };
  }, [visible]);

  const features = [
    {
      id: 'sustainable',
      icon: '/system-data0.svg',
      title: 'Sustainable Real Yield',
      description: 'Access 15%-30% returns from Delta-neutral arbitrage strategies and commercial credit. No inflationary token emissions, just real profits.',
      image: '/frame-110.svg',
      imageWidth: 305,
      imageHeight: 162,
      large: true
    },
    {
      id: 'reliability',
      icon: '/warning-shield-check0.svg',
      title: 'Proven Reliability',
      description: 'Backed by partners holding HK SFC Licenses (1/2/4/5/9) and NASDAQ-listed entities. Audited, compliant, and transparent.',
      rightIcon: '/icon0.svg',
      large: false
    },
    {
      id: 'liquidity',
      icon: '/arrow-arrow-left-right0.svg',
      title: 'Flexible Liquidity',
      description: 'Solve the illiquidity of traditional finance. Enjoy instant exit via secondary markets or leverage your positions for up to 40% APY.',
      badges: ['40%+ APR', 'Instant Exit'],
      large: false
    }
  ];

  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-[1200px]">
        {/* Header - .frame-27 */}
        <div className="flex flex-col gap-2 items-start justify-start flex-shrink-0 w-[1200px] 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
            }}
          >
            Why ASSETX?
          </h2>

          {/* Subtitle */}
          <p
            className="text-[#9ca1af] text-left relative font-inter"
            style={{
              fontSize: '20px',
              lineHeight: '140%',
              fontWeight: 400
            }}
          >
            Institutional-grade access to real-world yield, with DeFi-native composability.
          </p>
        </div>

        {/* Cards Container - .frame-30 */}
        <div className="flex flex-row gap-6 items-center justify-start flex-shrink-0 w-[1199px] 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
              ${
                mounted && visible
                  ? '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
                  }}
                >
                  Sustainable Real Yield
                </h3>
                <p
                  className="text-[#9ca1af] text-left relative self-stretch font-inter"
                  style={{
                    fontSize: '16px',
                    lineHeight: '150%',
                    fontWeight: 400
                  }}
                >
                  Access 15%-30% returns from Delta-neutral arbitrage strategies and commercial credit. No inflationary token emissions, just real profits.
                </p>
              </div>
            </div>

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

          {/* Right Column - .frame-29 */}
          <div className="flex flex-col gap-6 items-start justify-start flex-shrink-0 w-[790px] 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
                ${
                  mounted && visible
                    ? '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
                      }}
                    >
                      Proven Reliability
                    </h3>
                    <p
                      className="text-[#9ca1af] text-left relative font-inter"
                      style={{
                        fontSize: '16px',
                        lineHeight: '150%',
                        fontWeight: 400
                      }}
                    >
                      Backed by partners holding HK SFC Licenses (1/2/4/5/9) and NASDAQ-listed entities. Audited, compliant, and transparent.
                    </p>
                  </div>
                </div>

                {/* Right Icon */}
                <div className="flex items-center justify-center">
                  <Image
                    src="/icon0.svg"
                    alt="Icon"
                    width={200}
                    height={200}
                  />
                </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
                ${
                  mounted && visible
                    ? '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-col gap-6 items-start justify-start self-stretch flex-shrink-0 relative">
                {/* Top Section with Icon and Badges */}
                <div className="flex flex-col gap-6 items-start justify-start flex-shrink-0 relative">
                  {/* Icon and Badges Row */}
                  <div className="flex flex-row gap-6 items-center justify-start 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>

                    {/* Badges */}
                    <div className="flex flex-col gap-2">
                      <div className="bg-[#f9fafb] rounded-lg px-3 py-1 flex items-center justify-center">
                        <span className="text-[#111827] font-inter text-sm font-bold">40%+ APR</span>
                      </div>
                      <div className="bg-[#f9fafb] rounded-lg px-3 py-1 flex items-center justify-center">
                        <span className="text-[#111827] font-inter text-sm font-bold">Instant Exit</span>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Text Content */}
                <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
                    }}
                  >
                    Flexible Liquidity
                  </h3>
                  <p
                    className="text-[#9ca1af] text-left relative font-inter"
                    style={{
                      fontSize: '16px',
                      lineHeight: '150%',
                      fontWeight: 400
                    }}
                  >
                    Solve the illiquidity of traditional finance. Enjoy instant exit via secondary markets or leverage your positions for up to 40% APY.
                  </p>
                </div>
              </div>
            </div>

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