"use client"
import { useEffect, useState } from "react"
import { useHistory } from "react-router-dom"
import manImage from "../assets/man.svg" // Reverted to original import

export default function Welcome() {
  const history = useHistory()
  const [animationPhase, setAnimationPhase] = useState(0)

  useEffect(() => {
    const timer1 = setTimeout(() => setAnimationPhase(1), 500)
    const timer2 = setTimeout(() => setAnimationPhase(2), 1500)
    const timer3 = setTimeout(() => setAnimationPhase(3), 2500)
    // const timer4 = setTimeout(() => history.push("/login"), 4000) // Uncomment if you want auto-redirect

    return () => {
      clearTimeout(timer1)
      clearTimeout(timer2)
      clearTimeout(timer3)
      // clearTimeout(timer4)
    }
  }, [history])

  return (
    <div className="min-h-screen relative overflow-hidden">
      <img
        className="h-[30rem] lg:h-[50rem] w-auto z-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-15"
        src={manImage || "/placeholder.svg"} // Reverted to original img tag and src
        alt="Man illustration"
      />
      {/* Uncomment and update path for emblemImage if needed */}
      {/* <img
        className="h-[30rem] lg:h-[0rem] w-auto z-50 absolute right-0 bottom-0 transform opacity-10"
        src={emblemImage || "/placeholder.svg"} // Reverted to original img tag and src
        alt="Emblem"
      /> */}
      <div className="absolute inset-0 bg-gradient-to-br from-[#3ABBC7] to-[#0D212C]">
        {/* Floating particles */}
        <div className="absolute inset-0">
          <div className="absolute top-20 left-10 w-32 h-32 bg-white/5 rounded-full animate-pulse blur-xl"></div>
          <div className="absolute bottom-32 right-16 w-24 h-24 bg-white/10 rounded-full animate-bounce blur-lg"></div>
          <div className="absolute top-1/2 left-1/4 w-16 h-16 bg-white/5 rounded-full animate-ping blur-md"></div>
          <div className="absolute top-1/3 right-1/3 w-20 h-20 bg-white/5 rounded-full animate-pulse blur-lg"></div>
        </div>
        {/* Main Content */}
        <div className="flex items-center justify-center min-h-screen">
          <div className="text-center z-10 px-8">
            {/* App Name */}
            <div
              className={`transition-all duration-1000 delay-300 ${
                animationPhase >= 1 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
              }`}
            >
              <h1 className="text-5xl font-black text-white mb-4 tracking-tight filter drop-shadow-lg">Реабилитация</h1>
              <p className="text-white/90 text-xl font-medium tracking-wide">Восстановление через движение</p>
            </div>
            {/* Loading indicator */}
            <div
              className={`mt-16 transition-all duration-500 delay-700 ${
                animationPhase >= 1 ? "opacity-100" : "opacity-0"
              }`}
            >
              <div className="w-64 h-3 bg-white/10 rounded-full mx-auto overflow-hidden backdrop-blur-sm border border-white/20">
                <div
                  className="h-full bg-gradient-to-r from-white via-white/80 to-white rounded-full shadow-lg"
                  style={{
                    width: `${Math.min((animationPhase + 1) * 25, 100)}%`,
                    transition: "width 0.8s cubic-bezier(0.4, 0, 0.2, 1)",
                  }}
                ></div>
              </div>
              <p className="text-white/70 text-lg mt-6 font-medium">Загрузка...</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}