diff --git a/src/App.jsx b/src/App.jsx
index 4f363b5..13faf51 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,94 @@
-import React from "react";
+// import React from "react";
+// import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
+// import { AnimatePresence, LayoutGroup } from "framer-motion";
+
+// import "./i18n";
+// import "./App.css";
+
+// import Navbar from "./Components/Nav/Navbar";
+// import Home from "./Components/Sections/Home/Home";
+// import Services from "./Components/Sections/Services/Services";
+// import About from "./Components/Sections/About/About";
+// import Departments from "./Components/Sections/Departments/Departments";
+// import DepartmentDetail from "./Components/Sections/DepartmentDetail/DepartmentDetail";
+// import Contact from "./Components/Sections/Contact/Contact";
+// import Footer from "./Components/Nav/Footer";
+// import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2";
+
+// const MainPage = () => {
+//   return (
+//     <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
+//       <div className="flex flex-col min-h-screen">
+//         <main className="flex-grow">
+//           <Home />
+//           <Services />
+//           <About />
+//           <Departments />
+//           <Contact />
+//         </main>
+//         <Footer />
+//       </div>
+//     </div>
+//   );
+// };
+
+// function RouterView() {
+//   const location = useLocation();
+
+//   return (
+//     <LayoutGroup>
+//       <AnimatePresence mode="wait" initial={false}>
+//         <Routes location={location} key={location.pathname}>
+//           <Route path="/" element={<MainPage />} />
+//           <Route path="/departments/:id" element={<DepartmentDetail />} />
+//           <Route path="/department-detail2" element={<DepartmentDetail2 />} />
+//         </Routes>
+//       </AnimatePresence>
+//     </LayoutGroup>
+//   );
+// }
+
+// function Layout() {
+//   const location = useLocation();
+
+//   const excludedExactPaths = [
+//     "/department-detail2",
+//   ];
+
+//   const excludedPrefixes = ["/departments/"];
+
+//   const isExcludedExact = excludedExactPaths.includes(location.pathname);
+//   const isExcludedPrefix = excludedPrefixes.some((p) => location.pathname.startsWith(p));
+
+//   const hideNavbar = isExcludedExact || isExcludedPrefix;
+
+//   const navbarHeight = hideNavbar ? 0 : 56;
+
+//   return (
+//     <>
+//       {!hideNavbar && <Navbar />}
+
+//       <div style={{ paddingTop: navbarHeight }}>
+//         <RouterView />
+//       </div>
+//     </>
+//   );
+// }
+
+// const App = () => {
+//   return (
+//     <BrowserRouter>
+//       <Layout />
+//     </BrowserRouter>
+//   );
+// };
+
+// export default App;
+
+
+
+
+import React, { useState, useEffect } from "react";
 import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
 import { AnimatePresence, LayoutGroup } from "framer-motion";
 
@@ -14,32 +104,45 @@ import DepartmentDetail from "./Components/Sections/DepartmentDetail/DepartmentD
 import Contact from "./Components/Sections/Contact/Contact";
 import Footer from "./Components/Nav/Footer";
 import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2";
+import ImagePreloader from "./Components/ImagePreloader";
+import BackgroundCanvas from "./Components/BackgroundCanvas/BackgroundCanvas";
 
