// FastFund website — top navigation with working mega-menus
function NavBar({ onApply }) {
  const { Button, Logo } = window.CapFrontDesignSystem_019e08;
  const { mobile, narrow } = window.useBreakpoint();
  const compact = narrow; // switch to hamburger below 1024 where the full nav won't fit
  const [scrolled, setScrolled] = React.useState(false);
  const [openMenu, setOpenMenu] = React.useState(null); // 'products' | 'resources' | null
  const [drawer, setDrawer] = React.useState(false);
  const closeTimer = React.useRef(null);

  React.useEffect(() => { if (!compact) setDrawer(false); }, [compact]);
  React.useEffect(() => {
    document.body.style.overflow = drawer ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [drawer]);

  React.useEffect(() => {
    const el = document.querySelector('[data-scroll-root]') || window;
    const onScroll = () => {
      const y = el === window ? window.scrollY : el.scrollTop;
      setScrolled(y > 8);
    };
    el.addEventListener('scroll', onScroll);
    return () => el.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); }, [openMenu]);

  const open = (m) => { clearTimeout(closeTimer.current); setOpenMenu(m); };
  const scheduleClose = () => { clearTimeout(closeTimer.current); closeTimer.current = setTimeout(() => setOpenMenu(null), 140); };

  const products = [
    { name: 'Term Loans', icon: 'trending-up', href: 'term-loans.html', desc: 'Up to $15M · to 25 yr' },
    { name: 'Lines of Credit', icon: 'wallet', href: 'lines-of-credit.html', desc: 'Up to $1.5M · revolving' },
    { name: 'Revenue-Based Financing', icon: 'percent', href: 'revenue-based-financing.html', desc: '$5K–$10M · from sales' },
    { name: 'SBA Loans', icon: 'landmark', href: 'product.html', desc: 'Up to $10M · to 30 yr' },
    { name: 'Equipment Financing', icon: 'forklift', href: 'equipment-financing.html', desc: 'Up to 100% of value' },
    { name: 'Invoice Factoring', icon: 'file-text', href: 'invoice-factoring.html', desc: 'Up to 90% upfront' },
    { name: 'HELOC', icon: 'house', href: 'heloc.html', desc: 'Up to $750K · from 5.99%' },
    { name: 'Real Estate Financing', icon: 'building-2', href: 'real-estate-financing.html', desc: 'Up to $25M · to 30 yr' },
    { name: 'Independent Contractor', icon: 'hard-hat', href: 'independent-contractor-financing.html', desc: 'Up to $20K · to 12 mo' },
    { name: 'Ecommerce Funding', icon: 'shopping-cart', href: 'ecommerce-funding.html', desc: 'Up to $20M · platform-linked' },
  ];
  const resources = [
    { name: 'Funding guides', icon: 'book-open', href: 'resources.html', desc: 'Plain-spoken how-tos' },
    { name: 'Owner stories', icon: 'quote', href: 'story.html', desc: 'Real customer case studies' },
    { name: 'About FastFund', icon: 'building', href: 'about.html', desc: 'Our mission & team' },
    { name: 'Partner program', icon: 'handshake', href: 'partners.html', desc: 'Refer deals, earn more' },
  ];

  const linkStyle = (active) => ({
    fontFamily: 'var(--font-body)', fontSize: 14.5, fontWeight: 600,
    color: active ? 'var(--violet-700)' : 'var(--text-body)',
    display: 'inline-flex', alignItems: 'center', gap: 5, cursor: 'pointer',
    background: 'none', border: 'none', padding: 0, height: 72,
  });

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: (scrolled || openMenu) ? 'rgba(255,255,255,0.92)' : 'var(--surface-card)',
      backdropFilter: (scrolled || openMenu) ? 'saturate(180%) blur(12px)' : 'none',
      borderBottom: `1px solid ${(scrolled || openMenu) ? 'var(--border-subtle)' : 'transparent'}`,
      transition: 'background var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard)',
    }}>
      <div style={{
        maxWidth: 'var(--container-max)', margin: '0 auto', height: 72,
        display: 'flex', alignItems: 'center', gap: 'var(--space-8)', padding: '0 var(--gutter)',
      }}>
        <a href="index.html" aria-label="FastFund home" style={{ display: 'inline-flex' }}><Logo size={30} /></a>
        <nav style={{ display: compact ? 'none' : 'flex', gap: 'var(--space-6)', marginLeft: 'var(--space-4)' }}>
          {/* Products */}
          <div style={{ position: 'relative' }} onMouseEnter={() => open('products')} onMouseLeave={scheduleClose}>
            <button style={linkStyle(openMenu === 'products')} onClick={() => (window.location.href = 'product.html')} aria-expanded={openMenu === 'products'}>
              Products
              <i data-lucide="chevron-down" style={{ width: 15, height: 15, color: 'var(--text-subtle)', transform: openMenu === 'products' ? 'rotate(180deg)' : 'none', transition: 'transform var(--duration-fast) var(--ease-standard)' }}></i>
            </button>
          </div>
          <a href="partners.html" style={linkStyle(false)}>Partners</a>
          <a href="about.html" style={linkStyle(false)}>About</a>
          {/* Resources */}
          <div style={{ position: 'relative' }} onMouseEnter={() => open('resources')} onMouseLeave={scheduleClose}>
            <button style={linkStyle(openMenu === 'resources')} onClick={() => (window.location.href = 'resources.html')} aria-expanded={openMenu === 'resources'}>
              Resources
              <i data-lucide="chevron-down" style={{ width: 15, height: 15, color: 'var(--text-subtle)', transform: openMenu === 'resources' ? 'rotate(180deg)' : 'none', transition: 'transform var(--duration-fast) var(--ease-standard)' }}></i>
            </button>
          </div>
          <a href="contact.html" style={linkStyle(false)}>Contact</a>
        </nav>
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 'var(--space-4)' }}>
          {!compact && (
            <a href="tel:8555550100" style={{
              display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-body)',
              fontWeight: 600, fontSize: 14.5, color: 'var(--text-strong)', whiteSpace: 'nowrap',
            }}>
              <i data-lucide="phone" style={{ width: 16, height: 16, color: 'var(--teal-600)' }}></i>
              855-555-0100
            </a>
          )}
          {!compact && <Button variant="accent" onClick={onApply}>Apply now</Button>}
          {compact && (
            <button onClick={() => setDrawer((d) => !d)} aria-label="Menu" aria-expanded={drawer}
              style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 44, height: 44, border: 'none', background: 'none', cursor: 'pointer', color: 'var(--text-strong)', margin: '0 -10px 0 0' }}>
              <i data-lucide={drawer ? 'x' : 'menu'} style={{ width: 26, height: 26 }}></i>
            </button>
          )}
        </div>
      </div>

      {/* Mobile drawer */}
      {compact && drawer && (
        <div style={{ position: 'fixed', top: 72, left: 0, right: 0, bottom: 0, background: 'var(--surface-card)', zIndex: 60, overflowY: 'auto', WebkitOverflowScrolling: 'touch', animation: 'cfMenuIn var(--duration-normal) var(--ease-out)' }}>
          <div style={{ padding: 'var(--space-5) var(--gutter) 120px' }}>
            <MobileGroup label="Products" items={products} onNav={() => setDrawer(false)} />
            <MobileGroup label="Resources" items={resources} onNav={() => setDrawer(false)} />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2, marginTop: 'var(--space-2)' }}>
              <a href="partners.html" style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 17, color: 'var(--text-strong)', padding: '14px 4px', borderTop: '1px solid var(--border-subtle)', textDecoration: 'none' }}>Partners</a>
              <a href="about.html" style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 17, color: 'var(--text-strong)', padding: '14px 4px', borderTop: '1px solid var(--border-subtle)', textDecoration: 'none' }}>About</a>
              <a href="contact.html" style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 17, color: 'var(--text-strong)', padding: '14px 4px', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)', textDecoration: 'none' }}>Contact</a>
            </div>
            <div style={{ marginTop: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
              <Button variant="accent" size="lg" onClick={() => { setDrawer(false); onApply && onApply(); }} style={{ width: '100%' }}>Apply now</Button>
              <a href="tel:8555550100" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 16, color: 'var(--text-strong)', padding: '12px' }}>
                <i data-lucide="phone" style={{ width: 18, height: 18, color: 'var(--teal-600)' }}></i>
                855-555-0100
              </a>
            </div>
          </div>
        </div>
      )}

      {/* Mega-menu panel (desktop only) */}
      {!compact && openMenu && (
        <div
          onMouseEnter={() => open(openMenu)}
          onMouseLeave={scheduleClose}
          style={{
            position: 'absolute', top: 72, left: 0, right: 0,
            background: 'var(--surface-card)', borderBottom: '1px solid var(--border-subtle)',
            boxShadow: 'var(--shadow-lg)',
            animation: 'cfMenuIn var(--duration-normal) var(--ease-out)',
          }}
        >
          <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'var(--space-6) var(--gutter) var(--space-8)' }}>
            {openMenu === 'products' && (
              <React.Fragment>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 'var(--space-4)' }}>
                  <span className="cf-overline" style={{ fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--teal-700)' }}>Funding products</span>
                  <a href="product.html" style={{ fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600, color: 'var(--text-link)', display: 'inline-flex', alignItems: 'center', gap: 4 }}>View all products <i data-lucide="arrow-right" style={{ width: 14, height: 14 }}></i></a>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '4px 24px' }}>
                  {products.map((p) => <MegaItem key={p.name} {...p} />)}
                </div>
              </React.Fragment>
            )}
            {openMenu === 'resources' && (
              <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--space-8)' }}>
                <div>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--teal-700)', display: 'block', marginBottom: 'var(--space-4)' }}>Learn & explore</span>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '4px 24px' }}>
                    {resources.map((r) => <MegaItem key={r.name} {...r} />)}
                  </div>
                </div>
                <a href="resources.html" style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--radius-lg)', background: 'var(--gradient-ink)', padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', textDecoration: 'none', minHeight: 150 }}>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--teal-300)', marginBottom: 6 }}>Featured guide</span>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: '#fff', lineHeight: 1.2 }}>How to compare funding offers without getting burned</span>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--neutral-300)', marginTop: 8, display: 'inline-flex', alignItems: 'center', gap: 5 }}>Read the guide <i data-lucide="arrow-right" style={{ width: 14, height: 14 }}></i></span>
                </a>
              </div>
            )}
          </div>
        </div>
      )}
    </header>
  );
}

