"use client"

import type React from "react"
import { useEffect, useState } from "react"

const CourseComplete: React.FC = () => {

  const [animationPhase, setAnimationPhase] = useState(0)

  useEffect(() => {
    const timer1 = setTimeout(() => setAnimationPhase(1), 500)
    const timer2 = setTimeout(() => setAnimationPhase(2), 1000)
    const timer3 = setTimeout(() => setAnimationPhase(3), 1500)
    const timer4 = setTimeout(() => setAnimationPhase(3), 2000)

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

  return (



    <div className="min-h-screen bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] flex items-center justify-center">
      {/* Men Animation */}


      <div className="min-h-screen p-4 relative overflow-hidden max-w-4xl mx-auto">
        <div className="absolute inset-0 flex items-start justify-center pt-30">
          {/* тело */}
          <div className="absolute top-20 left-1/2 transform -translate-x-1/2">
            <svg xmlns="http://www.w3.org/2000/svg" width="109" height="166" viewBox="0 0 109 166" fill="none">
              <rect width="109" height="166" rx="39" fill="#F3945B" />
            </svg>
          </div>

          {/* руки */}
          <div className="absolute top-80 left-[20%] transform -translate-y-1/2">
            <svg xmlns="http://www.w3.org/2000/svg" width="292" height="221" viewBox="0 0 292 221" fill="none">
              <path d="M26 78.0571C43.5001 101.057 67.9999 122.5 111 129C154 135.5 164 119.557 202.5 138.557C241 157.557 248.5 188.057 252 203.057C255.5 218.057 270 221.057 277.5 220.057C285 219.057 289.5 212.557 291 206.057C292.5 199.557 287.5 159.557 246.5 121.557C205.5 83.5571 174 95.0575 114.5 89.5571C55.0001 84.0568 39.5 24.0576 34 9.55715C28.5001 -4.94333 -1.70972e-05 -2.94326 0 15.5571C1.70972e-05 34.0576 8.49988 55.0571 26 78.0571Z" fill="black" />
            </svg>
          </div>

          {/* нога 1 */}
          <div className="absolute bottom-[ -20px ] left-[ calc(50% -60px) ] w-[37px] h-[129px]">
            <svg xmlns="http://www.w3.org/2000/svg" width="37" height="129" viewBox="0 0 37 129" fill="none">
              <rect width="37" height="129" rx="18.5" fill="#F3945B" />
            </svg>
          </div>

          {/* нога 2 */}
          <div className="absolute bottom-[ -20px ] right-[ calc(50% -60px) ] w-[37px] h-[178px]">
            <svg xmlns="http://www.w3.org/2000/svg" width="37" height="178" viewBox="0 0 37 178" fill="none">
              <rect width="37" height="178" rx="18.5" fill="#F3945B" />
            </svg>
          </div>

          {/* голова */}
          <div className="absolute top-2.5 left-1/2 transform -translate-x-1/2">
            <svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" viewBox="0 0 75 75" fill="none">
              <circle cx={37.5} cy={37.5} r={37.5} fill="#F3945B" />
            </svg>
          </div>

          {/* мяч */}
          <div className='absolute top-[-10px] left-1/2 transform -translate-x-1/2'>
            <svg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54' fill='none'>
              <circle cx='27' cy='27' r='27' fill='#F3945B' />
            </svg>
          </div>
        </div>



        <div className="text-center z-10 max-w-md">

          {/* Main Content */}
          <div className="flex items-center justify-center min-h-screen">
            <div className="text-center px-8 z-10">
              {/* App Name */}
              <div
                className={`transition-opacity duration-1000 delay-100 ${animationPhase >= 1 ? "opacity-100" : "opacity-0"}`}
              >
                <h1 className="text-5xl font-black text-white mb-4 tracking-tight filter drop-shadow-lg">Реабилитация</h1>
                {/* Line Loader - now appears with subtitle in phase 4, and grows from left to right */}
<div
  className="h-1 bg-white/70 rounded-full mx-auto my-2 transition-all duration-500 ease-out"
  style={{
    width: animationPhase >= 3 ? '320px' : '0px', // или начальное значение
    maxWidth: '320px',
    opacity: animationPhase >= 3 ? 1 : 0,
  }}
></div>
                {/* Subtitle - appears with opacity transition in phase 4 */}
                <p className={`text-white/90 text-xl font-medium tracking-wide transition-opacity duration-1000 ${animationPhase >= 1 ? 'opacity-100' : 'opacity-0'}`}>
                  Восстановление через движение
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div >
  )
}

export default CourseComplete