REXNT/src/Components/Nav/Navbar.jsx

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;