import React, { useState, useEffect } from 'react';const catFacts = [  "Cats have over 20 muscles that control their ears.",  "A group of cats is called a clowder.",  "Cats spend 70% of their lives sleeping.",  "The first cat in space was a French cat named Felicette in 1963.",  "Cats have a third eyelid called the nictitating membrane to protect their eyes.",];const catImages = [  "https://placekitten.com/300/200",  "https://placekitten.com/301/200",  "https://placekitten.com/302/200",  "https://placekitten.com/303/200",  "https://placekitten.com/304/200",];const CatApp = () => {  const [currentFactIndex, setCurrentFactIndex] = useState(0);  const [currentImageIndex, setCurrentImageIndex] = useState(0);  const [factAnimation, setFactAnimation] = useState('');  const [imageAnimation, setImageAnimation] = useState('');  useEffect(() => {    setFactAnimation('slide-in');    const timer = setTimeout(() => setFactAnimation(''), 500);    return () => clearTimeout(timer);  }, [currentFactIndex]);  useEffect(() => {    setImageAnimation('fade-in');    const timer = setTimeout(() => setImageAnimation(''), 500);    return () => clearTimeout(timer);  }, [currentImageIndex]);  const nextFact = () => {    setCurrentFactIndex((prevIndex) => (prevIndex + 1) % catFacts.length);  };  const nextImage = () => {    setCurrentImageIndex((prevIndex) => (prevIndex + 1) % catImages.length);  };  return (    <div style={{      fontFamily: 'Arial, sans-serif',      maxWidth: '600px',      margin: '0 auto',      padding: '20px',      textAlign: 'center',      backgroundColor: '#f0f8ff',      borderRadius: '10px',      boxShadow: '0 0 10px rgba(0,0,0,0.1)',      overflow: 'hidden'    }}>      <h1 style={{color: '#4a4a4a', animation: 'bounce 1s infinite'}}>Cats: Nature's Perfect Companions</h1>      <div style={{        position: 'relative',        height: '200px',        marginBottom: '20px'      }}>        <img          src={catImages[currentImageIndex]}           alt="Cat"           style={{            width: '100%',            maxWidth: '300px',            borderRadius: '10px',            position: 'absolute',            left: '50%',            transform: 'translateX(-50%)',            animation: imageAnimation === 'fade-in' ? 'fadeIn 0.5s' : ''          }}        />      </div>      <div style={{        backgroundColor: 'white',        padding: '15px',        borderRadius: '5px',        marginBottom: '20px',        minHeight: '60px',        position: 'relative',        overflow: 'hidden'      }}>        <p style={{          animation: factAnimation === 'slide-in' ? 'slideIn 0.5s' : '',          margin: 0        }}>          {catFacts[currentFactIndex]}        </p>      </div>      <div>        <button onClick={nextFact} style={buttonStyle('#4CAF50')}>          Next Fact        </button>        <button onClick={nextImage} style={buttonStyle('#008CBA')}>          Next Image        </button>      </div>      <style>        {`          @keyframes fadeIn {            from { opacity: 0; }            to { opacity: 1; }          }          @keyframes slideIn {            from { transform: translateX(100%); }            to { transform: translateX(0); }          }          @keyframes bounce {            0%, 100% { transform: translateY(0); }            50% { transform: translateY(-10px); }          }          button:hover {            transform: scale(1.05);            transition: transform 0.3s ease;          }        `}      </style>    </div>  );};const buttonStyle = (bgColor) => ({  backgroundColor: bgColor,  border: 'none',  color: 'white',  padding: '10px 20px',  textAlign: 'center',  textDecoration: 'none',  display: 'inline-block',  fontSize: '16px',  margin: '4px 2px',  cursor: 'pointer',  borderRadius: '5px',  transition: 'transform 0.3s ease'});export default CatApp;