"use client"

import { useEffect, useState } from "react"
import Image from "next/image"

export function RevealScreen() {
  const [isVisible, setIsVisible] = useState(true)
  const [isAnimating, setIsAnimating] = useState(false)

  useEffect(() => {
    // Start fade out animation after 2 seconds
    const timer = setTimeout(() => {
      setIsAnimating(true)
      // Remove the component after animation completes
      setTimeout(() => {
        setIsVisible(false)
      }, 500)
    }, 2000)

    return () => clearTimeout(timer)
  }, [])

  if (!isVisible) return null

  return (
    <div
      className={`fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-500 ${
        isAnimating ? "opacity-0" : "opacity-100"
      }`}
      style={{ backgroundColor: "#118a69" }}
    >
      <div className="flex flex-col items-center">
        <div className="relative w-48 h-48 sm:w-64 sm:h-64 animate-pulse">
          <Image
            src="/images/meti-logo.png"
            alt="METI Logo"
            fill
            style={{ objectFit: "contain" }}
            priority
          />
        </div>
        <div className="mt-8 flex space-x-2">
          <div className="w-3 h-3 bg-white rounded-full animate-bounce" style={{ animationDelay: "0ms" }}></div>
          <div className="w-3 h-3 bg-white rounded-full animate-bounce" style={{ animationDelay: "150ms" }}></div>
          <div className="w-3 h-3 bg-white rounded-full animate-bounce" style={{ animationDelay: "300ms" }}></div>
        </div>
      </div>
    </div>
  )
}