/* global React, INK, PULSE */
// SOZEE NAV — the one navigation component. Every page (main site, feature pages, desktop + mobile)
// mounts SozeeNav / SozeeNavMobile from this file. Spec: "/".
//
//   <SozeeNav />                                    main site (reveals after hero, targets resolve locally)
//   <SozeeNav revealAfter="always" logoHref="/" siteHref="/" localLabels={{...}} />
//   <SozeeNavMobile siteHref="/" localLabels={{...}} />
//   <SozeeHashJump />                               on pages that receive "#<screen label>" deep links
//
// Menu item target grammar (SOZEE_NAV_MENUS items are [title, target, desc]):
//   null                → siteHref (the full tour), no-op when siteHref is null (already home)
//   "<file>.html"       → navigate to that page
//   "<screen label>"    → localLabels[target] → same-page scroll → else siteHref + "#" + target
const { useState: nvS, useEffect: nvE } = React;
const NAV_EASE = 'cubic-bezier(0.2, 0.8, 0.2, 1)';
const NAV_GLASS = { background: 'linear-gradient(150deg, rgba(252,248,248,0.66), rgba(243,235,252,0.54))',
  backdropFilter: 'blur(24px) saturate(1.7)', WebkitBackdropFilter: 'blur(24px) saturate(1.7)',
  border: '1px solid rgba(255,255,255,0.6)',
  boxShadow: '0 14px 40px rgba(28,27,27,0.14), inset 0 1px 0 rgba(255,255,255,0.7)' };

// status pill shown beside a nav item's title ("Coming soon", "Beta")
const NavTag = ({ label, small = false }) => {
  const beta = /beta/i.test(label);
  return (
    <span style={{ flexShrink: 0, borderRadius: 9999, padding: small ? '2px 6px' : '2px 7px', fontSize: small ? 8 : 8.5, fontWeight: 800, letterSpacing: '0.05em', textTransform: 'uppercase', whiteSpace: 'nowrap',
      color: beta ? 'var(--brand-purple-700)' : 'rgba(28,27,27,0.5)',
      background: beta ? 'var(--brand-purple-50)' : 'rgba(28,27,27,0.05)',
      boxShadow: beta ? 'inset 0 0 0 1px var(--brand-purple-200)' : 'inset 0 0 0 1px rgba(28,27,27,0.08)' }}>{label}</span>);
};

const SOZEE_NAV_MENUS = [
  { l: 'Creators', blurb: 'Your likeness, running a feed on its own.',
    items: [['Influencer', '/influencer', 'Your likeness, cloned — three photos, ten minutes.'],
      ['Micro-Creator', '/micro-creator', 'A daily feed without the daily shoot.'],
      ['AI Influencer', '/ai-influencer', 'Cast a persona from zero — no photos needed.']] },
      // Agency is unpublished — source kept in site-create/ag-*.jsx and "Sozee Agency.html".
      // To relaunch: restore its PAGES entry in build.py and re-add the item above.
  { l: 'Features', blurb: 'The studio, end to end.',
    items: [['Create Image', '/create-image', 'Type a scene, get the set — up to 4K.'],
      ['Create Video', '/create-video', 'Direct the take — watch it move.'],
      ['Photo Control', '/photo-control', 'Setting, outfit, shot, expression, object.'],
      ['Editing Suite', '/editing-suite', 'Brush, reimagine, filters, 4K upscale.'],
      ['Post & Analyze', '/post-analyze', 'Six platforms, one queue — and the proof per post.'],
      ['Copilot', '/copilot', 'Ask for it, approve it, it ships.']] },
  { l: 'Brands', blurb: 'Agencies, rosters and brand deals.',
    items: [['UGC Campaigns', '/ugc-campaigns', 'Your product in creator content, at scale.', 'Coming soon'],
      ['Brand Portal', '/brand-portal', 'Briefs in, approved content out — one place.', 'Coming soon'],
      ['White Label', '/white-label', 'The whole studio, under your name.', 'Beta']] },
  // Resources is hosted on WordPress, not by this build — absolute so it resolves to the
  // right place from any origin this site is served from (vercel preview today, sozee.ai
  // after cutover). It 404s until WordPress serves /resources.
  { l: 'Resources', href: 'https://sozee.ai/resources' },
];

