// Shared navbar — single source of truth for primary navigation.
// Public-only since the 2026-07-03 simplification: the web is a catalog +
// app landing surface (signed-in product UX lives in the mobile apps; the
// only signed-in web area is /admin, which has its own shell). The right
// side is a single "Get the app" CTA.
//
// Styles for the shared inner pieces (brand, links, CTA) are injected once.
// Each host page may still own the outer `.nav` rule (position/background).
//
// Usage:
//   <MfcNav active="home|recipes|ingredients|utensils" />
//   - `active` is optional; a legacy `user` prop is accepted and ignored.

(function () {
  const { useState, useEffect } = React;

  const STYLE = `
.nav-inner {
  width: 100%; max-width: var(--container);
  margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.02em; }
.brand-mark {
  display: inline-block;
  width: 36px; height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--paper);
}
.brand-name { font-size: 17px; }
.brand-name em { font-family: var(--serif); font-weight: 400; font-style: italic; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 200ms cubic-bezier(.2,.8,.2,1);
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav-links a:hover, .nav-links a.active { color: var(--orange-text); }
.mobile-tabbar { display: none; }
.nav-links a.active::after {
  content: ""; position: absolute; left: 50%; bottom: -22px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--orange);
  transform: translateX(-50%);
}
.nav-user-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; min-height: var(--tap-min);
  background: var(--orange-text); color: var(--paper);
  border-radius: 999px; font-size: 14px; font-weight: 500;
  cursor: pointer; border: none; transition: background 200ms;
}
.nav-user-btn:hover { background: var(--orange-text-hover); }
.nav-user {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px;
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 999px;
  font-size: 13px; font-weight: 500;
  cursor: pointer; box-shadow: 3px 3px 0 var(--ink);
  transition: transform 180ms, box-shadow 180ms;
}
.nav-user:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.nav-avatar {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  background: var(--orange-text); color: var(--paper);
  border-radius: 50%;
  font-size: 12px; font-weight: 700;
  font-family: var(--mono);
  flex-shrink: 0; text-transform: uppercase;
}
@media (max-width: 880px) {
  .nav-links { display: none; }
  .mobile-tabbar {
    display: flex; gap: 4px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: var(--paper);
    border-top: 1.5px solid var(--ink);
    box-shadow: 0 -2px 0 rgba(31,26,20,0.05);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  }
  .mobile-tabbar a {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 7px 4px 5px; border-radius: 12px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-soft); text-decoration: none;
    transition: color 180ms, background 180ms, transform 120ms;
  }
  /* Keep labels on a single line — long ones (DASHBOARD, INGREDIENTS) used to wrap */
  .mobile-tabbar a span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-tabbar a svg { width: 22px; height: 22px; display: block; }
  @media (max-width: 380px) { .mobile-tabbar a { font-size: 9px; letter-spacing: 0.02em; } }
  .mobile-tabbar a.active { color: var(--orange-text); background: var(--orange-soft); }
  .mobile-tabbar a:active { transform: scale(0.94); }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}
`;

  function ensureStyle() {
    if (document.getElementById('mfc-nav-style')) return;
    const el = document.createElement('style');
    el.id = 'mfc-nav-style';
    el.textContent = STYLE;
    document.head.appendChild(el);
  }
  ensureStyle();

  function useScrolled() {
    const [s, setS] = useState(false);
    useEffect(() => {
      const fn = () => setS(window.scrollY > 20);
      window.addEventListener('scroll', fn, { passive: true });
      fn();
      return () => window.removeEventListener('scroll', fn);
    }, []);
    return s;
  }

  const ICONS = {
    home: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M3 11l9-7 9 7" />
        <path d="M5 10v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-9" />
      </svg>
    ),
    dashboard: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <rect x="3" y="3" width="7" height="7" rx="1.5" />
        <rect x="14" y="3" width="7" height="7" rx="1.5" />
        <rect x="14" y="14" width="7" height="7" rx="1.5" />
        <rect x="3" y="14" width="7" height="7" rx="1.5" />
      </svg>
    ),
    bloodwork: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M20.5 12H17l-2 5-4-10-2 5H4.5" />
      </svg>
    ),
    recipes: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M4 5a2 2 0 0 1 2-2h12v16H6a2 2 0 0 0-2 2z" />
        <path d="M18 17H6" />
      </svg>
    ),
    ingredients: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M12 2a3 3 0 0 1 3 3c0 1.5-1 2.5-1 4h-4c0-1.5-1-2.5-1-4a3 3 0 0 1 3-3z" />
        <path d="M9 9h6l1 9a3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3z" />
      </svg>
    ),
    utensils: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M6 3v8a2 2 0 0 0 4 0V3" />
        <path d="M8 11v10" />
        <path d="M16 3c-1.5 0-2.5 1.5-2.5 4S14.5 13 16 13s2.5-1.5 2.5-6S17.5 3 16 3z" />
        <path d="M16 13v8" />
      </svg>
    ),
  };

  function MfcNav({ user, active, base = '' }) {
    const scrolled = useScrolled();
    const cls = (key) => active === key ? 'active' : undefined;

    const links = [
      { key: 'home', href: '/', label: 'Home' },
      { key: 'recipes', href: '/recipe-search', label: 'Recipes' },
      { key: 'ingredients', href: '/ingredients', label: 'Ingredients' },
      { key: 'utensils', href: '/utensils', label: 'Utensils' },
    ];

    return (
      <>
        <nav className={'nav' + (scrolled ? ' scrolled' : '')}>
          <div className="nav-inner">
            <a className="brand" href="/">
              <img className="brand-mark" src="/assets/img/brand/mfc.png" alt="MyFoodCraving" />
              <span className="brand-name">MyFood<em>Craving</em></span>
            </a>
            <div className="nav-links">
              {links.map((l) => (
                <a key={l.key} href={l.href} className={cls(l.key)}>{l.label}</a>
              ))}
            </div>
            <a className="nav-user-btn" href="/get-app">Get the app →</a>
          </div>
        </nav>
        <nav className="mobile-tabbar" aria-label="Primary">
          {links.map((l) => (
            <a key={l.key} href={l.href} className={cls(l.key) ? 'active' : undefined}>
              {ICONS[l.key]}
              <span>{l.label}</span>
            </a>
          ))}
        </nav>
      </>
    );
  }

  window.MfcNav = MfcNav;
})();