asset-homepage/components/SecuritySection.tsx

'use client';

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

export default function SecuritySection() {
  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 = [
    {
      icon: '/interface-search-magnifying-glass0.svg',
      title: 'Audited',
      description: 'Smart contracts audited by top-tier firms. Underlying assets undergo strict due diligence and financial auditing.',
      position: 'top-left'
    },
    {
      icon: '/navigation-building-010.svg',
      title: 'Segregated',
      description: 'SPV Setup. User assets are held in segregated Special Purpose Vehicles, isolated from platform risks.',
      position: 'top-right'
    },
    {
      icon: '/interface-chart-bar-vertical-010.svg',
      title: 'Transparency',
      description: 'Real-Time NAV. Fund performance data and asset valuations are publicly available and updated on-chain.',
      position: 'bottom-left'
    },
    {
      icon: '/component-11.svg',
      title: 'Powered By NASDAQ & HKEX Listed Partners',
      description: 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'
      }}
    >
      {/* Main Container */}
      <div className="flex flex-row items-start justify-start flex-shrink-0 w-[1440px] relative">

        {/* Left Side - Title */}
        <div
          className={`flex flex-row items-center justify-center flex-shrink-0 w-[459px] h-[604px] relative transition-all duration-700 ease-out ${
            mounted && visible
              ? 'translate-x-0 opacity-100'
              : '-translate-x-12 opacity-0'
          }`}
          style={{
            borderStyle: 'solid',
            borderColor: '#222222',
            borderWidth: '0px 0px 1px 0px',
            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"
              style={{
                fontSize: '48px',
                lineHeight: '120%',
                letterSpacing: '-0.01em',
                fontWeight: 400
              }}
            >
              Security First Architecture
            </h2>
            <p
              className="text-[#9ca1af] text-left relative w-[290px] flex items-center justify-start font-domine"
              style={{
                fontSize: '16px',
                lineHeight: '150%',
                fontWeight: 400
              }}
            >
              Real-time data transparency with segregated asset management.
            </p>
          </div>
        </div>

        {/* Right Side - Grid */}
        <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) => (
            <div
              key={feature.title}
              className={`flex flex-col items-start justify-center relative transition-all duration-700 ease-out ${
                mounted && visible
                  ? 'translate-y-0 opacity-100'
                  : 'translate-y-12 opacity-0'
              }`}
              style={{
                borderStyle: 'solid',
                borderColor: '#222222',
                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',
                padding: '72px 48px 72px 48px',
                gridColumn: feature.position.includes('left') ? '1 / span 1' : '2 / span 1',
                gridRow: feature.position.includes('top') ? '1 / span 1' : '2 / span 1',
                height: feature.position === 'bottom-right' ? '302px' : 'auto',
                transitionDelay: `${index * 150}ms`
              }}
            >
              {feature.special ? (
                // Special card (bottom-right)
                <div className="flex flex-col gap-6 items-start justify-center self-stretch flex-shrink-0 h-[166px] relative">
                  <div className="flex flex-col gap-4 items-start justify-start self-stretch flex-shrink-0 relative">
                    <h3
                      className="text-[#fcfcfd] text-left relative self-stretch font-domine"
                      style={{
                        fontSize: '24px',
                        lineHeight: '140%',
                        fontWeight: 400
                      }}
                    >
                      {feature.title}
                    </h3>
                    <Image
                      src={feature.icon}
                      alt="Icon"
                      width={24}
                      height={24}
                      className="flex-shrink-0"
                    />
                  </div>
                </div>
              ) : (
                // Regular cards
                <div className="flex flex-col gap-6 items-start justify-start self-stretch flex-shrink-0 relative">
                  <Image
                    src={feature.icon}
                    alt={feature.title}
                    width={32}
                    height={32}
                    className="flex-shrink-0"
                  />
                  <div className="flex flex-col gap-2 items-start justify-start self-stretch flex-shrink-0 relative">
                    <h3
                      className="text-[#fcfcfd] text-left relative self-stretch font-inter"
                      style={{
                        fontSize: '24px',
                        lineHeight: '130%',
                        letterSpacing: '-0.005em',
                        fontWeight: 700
                      }}
                    >
                      {feature.title}
                    </h3>
                    <p
                      className="text-[#9ca1af] text-left relative self-stretch font-inter"
                      style={{
                        fontSize: '14px',
                        lineHeight: '150%',
                        fontWeight: 400
                      }}
                    >
                      {feature.description}
                    </p>
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* Logo */}
      <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>
  );
}