// 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>
    <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 StyledWrapper = styled.div`
  /* Base Styles */
  .switch {
    display: inline-block;
    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 = ({ currentTheme, toggleTheme }) => {
  const isDark = currentTheme === "dark";

  return (
    <StyledWrapper>
      <label
        role="switch"
        aria-checked={isDark}
        tabIndex={0}
        className="switch"
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            toggleTheme();
          }
        }}
      >
        <input
          type="checkbox"
          checked={isDark}
          onChange={toggleTheme}
          aria-hidden="false"
        />
        <span className="slider" aria-hidden="true">
          <span className="slider-inner" />
        </span>
      </label>
    </StyledWrapper>
  );
};

const Navbar = ({ toggleTheme, currentTheme }) => {
  const { t, i18n } = useTranslation();
  const [menuOpen, setMenuOpen] = useState(false);
  const [activeSection, setActiveSection] = useState("home");

  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);
  }, []);

  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" },
    { 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">
            {/* 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) => {
                  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">
                {/* LanguageSwitcher from second code */}
                <LanguageSwitcher />
                <ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
              </div>

              <div className="md:hidden flex items-center gap-2">
                <ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
                <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">
                  <LanguageSwitcher />
                </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}
                      >
                        <span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span>
                      </Link>
                    </li>
                  );
                })}
              </ul>

              <div className="mt-4 flex items-center gap-3">
                <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>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </>
  );
};

export default Navbar;