function MobileGroup({ label, items, onNav }) {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); }, [open]);
  return (
    <div style={{ borderTop: '1px solid var(--border-subtle)' }}>
      <button onClick={() => setOpen((o) => !o)} aria-expanded={open}
        style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: 'none', border: 'none', cursor: 'pointer', padding: '14px 4px', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 17, color: 'var(--text-strong)' }}>
        {label}
        <i data-lucide="chevron-down" style={{ width: 20, height: 20, color: 'var(--text-subtle)', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--duration-fast) var(--ease-standard)' }}></i>
      </button>
      {open && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 2, padding: '0 0 12px' }}>
          {items.map((it) => (
            <a key={it.name} href={it.href} onClick={onNav}
              style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 8px', borderRadius: 'var(--radius-md)', textDecoration: 'none' }}>
              <span style={{ width: 34, height: 34, borderRadius: 'var(--radius-sm)', background: 'var(--surface-sunken)', color: 'var(--violet-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <i data-lucide={it.icon} style={{ width: 18, height: 18 }}></i>
              </span>
              <span>
                <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 15, color: 'var(--text-strong)' }}>{it.name}</span>
                <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-muted)' }}>{it.desc}</span>
              </span>
            </a>
          ))}
        </div>
      )}
    </div>
  );
}

function MegaItem({ name, icon, href, desc }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={href} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', padding: '10px 12px', borderRadius: 'var(--radius-md)', textDecoration: 'none', background: hover ? 'var(--surface-brand-soft)' : 'transparent', transition: 'background var(--duration-fast) var(--ease-standard)' }}>
      <span style={{ width: 38, height: 38, borderRadius: 'var(--radius-sm)', background: hover ? '#fff' : 'var(--surface-sunken)', color: 'var(--violet-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'background var(--duration-fast) var(--ease-standard)' }}>
        <i data-lucide={icon} style={{ width: 19, height: 19 }}></i>
      </span>
      <span style={{ minWidth: 0 }}>
        <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 14, color: 'var(--text-strong)' }}>{name}</span>
        <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-muted)' }}>{desc}</span>
      </span>
    </a>
  );
}
window.NavBar = NavBar;