const SOZEE_LEGAL_LINKS = [
  ['Terms of Service', '/terms-of-service'],
  ['Privacy Policy', '/privacy-policy'],
  ['Acceptable Use', '/acceptable-use'],
  ['Refund & Cancellation', '/refund-policy'],
  ['2257 Compliance', '/2257-compliance'],
  ['Anti-Trafficking', '/anti-trafficking'],
  ['Complaints & Removal', '/complaints-removal'],
];

// footer menu mirrors the header nav, plus a Legal column
const SOZEE_FOOTER_COLS = [
  // a target is a page link if it's a source filename (*.html) OR an already-rewritten
  // route ('/influencer') — the deployed bundle carries the latter; anything else is a
  // screen label reached through the home page's hash-jump
  ...SOZEE_NAV_MENUS.filter(m => m.items).map(m => [m.l, m.items.map(([t, target]) => [t, typeof target === 'string' && (/\.html$/.test(target) || target.charAt(0) === '/') ? target : '/' + (typeof target === 'string' ? '#' + target : '')])]),
  ['Legal', SOZEE_LEGAL_LINKS],
];

// shared target resolution — see grammar above. getBoundingClientRect (not offsetTop) so targets
// inside transformed/offset ancestors resolve to true document position.
const navScrollTo = (el) => window.scrollTo({ top: Math.max(0, Math.round(el.getBoundingClientRect().top + window.scrollY + 8)), behavior: 'smooth' });
function navResolve(target, localLabels, siteHref, close) {
  close();
  const local = localLabels[target];
  if (local) {
    const el = document.querySelector(`[data-screen-label="${local}"]`);
    if (el) { navScrollTo(el); return; }
  }
  if (!target) { if (siteHref) window.location.href = siteHref; return; }
  if (target.endsWith('.html') || target.charAt(0) === '/') { window.location.href = target; return; }
  const el = document.querySelector(`[data-screen-label="${target}"]`);
  if (el) navScrollTo(el);
  else if (siteHref) window.location.href = `${siteHref}#${target}`;
}

// deep-link receiver: scrolls to "#<screen label>" once sections mount — two passes,
// because reveals/images can still be expanding layout at the first one.
const SozeeHashJump = () => {
  nvE(() => {
    const label = decodeURIComponent((window.location.hash || '').slice(1));
    if (!label) return;
    const go = () => { const el = document.querySelector(`[data-screen-label="${label}"]`); if (el) navScrollTo(el); };
    const t1 = setTimeout(go, 400);
    const t2 = setTimeout(go, 1400);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);
  return null;
};

// reveal hook: 'hero' = after the hero track is behind the reader · 'always' = on load (120ms entrance).
// Optimized: threshold is measured once (and on resize/late layout), never per scroll frame;
// scroll work is rAF-throttled; ±60px hysteresis stops boundary flicker.
function useNavReveal(revealAfter) {
  const [on, setOn] = nvS(false);
  nvE(() => {
    if (revealAfter === 'always') { const t = setTimeout(() => setOn(true), 120); return () => clearTimeout(t); }
    let end = Infinity, ticking = false, dead = false;
    const measure = () => {
      const hero = document.querySelector('[data-screen-label="Hero"]');
      end = hero ? hero.offsetTop + (hero.offsetHeight - window.innerHeight) * 0.3 : window.innerHeight * 2;
    };
    const apply = () => { ticking = false; if (dead) return; const y = window.scrollY; setOn(prev => (prev ? y > end - 60 : y > end + 20)); };
    const onScroll = () => { if (!ticking) { ticking = true; requestAnimationFrame(apply); } };
    const onResize = () => { measure(); onScroll(); };
    measure(); apply();
    const t1 = setTimeout(onResize, 700), t2 = setTimeout(onResize, 2000); // hero height settles as reveals/images mount
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onResize);
    return () => { dead = true; clearTimeout(t1); clearTimeout(t2); window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onResize); };
  }, [revealAfter]);
  return on;
}

