REXNT/src/Components/ImagePreloader.jsx

import { useState, useEffect } from "react";

// Import all images statically
// import home1 from "../assets/home1.jpg";
// import home1Mobile from "../assets/home1-2.jpg";
// import home2 from "../assets/home2.jpg";
// import home2Mobile from "../assets/home2-2.jpg";
// import home3 from "../assets/home3.png";
// import home4 from "../assets/home4.png";
// // import home4Mobile from "../assets/home4-2.jpg";
// import home5 from "../assets/home5.png";
// import home6 from "../assets/home6.jpg";
// import home6Mobile from "../assets/home6-2.jpg";
// import home7 from "../assets/home7.jpg";
// import home7Mobile from "../assets/home7-2.jpg";
// import home8 from "../assets/home8.jpg";
// import home8Mobile from "../assets/home8-2.jpg";
// import home9 from "../assets/home9.jpg";
// import home10 from "../assets/home10.jpg";

// Services images
// import gasStation from "../assets/Images/gasstation.jpg";


// List all critical images that need to be preloaded
const imagesToPreload = [
  // Home images
  // home1,
  // home1Mobile,
  // home2,
  // home2Mobile,
  // home3,
  // home4,
  // home4Mobile,
  // home5,
  // home6,
  // home6Mobile,
  // home7,
  // home7Mobile,
  // home8,
  // home8Mobile,
  // home9,
  // home10,
  // Services images
  // gasStation,

];

