import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { FaHome } from 'react-icons/fa';
import FuzzyText from '../components/reactbits/TextAnimations/FuzzyText/FuzzyText';
import notFoundImage from '../assets/404.webp';
import catImage from '../assets/cat.png';

const NotFoundPage = () => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    setIsVisible(true);
  }, []);

  return (
    <div className="min-h-screen bg-campfire-dark flex flex-col items-center justify-center p-4">
      <div className={`text-center transition-opacity duration-1000 ${isVisible ? 'opacity-100' : 'opacity-0'}`}>
      <img
  src={catImage}
  alt="Кот в капюшоне"
  className={`w-full max-w-md mb-8 mx-auto transition-all duration-1000 ease-out ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-16'}`} // Увеличено translate-y для большего начального смещения
/>
        <FuzzyText
          fontSize="clamp(4rem, 15vw, 12rem)"
          fontWeight={900}
          color="#FFA500"
          baseIntensity={0.2}
          hoverIntensity={0.6}
        >
          404
        </FuzzyText>
        <p className="text-campfire-light text-xl mt-4 mb-8">
          Страница не найдена
        </p>
        <Link
          to="/"
          className="inline-flex items-center px-6 py-3 bg-campfire-amber text-campfire-dark rounded-lg hover:bg-campfire-amber/90 transition-colors duration-200"
        >
          <FaHome className="mr-2" />
          окак
        </Link>
      </div>
    </div>
  );
};

export default NotFoundPage;
