'use client';

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

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

  useEffect(() => {
    console.log('HeroTitle mounted');
    const timer = setTimeout(() => {
      console.log('HeroTitle animation starting');
      setMounted(true);
    }, 400);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div
      className="flex flex-col gap-8 items-start justify-start self-stretch flex-shrink-0 relative"
      style={{
        transform: mounted ? 'translateY(0)' : 'translateY(3rem)',
        opacity: mounted ? 1 : 0,
        transition: 'all 1s ease-out'
      }}
      suppressHydrationWarning
    >
      {/* .frame-22 - 标题容器 */}
      <div className="flex flex-col gap-4 items-start justify-start self-stretch flex-shrink-0 relative">
        {/* .yield-bearing-asset */}
        <div
          className="text-[#fcfcfd] text-left relative self-stretch font-domine"
          style={{
            fontSize: '100px',
            lineHeight: '100%',
            letterSpacing: '-0.03em',
            fontWeight: 400
          }}
        >
          {t('hero.title1')}
        </div>

        {/* .on-chain */}
        <div
          className="text-[#fcfcfd] text-left relative w-[926px] h-[100px] font-domine"
          style={{
            fontSize: '100px',
            lineHeight: '100%',
            letterSpacing: '-0.03em',
            fontWeight: 700
          }}
        >
          {t('hero.title2')}
        </div>
      </div>

      {/* Description text */}
      <div
        className="text-[#fcfcfd] text-left relative w-[488px] flex items-center justify-start font-domine"
        style={{
          fontSize: '16px',
          lineHeight: '150%',
          fontWeight: 400
        }}
      >
        {t('hero.description')}
      </div>
    </div>
  );
}