const ImagePreloader = ({ children }) => {
  const [imagesLoaded, setImagesLoaded] = useState(false);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    let loadedCount = 0;
    const totalImages = imagesToPreload.length;

    const preloadImages = async () => {
      try {
        const loadImage = (src) => {
          return new Promise((resolve, reject) => {
            const img = new Image();
            img.src = src;
            img.onload = () => {
              loadedCount++;
              setProgress(Math.floor((loadedCount / totalImages) * 100));
              resolve();
            };
            img.onerror = reject;
          });
        };

        await Promise.all(imagesToPreload.map(loadImage));
        setImagesLoaded(true);
      } catch (error) {
        console.error("Failed to preload images:", error);
        // Continue anyway after a timeout
        setTimeout(() => setImagesLoaded(true), 3000);
      }
    };

    preloadImages();
  }, []);

  if (!imagesLoaded) {
    return (
      <div className="fixed inset-0 bg-gradient-to-b from-[#0A2540] to-[#10375C] flex flex-col items-center justify-center z-50">
        {/* Animated background effect */}
        <div className="absolute inset-0 overflow-hidden opacity-10">
          <div className="absolute top-0 left-0 w-full h-full">
            {[...Array(20)].map((_, i) => (
              <div
                key={i}
                className="absolute rounded-full bg-white/30"
                style={{
                  width: `${Math.random() * 10 + 5}px`,
                  height: `${Math.random() * 10 + 5}px`,
                  top: `${Math.random() * 100}%`,
                  left: `${Math.random() * 100}%`,
                  animationDuration: `${Math.random() * 10 + 10}s`,
                  animationDelay: `${Math.random() * 5}s`,
                }}
              />
            ))}
          </div>
        </div>

        {/* Company logo or branding could go here */}
        <div className="mb-12 text-[#F3C623] text-3xl font-bold tracking-wider">
          TPS
        </div>

        {/* 3D-style Fuel Tank */}
        <div className="relative w-72 h-56 mb-8 perspective-800">
          {/* Tank body with 3D effect */}
          <div
            className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-56 h-40 rounded-lg overflow-hidden shadow-2xl"
            style={{
              background: "linear-gradient(145deg, #0A2540 0%, #102A45 100%)",
              boxShadow:
                "inset 0 0 15px rgba(0,0,0,0.5), 0 10px 20px rgba(0,0,0,0.3)",
              border: "1px solid rgba(255,255,255,0.1)",
            }}
          >
            {/* Glass effect overlay */}
            <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none"></div>

            {/* Tank Cap with metallic effect */}
            <div
              className="absolute -top-3 left-1/2 transform -translate-x-1/2 w-10 h-6 rounded-t-md"
              style={{
                background:
                  "linear-gradient(to bottom, #F3C623 0%, #EB8317 100%)",
                boxShadow: "0 -2px 5px rgba(0,0,0,0.2)",
              }}
            >
              <div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-6 h-1 bg-[#0A2540]/30 rounded-full"></div>
            </div>

            {/* Fuel Level with dynamic wave effect */}
            <div
              className="absolute bottom-0 left-0 right-0 transition-all duration-500 ease-out"
              style={{
                height: `${progress}%`,
                background: "linear-gradient(to top, #EB8317 0%, #F3C623 100%)",
                boxShadow: "0 -5px 15px rgba(235,131,23,0.3)",
              }}
            >
              {/* Animated wave effect at the top of fuel */}
              <div className="absolute -top-2 left-0 w-full h-4 animate-wave">
                <div
                  className="relative w-[200%] h-full"
                  style={{
                    backgroundImage:
                      "linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)",
                    backgroundSize: "50% 100%",
                    animation: "moveWave 3s linear infinite",
                  }}
                ></div>
              </div>

              {/* Bubbles with varied animations */}
              {[...Array(8)].map((_, i) => (
                <div
                  key={i}
                  className="absolute rounded-full bg-white/20"
                  style={{
                    width: `${Math.random() * 6 + 2}px`,
                    height: `${Math.random() * 6 + 2}px`,
                    bottom: `${Math.random() * 80}%`,
                    left: `${Math.random() * 90 + 5}%`,
                    animation: `bubble ${
                      Math.random() * 3 + 2
                    }s ease-in infinite ${Math.random() * 2}s`,
                  }}
                />
              ))}
            </div>

            {/* Tank level markings with glow effect */}
            <div className="absolute top-0 left-0 h-full w-full flex flex-col justify-between pointer-events-none">
              {[...Array(4)].map((_, i) => (
                <div
                  key={i}
                  className="w-full border-b border-[#F3C623]/20 h-1/4"
                  style={{
                    boxShadow:
                      progress > 75 - i * 25
                        ? "0 1px 3px rgba(243,198,35,0.3)"
                        : "none",
                  }}
                >
                  <div className="absolute right-0 w-2 h-0.5 bg-[#F3C623]/40"></div>
                </div>
              ))}
            </div>
          </div>

          {/* Fuel Gauge with realistic dial */}
          <div
            className="absolute top-0 right-0 w-20 h-20 rounded-full flex items-center justify-center"
            style={{
              background:
                "radial-gradient(circle at center, #102A45 0%, #0A2540 70%)",
              boxShadow:
                "inset 0 0 10px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.2)",
              border: "2px solid rgba(235,131,23,0.7)",
            }}
          >
            {/* Gauge markings */}
            {[...Array(9)].map((_, i) => {
              const rotation = -135 + i * 30;
              const isLarge = i % 2 === 0;
              return (
                <div
                  key={i}
                  className={`absolute w-${isLarge ? "1.5" : "1"} h-${
                    isLarge ? "3" : "2"
                  } bg-[#F3C623]/${isLarge ? "70" : "40"}`}
                  style={{
                    transform: `rotate(${rotation}deg) translateY(-7px)`,
                    transformOrigin: "bottom center",
                  }}
                />
              );
            })}

            {/* Gauge needle with smooth animation */}
            <div
              className="absolute w-1 h-9 bg-gradient-to-t from-[#EB8317] to-[#F3C623] rounded-t-full origin-bottom"
              style={{
                transform: `rotate(${-135 + progress * 2.7}deg)`,
                transition: "transform 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
                boxShadow: "0 0 5px rgba(243,198,35,0.5)",
              }}
            >
              <div className="absolute -top-1 left-1/2 transform -translate-x-1/2 w-2 h-2 rounded-full bg-[#F3C623] shadow-lg"></div>
            </div>

            {/* Center pin */}
            <div className="absolute w-4 h-4 bg-[#0A2540] rounded-full border-2 border-[#EB8317] shadow-inner"></div>

            {/* E and F indicators */}
            <div className="absolute bottom-4 left-4 text-[#F3C623]/70 text-xs font-bold">
              E
            </div>
            <div className="absolute bottom-4 right-4 text-[#F3C623]/70 text-xs font-bold">
              F
            </div>
          </div>
        </div>

        {/* Progress indicator with animated glow */}
        <div className="relative">
          <p
            className="text-white text-2xl font-bold"
            style={{
              textShadow: "0 0 10px rgba(255,255,255,0.3)",
            }}
          >
            {progress}%
          </p>
          <div
            className="absolute -inset-4 rounded-full opacity-0"
            style={{
              background:
                "radial-gradient(circle, rgba(243,198,35,0.3) 0%, transparent 70%)",
              animation: "pulse 2s ease-in-out infinite",
            }}
          ></div>
        </div>

        <p className="mt-2 text-gray-300 font-medium tracking-wide">
          Filling your tank...
        </p>

        {/* Advanced animations */}
        {/* <style jsx>{`
          @keyframes bubble {
            0% {
              transform: translateY(0) scale(0.8);
              opacity: 0;
            }
            20% {
              opacity: 0.8;
              transform: translateY(-10px) scale(1);
            }
            80% {
              opacity: 0.8;
              transform: translateY(-30px) scale(0.9);
            }
            100% {
              transform: translateY(-40px) scale(0.3);
              opacity: 0;
            }
          }

          @keyframes pulse {
            0% {
              opacity: 0;
              transform: scale(0.8);
            }
            50% {
              opacity: 0.5;
              transform: scale(1.1);
            }
            100% {
              opacity: 0;
              transform: scale(0.8);
            }
          }

          @keyframes moveWave {
            0% {
              transform: translateX(0);
            }
            100% {
              transform: translateX(-50%);
            }
          }

          .perspective-800 {
            perspective: 800px;
          }

          .animate-wave {
            overflow: hidden;
          }
        `}</style> */}
      </div>
    );
  }

  return <>{children}</>;
};

export default ImagePreloader;