// ---------- desktop: floating liquid-glass pill; menus open in a DETACHED overlay panel below the bar ----------
const SozeeNav = ({ menus = SOZEE_NAV_MENUS, localLabels = {}, siteHref = null, logoHref = null, revealAfter = 'hero', cta = 'Start for free' }) => {
  const on = useNavReveal(revealAfter);
  const [open, setOpen] = nvS(-1);
  const closeT = React.useRef(0);
  const panelRef = React.useRef(null);
  const lastMenuRef = React.useRef(null);
  const freshOpenRef = React.useRef(true); // true when the panel just opened from closed (stagger items, no size morph)
  const wrapRef = React.useRef(null);
  const [anchor, setAnchor] = nvS(0); // x-center of the hovered tab, relative to the pill wrapper
  const [dims, setDims] = nvS(null);
  nvE(() => { if (!on) setOpen(-1); }, [on]);
  // an open panel closes as soon as the page starts scrolling — no dropdown dragging across sections
  nvE(() => {
    if (open < 0) return;
    const close = () => setOpen(-1);
    const onKey = (e) => { if (e.key === 'Escape') close(); };
    window.addEventListener('scroll', close, { passive: true });
    window.addEventListener('keydown', onKey);
    return () => { window.removeEventListener('scroll', close); window.removeEventListener('keydown', onKey); };
  }, [open]);
  // measure the active menu so switching menus morphs width/height instead of snapping
  nvE(() => {
    if (open >= 0 && panelRef.current) setDims({ w: panelRef.current.scrollWidth, h: panelRef.current.scrollHeight });
  }, [open]);
  const enter = (i, e) => { clearTimeout(closeT.current); freshOpenRef.current = open < 0; if (e) setAnchor(e.currentTarget.offsetLeft + e.currentTarget.offsetWidth / 2); setOpen(i); };
  const leave = () => { clearTimeout(closeT.current); closeT.current = setTimeout(() => setOpen(-1), 180); };
  const jump = (target) => navResolve(target, localLabels, siteHref, () => setOpen(-1));
  const menu = open >= 0 ? menus[open] : null;
  if (menu) lastMenuRef.current = menu;
  const shown = menu || lastMenuRef.current; // keep content rendered during the fade-out
  const cols = shown && shown.items ? (shown.items.length > 4 ? 2 : 1) : 1;
  const fresh = freshOpenRef.current;
  // anchor the panel under the hovered tab, clamped so it never strays past the pill’s ends
  const panelW = dims ? dims.w : 480;
  const wrapW = wrapRef.current ? wrapRef.current.offsetWidth : 0;
  let panelL = anchor - panelW / 2;
  const minL = -24, maxL = wrapW - panelW + 24;
  panelL = maxL < minL ? (wrapW - panelW) / 2 : Math.max(minL, Math.min(maxL, panelL));
  return (
    <div data-sz-nav="" style={{ position: 'fixed', top: 20, left: '50%', zIndex: 70, width: 'max-content', display: 'flex', alignItems: 'flex-start', gap: 10,
      transform: `translate(-50%, ${on ? '0' : '-140%'}) scale(${on ? 1 : 0.94})`, opacity: on ? 1 : 0,
      transition: `transform 0.55s ${NAV_EASE}, opacity 0.4s ${NAV_EASE}`, pointerEvents: on ? 'auto' : 'none' }}>
      <span onClick={() => { if (logoHref) window.location.href = logoHref; else window.scrollTo({ top: 0, behavior: 'smooth' }); }}
        style={{ ...NAV_GLASS, width: 48, height: 48, borderRadius: 9999, display: 'grid', placeItems: 'center', cursor: 'pointer', flexShrink: 0 }}>
        <img loading="lazy" decoding="async" src="assets/logo-icon.png" alt="Sozee" style={{ width: 22, height: 22, objectFit: 'contain' }} />
      </span>
      <div ref={wrapRef} onMouseEnter={() => clearTimeout(closeT.current)} onMouseLeave={leave} style={{ position: 'relative' }}>
        <div style={{ ...NAV_GLASS, borderRadius: 9999, padding: 6, display: 'flex', alignItems: 'center', gap: 2 }}>
          {menus.map((m, i) => (
            <span key={m.l} onMouseEnter={(e) => (m.items ? enter(i, e) : setOpen(-1))}
              onClick={(e) => { if (!m.items) { window.location.href = m.href; return; } open === i ? setOpen(-1) : enter(i, e); }}
              style={{ display: 'inline-flex', alignItems: 'center', gap: 7, borderRadius: 9999, height: 36, padding: '0 16px', boxSizing: 'border-box', fontSize: 13, fontWeight: open === i ? 700 : 500, cursor: 'pointer',
                color: open === i ? INK : 'rgba(28,27,27,0.62)',
                background: open === i ? 'rgba(255,255,255,0.85)' : 'transparent',
                boxShadow: open === i ? '0 2px 8px rgba(28,27,27,0.08)' : 'none',
                transition: `all 0.28s ${NAV_EASE}`, whiteSpace: 'nowrap' }}>
              {m.l}
              {m.items && <svg width="9" height="9" viewBox="0 0 12 12" fill="none" style={{ transform: open === i ? 'rotate(180deg)' : 'none', transition: `transform 0.3s ${NAV_EASE}` }}>
                <path d="M2.5 4.5L6 8l3.5-3.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>}
            </span>
          ))}
        </div>
        <div style={{ position: 'absolute', top: '100%', left: panelL, paddingTop: 10, pointerEvents: menu ? 'auto' : 'none',
          transition: fresh ? 'none' : `left 0.38s ${NAV_EASE}` }}>
          <div style={{ ...NAV_GLASS, borderRadius: 20, overflow: 'hidden', transformOrigin: 'top center',
            opacity: menu ? 1 : 0, transform: menu ? 'translateY(0) scale(1)' : 'translateY(-8px) scale(0.97)',
            transition: `opacity 0.28s ${NAV_EASE}, transform 0.34s ${NAV_EASE}` }}>
            <div style={{ width: dims ? dims.w : 'auto', height: dims ? dims.h : 'auto', overflow: 'hidden',
              transition: fresh ? 'none' : `width 0.38s ${NAV_EASE}, height 0.38s ${NAV_EASE}` }}>
              <div ref={panelRef} style={{ padding: '14px 14px 16px', display: 'grid', gridTemplateColumns: `repeat(${cols}, minmax(236px, 1fr))`, gap: '2px 14px', boxSizing: 'border-box', width: 'max-content' }}>
                {((shown && shown.items) || []).map(([t, target, d, tag], i) => (
                    <span key={t} onClick={() => jump(target)} style={{ display: 'block', borderRadius: 12, padding: '9px 11px', cursor: 'pointer', width: 236, boxSizing: 'border-box',
                      opacity: menu ? 1 : 0, transform: menu ? 'none' : 'translateY(4px)',
                      transition: fresh ? `opacity 0.35s ${NAV_EASE} ${60 + i * 34}ms, transform 0.35s ${NAV_EASE} ${60 + i * 34}ms, background 0.18s` : 'background 0.18s' }}
                      onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.72)'; }}
                      onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}>
                      <span style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 2 }}>
                        <span style={{ fontSize: 13, fontWeight: 700, color: INK }}>{t}</span>
                        {tag && <NavTag label={tag} />}
                      </span>
                      <span style={{ display: 'block', fontSize: 11.5, lineHeight: 1.4, color: 'rgba(28,27,27,0.58)' }}>{d}</span>
                    </span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
      <button onClick={() => window.szGo && window.szGo(window.SZ_SIGNUP_URL, 'nav')} style={{ display: 'inline-flex', alignItems: 'center', gap: 9, height: 48, padding: '0 22px', border: 0, cursor: 'pointer', flexShrink: 0,
        borderRadius: 9999, background: PULSE, color: '#fff', fontFamily: 'inherit', fontSize: 12.5, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase',
        boxShadow: '0 12px 30px -6px rgba(104,19,212,0.55)' }}>
        {cta}
        <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M3 8h9M8.5 4l4 4-4 4" stroke="#fff" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"/></svg>
      </button>
    </div>
  );
};
// ---------- mobile: glass hamburger puck + full-height accordion sheet ----------
const NavGlassBtn = ({ children, onClick, style }) => (
  <button onClick={onClick} style={{ width: 46, height: 46, borderRadius: '50%', border: '1px solid rgba(255,255,255,0.55)', cursor: 'pointer',
    background: 'rgba(252,248,248,0.5)', backdropFilter: 'blur(16px) saturate(1.5)', WebkitBackdropFilter: 'blur(16px) saturate(1.5)',
    boxShadow: '0 10px 30px rgba(28,27,27,0.18), inset 0 1px 0 rgba(255,255,255,0.6)', display: 'grid', placeItems: 'center', pointerEvents: 'auto', ...style }}>{children}</button>
);

