"use client"

import { motion, AnimatePresence } from "framer-motion"
import { useEffect, useState } from "react"

interface PageTransitionProps {
  isVisible: boolean
  onComplete: () => void
}

export function PageTransition({ isVisible, onComplete }: PageTransitionProps) {
  const [showText, setShowText] = useState(false)
  const tagline = "Gücümüzü Ekibimizden Alıyoruz"

  useEffect(() => {
    if (isVisible) {
      // Start text animation after logo appears
      const textTimer = setTimeout(() => setShowText(true), 300)
      // Complete transition after animation
      const completeTimer = setTimeout(() => onComplete(), 1800)
      
      return () => {
        clearTimeout(textTimer)
        clearTimeout(completeTimer)
      }
    } else {
      setShowText(false)
    }
  }, [isVisible, onComplete])

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.3 }}
          className="fixed inset-0 z-[100] flex flex-col items-center justify-center"
          style={{ backgroundColor: "#050505" }}
        >
          {/* Background Pattern */}
          <div className="absolute inset-0 opacity-5">
            <div className="absolute inset-0" style={{
              backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ff7a00' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
            }} />
          </div>

          {/* Logo */}
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5, ease: "easeOut" }}
            className="relative mb-8"
          >
            <div className="text-4xl md:text-5xl font-black tracking-tight">
              <span className="text-white">SES</span>
              <span style={{ color: "#ff7a00" }}> ENDÜSTRİ</span>
            </div>
            {/* Orange glow under logo */}
            <motion.div
              initial={{ opacity: 0, scaleX: 0 }}
              animate={{ opacity: 1, scaleX: 1 }}
              transition={{ duration: 0.6, delay: 0.3 }}
              className="absolute -bottom-2 left-0 right-0 h-0.5 origin-center"
              style={{ 
                backgroundColor: "#ff7a00",
                boxShadow: "0 0 20px #ff7a00, 0 0 40px #ff7a0080"
              }}
            />
          </motion.div>

          {/* Animated Tagline */}
          <div className="h-12 flex items-center justify-center overflow-hidden px-4">
            {showText && (
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                className="flex justify-center"
              >
                {tagline.split("").map((char, index) => (
                  <motion.span
                    key={index}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{
                      duration: 0.05,
                      delay: index * 0.03,
                      ease: "easeOut"
                    }}
                    className="text-lg md:text-2xl font-bold"
                    style={{ 
                      color: "#ff7a00",
                      textShadow: "0 0 10px #ff7a0060, 0 0 20px #ff7a0040, 0 0 30px #ff7a0020"
                    }}
                  >
                    {char === " " ? "\u00A0" : char}
                  </motion.span>
                ))}
              </motion.div>
            )}
          </div>

          {/* Loading indicator */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.5 }}
            className="absolute bottom-12 left-1/2 -translate-x-1/2"
          >
            <div className="flex gap-1.5">
              {[0, 1, 2].map((i) => (
                <motion.div
                  key={i}
                  animate={{
                    scale: [1, 1.3, 1],
                    opacity: [0.5, 1, 0.5],
                  }}
                  transition={{
                    duration: 0.8,
                    repeat: Infinity,
                    delay: i * 0.15,
                  }}
                  className="w-2 h-2 rounded-full"
                  style={{ backgroundColor: "#ff7a00" }}
                />
              ))}
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}