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;