// Top navigation — single-page, section-scroll, with always-visible audience toggle + Join CTA.
// Audience comes from window.AudienceContext (provided by App in index.html).
window.Nav = function Nav({ active, setActive }) {
  const { audience, setAudience } = React.useContext(window.AudienceContext);

  // Section links depend on which sections actually render for the current audience.
  const links = audience === 'venue'
    ? [
        { label: 'How it works', id: 'how' },
        { label: 'LÜP locations', id: 'locations' },
        { label: 'Why LÜP', id: 'why' },
        { label: 'The bowls', id: 'bowls' },
      ]
    : [
        { label: 'How it works', id: 'how' },
        { label: 'LÜP locations', id: 'locations' },
        { label: 'Why LÜP', id: 'why' },
        { label: 'The bowls', id: 'bowls' },
      ];

  // CTA label is shared across audiences, but the destination differs:
  //   • customers → the app's signup flow (external link)
  //   • venues    → the on-page venue sign-up form (smooth-scroll to #join)
  const ctaLabel = 'Join the LÜP';
  const customerJoinUrl = 'https://app.lupit.com.au/join';
  const ctaIsExternal = audience === 'customer';

  // href/onClick for the Join CTA. `onLeave` runs an extra side-effect
  // (e.g. closing the mobile menu) — for the venue scroll, scrollTo already
  // closes the menu, so the customer/external branch handles it explicitly.
  const ctaProps = (onLeave) => ctaIsExternal
    ? { href: customerJoinUrl, onClick: onLeave }
    : { href: '#join', onClick: (e) => { e.preventDefault(); scrollTo('join'); } };

  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const scrollTo = (id) => {
    setMenuOpen(false);
    if (!id) { window.scrollTo({ top: 0, behavior: 'smooth' }); return; }
    setTimeout(() => {
      const el = document.getElementById(id);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      setActive && setActive(id);
    }, 30);
  };

  // The audience toggle — rendered in its own sticky ribbon below the nav,
  // visually distinct from the section nav pill so they don't read as the same control.
  // Uses a pill-segment toggle on a sage-tinted ribbon background.
  const audienceToggle = React.createElement('div', {
    className: 'audience-toggle',
    role: 'tablist',
    'aria-label': 'View as',
    style: {
      display: 'inline-flex', alignItems: 'center', gap: 4,
      background: 'var(--ivory)',
      border: '1px solid var(--border-warm)',
      borderRadius: 100,
      padding: 3,
      boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
    }
  },
    [
      { value: 'venue', label: 'For venues' },
      { value: 'customer', label: 'For customers' },
    ].map(opt => {
      const isActive = audience === opt.value;
      return React.createElement('button', {
        key: opt.value,
        role: 'tab',
        'aria-selected': isActive,
        onClick: () => setAudience(opt.value),
        style: {
          fontSize: 13, fontWeight: 500,
          padding: '7px 16px', borderRadius: 100,
          border: 'none',
          cursor: 'pointer',
          color: isActive ? 'var(--ivory)' : 'var(--charcoal)',
          background: isActive ? 'var(--terracotta)' : 'transparent',
          transition: 'all 0.15s',
          whiteSpace: 'nowrap',
          fontFamily: 'inherit',
        }
      }, opt.label);
    })
  );

  // The ribbon that hosts the toggle — a slim sticky bar sitting just below the
  // main nav. Mirrors the nav's transparency: see-through at the top of the page,
  // cream-tinted blur once the user scrolls.
  const audienceRibbon = React.createElement('div', {
    className: 'audience-ribbon',
    style: {
      position: 'sticky',
      top: 64, // sits just below the main nav (which has its own top:0 sticky)
      zIndex: 99,
      background: scrolled || menuOpen ? 'rgba(237,224,207,0.92)' : 'transparent',
      borderBottom: scrolled ? '1px solid rgba(224,216,200,0.6)' : '1px solid transparent',
      padding: '10px 16px',
      backdropFilter: scrolled || menuOpen ? 'blur(12px) saturate(1.1)' : 'none',
      WebkitBackdropFilter: scrolled || menuOpen ? 'blur(12px) saturate(1.1)' : 'none',
      transition: 'all 0.25s ease-out',
    }
  },
    React.createElement('div', {
      style: {
        maxWidth: 1180, margin: '0 auto',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        gap: 14, flexWrap: 'wrap',
      }
    },
      audienceToggle,
    ),
  );

  return React.createElement(React.Fragment, null,
    React.createElement('nav', {
      style: {
        position: 'sticky', top: 0, zIndex: 100,
        padding: '10px 16px',
        // Pinned to 64px so the audience ribbon (sticky at top:64) butts up
        // flush against the nav with no gap for page content to peek through.
        minHeight: 64, boxSizing: 'border-box',
        background: scrolled || menuOpen ? 'rgba(237,224,207,0.92)' : 'transparent',
        backdropFilter: scrolled || menuOpen ? 'blur(12px) saturate(1.1)' : 'none',
        WebkitBackdropFilter: scrolled || menuOpen ? 'blur(12px) saturate(1.1)' : 'none',
        borderBottom: scrolled ? '1px solid rgba(224,216,200,0.6)' : '1px solid transparent',
        transition: 'all 0.25s ease-out',
      }
    },
      React.createElement('div', {
        className: 'nav-inner',
        style: {
          maxWidth: 1180, margin: '0 auto',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
        }
      },
        // Logo
        React.createElement('a', {
          href: '#',
          onClick: e => { e.preventDefault(); scrollTo(null); },
          style: { display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', flexShrink: 0 }
        },
          React.createElement('img', {
            src: 'assets/lup-logo.svg?v=2', alt: 'LÜP Reuse Network',
            className: 'nav-logo',
            style: { height: 40, width: 'auto' }
          }),
        ),

        // Center cluster — section link pill (desktop). Audience toggle lives in its own ribbon below.
        React.createElement('div', {
          className: 'nav-links-desktop',
          style: {
            display: 'flex', alignItems: 'center', gap: 2,
            background: 'rgba(250,245,237,0.6)',
            border: '1px solid var(--border-warm)',
            borderRadius: 100,
            padding: 4,
          }
        },
          links.map((l, i) => {
            const isActive = active === l.id;
            return React.createElement('a', {
              key: i, href: `#${l.id}`,
              onClick: e => { e.preventDefault(); scrollTo(l.id); },
              style: {
                fontSize: 13, fontWeight: 500,
                padding: '8px 14px', borderRadius: 100,
                textDecoration: 'none',
                color: isActive ? 'var(--ivory)' : 'var(--charcoal)',
                background: isActive ? 'var(--charcoal)' : 'transparent',
                transition: 'all 0.15s',
                whiteSpace: 'nowrap',
              }
            }, l.label);
          }),
        ),

        // Right cluster — always-visible CTA button + hamburger (on mobile)
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 } },
          React.createElement('a', {
            className: 'btn btn-terracotta nav-cta',
            ...ctaProps(),
            style: { padding: '10px 16px', fontSize: 13, fontWeight: 600, borderRadius: 100, minHeight: 42 }
          },
            ctaLabel,
            React.createElement(IconArrowRight, { size: 13 })
          ),
          React.createElement('button', {
            className: 'nav-hamburger',
            'aria-label': menuOpen ? 'Close menu' : 'Open menu',
            onClick: () => setMenuOpen(!menuOpen),
            style: {
              width: 42, height: 42, borderRadius: 12,
              background: menuOpen ? 'var(--charcoal)' : 'var(--ivory)',
              border: '1px solid var(--border-warm)',
              alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }
          },
            React.createElement('svg', { width: 20, height: 20, viewBox: '0 0 24 24', fill: 'none', stroke: menuOpen ? 'var(--ivory)' : 'var(--charcoal)', strokeWidth: 2, strokeLinecap: 'round' },
              menuOpen
                ? React.createElement(React.Fragment, null,
                  React.createElement('line', { x1: 5, y1: 5, x2: 19, y2: 19 }),
                  React.createElement('line', { x1: 19, y1: 5, x2: 5, y2: 19 }),
                )
                : React.createElement(React.Fragment, null,
                  React.createElement('line', { x1: 4, y1: 7, x2: 20, y2: 7 }),
                  React.createElement('line', { x1: 4, y1: 12, x2: 20, y2: 12 }),
                  React.createElement('line', { x1: 4, y1: 17, x2: 20, y2: 17 }),
                ),
            ),
          ),
        ),
      ),
    ),
    // Audience toggle ribbon — sits below the main nav as its own sticky strip
    audienceRibbon,
    // Mobile menu drawer
    menuOpen && React.createElement('div', { className: 'mobile-menu', style: { paddingTop: 64 } },
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 4, maxWidth: 480, margin: '0 auto', width: '100%' } },
        // Audience toggle at the top of the drawer for easy access on mobile
        React.createElement('div', { style: { marginBottom: 18, display: 'flex', justifyContent: 'center' } }, audienceToggle),
        links.map((l, i) => React.createElement('a', {
          key: i, href: `#${l.id}`,
          onClick: e => { e.preventDefault(); scrollTo(l.id); },
          style: {
            fontFamily: 'var(--font-serif)', fontSize: 28, fontWeight: 500,
            color: 'var(--charcoal)', padding: '14px 4px', textDecoration: 'none',
            borderBottom: '1px dashed rgba(122,140,110,0.3)',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }
        }, l.label, React.createElement(IconArrowRight, { size: 18, color: 'var(--terracotta)' }))),
        React.createElement('a', {
          className: 'btn btn-terracotta',
          ...ctaProps(() => setMenuOpen(false)),
          style: { marginTop: 20, justifyContent: 'center', padding: '16px 24px', fontSize: 16, borderRadius: 14 },
        }, ctaLabel, React.createElement(IconArrowRight, { size: 16 })),
      ),
    ),
  );
};