import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import MonkeySprite from "../components/MonkeySprite.js";
import "../App.css";

function Home() {
  const [isFalling, setIsFalling] = useState(false);
  const navigate = useNavigate();

  const handleStartTyping = () => {
    setIsFalling(true);
    setTimeout(() => {
      navigate("/type");
    }, 1500);
  };

  return (
    <div
      style={{
        minHeight: "100vh",
        paddingTop: "53px",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        overflow: "hidden",
        gap: "0",
      }}
    >
      <div
        style={{
          transform: isFalling ? "translateY(200vh)" : "translateY(0)",
          transition: "transform 3s ease-in",
        }}
      >
        <MonkeySprite animation={isFalling ? "air" : "idle"} />
      </div>

      <div
        style={{
          textAlign: "center",
          padding: "0 20px",
          marginTop: "-70px",
          opacity: isFalling ? 0 : 1,
          pointerEvents: isFalling ? "none" : "auto",
          transition: "opacity 0.2s",
        }}
      >
        <h1 style={{ fontSize: "3em", marginBottom: "20px" }}>MonKEYS</h1>
        <div
          style={{
            display: "flex",
            gap: "20px",
            justifyContent: "center",
            flexWrap: "wrap",
          }}
        >
          <button
            onClick={handleStartTyping}
            style={{
              padding: "15px 40px",
              fontSize: "1.2em",
              cursor: "pointer",
              backgroundColor: "#f0f0f0",
              color: "#111",
              border: "2px solid #f0f0f0",
              borderRadius: "8px",
            }}
          >
            Start Typing
          </button>
          <button
            onClick={() => {
              setIsFalling(true);
              setTimeout(() => navigate("/leaderboard"), 1500);
            }}
            style={{
              padding: "15px 40px",
              fontSize: "1.2em",
              cursor: "pointer",
              backgroundColor: "transparent",
              color: "#f0f0f0",
              border: "2px solid #f0f0f0",
              borderRadius: "8px",
            }}
          >
            Leaderboard
          </button>
        </div>
      </div>
    </div>
  );
}

export default Home;
