/* ===================================================================
   ROVIA — Header / Navigation
   =================================================================== */

const LANGS = [
  { code: "EN", label: "English",   region: "International" },
  { code: "ET", label: "Eesti",     region: "Eesti" },
  { code: "FI", label: "Suomi",     region: "Suomi" },
  { code: "LV", label: "Latviešu",  region: "Latvija" },
  { code: "LT", label: "Lietuvių",  region: "Lietuva" },
  { code: "RU", label: "Русский",   region: "Baltics" },
];

function LanguageSwitcher({ solid }) {
  const [open, setOpen] = useState(false);
  const [cur, setCur] = useState(LANGS[0]);
  const ref = useRef(null);

  useEffect(() => {
    const onDoc = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);

  return (
    <div className="lang" ref={ref}>
      <button
        className={"lang-trigger" + (open ? " open" : "")}
        onClick={() => setOpen((o) => !o)}
        aria-haspopup="listbox"
        aria-expanded={open}
      >
        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
          <circle cx="12" cy="12" r="9" />
          <path d="M3 12h18M12 3c2.5 2.6 2.5 15.4 0 18M12 3c-2.5 2.6-2.5 15.4 0 18" />
        </svg>
        <span className="lang-code">{cur.code}</span>
        <svg className="lang-caret" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
          <path d="M6 9l6 6 6-6" />
        </svg>
      </button>

      <div className={"lang-menu" + (open ? " show" : "")} role="listbox">
        <div className="lang-menu-head mono">Select language</div>
        {LANGS.map((l) => (
          <button
            key={l.code}
            role="option"
            aria-selected={l.code === cur.code}
            className={"lang-opt" + (l.code === cur.code ? " active" : "")}
            onClick={() => {
              setCur(l);
              setOpen(false);
            }}
          >
            <span className="lang-opt-code mono">{l.code}</span>
            <span className="lang-opt-text">
              <span className="lang-opt-label">{l.label}</span>
              <span className="lang-opt-region">{l.region}</span>
            </span>
            {l.code === cur.code && (
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#D99041" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12.5l4 4 10-11" />
              </svg>
            )}
          </button>
        ))}
      </div>
    </div>
  );
}

function Logo({ solid }) {
  return (
    <a href="#top" className="logo" aria-label="GlobalStaff home">
      <svg width="30" height="30" viewBox="0 0 32 32" fill="none" aria-hidden="true">
        <rect x="5" y="5" width="22" height="22" rx="2" stroke="#264653" strokeWidth="2" fill="#FCFBF8" />
        <path d="M5 16 H27 M16 5 V27" stroke="#264653" strokeWidth="1.4" strokeDasharray="1.5 3" />
        <rect x="5" y="5" width="11" height="11" fill="#D99041" opacity="0.16" />
        <circle cx="16" cy="16" r="2.2" fill="#D99041" />
      </svg>
      <span className="logo-word">GlobalStaff</span>
    </a>
  );
}

const NAV = [
  { label: "Services", href: "#services" },
  { label: "Stone Solutions", href: "#solutions" },
  { label: "How It Works", href: "#process" },
  { label: "Projects", href: "#projects" },
  { label: "About", href: "#about" },
];

function Header() {
  const [solid, setSolid] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header className={"header" + (solid ? " solid" : "")}>
      <div className="header-inner container">
        <Logo solid={solid} />

        <nav className="nav-desktop">
          {NAV.map((n) => (
            <a key={n.label} href={n.href} className="nav-link">
              {n.label}
            </a>
          ))}
        </nav>

        <div className="header-actions">
          <a href="#quote" className="btn btn-accent header-cta">
            Request a Quote
            <svg className="arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12h14M13 6l6 6-6 6" />
            </svg>
          </a>
          <button
            className="burger"
            aria-label="Menu"
            onClick={() => setMobileOpen((o) => !o)}
          >
            <span className={mobileOpen ? "x" : ""} />
            <span className={mobileOpen ? "x" : ""} />
            <span className={mobileOpen ? "x" : ""} />
          </button>
        </div>
      </div>

      <div className={"mobile-menu" + (mobileOpen ? " open" : "")}>
        {NAV.map((n) => (
          <a key={n.label} href={n.href} className="mobile-link" onClick={() => setMobileOpen(false)}>
            {n.label}
          </a>
        ))}
        <a href="#quote" className="btn btn-accent" onClick={() => setMobileOpen(false)}>Get a Quote</a>
      </div>
    </header>
  );
}

Object.assign(window, { Header });