// Nav.jsx — top nav, Shopify-styled
function LDNav({ active = "home" }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const id = (window.location.hash || "").replace(/^#\/?/, "");
    if (!id) return;
    const go = () => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); };
    const t = setTimeout(go, 140); // let the page render first
    return () => clearTimeout(t);
  }, []);

  // Top loading bar — grows on internal navigation, completes on the new page/route.
  React.useEffect(() => {
    let bar = document.getElementById("ld-progress");
    if (!bar) {
      bar = document.createElement("div");
      bar.id = "ld-progress";
      Object.assign(bar.style, {
        position: "fixed", top: "0", left: "0", height: "3px", width: "0%",
        background: "var(--ld-yellow)",
        boxShadow: "0 0 10px rgba(255,214,10,0.9), 0 0 4px rgba(255,214,10,0.6)",
        zIndex: "10000", opacity: "0", borderRadius: "0 2px 2px 0",
        transition: "width 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.35s ease",
        pointerEvents: "none",
      });
      document.body.appendChild(bar);
      document.addEventListener("click", (e) => {
        const a = e.target && e.target.closest && e.target.closest("a");
        if (!a) return;
        const href = a.getAttribute("href") || "";
        const newTab = a.target && a.target !== "_self";
        const internal = /\.html(?:[#?].*)?$/.test(href) || href.indexOf("#/") === 0;
        if (internal && !newTab && window.__ldProgressStart) window.__ldProgressStart();
      });
    }
    const el = bar;
    window.__ldProgressStart = () => {
      el.style.opacity = "1"; el.style.width = "0%";
      void el.offsetWidth;
      el.style.width = "90%";
    };
    window.__ldProgressFinish = () => {
      el.style.opacity = "1";
      void el.offsetWidth;
      el.style.width = "100%";
      window.setTimeout(() => { el.style.opacity = "0"; }, 280);
      window.setTimeout(() => { el.style.width = "0%"; }, 650);
    };
    window.__ldProgressFinish(); // page/route just mounted → complete the bar
  }, []);

  const links = [
    { id: "features", label: "Features", href: "features.html#capabilities" },
    { id: "industries", label: "Solutions", href: "industries.html#playbooks" },
    { id: "pricing", label: "Pricing", href: "pricing.html" },
    { id: "integrations", label: "Integrations", href: "features.html#integrations" },
    { id: "faq", label: "FAQ", href: "faq.html" },
    { id: "support", label: "Support", href: "support.html" },
  ];
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "rgba(250,248,242,0.85)",
      backdropFilter: "blur(12px)",
      WebkitBackdropFilter: "blur(12px)",
      borderBottom: "1px solid var(--ld-line)",
    }}>
      <div className="ld-container-wide" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        height: 68,
      }}>
        <a href="index.html" style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <LDLogoMark size={36}/>
          <span style={{ fontWeight: 800, fontSize: 19, letterSpacing: "-0.4px", color: "var(--ld-ink)", whiteSpace: "nowrap" }}>
            Local Delivery
          </span>
        </a>
        <nav className="ld-nav-links" style={{ display: "flex", gap: 22 }}>
          {links.map((l) => (
            <a key={l.id} href={l.href} style={{
              fontSize: 14, fontWeight: 500,
              whiteSpace: "nowrap",
              color: active === l.id ? "var(--ld-ink)" : "var(--ld-ink-mute)",
            }}>{l.label}</a>
          ))}
        </nav>
        <div className="ld-nav-cta" style={{ display: "flex", gap: 14, alignItems: "center" }}>
          <a href="https://apps.shopify.com/local-delivery-premium" target="_blank" rel="noreferrer" className="ld-btn ld-btn-primary ld-btn-sm" style={{ gap: 8, whiteSpace: "nowrap" }}>
            <window.LDShopifyBag size={14} />
            Install on Shopify
          </a>
        </div>
        <button type="button" className="ld-nav-toggle" aria-label={menuOpen ? "Close menu" : "Open menu"} aria-expanded={menuOpen} onClick={() => setMenuOpen((o) => !o)} style={{
          width: 42, height: 42, borderRadius: 10, alignItems: "center", justifyContent: "center",
          background: menuOpen ? "var(--ld-yellow)" : "#fff", border: "1.5px solid var(--ld-ink)", cursor: "pointer", color: "var(--ld-ink)",
        }}>
          {menuOpen
            ? <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
            : <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>}
        </button>
      </div>

      {menuOpen && (
        <div className="ld-nav-mobile" style={{
          flexDirection: "column", padding: "8px 20px 20px",
          borderTop: "1px solid var(--ld-line)", background: "var(--ld-cream)",
        }}>
          {links.map((l) => (
            <a key={l.id} href={l.href} onClick={() => setMenuOpen(false)} style={{
              display: "block", padding: "13px 4px", fontSize: 16, fontWeight: 600,
              borderBottom: "1px solid var(--ld-line-soft)",
              color: active === l.id ? "var(--ld-ink)" : "var(--ld-ink-2)",
            }}>{l.label}</a>
          ))}
          <a href="https://apps.shopify.com/local-delivery-premium" target="_blank" rel="noreferrer" className="ld-btn ld-btn-primary" style={{ marginTop: 12, justifyContent: "center", gap: 8 }}>
            <window.LDShopifyBag size={15} />
            Install on Shopify
          </a>
        </div>
      )}
    </header>
  );
}

function LDLogoMark({ size = 36 }) {
  return (
    <span aria-label="Local Delivery" style={{
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      width: size, height: size, borderRadius: Math.round(size * 0.25),
      background: "var(--ld-yellow)",
      border: "1.5px solid var(--ld-ink)",
      boxShadow: `${Math.max(2, size/14)}px ${Math.max(2, size/14)}px 0 var(--ld-ink)`,
      color: "var(--ld-ink)",
      fontFamily: "var(--ld-font-sans)",
      fontStyle: "italic",
      fontWeight: 900,
      fontSize: size * 0.48,
      letterSpacing: "-2px",
      lineHeight: 1,
      paddingTop: 1, paddingLeft: 1,
    }}>LD</span>
  );
}
window.LDNav = LDNav;
window.LDLogoMark = LDLogoMark;