// sections1.jsx — Logo, Navbar, Hero, Dashboard mockup
const { useState: useState1, useEffect: useEffect1 } = React;

function Logo({ className = "" }) {
  return (
    <a href="/" className={`flex items-center gap-2.5 group ${className}`}>
      <img src="/public/logo.png" alt="" className="h-9 w-auto object-contain" />
      <span className="font-display text-lg font-bold tracking-tight text-white">
        Orb2<span className="text-gradient">Byte</span>
      </span>
    </a>
  );
}

/* ---------- Language selector ---------- */
function LangToggle({ className = "" }) {
  const { lang, setLang } = useLang();
  const opts = [
    { id: "es", label: "ES" },
    { id: "en", label: "EN" },
  ];
  return (
    <div
      className={`relative inline-flex items-stretch rounded-xl glass p-0.5 ${className}`}
      role="group"
      aria-label="Language"
    >
      {opts.map((o) => {
        const on = lang === o.id;
        return (
          <button
            key={o.id}
            onClick={() => setLang(o.id)}
            aria-pressed={on}
            className={`relative z-10 inline-flex items-center justify-center rounded-[10px] px-2.5 text-xs font-bold tracking-wide transition-colors ${
              on ? "text-white" : "text-slate-400 hover:text-slate-200"
            }`}
            style={on ? { background: "linear-gradient(120deg,var(--a1),var(--a2))", boxShadow: "0 6px 18px -8px rgba(var(--glow2),0.7)" } : {}}
          >
            {o.label}
          </button>
        );
      })}
    </div>
  );
}

function Navbar({ onBookDemo }) {
  const { t } = useLang();
  const [scrolled, setScrolled] = useState1(false);
  const [open, setOpen] = useState1(false);
  const [activeHref, setActiveHref] = useState1("");

  useEffect1(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect1(() => {
    const ids = ["cta", "process", "solution"];
    const spy = () => {
      let found = "";
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top <= window.innerHeight * 0.45) {
          found = "#" + id;
          break;
        }
      }
      setActiveHref(found);
    };
    window.addEventListener("scroll", spy, { passive: true });
    spy();
    return () => window.removeEventListener("scroll", spy);
  }, []);

  const links = t.nav.links.map((label, i) => ({ label, href: t.nav.hrefs[i] }));

  const handleLink = (e, href) => {
    if (!href.startsWith("#")) return;
    e.preventDefault();
    const el = document.getElementById(href.slice(1));
    if (el) el.scrollIntoView({ behavior: "smooth" });
    history.replaceState(null, "", "/");
  };

  return (
    <header className="fixed top-0 inset-x-0 z-50">
      <div
        className={`mx-auto max-w-7xl px-4 transition-all duration-500 ${scrolled ? "mt-2.5" : "mt-4"}`}
      >
        <nav
          className={`flex items-center justify-between rounded-2xl px-4 sm:px-5 transition-all duration-500 ${
            scrolled
              ? "glass-strong h-14 shadow-[0_18px_50px_-24px_rgba(0,0,0,0.9)]"
              : "h-16 border border-transparent bg-transparent"
          }`}
        >
          <Logo />

          <div className="hidden md:flex items-center gap-1">
            {links.map((l) => {
              const isActive = l.href === activeHref;
              return (
                <a
                  key={l.label}
                  href={l.href}
                  onClick={(e) => handleLink(e, l.href)}
                  className={`px-3.5 py-2 text-sm font-medium rounded-lg transition-colors ${
                    isActive
                      ? "text-white bg-white/5"
                      : "text-slate-300/90 hover:text-white hover:bg-white/5"
                  }`}
                >
                  {l.label}
                </a>
              );
            })}
          </div>

          <div className="flex items-center gap-2">
            <LangToggle className="hidden sm:inline-flex h-10" />
            <button
              onClick={onBookDemo}
              className="hidden sm:inline-flex h-10 btn-primary items-center gap-2 rounded-xl px-4 text-sm font-semibold text-white"
            >
              {t.nav.bookDemo}
              <I.Arrow size={15} />
            </button>
            <button
              onClick={() => setOpen((v) => !v)}
              className="md:hidden inline-flex h-10 w-10 items-center justify-center rounded-xl glass text-white"
              aria-label="Menu"
            >
              {open ? <I.X size={20} /> : <I.Menu size={20} />}
            </button>
          </div>
        </nav>

        {/* mobile drawer */}
        <div
          className={`md:hidden overflow-hidden transition-all duration-400 ${
            open ? "max-h-96 opacity-100 mt-2" : "max-h-0 opacity-0"
          }`}
        >
          <div className="glass-strong rounded-2xl p-3 flex flex-col gap-1">
            <div className="flex items-center justify-between px-1 pb-1">
              <span className="text-[11px] font-semibold uppercase tracking-wider text-slate-500">Idioma · Language</span>
              <LangToggle />
            </div>
            {links.map((l) => (
              <a
                key={l.label}
                href={l.href}
                onClick={(e) => { handleLink(e, l.href); setOpen(false); }}
                className="px-4 py-3 rounded-xl text-slate-200 hover:bg-white/5 transition-colors"
              >
                {l.label}
              </a>
            ))}
            <button
              onClick={() => { setOpen(false); onBookDemo(); }}
              className="btn-primary mt-1 rounded-xl px-4 py-3 text-sm font-semibold text-white inline-flex items-center justify-center gap-2"
            >
              {t.nav.bookDemo}
              <I.Arrow size={15} />
            </button>
          </div>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Logo, Navbar, LangToggle });