-const MainPage = () => {
+// المكون الرئيسي الذي يظهر في الصفحة الرئيسية
+const MainPage = ({ theme }) => {
   return (
-    <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
+    <div className="min-h-screen bg-transparent">
       <div className="flex flex-col min-h-screen">
         <main className="flex-grow">
           <Home />
           <Services />
-          <About />
+          <About theme={theme} />
           <Departments />
           <Contact />
         </main>
-        <Footer />
       </div>
     </div>
   );
 };
 
-function RouterView() {
+// مكون الراوتر الداخلي
+function RouterView({ theme, toggleTheme }) {
   const location = useLocation();
 
   return (
     <LayoutGroup>
       <AnimatePresence mode="wait" initial={false}>
         <Routes location={location} key={location.pathname}>
-          <Route path="/" element={<MainPage />} />
+          <Route 
+            path="/" 
+            element={
+              <div className="relative min-h-screen bg-transparent">
+                <BackgroundCanvas theme={theme} />
+                <div className="relative z-10">
+                  <MainPage theme={theme} />
+                </div>
+              </div>
+            } 
+          />
           <Route path="/departments/:id" element={<DepartmentDetail />} />
           <Route path="/department-detail2" element={<DepartmentDetail2 />} />
         </Routes>
@@ -48,7 +151,8 @@ function RouterView() {
   );
 }
 
-function Layout() {
+// المكون الذي يتحكم في التخطيط
+function Layout({ theme, toggleTheme }) {
   const location = useLocation();
 
   const excludedExactPaths = [
@@ -66,21 +170,71 @@ function Layout() {
 
   return (
     <>
-      {!hideNavbar && <Navbar />}
+      {!hideNavbar && <Navbar toggleTheme={toggleTheme} currentTheme={theme} />}
 
       <div style={{ paddingTop: navbarHeight }}>
-        <RouterView />
+        <RouterView theme={theme} toggleTheme={toggleTheme} />
+        
+        {/* إظهار Footer فقط في الصفحة الرئيسية */}
+        {location.pathname === "/" && <Footer />}
       </div>
     </>
   );
 }
 
+// المكون الرئيسي للتطبيق
 const App = () => {
+  const [theme, setTheme] = useState("light");
+
+  useEffect(() => {
+    // تتبع الثيم لأغراض التصحيح
+    console.log("Current theme:", theme);
+    console.log("HTML has dark class:", document.documentElement.classList.contains('dark'));
+    
+    const canvas = document.querySelector('.background-canvas');
+    if (canvas) {
+      console.log("Canvas found:", canvas);
+      console.log("Canvas dimensions:", canvas.width, "x", canvas.height);
+    } else {
+      console.log("Canvas NOT found!");
+    }
+  }, [theme]);
+
+  // تهيئة الثيم من localStorage
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme");
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    
+    if (savedTheme === "dark" || (!savedTheme && prefersDark)) {
+      setTheme("dark");
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+      setTheme("light");
+    }
+  }, []);
+
+  // دالة تبديل الثيم
+  const toggleTheme = () => {
+    const newTheme = theme === "light" ? "dark" : "light";
+    setTheme(newTheme);
+    
+    if (newTheme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+    
+    localStorage.setItem("theme", newTheme);
+  };
+
   return (
-    <BrowserRouter>
-      <Layout />
-    </BrowserRouter>
+    <ImagePreloader>
+      <BrowserRouter>
+        <Layout theme={theme} toggleTheme={toggleTheme} />
+      </BrowserRouter>
+    </ImagePreloader>
   );
 };
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/Components/ImagePreloader.jsx b/src/Components/ImagePreloader.jsx
index 7b6e0e8..2c6aadb 100644
--- a/src/Components/ImagePreloader.jsx
+++ b/src/Components/ImagePreloader.jsx
@@ -1,22 +1,22 @@
-// import { useState, useEffect } from "react";
+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";
+// 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";
@@ -44,293 +44,293 @@ const imagesToPreload = [
   // Services images
   // gasStation,
 
-// ];
+];
 
-// const ImagePreloader = ({ children }) => {
-//   const [imagesLoaded, setImagesLoaded] = useState(false);
-//   const [progress, setProgress] = useState(0);
+const ImagePreloader = ({ children }) => {
+  const [imagesLoaded, setImagesLoaded] = useState(false);
+  const [progress, setProgress] = useState(0);
 
-//   useEffect(() => {
-//     let loadedCount = 0;
-//     const totalImages = imagesToPreload.length;
+  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;
-//           });
-//         };
+    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);
-//       }
-//     };
+        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();
-//   }, []);
+    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>
+  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>
+        {/* 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>
+        {/* 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>
+            {/* 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>
+            {/* 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>
+              {/* 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>
+            {/* 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",
-//                   }}
-//                 />
-//               );
-//             })}
+          {/* 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>
+            {/* 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>
+            {/* 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>
+            {/* 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>
+        {/* 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>
+        <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;
-//             }
-//           }
+        {/* 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 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%);
-//             }
-//           }
+          @keyframes moveWave {
+            0% {
+              transform: translateX(0);
+            }
+            100% {
+              transform: translateX(-50%);
+            }
+          }
 
-//           .perspective-800 {
-//             perspective: 800px;
-//           }
+          .perspective-800 {
+            perspective: 800px;
+          }
 
-//           .animate-wave {
-//             overflow: hidden;
-//           }
-//         `}</style> */}
-//       </div>
-//     );
-//   }
+          .animate-wave {
+            overflow: hidden;
+          }
+        `}</style> */}
+      </div>
+    );
+  }
 
-//   return <>{children}</>;
-// };
+  return <>{children}</>;
+};
 
-// export default ImagePreloader;
+export default ImagePreloader;
diff --git a/src/Components/Nav/Navbar.jsx b/src/Components/Nav/Navbar.jsx
index f7bc70c..2731245 100644
--- a/src/Components/Nav/Navbar.jsx
+++ b/src/Components/Nav/Navbar.jsx
@@ -1,7 +1,697 @@
+// import React, { useState, useEffect } from "react";
+// import styled from "styled-components";
+// import { useTranslation } from "react-i18next";
+// import { Link, animateScroll as scroll } from "react-scroll";
+
+// const SunIcon = ({ className }) => (
+//   <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
+//     <path d="M12 4v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+//     <path d="M12 18v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+//     <path d="M4.22 4.22l1.42 1.42" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+//     <path d="M18.36 18.36l1.42 1.42" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+//     <path d="M1 12h2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+//     <path d="M21 12h2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+//     <circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.6" />
+//   </svg>
+// );
+// const MoonIcon = ({ className }) => (
+//   <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
+//     <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+//   </svg>
+// );
+// const GlobeIcon = ({ className }) => (
+//   <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
+//     <path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+//     <path d="M2.05 12h19.9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+//     <path d="M12 2.05v19.9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+//   </svg>
+// );
+
+// const StyledWrapper = styled.div`
+//   /* Base Styles */
+//   .switch {
+//     display: inline-block;
+//     /* reduced a bit */
+//     width: 5.2em;
+//     height: 2.6em;
+//     position: relative;
+//     font-size: 16px;
+//     user-select: none;
+//     margin: 0;
+//     transform-origin: center;
+//   }
+
+//   /* Hide default HTML checkbox */
+//   .switch input {
+//     opacity: 0;
+//     width: 0;
+//     height: 0;
+//     position: absolute;
+//   }
+
+//   /* Slider */
+//   .slider {
+//     position: absolute;
+//     cursor: pointer;
+//     top: 0;
+//     left: 0;
+//     right: 0;
+//     bottom: 0;
+//     background: linear-gradient(to right, #87ceeb, #e0f6ff);
+//     border-radius: 50px;
+//     transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+//     box-shadow:
+//       0 4px 8px rgba(0, 0, 0, 0.1),
+//       inset 0 -5px 10px rgba(0, 0, 0, 0.1);
+//     overflow: hidden;
+//   }
+
+//   /* Inner slider for additional styling */
+//   .slider-inner {
+//     position: absolute;
+//     top: 0.28em;
+//     left: 0.28em;
+//     height: 2.1em;
+//     width: 2.1em;
+//     border-radius: 50%;
+//     background-color: #ffd700;
+//     transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+//     box-shadow:
+//       0 2px 4px rgba(0, 0, 0, 0.2),
+//       inset 0 -2px 5px rgba(0, 0, 0, 0.2);
+//   }
+
+//   /* Checked state */
+//   .switch input:checked + .slider {
+//     background: linear-gradient(to right, #1a237e, #3949ab);
+//   }
+
+//   .switch input:checked + .slider .slider-inner {
+//     transform: translateX(2.6em);
+//     background-color: #ffffff;
+//   }
+
+//   /* Focus state */
+//   .switch input:focus + .slider {
+//     outline: none;
+//     box-shadow: 0 0 0.4em rgba(25, 118, 210, 0.5);
+//   }
+
+//   /* Hover and active states */
+//   .switch:hover .slider {
+//     background: linear-gradient(to right, #64b5f6, #e3f2fd);
+//   }
+
+//   .switch input:checked:hover + .slider {
+//     background: linear-gradient(to right, #283593, #5c6bc0);
+//   }
+
+//   /* Animation for slider inner */
+//   @keyframes sunPulse {
+//     0%,
+//     100% {
+//       box-shadow:
+//         0 0 0 0 rgba(255, 215, 0, 0.7),
+//         0 0 0 0 rgba(255, 215, 0, 0.4);
+//     }
+//     50% {
+//       box-shadow:
+//         0 0 20px 10px rgba(255, 215, 0, 0.7),
+//         0 0 40px 20px rgba(255, 215, 0, 0.4);
+//     }
+//   }
+
+//   @keyframes moonPhase {
+//     0%,
+//     100% {
+//       box-shadow:
+//         inset -10px -5px 0 0 #ddd,
+//         0 0 20px rgba(255, 255, 255, 0.5);
+//     }
+//     50% {
+//       box-shadow:
+//         inset 0 0 0 0 #ddd,
+//         0 0 20px rgba(255, 255, 255, 0.5);
+//     }
+//   }
+
+//   .switch input:not(:checked) + .slider .slider-inner {
+//     animation: sunPulse 3s infinite;
+//   }
+
+//   .switch input:checked + .slider .slider-inner {
+//     animation: moonPhase 5s infinite;
+//   }
+
+//   /* Stars effect */
+//   @keyframes twinkle {
+//     0%,
+//     100% {
+//       opacity: 0.2;
+//     }
+//     50% {
+//       opacity: 1;
+//     }
+//   }
+
+//   .slider::before,
+//   .slider::after {
+//     content: "";
+//     position: absolute;
+//     width: 4px;
+//     height: 4px;
+//     background-color: #ffffff;
+//     border-radius: 50%;
+//     transition: all 0.6s ease;
+//     opacity: 0;
+//   }
+
+//   .slider::before {
+//     top: 20%;
+//     left: 30%;
+//   }
+
+//   .slider::after {
+//     bottom: 25%;
+//     right: 25%;
+//   }
+
+//   .switch input:checked + .slider::before,
+//   .switch input:checked + .slider::after {
+//     opacity: 1;
+//     animation: twinkle 2s infinite;
+//   }
+
+//   .switch input:checked + .slider::before {
+//     animation-delay: 0.5s;
+//   }
+
+//   /* 3D effect */
+//   .slider {
+//     transform-style: preserve-3d;
+//     perspective: 500px;
+//   }
+
+//   .slider-inner {
+//     transform: translateZ(5px);
+//   }
+
+//   .switch input:checked + .slider .slider-inner {
+//     transform: translateX(2.6em) translateZ(5px) rotateY(180deg);
+//   }
+
+//   /* Cloud effect for day mode */
+//   .slider-inner::before,
+//   .slider-inner::after {
+//     content: "";
+//     position: absolute;
+//     background-color: rgba(255, 255, 255, 0.8);
+//     border-radius: 50%;
+//     transition: all 0.6s ease;
+//   }
+
+//   .slider-inner::before {
+//     width: 1em;
+//     height: 1em;
+//     top: -0.5em;
+//     left: -0.2em;
+//   }
+
+//   .slider-inner::after {
+//     width: 1.2em;
+//     height: 1.2em;
+//     bottom: -0.6em;
+//     right: -0.3em;
+//   }
+
+//   .switch input:checked + .slider .slider-inner::before,
+//   .switch input:checked + .slider .slider-inner::after {
+//     opacity: 0;
+//   }
+
+//   /* Crater effect for night mode */
+//   .switch input:checked + .slider .slider-inner::before {
+//     width: 0.6em;
+//     height: 0.6em;
+//     background-color: rgba(0, 0, 0, 0.2);
+//     top: 0.3em;
+//     left: 0.3em;
+//     opacity: 1;
+//   }
+
+//   .switch input:checked + .slider .slider-inner::after {
+//     width: 0.4em;
+//     height: 0.4em;
+//     background-color: rgba(0, 0, 0, 0.15);
+//     bottom: 0.5em;
+//     right: 0.5em;
+//     opacity: 1;
+//   }
+
+//   /* Accessibility improvements */
+//   .switch input:focus + .slider {
+//     outline: 2px solid #4a90e2;
+//     outline-offset: 2px;
+//   }
+
+//   /* Responsive adjustments */
+//   @media (max-width: 768px) {
+//     .switch {
+//       width: 4.6em;
+//       height: 2.3em;
+//     }
+
+//     .slider-inner {
+//       height: 1.85em;
+//       width: 1.85em;
+//       top: 0.23em;
+//       left: 0.23em;
+//     }
+
+//     .switch input:checked + .slider .slider-inner {
+//       transform: translateX(2.2em) translateZ(5px) rotateY(180deg);
+//     }
+//   }
+
+//   @media (max-width: 480px) {
+//     .switch {
+//       width: 3.8em;
+//       height: 1.9em;
+//     }
+
+//     .slider-inner {
+//       height: 1.5em;
+//       width: 1.5em;
+//       top: 0.2em;
+//       left: 0.2em;
+//     }
+
+//     .switch input:checked + .slider .slider-inner {
+//       transform: translateX(1.8em) translateZ(5px) rotateY(180deg);
+//     }
+//   }
+
+//   /* High contrast mode */
+//   @media (forced-colors: active) {
+//     .slider {
+//       background: Canvas;
+//       border: 2px solid ButtonText;
+//     }
+
+//     .switch input:checked + .slider {
+//       background: Highlight;
+//     }
+
+//     .slider-inner {
+//       background-color: ButtonFace;
+//     }
+
+//     .switch::before,
+//     .switch::after {
+//       color: ButtonText;
+//     }
+//   }
+
+//   /* Reduced motion preference */
+//   @media (prefers-reduced-motion: reduce) {
+//     .switch,
+//     .slider,
+//     .slider-inner {
+//       transition: none;
+//     }
+
+//     .switch input:checked + .slider .slider-inner,
+//     .switch input:not(:checked) + .slider .slider-inner,
+//     .switch input:checked + .slider::before,
+//     .switch input:checked + .slider::after {
+//       animation: none;
+//     }
+//   }
+// `;
+
+// const ThemeToggle = ({ theme, setTheme }) => {
+//   const isDark = theme === "dark";
+
+//   const toggle = () => {
+//     const next = isDark ? "light" : "dark";
+//     setTheme(next);
+//     if (next === "dark") document.documentElement.classList.add("dark");
+//     else document.documentElement.classList.remove("dark");
+//     try {
+//       localStorage.setItem("theme", next);
+//     } catch (e) {}
+//   };
+
+//   return (
+//     <StyledWrapper>
+//       <label
+//         role="switch"
+//         aria-checked={isDark}
+//         tabIndex={0}
+//         className="switch"
+//         onKeyDown={(e) => {
+//           if (e.key === "Enter" || e.key === " ") {
+//             e.preventDefault();
+//             toggle();
+//           }
+//         }}
+//       >
+//         <input
+//           type="checkbox"
+//           checked={isDark}
+//           onChange={toggle}
+//           aria-hidden="false"
+//         />
+//         <span className="slider" aria-hidden="true">
+//           <span className="slider-inner" />
+//         </span>
+//       </label>
+//     </StyledWrapper>
+//   );
+// };
+
+// const LanguageToggle = ({ i18n }) => {
+//   const isAr = i18n.language === "ar";
+//   const toggle = () => {
+//     const next = isAr ? "en" : "ar";
+//     i18n.changeLanguage(next);
+//     if (next === "ar") {
+//       document.documentElement.dir = "rtl";
+//       document.documentElement.lang = "ar";
+//     } else {
+//       document.documentElement.dir = "ltr";
+//       document.documentElement.lang = next;
+//     }
+//   };
+
+//   return (
+//     <button
+//       onClick={toggle}
+//       className="flex items-center gap-2 px-3 py-1 rounded-md font-semibold text-sm border border-transparent hover:border-amber-500/30 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-400/40 hover:shadow-md active:scale-95"
+//       aria-label="Toggle language"
+//       title={isAr ? "Switch to English" : "التبديل للعربية"}
+//     >
+//       <GlobeIcon className="w-4 h-4" />
+//       <span className="hidden sm:inline">{isAr ? "عربي" : "EN"}</span>
+//       <span className="text-amber-400/95 text-xs sm:text-sm">{isAr ? "AR" : "EN"}</span>
+//     </button>
+//   );
+// };
+
+// const Navbar = () => {
+//   const { t, i18n } = useTranslation();
+//   const [menuOpen, setMenuOpen] = useState(false);
+//   const [activeSection, setActiveSection] = useState("home");
+//   const [theme, setTheme] = useState("light");
+
+//   useEffect(() => {
+//     try {
+//       const saved = localStorage.getItem("theme");
+//       if (saved) setTheme(saved);
+//       else if (typeof window !== "undefined" && document.documentElement.classList.contains("dark")) setTheme("dark");
+//     } catch (e) {
+//       if (typeof window !== "undefined" && document.documentElement.classList.contains("dark")) setTheme("dark");
+//     }
+//   }, []);
+
+//   useEffect(() => {
+//     if (theme === "dark") document.documentElement.classList.add("dark");
+//     else document.documentElement.classList.remove("dark");
+//   }, [theme]);
+
+//   useEffect(() => {
+//     const handleScroll = () => {
+//       const sections = ["home", "services", "about", "contact"];
+//       const scrollPosition = window.scrollY + 140;
+//       for (const section of sections) {
+//         const element = document.getElementById(section) || document.querySelector(`[name="${section}"]`);
+//         if (element) {
+//           const offsetTop = element.offsetTop;
+//           const offsetHeight = element.offsetHeight;
+//           if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
+//             setActiveSection(section);
+//             break;
+//           }
+//         }
+//       }
+//     };
+//     handleScroll();
+//     window.addEventListener("scroll", handleScroll, { passive: true });
+//     return () => window.removeEventListener("scroll", handleScroll);
+//   }, []);
+
+//   const navItems = [
+//     { key: "home", label: t("nav.home") || "Home" },
+//     { key: "services", label: t("nav.services") || "Services" },
+//     { key: "about", label: t("nav.about") || "About" },
+//     { key: "contact", label: t("nav.contact") || "Contact" },
+//   ];
+
+//   return (
+//     <>
+//       <style>{`
+//         /* background and glass */
+//         .glass-nav {
+//           background: linear-gradient(180deg, rgba(75,85,99,0.96), rgba(55,65,81,0.9));
+//           color: #e6e6e6;
+//           border-bottom: 1px solid rgba(255,255,255,0.05);
+//           backdrop-filter: blur(8px);
+//           -webkit-backdrop-filter: blur(8px);
+//         }
+
+//         /* nav links */
+//         .nav-link {
+//           position: relative;
+//           padding-bottom: 6px;
+//           transition: transform .22s cubic-bezier(.2,.9,.2,1), color .18s ease, text-shadow .18s ease, box-shadow .18s ease;
+//           color: rgba(229,231,235,0.95);
+//           display: inline-block;
+//         }
+//         .nav-link::after {
+//           content: '';
+//           position: absolute;
+//           left: 50%;
+//           transform: translateX(-50%) scaleX(0);
+//           bottom: -8px;
+//           height: 3px;
+//           width: 64%;
+//           border-radius: 999px;
+//           transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .22s;
+//           opacity: 0;
+//         }
+//         .nav-link:hover {
+//           transform: translateY(-6px) scale(1.03);
+//           color: #fff;
+//           text-shadow: 0 10px 30px rgba(2,6,23,0.5);
+//           box-shadow: 0 8px 24px rgba(2,6,23,0.25);
+//         }
+//         .nav-link:hover::after {
+//           background: linear-gradient(90deg, #9CA3AF, #F59E0B);
+//           transform: translateX(-50%) scaleX(1);
+//           opacity: 1;
+//         }
+//         .nav-link.active {
+//           color: #fff;
+//           font-weight: 700;
+//         }
+//         .nav-link.active::after {
+//           background: linear-gradient(90deg, #9CA3AF, #F59E0B);
+//           transform: translateX(-50%) scaleX(1);
+//           opacity: 1;
+//         }
+
+//         /* NEW: pill / circular orange background for the active/pressed link */
+//         .nav-pill {
+//           display: inline-flex;
+//           align-items: center;
+//           justify-content: center;
+//           padding: 0.32rem 0.6rem; /* vertical horizontal */
+//           border-radius: 999px;
+//           transition: transform .15s ease, background .18s ease, box-shadow .18s ease, color .12s ease;
+//           background: transparent;
+//           color: inherit;
+//           line-height: 1;
+//           font-weight: 600;
+//         }
+
+//         /* active (current) */
+//         .nav-link.active .nav-pill,
+//         .nav-link:active .nav-pill,
+//         .nav-link:focus-visible .nav-pill {
+//           background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18); /* warm orange */
+//           color: #0b0b0b; /* dark text for contrast on orange */
+//           box-shadow: 0 6px 18px rgba(255, 122, 24, 0.18), 0 2px 6px rgba(0,0,0,0.12);
+//           transform: translateY(-4px) scale(1.03);
+//         }
+
+//         /* Make press feedback snappier */
+//         .nav-link:active .nav-pill {
+//           transform: translateY(-2px) scale(0.995);
+//         }
+
+//         /* mobile drawer */
+//         .mobile-drawer {
+//           background: linear-gradient(180deg, rgba(17,24,39,0.98), rgba(15,23,42,0.95));
+//           backdrop-filter: blur(6px);
+//         }
+
+//         /* ensure mobile pill doesn't stretch full width — make it inline inside block */
+//         .mobile-drawer .nav-pill {
+//           display: inline-flex;
+//           padding: 0.4rem 0.8rem;
+//         }
+
+//         /* adjust mobile active color */
+//         .mobile-drawer .nav-pill.active,
+//         .mobile-drawer a[aria-current="page"] .nav-pill {
+//           background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18);
+//           color: #0b0b0b;
+//         }
+
+//         /* Enhanced button hover (more professional) */
+//         .glass-nav button, .mobile-drawer button {
+//           transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
+//           will-change: transform, box-shadow;
+//         }
+
+//         .glass-nav button:hover, .mobile-drawer button:hover {
+//           transform: translateY(-3px);
+//           box-shadow: 0 10px 24px rgba(2,6,23,0.25), 0 2px 6px rgba(0,0,0,0.12);
+//         }
+
+//         .glass-nav button:active, .mobile-drawer button:active {
+//           transform: translateY(-1px) scale(0.995);
+//           box-shadow: 0 6px 18px rgba(2,6,23,0.2);
+//         }
+
+//         .glass-nav button:focus {
+//           outline: none;
+//           box-shadow: 0 0 0 4px rgba(245,158,11,0.12);
+//         }
+
+//       `}</style>
+
+//       <nav
+//         className="fixed top-0 left-0 right-0 z-50 w-full glass-nav px-4 md:px-8 lg:px-16 py-3"
+//         aria-label="Main navigation"
+//         role="navigation"
+//       >
+//         <div className="mx-auto max-w-screen-xl">
+//           <div className="flex items-center justify-between h-14 px-2 md:px-4">
+//             <div className="hidden md:flex items-center space-x-6 rtl:space-x-reverse">
+//               <ul className="flex items-center gap-6">
+//                 {navItems.map((item) => {
+//                   const isActive = activeSection === item.key;
+//                   return (
+//                     <li key={item.key}>
+//                       <Link
+//                         to={item.key}
+//                         smooth
+//                         duration={600}
+//                         spy={true}
+//                         offset={-110}
+//                         onSetActive={() => setActiveSection(item.key)}
+//                         onClick={() => {
+//                           if (item.key === "home") scroll.scrollToTop({ duration: 600 });
+//                           if (menuOpen) setMenuOpen(false);
+//                         }}
+//                         className={`nav-link cursor-pointer text-sm md:text-lg ${isActive ? "active" : "text-slate-200 dark:text-slate-200/90"}`}
+//                         aria-current={isActive ? "page" : undefined}
+//                       >
+//                         <span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span>
+//                       </Link>
+//                     </li>
+//                   );
+//                 })}
+//               </ul>
+//             </div>
+
+//             {/* controls */}
+//             <div className="flex items-center gap-3 md:gap-5">
+//               <div className="hidden md:flex items-center gap-3">
+//                 <LanguageToggle i18n={i18n} />
+//                 <ThemeToggle theme={theme} setTheme={setTheme} />
+//               </div>
+
+//               <div className="md:hidden flex items-center gap-2">
+//                 <ThemeToggle theme={theme} setTheme={setTheme} />
+//                 <button
+//                   onClick={() => setMenuOpen((s) => !s)}
+//                   aria-controls="mobile-menu"
+//                   aria-expanded={menuOpen}
+//                   className="p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-400/50 transition-transform hover:scale-105"
+//                 >
+//                   <span className="sr-only">Open main menu</span>
+//                   <svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+//                     {menuOpen ? <path d="M6 18L18 6M6 6l12 12" /> : <><path d="M3 6h18" /><path d="M3 12h18" /><path d="M3 18h18" /></>}
+//                   </svg>
+//                 </button>
+//               </div>
+//             </div>
+//           </div>
+
+//           {/* mobile drawer */}
+//           <div
+//             id="mobile-menu"
+//             className={`md:hidden overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out ${menuOpen ? "max-h-[420px] opacity-100" : "max-h-0 opacity-0"}`}
+//           >
+//             <div className="mobile-drawer px-4 pb-6 pt-3 rounded-b-2xl">
+//               <div className="flex items-center justify-between mb-3">
+//                 <div className="flex items-center gap-3"></div>
+//                 <div className="flex items-center gap-2">
+//                   <LanguageToggle i18n={i18n} />
+//                 </div>
+//               </div>
+
+//               <ul className="flex flex-col gap-2">
+//                 {navItems.map((item) => {
+//                   const isActive = activeSection === item.key;
+//                   return (
+//                     <li key={item.key}>
+//                       <Link
+//                         to={item.key}
+//                         smooth
+//                         duration={600}
+//                         spy={true}
+//                         offset={-110}
+//                         onSetActive={() => setActiveSection(item.key)}
+//                         onClick={() => {
+//                           if (item.key === "home") scroll.scrollToTop({ duration: 600 });
+//                           setMenuOpen(false);
+//                         }}
+//                         className={`block w-full text-right px-3 py-2 rounded-md font-semibold text-base ${isActive ? "text-amber-400" : "text-slate-200 hover:text-amber-400"}`}
+//                         aria-current={isActive ? "page" : undefined}
+//                       >
+//                         {/* add inline pill for mobile too — stays inline so it looks like a circle around the label */}
+//                         <span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span>
+//                       </Link>
+//                     </li>
+//                   );
+//                 })}
+//               </ul>
+
+//               <div className="mt-4 flex items-center gap-3">
+//                 <ThemeToggle theme={theme} setTheme={setTheme} />
+//                 <button className="flex-1 px-4 py-2 rounded-md bg-amber-500/95 text-black font-semibold shadow-inner hover:shadow-lg transition-shadow active:scale-95">
+//                   {t("nav.getQuote") || "Get Quote"}
+//                 </button>
+//               </div>
+//             </div>
+//           </div>
+//         </div>
+//       </nav>
+//     </>
+//   );
+// };
+
+// export default Navbar;
+
+
 import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import { Link, animateScroll as scroll } from "react-scroll";
+import LanguageSwitcher from "../LanguageSwitcher/LanguageSwitcher";
 
 const SunIcon = ({ className }) => (
   <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
@@ -19,19 +709,11 @@ const MoonIcon = ({ className }) => (
     <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 );
-const GlobeIcon = ({ className }) => (
-  <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
-    <path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
-    <path d="M2.05 12h19.9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
-    <path d="M12 2.05v19.9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
 
 const StyledWrapper = styled.div`
   /* Base Styles */
   .switch {
     display: inline-block;
-    /* reduced a bit */
     width: 5.2em;
     height: 2.6em;
     position: relative;
@@ -329,18 +1011,8 @@ const StyledWrapper = styled.div`
   }
 `;
 
-const ThemeToggle = ({ theme, setTheme }) => {
-  const isDark = theme === "dark";
-
-  const toggle = () => {
-    const next = isDark ? "light" : "dark";
-    setTheme(next);
-    if (next === "dark") document.documentElement.classList.add("dark");
-    else document.documentElement.classList.remove("dark");
-    try {
-      localStorage.setItem("theme", next);
-    } catch (e) {}
-  };
+const ThemeToggle = ({ currentTheme, toggleTheme }) => {
+  const isDark = currentTheme === "dark";
 
   return (
     <StyledWrapper>
@@ -352,14 +1024,14 @@ const ThemeToggle = ({ theme, setTheme }) => {
         onKeyDown={(e) => {
           if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
-            toggle();
+            toggleTheme();
           }
         }}
       >
         <input
           type="checkbox"
           checked={isDark}
-          onChange={toggle}
+          onChange={toggleTheme}
           aria-hidden="false"
         />
         <span className="slider" aria-hidden="true">
@@ -370,59 +1042,16 @@ const ThemeToggle = ({ theme, setTheme }) => {
   );
 };
 
-const LanguageToggle = ({ i18n }) => {
-  const isAr = i18n.language === "ar";
-  const toggle = () => {
-    const next = isAr ? "en" : "ar";
-    i18n.changeLanguage(next);
-    if (next === "ar") {
-      document.documentElement.dir = "rtl";
-      document.documentElement.lang = "ar";
-    } else {
-      document.documentElement.dir = "ltr";
-      document.documentElement.lang = next;
-    }
-  };
-
-  return (
-    <button
-      onClick={toggle}
-      className="flex items-center gap-2 px-3 py-1 rounded-md font-semibold text-sm border border-transparent hover:border-amber-500/30 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-400/40 hover:shadow-md active:scale-95"
-      aria-label="Toggle language"
-      title={isAr ? "Switch to English" : "التبديل للعربية"}
-    >
-      <GlobeIcon className="w-4 h-4" />
-      <span className="hidden sm:inline">{isAr ? "عربي" : "EN"}</span>
-      <span className="text-amber-400/95 text-xs sm:text-sm">{isAr ? "AR" : "EN"}</span>
-    </button>
-  );
-};
-
-const Navbar = () => {
+const Navbar = ({ toggleTheme, currentTheme }) => {
   const { t, i18n } = useTranslation();
   const [menuOpen, setMenuOpen] = useState(false);
   const [activeSection, setActiveSection] = useState("home");
-  const [theme, setTheme] = useState("light");
-
-  useEffect(() => {
-    try {
-      const saved = localStorage.getItem("theme");
-      if (saved) setTheme(saved);
-      else if (typeof window !== "undefined" && document.documentElement.classList.contains("dark")) setTheme("dark");
-    } catch (e) {
-      if (typeof window !== "undefined" && document.documentElement.classList.contains("dark")) setTheme("dark");
-    }
-  }, []);
-
-  useEffect(() => {
-    if (theme === "dark") document.documentElement.classList.add("dark");
-    else document.documentElement.classList.remove("dark");
-  }, [theme]);
 
   useEffect(() => {
     const handleScroll = () => {
       const sections = ["home", "services", "about", "contact"];
       const scrollPosition = window.scrollY + 140;
+      
       for (const section of sections) {
         const element = document.getElementById(section) || document.querySelector(`[name="${section}"]`);
         if (element) {
@@ -435,11 +1064,22 @@ const Navbar = () => {
         }
       }
     };
+    
     handleScroll();
     window.addEventListener("scroll", handleScroll, { passive: true });
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
+  useEffect(() => {
+    if (i18n.language === "ar") {
+      document.documentElement.dir = "rtl";
+      document.documentElement.lang = "ar";
+    } else {
+      document.documentElement.dir = "ltr";
+      document.documentElement.lang = i18n.language;
+    }
+  }, [i18n.language]);
+
   const navItems = [
     { key: "home", label: t("nav.home") || "Home" },
     { key: "services", label: t("nav.services") || "Services" },
@@ -578,6 +1218,13 @@ const Navbar = () => {
       >
         <div className="mx-auto max-w-screen-xl">
           <div className="flex items-center justify-between h-14 px-2 md:px-4">
+            {/* Logo - from second code */}
+            <img
+              src="/src/assets/TPS-logo.png"
+              className="h-8 sm:h-10 md:h-12 transition-all duration-300"
+              alt="TPS Logo"
+            />
+
             <div className="hidden md:flex items-center space-x-6 rtl:space-x-reverse">
               <ul className="flex items-center gap-6">
                 {navItems.map((item) => {
@@ -609,12 +1256,13 @@ const Navbar = () => {
             {/* controls */}
             <div className="flex items-center gap-3 md:gap-5">
               <div className="hidden md:flex items-center gap-3">
-                <LanguageToggle i18n={i18n} />
-                <ThemeToggle theme={theme} setTheme={setTheme} />
+                {/* LanguageSwitcher from second code */}
+                <LanguageSwitcher />
+                <ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
               </div>
 
               <div className="md:hidden flex items-center gap-2">
-                <ThemeToggle theme={theme} setTheme={setTheme} />
+                <ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
                 <button
                   onClick={() => setMenuOpen((s) => !s)}
                   aria-controls="mobile-menu"
@@ -639,7 +1287,7 @@ const Navbar = () => {
               <div className="flex items-center justify-between mb-3">
                 <div className="flex items-center gap-3"></div>
                 <div className="flex items-center gap-2">
-                  <LanguageToggle i18n={i18n} />
+                  <LanguageSwitcher />
                 </div>
               </div>
 
@@ -662,7 +1310,6 @@ const Navbar = () => {
                         className={`block w-full text-right px-3 py-2 rounded-md font-semibold text-base ${isActive ? "text-amber-400" : "text-slate-200 hover:text-amber-400"}`}
                         aria-current={isActive ? "page" : undefined}
                       >
-                        {/* add inline pill for mobile too — stays inline so it looks like a circle around the label */}
                         <span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span>
                       </Link>
                     </li>
@@ -671,7 +1318,7 @@ const Navbar = () => {
               </ul>
 
               <div className="mt-4 flex items-center gap-3">
-                <ThemeToggle theme={theme} setTheme={setTheme} />
+                <ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
                 <button className="flex-1 px-4 py-2 rounded-md bg-amber-500/95 text-black font-semibold shadow-inner hover:shadow-lg transition-shadow active:scale-95">
                   {t("nav.getQuote") || "Get Quote"}
                 </button>
diff --git a/src/Components/Sections/Contact/Contact.jsx b/src/Components/Sections/Contact/Contact.jsx
index 355b3af..207d304 100644
--- a/src/Components/Sections/Contact/Contact.jsx
+++ b/src/Components/Sections/Contact/Contact.jsx
@@ -1,3 +1,455 @@
+// import { useTranslation } from "react-i18next";
+// import {
+//   FaMapMarkerAlt,
+//   FaPhoneAlt,
+//   FaEnvelope,
+//   FaWhatsapp,
+//   FaPaperPlane,
+// } from "react-icons/fa";
+// import emailjs from "@emailjs/browser";
+// import { useRef, useState } from "react";
+// import { motion } from "framer-motion";
+
+// const Contact = () => {
+//   const { t } = useTranslation();
+//   const form = useRef();
+//   const [message, setMessage] = useState({ text: "", type: "" });
+//   const [isLoading, setIsLoading] = useState(false);
+
+//   const sendEmail = (e) => {
+//     e.preventDefault();
+//     setIsLoading(true);
+//     setMessage({ text: "", type: "" });
+// emailjs
+//       .sendForm(
+//         "service_dynf5hg",
+//         "template_l4ik4he",
+//         form.current,
+//         "rRjr_WNgPp7_rGno1"
+//       )
+//       .then(
+//         (result) => {
+//           console.log("Message sent:", result.text);
+//           setMessage({
+//             text: t("contact.successMessage") || "Message sent successfully!",
+//             type: "success",
+//           });
+//           form.current.reset();
+//           setIsLoading(false);
+//           setTimeout(() => setMessage({ text: "", type: "" }), 5000);
+//         },
+//         (error) => {
+//           console.error("Failed to send message:", error.text);
+//           setMessage({
+//             text:
+//               t("contact.errorMessage") ||
+//               "Failed to send message. Please try again.",
+//             type: "error",
+//           });
+//           setIsLoading(false);
+//           setTimeout(() => setMessage({ text: "", type: "" }), 5000);
+//         }
+//       );
+//   };
+
+//   return (
+//     <section 
+//       id="contact" 
+//       className="relative min-h-screen py-16 px-4 sm:px-6 font-sans"
+//       style={{ 
+//         direction: "rtl",
+//         // background: "linear-gradient(135deg, #dceafe 0%, #e8f4ff 25%, #c6e2ff 50%, #a3d0ff 75%, #23558f 100%)"
+//       }}
+//     >
+//       <div className="absolute inset-0 overflow-hidden">
+//         <div className="absolute -top-10 -right-40 w-80 h-80 bg-[#446a85] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
+//         <div className="absolute -bottom-10 -left-40 w-80 h-80 bg-[#446a85] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-1000"></div>
+//         <div className="absolute top-1/2 left-1/3 w-60 h-60 bg-[#57acd9] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-500"></div>
+        
+//         <div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#57acd9]/30 to-transparent"></div>
+//       </div>
+
+//       <div className="relative z-10 w-full max-w-6xl mx-auto">
+//         <motion.div
+//           initial={{ y: -50, opacity: 0 }}
+//           animate={{ y: 0, opacity: 1 }}
+//           transition={{ duration: 0.8 }}
+//           className="text-center mb-12"
+//         >
+//           <h1 className="pt-0 mb-0 text-2xl font-extrabold md:text-5xl lg:text-6xl">
+//             <motion.span
+//               className="bg-clip-text text-transparent bg-gradient-to-r from-[#57acd9] via-blue-200 to-[#446a85]"
+//               animate={{
+//                 backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
+//               }}
+//               transition={{
+//                 duration: 5,
+//                 repeat: Infinity,
+//                 ease: "linear"
+//               }}
+//               style={{
+//                 backgroundSize: "200% 100%"
+//               }}
+//             >
+//               {t("contact.title")}
+//             </motion.span>
+//           </h1>
+//         </motion.div>
+//         <div className="flex flex-col lg:flex-row-reverse gap-8 items-start">
+//           <motion.div 
+//             initial={{ x: 50, opacity: 0 }}
+//             animate={{ x: 0, opacity: 1 }}
+//             transition={{ duration: 0.8, delay: 0.2 }}
+//             className="space-y-4 lg:w-1/2"
+//           >
+//             <motion.div
+//               whileHover={{ y: -5, scale: 1.02 }}
+//               transition={{ duration: 0.3 }}
+//               className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#063e5b]/50 hover:shadow-2xl transition-all duration-300"
+//             >
+//               <div className="flex items-start gap-4">
+//                 <motion.div
+//                   whileHover={{ rotate: [0, -10, 10, 0] }}
+//                   transition={{ duration: 0.5 }}
+//                   className="p-3 rounded-xl bg-gradient-to-br from-[#57acd9] to-[#063e5b] text-white shadow-lg"
+//                 >
+//                   <FaMapMarkerAlt className="text-2xl" />
+//                 </motion.div>
+                
+//                 <div className="flex-1">
+//                   <h3 className="text-[#516475] lg font-bold text- mb-2">
+//                     {t("contact.address")}
+//                   </h3>
+//                   <p className="text-[#063e5b] text-sm leading-relaxed whitespace-pre-line">
+//                     {t("contact.addressText")}
+//                   </p>
+//                 </div>
+//               </div>
+              
+//               <motion.div
+//                 className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#063e5b]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+//                 initial={false}
+//               />
+//               <motion.div
+//                 className="absolute bottom-0 left-1/2 h-1 w-0 group-hover:w-3/4 bg-gradient-to-r from-transparent via-[#57acd9] to-transparent rounded-full"
+//                 initial={{ x: "-50%", width: "0%" }}
+//                 whileHover={{ width: "75%" }}
+//                 transition={{ duration: 0.3 }}
+//               />
+//             </motion.div>
+//             <motion.div
+//               whileHover={{ y: -5, scale: 1.02 }}
+//               transition={{ duration: 0.3 }}
+//               className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
+//             >
+//               <div className="flex items-start gap-4">
+//                 <motion.div
+//                   whileHover={{ rotate: [0, -10, 10, 0] }}
+//                   transition={{ duration: 0.5 }}
+//                   className="p-3 rounded-xl bg-gradient-to-br from-[#063e5b] to-[#5c7ce3] text-white shadow-lg"
+//                 >
+//                   <FaPhoneAlt className="text-2xl" />
+//                 </motion.div>
+                
+//                 <div className="flex-1">
+//                   <h3 className="text-lg font-bold text-gray-800 mb-3">
+//                     {t("contact.phone")}
+//                   </h3>
+//                   <div className="space-y-3">
+//                     <div className="flex items-center justify-between bg-gradient-to-r from-[#e8f4ff] to-[#dceafe] rounded-xl p-3 hover:from-[#dceafe] hover:to-[#c6e2ff] transition-all duration-300">
+//                       <span className="text-[#23558f] font-medium">0965656631</span>
+//                       <div className="flex items-center gap-2">
+//                         <motion.button
+//                           whileHover={{ scale: 1.1 }}
+//                           whileTap={{ scale: 0.9 }}
+//                           className="p-2 rounded-full bg-gradient-to-r from-[#57acd9] to-[#4a7c9b] text-white hover:shadow-lg transition-all duration-300"
+//                         >
+//                           <FaPhoneAlt className="text-sm" />
+//                         </motion.button>
+//                       </div>
+//                     </div>
+                    
+//                     <div className="flex items-center justify-between bg-gradient-to-r from-[#e8f4ff] to-[#dceafe] rounded-xl p-3 hover:from-[#dceafe] hover:to-[#c6e2ff] transition-all duration-300">
+//                       <a
+//                         href="https://wa.me/963965656631"
+//                         target="_blank"
+//                         rel="noopener noreferrer"
+//                         className="text-[#23558f] font-medium hover:text-[#3c5ee3] transition-colors"
+//                       >
+//                         963965656631
+//                       </a>
+//                       <div className="flex items-center gap-2">
+//                         <motion.a
+//                           href="https://wa.me/963965656631"
+//                           target="_blank"
+//                           rel="noopener noreferrer"
+//                           whileHover={{ scale: 1.1 }}
+//                           whileTap={{ scale: 0.9 }}
+//                           className="p-2 rounded-full bg-gradient-to-r from-[#25D366] to-[#128C7E] text-white hover:shadow-lg transition-all duration-300"
+//                         >
+//                           <FaWhatsapp className="text-sm" />
+//                         </motion.a>
+//                         <motion.button
+//                           whileHover={{ scale: 1.1 }}
+//                           whileTap={{ scale: 0.9 }}
+//                           className="p-2 rounded-full bg-gradient-to-r from-[#23558f] to-[#3360b2] text-white hover:shadow-lg transition-all duration-300"
+//                         >
+//                           <FaPhoneAlt className="text-sm" />
+//                         </motion.button>
+//                       </div>
+//                     </div>
+//                   </div>
+//                 </div>
+//               </div>
+              
+//               <motion.div
+//                 className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#3c5ee3]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+//                 initial={false}
+//               />
+//             </motion.div>
+//             <motion.div
+//               whileHover={{ y: -5, scale: 1.02 }}
+//               transition={{ duration: 0.3 }}
+//               className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
+//             >
+//               <div className="flex items-start gap-4">
+//                 <motion.div
+//                   whileHover={{ rotate: [0, -10, 10, 0] }}
+//                   transition={{ duration: 0.5 }}
+//                   className="p-3 rounded-xl bg-gradient-to-br from-[#2ecc71] to-[#1abc9c] text-white shadow-lg"
+//                 >
+//                   <FaEnvelope className="text-2xl" />
+//                 </motion.div>
+                
+//                 <div className="flex-1">
+//                   <h3 className="text-lg font-bold text-gray-800 mb-2">
+//                     {t("contact.email")}
+//                   </h3>
+//                   <a
+//                     href="mailto:info@TPS-STATIONS.COM"
+//                     className="inline-block bg-gradient-to-r from-[#e8f4ff] to-[#dceafe] text-[#23558f] font-medium rounded-xl px-4 py-3 hover:from-[#dceafe] hover:to-[#c6e2ff] hover:text-[#3c5ee3] hover:shadow-lg transition-all duration-300"
+//                   >
+//                     Info@TPS-STATIONS.COM
+//                   </a>
+//                 </div>
+//               </div>
+              
+//               <motion.div
+//                 className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#3c5ee3]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+//                 initial={false}
+//               />
+              
+//               <motion.div
+//                 className="absolute bottom-0 left-1/2 h-1 w-0 group-hover:w-3/4 bg-gradient-to-r from-transparent via-[#2ecc71] to-transparent rounded-full"
+//                 initial={{ x: "-50%", width: "0%" }}
+//                 whileHover={{ width: "75%" }}
+//                 transition={{ duration: 0.3 }}
+//               />
+//             </motion.div>
+//           </motion.div>
+//           <motion.div
+//             initial={{ x: -50, opacity: 0 }}
+//             animate={{ x: 0, opacity: 1 }}
+//             transition={{ duration: 0.8, delay: 0.4 }}
+//             className="group relative bg-white/95 backdrop-blur-sm p-8 rounded-2xl shadow-2xl border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-3xl transition-all duration-500 lg:w-1/2"
+//           >
+//             <div className="relative mb-3 pt-3">
+//               <h2 className="text-2xl md:text-3xl font-bold text-center">
+//                 <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#4a7c9b] via-[#063e5b] to-[#57acd9]">
+//                   {t("contact.formTitle")} 
+//                 </span>
+//               </h2>
+//               <div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-24 h-1 bg-gradient-to-r from-[#23558f] via-[#3c5ee3] to-[#2ecc71] rounded-full"></div>
+//             </div>
+//             <form
+//               ref={form}
+//               onSubmit={sendEmail}
+//               className="space-y-2"
+//             >
+//               <div className="group/field">
+//                 <label className="block mb-1 font-semibold text-gray-700 text-base transition-colors duration-300 group-hover/field:text-[#23558f]">
+//                   {t("contact.name")}
+//                 </label>
+//                 <div className="relative">
+//                   <input
+//                     type="text"
+//                     name="user_name"
+//                     required
+//                     className="w-full border-2 border-gray-200 p-4 rounded-xl bg-white text-gray-800 text-base placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-[#3c5ee3]/30 focus:border-[#3c5ee3] transition-all duration-300 hover:border-[#3c5ee3]/50 hover:shadow-lg hover:shadow-[#3c5ee3]/10"
+//                     placeholder={t("contact.namePlaceholder")}
+//                   />
+//                   <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#3c5ee3]/5 to-[#2ecc71]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
+//                 </div>
+//               </div>
+//               <div className="group/field">
+//                 <label className="block mb-1 font-semibold text-gray-700 text-base transition-colors duration-300 group-hover/field:text-[#23558f]">
+//                   {t("contact.email")}
+//                 </label>
+//                 <div className="relative">
+//                   <input
+//                     type="email"
+//                     name="user_email"
+//                     required
+//                     className="w-full border-2 border-gray-200 p-4 rounded-xl bg-white text-gray-800 text-base placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-[#3c5ee3]/30 focus:border-[#3c5ee3] transition-all duration-300 hover:border-[#3c5ee3]/50 hover:shadow-lg hover:shadow-[#3c5ee3]/10"
+//                     placeholder={t("contact.emailPlaceholder")}
+//                   />
+//                   <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#3c5ee3]/5 to-[#2ecc71]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
+//                 </div>
+//               </div>
+//               <div className="group/field">
+//                 <label className="block mb-2 font-semibold text-gray-700 text-base transition-colors duration-300 group-hover/field:text-[#23558f]">
+//                   {t("contact.message")}
+//                 </label>
+//                 <div className="relative">
+//                   <textarea
+//                     name="user_message"
+//                     required
+//                     className="w-full border-2 border-gray-200 p-4 rounded-xl resize-none bg-white text-gray-800 text-base placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-[#3c5ee3]/30 focus:border-[#3c5ee3] transition-all duration-300 hover:border-[#3c5ee3]/50 hover:shadow-lg hover:shadow-[#3c5ee3]/10 min-h-[120px]"
+//                     placeholder={t("contact.messagePlaceholder")}
+//                   ></textarea>
+//                   <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#3c5ee3]/5 to-[#2ecc71]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
+//                 </div>
+//               </div>
+//               {message.text && (
+//                 <motion.div
+//                   initial={{ scale: 0.9, opacity: 0 }}
+//                   animate={{ scale: 1, opacity: 1 }}
+//                   className={`p-4 rounded-xl text-center font-medium transition-all duration-500 ${
+//                     message.type === "success"
+//                       ? "bg-gradient-to-r from-[#2ecc71]/20 to-[#1abc9c]/20 border border-[#2ecc71]/50 text-[#2ecc71] shadow-lg shadow-[#2ecc71]/20"
+//                       : "bg-gradient-to-r from-[#e74c3c]/20 to-[#c0392b]/20 border border-[#e74c3c]/50 text-[#e74c3c] shadow-lg shadow-[#e74c3c]/20"
+//                   }`}
+//                 >
+//                   <div className="flex items-center justify-center gap-2">
+//                     {message.type === "success" ? (
+//                       <svg
+//                         className="w-5 h-5"
+//                         fill="none"
+//                         stroke="currentColor"
+//                         viewBox="0 0 24 24"
+//                       >
+//                         <path
+//                           strokeLinecap="round"
+//                           strokeLinejoin="round"
+//                           strokeWidth={2}
+//                           d="M5 13l4 4L19 7"
+//                         />
+//                       </svg>
+//                     ) : (
+//                       <svg
+//                         className="w-5 h-5"
+//                         fill="none"
+//                         stroke="currentColor"
+//                         viewBox="0 0 24 24"
+//                       >
+//                         <path
+//                           strokeLinecap="round"
+//                           strokeLinejoin="round"
+//                           strokeWidth={2}
+//                           d="M6 18L18 6M6 6l12 12"
+//                         />
+//                       </svg>
+//                     )}
+//                     {message.text}
+//                   </div>
+//                 </motion.div>
+//               )}
+//               <div className="pt-2">
+//                 <motion.button
+//                   type="submit"
+//                   disabled={isLoading}
+//                   whileHover={{ scale: 1.02 }}
+//                   whileTap={{ scale: 0.98 }}
+//                   className={`group/btn relative w-full bg-gradient-to-r from-[#57acd9] via-[#063e5b] to-[#4a7c9b] text-white px-6 py-4 text-lg font-semibold rounded-xl hover:shadow-2xl hover:shadow-[#3c5ee3]/30 transition-all duration-500 overflow-hidden ${
+//                     isLoading ? "opacity-70 cursor-not-allowed" : ""
+//                   }`}
+//                 >
+//                   <span className="relative z-10 flex items-center justify-center gap-2">
+//                     {isLoading ? (
+//                       <>
+//                         <svg
+//                           className="animate-spin w-5 h-5"
+//                           fill="none"
+//                           viewBox="0 0 24 24"
+//                         >
+//                           <circle
+//                             className="opacity-25"
+//                             cx="12"
+//                             cy="12"
+//                             r="10"
+//                             stroke="currentColor"
+//                             strokeWidth="4"
+//                           ></circle>
+//                           <path
+//                             className="opacity-75"
+//                             fill="currentColor"
+//                             d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+//                           ></path>
+//                         </svg>
+//                         {t("contact.send")}...
+//                       </>
+//                     ) : (
+//                       <>
+//                         {t("contact.send")}
+//                         <FaPaperPlane className="w-5 h-5 transform group-hover/btn:translate-x-1 transition-transform duration-300" />
+//                       </>
+//                     )}
+//                   </span>
+//                   {!isLoading && (
+//                     <div className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 transform -skew-x-12 -translate-x-full group-hover/btn:translate-x-full transition-transform duration-1000"></div>
+//                   )}
+//                 </motion.button>
+//               </div>
+//             </form>
+//             <div className="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-[#23558f]/10 to-[#3360b2]/10 rounded-full -translate-y-1/2 translate-x-1/2"></div>
+//             <div className="absolute bottom-0 left-0 w-16 h-16 bg-gradient-to-br from-[#2ecc71]/10 to-[#1abc9c]/10 rounded-full translate-y-1/2 -translate-x-1/2"></div>
+//           </motion.div>
+//         </div>
+//         <motion.div
+//           initial={{ opacity: 0, y: 30 }}
+//           animate={{ opacity: 1, y: 0 }}
+//           transition={{ duration: 0.8, delay: 0.6 }}
+//           className="mt-16 p-8 rounded-2xl shadow-2xl text-center relative overflow-hidden"
+//           style={{
+//             background: "linear-gradient(135deg, #4a7c9b 0%, #063e5b 33%, #57acd9 66%, #4a7c9b 100%)"
+//           }}
+//         >
+//           <div className="absolute inset-0">
+//             <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
+//             <div className="absolute bottom-0 left-0 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
+//           </div>
+          
+//           <div className="relative z-10">
+//             <h3 className="text-xl md:text-2xl font-bold text-white mb-4">
+//                {t('contact.contactSection.title')}
+//             </h3>
+//             <p className="text-white/90 text-lg mb-6 max-w-2xl mx-auto">
+//                 {t('contact.contactSection.description')}
+//             </p>
+//      <div className="flex flex-wrap justify-center gap-4">
+//   {t('contact.contactSection.badges', { returnObjects: true }).map((badge, index) => (
+//     <motion.div
+//       key={index}
+//       whileHover={{ scale: 1.05, y: -2 }}
+//       whileTap={{ scale: 0.95 }}
+//       className="px-4 py-2 bg-white/20 rounded-full text-white text-sm font-medium backdrop-blur-sm hover:bg-white/30 transition-all duration-300 cursor-pointer"
+//     >
+//       {badge}
+//     </motion.div>
+//   ))}
+// </div>
+//           </div>
+//         </motion.div>
+//       </div>
+//     </section>
+//   );
+// };
+
+// export default Contact;
+
+
+
+
 import { useTranslation } from "react-i18next";
 import {
   FaMapMarkerAlt,