"use client";

import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";
import { useTranslation } from "react-i18next";

interface SplashScreenProps {
  onComplete: () => void;
}

export function SplashScreen({ onComplete }: SplashScreenProps) {
  const [isFadingOut, setIsFadingOut] = useState(false);
  const { t } = useTranslation();

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsFadingOut(true);
      setTimeout(onComplete, 1000);
    }, 5000);

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

  return (
    <div
      className={`fixed inset-0 transition-opacity duration-1000 flex flex-col items-center justify-end pb-24 ${
        isFadingOut ? "opacity-50" : "opacity-100"
      }`}
      style={{
        background:
          "radial-gradient(circle, transparent 20%, rgba(10, 10, 12, 0.8) 100%)",
      }}
    >
      <motion.div
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 1.2, ease: "easeOut" }}
        className="flex flex-col items-center text-center"
      >
        {/* Заголовок */}
        <h1 className="text-3xl md:text-4xl font-black tracking-[0.6em] text-white ml-[0.6em] drop-shadow-[0_0_20px_rgba(255,255,255,0.3)]">
          NETRUNNER
        </h1>

        {/* Разделитель — немного уменьшил отступы (my-6 вместо my-10), 
            чтобы композиция снизу была компактнее */}
        <div className="flex items-center gap-4 my-6">
          <div className="w-24 h-[1px] bg-primary/50" />
          <div className="w-2 h-2 rotate-45 bg-[#00E5F2] shadow-[0_0_15px_#00E5F2]" />
          <div className="w-24 h-[1px] bg-primary/50" />
        </div>

        {/* Контентная часть */}
        <div className="flex flex-col gap-4">
          <p className="text-[12px] font-mono text-white font-bold tracking-[0.5em] uppercase">
            {t("splash_tagline_1")}
          </p>

          <p className="text-xl md:text-2xl font-mono font-black tracking-[0.8em] uppercase text-[#00E5F2] drop-shadow-[0_0_15px_#00E5F2] animate-pulse ml-[0.8em]">
            {t("splash_tagline_2")}
          </p>
        </div>
      </motion.div>
    </div>
  );
}