const SozeeNavMobile = ({ menus = SOZEE_NAV_MENUS, localLabels = {}, siteHref = null, revealAfter = 'always', cta = 'Start for free', btnTop = 12, headTop = 8 }) => {
  const past = useNavReveal(revealAfter);
  const [open, setOpen] = nvS(false);
  const [sec, setSec] = nvS(-1);
  // the page must not scroll behind the open sheet
  nvE(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
  }, [open]);
  const show = past || open;
  const jump = (target) => navResolve(target, localLabels, siteHref, () => { setOpen(false); setSec(-1); });
  return (
    <React.Fragment>
      <div data-sz-nav="" style={{ position: 'fixed', top: 0, left: '50%', transform: 'translateX(-50%)', width: 'min(430px, 100vw)', zIndex: 80, pointerEvents: 'none' }}>
        <div style={{ position: 'absolute', top: btnTop, right: 14, opacity: show && !open ? 1 : 0, transform: show && !open ? 'scale(1)' : 'scale(0.6)',
          transition: `opacity 0.3s ${NAV_EASE}, transform 0.3s ${NAV_EASE}`, pointerEvents: show && !open ? 'auto' : 'none' }}>
          <NavGlassBtn onClick={() => setOpen(true)}>
            <span style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
              {[0, 1].map(i => <span key={i} style={{ width: 18, height: 2, borderRadius: 2, background: '#1C1B1B' }} />)}
            </span>
          </NavGlassBtn>
        </div>
      </div>
      <div data-sz-nav="" style={{ position: 'fixed', top: 0, bottom: 0, left: '50%', width: 'min(430px, 100vw)', zIndex: 90, boxSizing: 'border-box',
        transform: `translateX(${open ? '-50%' : '60%'})`, opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none',
        transition: `transform 0.5s ${NAV_EASE}, opacity 0.35s ${NAV_EASE}`,
        background: 'linear-gradient(160deg, rgba(252,248,248,0.72), rgba(243,235,252,0.6))',
        backdropFilter: 'blur(28px) saturate(1.6)', WebkitBackdropFilter: 'blur(28px) saturate(1.6)',
        borderLeft: '1px solid rgba(255,255,255,0.5)', boxShadow: '-20px 0 60px rgba(28,27,27,0.18), inset 0 1px 0 rgba(255,255,255,0.6)',
        display: 'flex', flexDirection: 'column', padding: '18px 26px 30px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 26, marginTop: headTop, flexShrink: 0 }}>
          <span onClick={() => jump(siteHref)} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
            <img loading="lazy" decoding="async" src="assets/logo-icon.png" alt="" style={{ width: 20, height: 20, objectFit: 'contain' }} />
            <span style={{ fontSize: 17, fontWeight: 800, letterSpacing: '-0.03em', color: '#1C1B1B' }}>sozee</span>
          </span>
          <NavGlassBtn onClick={() => setOpen(false)}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 3l10 10M13 3L3 13" stroke="#1C1B1B" strokeWidth="2" strokeLinecap="round"/></svg>
          </NavGlassBtn>
        </div>
        <nav className="m-nosb" style={{ display: 'flex', flexDirection: 'column', overflowY: 'auto', flex: 1, minHeight: 0, margin: '0 -4px', padding: '0 4px 4px' }}>
          {/* auto margins centre the rows in the sheet, and collapse to 0 once an open
              section makes the list taller than the space — so it still scrolls */}
          <div style={{ margin: 'auto 0', width: '100%', display: 'flex', flexDirection: 'column', gap: 4 }}>
          {menus.map((m, i) => {
            const isOpen = sec === i;
            return (
              <div key={m.l} style={{ borderTop: i ? '1px solid rgba(255,255,255,0.55)' : 'none',
                opacity: open ? 1 : 0, transform: open ? 'none' : 'translateX(28px)',
                transition: `opacity 0.45s ${NAV_EASE} ${120 + i * 70}ms, transform 0.45s ${NAV_EASE} ${120 + i * 70}ms` }}>
                <button onClick={() => (m.items ? setSec(isOpen ? -1 : i) : (window.location.href = m.href))} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, width: '100%',
                  background: 'transparent', border: 0, cursor: 'pointer', padding: '13px 8px', textAlign: 'left', fontFamily: 'inherit',
                  font: '800 25px/1.16 var(--font-sans)', letterSpacing: '-0.03em', color: isOpen ? 'var(--brand-purple-700)' : '#1C1B1B' }}>
                  {m.l}
                  <svg width="15" height="15" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0, transform: `rotate(${m.items && isOpen ? 90 : 0}deg)`, transition: `transform 0.3s ${NAV_EASE}` }}>
                    <path d={m.items ? 'M6 3.5L10.5 8 6 12.5' : 'M4 12L12 4M6.5 4H12v5.5'} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </button>
                <div style={{ display: 'grid', gridTemplateRows: isOpen ? '1fr' : '0fr', transition: `grid-template-rows 0.4s ${NAV_EASE}` }}>
                  <div style={{ overflow: 'hidden' }}>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, padding: '2px 0 14px' }}>
                      {(m.items || []).map(([t, target, d, tag], j) => (
                        <span key={t} onClick={() => jump(target)} style={{ display: 'block', borderRadius: 14, padding: '11px 13px', cursor: 'pointer',
                          background: 'linear-gradient(150deg, rgba(255,255,255,0.62), rgba(255,255,255,0.34))',
                          backdropFilter: 'blur(10px) saturate(1.4)', WebkitBackdropFilter: 'blur(10px) saturate(1.4)',
                          border: '1px solid rgba(255,255,255,0.6)', boxShadow: '0 4px 14px rgba(28,27,27,0.06), inset 0 1px 0 rgba(255,255,255,0.75)',
                          opacity: isOpen ? 1 : 0, transform: isOpen ? 'none' : 'translateY(-6px)',
                          transition: `opacity 0.35s ${NAV_EASE} ${isOpen ? 90 + j * 45 : 0}ms, transform 0.35s ${NAV_EASE} ${isOpen ? 90 + j * 45 : 0}ms` }}>
                          <span style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 3 }}>
                            <span style={{ fontSize: 13.5, fontWeight: 700, letterSpacing: '-0.01em', color: '#1C1B1B' }}>{t}</span>
                            {tag && <NavTag label={tag} small />}
                          </span>
                          <span style={{ display: 'block', fontSize: 11.5, lineHeight: 1.4, color: 'rgba(28,27,27,0.6)' }}>{d}</span>
                        </span>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
          {/* Log in rides with the menu rows, as the last one */}
          <div style={{ borderTop: '1px solid rgba(255,255,255,0.55)',
            opacity: open ? 1 : 0, transform: open ? 'none' : 'translateX(28px)',
            transition: `opacity 0.45s ${NAV_EASE} ${120 + menus.length * 70}ms, transform 0.45s ${NAV_EASE} ${120 + menus.length * 70}ms` }}>
            <button onClick={() => window.szGo && window.szGo('https://app.sozee.ai/sign-in', 'nav-mobile-log-in')}
              style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, width: '100%',
              background: 'transparent', border: 0, cursor: 'pointer', padding: '13px 8px', textAlign: 'left', fontFamily: 'inherit',
              font: '800 25px/1.16 var(--font-sans)', letterSpacing: '-0.03em', color: '#1C1B1B' }}>
              Log in
              <svg width="15" height="15" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0 }}>
                <path d="M4 12L12 4M6.5 4H12v5.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>
          </div>
          </div>
        </nav>
        <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid rgba(255,255,255,0.55)', flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 12,
          opacity: open ? 1 : 0, transform: open ? 'none' : 'translateY(16px)', transition: `opacity 0.45s ${NAV_EASE} 420ms, transform 0.45s ${NAV_EASE} 420ms` }}>
          <button onClick={() => window.szGo && window.szGo(window.SZ_SIGNUP_URL, 'nav-mobile')} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9, width: '100%', height: 52, border: 0, cursor: 'pointer',
            borderRadius: 9999, background: PULSE, color: '#fff', fontFamily: 'inherit', fontSize: 13.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
            boxShadow: '0 10px 26px -6px rgba(104,19,212,0.55)' }}>
            {cta}
            <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M3 8h9M8.5 4l4 4-4 4" stroke="#fff" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        </div>
      </div>
    </React.Fragment>
  );
};

Object.assign(window, { SOZEE_NAV_MENUS, SozeeNav, SozeeNavMobile, SozeeHashJump, NAV_GLASS, NAV_EASE, SOZEE_LEGAL_LINKS, SOZEE_FOOTER_COLS });