'use client';

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

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

  useEffect(() => {
    const timer = setTimeout(() => {
      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: 'transform 1s ease-out, opacity 1s ease-out'
      }}
    >
      {/* Start Investing Button */}
      <Button
        size="lg"
        className="bg-white text-[#111827] font-bold text-lg h-[60px] px-8"
        endContent={
          <Image
            src="/component-10.svg"
            alt="Arrow"
            width={20}
            height={20}
            className="flex-shrink-0"
          />
        }
      >
        {t('hero.startInvesting')}
      </Button>

      {/* Read the Whitepaper Button */}
      <Button
        size="lg"
        variant="bordered"
        className="border-white/20 bg-white/10 text-white font-bold text-lg h-[60px] px-8 backdrop-blur-[30px] hover:bg-white/20 hover:border-white/40"
      >
        {t('hero.readWhitepaper')}
      </Button>
    </div>
  );
}