'use client';

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

export default function HeroButtons() {
  const { t } = useLanguage();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    console.log('HeroButtons mounted');
    // 延迟一些时间后再触发按钮动画，形成渐进效果
    const timer = setTimeout(() => {
      console.log('HeroButtons animation starting');
      setMounted(true);
    }, 500);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div
      className="flex flex-row gap-5 items-start justify-start flex-shrink-0 relative"
      style={{
        transform: mounted ? 'translateY(0)' : 'translateY(3rem)',
        opacity: mounted ? 1 : 0,
        transition: 'all 1s ease-out'
      }}
      suppressHydrationWarning
    >
      {/* .component-82 - Start Investing Button */}
      <button
        className="bg-white flex flex-row gap-2 items-center justify-center flex-shrink-0 h-[60px] relative overflow-hidden hover:bg-[#f3f4f6] transition-colors"
        style={{
          borderRadius: '4px',
          padding: '0px 32px'
        }}
      >
        {/* .text4 */}
        <div
          className="text-[#111827] text-center relative flex items-center justify-center font-inter"
          style={{
            fontSize: '18px',
            lineHeight: '150%',
            fontWeight: 700
          }}
        >
          {t('hero.startInvesting')}
        </div>

        {/* .component-1 - Arrow icon */}
        <Image
          src="/component-10.svg"
          alt="Arrow"
          width={20}
          height={20}
          className="flex-shrink-0 w-5 h-5 relative overflow-visible"
          style={{ aspectRatio: 1 }}
        />
      </button>

      {/* .component-9 - Read the Whitepaper Button */}
      <button
        className="border border-white/20 flex flex-row gap-2 items-center justify-center self-stretch flex-shrink-0 relative overflow-hidden hover:bg-white/70 hover:border-white/60 transition-all"
        style={{
          background: 'rgba(255, 255, 255, 0.1)',
          borderRadius: '4px',
          padding: '12px 32px',
          backdropFilter: 'blur(30px)'
        }}
      >
        {/* .text5 */}
        <div
          className="text-[#fcfcfd] text-center relative flex items-center justify-center font-inter"
          style={{
            fontSize: '18px',
            lineHeight: '150%',
            fontWeight: 700
          }}
        >
          {t('hero.readWhitepaper')}
        </div>
      </button>
    </div>
  );
}