// NavBar.jsx — Funny Farm Creations
// Fixed top navigation bar with stitching border, logo, nav links, cart

const NavBar = ({ currentPage, onNavigate, cartCount = 0 }) => {
  const isMobile = useIsMobile();
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    if (!isMobile) setMenuOpen(false);
  }, [isMobile]);

  const links = [
    { label: 'Home', page: 'home' },
    { label: 'Shop', page: 'shop' },
    { label: 'Markets', page: 'markets' },
    { label: 'Our Story', page: 'story' },
    { label: 'Contact', page: 'contact' },
  ];

  return (
  <>
    <header style={{
      position: 'fixed', top: 0, width: '100%', zIndex: 50,
      background: 'var(--bg-page)',
      borderBottom: menuOpen ? 'none' : '2px dashed #e4beba',
      boxShadow: '0 1px 8px rgba(119,87,77,0.06)',
    }}>
      <nav style={{
        maxWidth: 1200, margin: '0 auto',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: isMobile ? '12px 16px' : '14px 24px',
      }}>
        {/* Wordmark */}
        <button onClick={() => { onNavigate('home'); setMenuOpen(false); }} style={{
          background: 'none', border: 'none', cursor: 'pointer',
          fontFamily: "'Plus Jakarta Sans', sans-serif",
          fontSize: isMobile ? 18 : 22, fontWeight: 900, color: '#af101a',
          fontStyle: 'italic', letterSpacing: '-0.01em',
        }}>
          Funny Farm Creations
        </button>

        {/* Desktop Nav Links */}
        {!isMobile && (
          <div style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
            {links.map(({ label, page }) => (
              <button key={page} onClick={() => onNavigate(page)} style={{
                background: 'none', border: 'none', cursor: 'pointer',
                fontFamily: "'Plus Jakarta Sans', sans-serif",
                fontSize: 13, fontWeight: 600, letterSpacing: '0.04em',
                color: currentPage === page ? '#af101a' : 'var(--text-secondary)',
                borderBottom: currentPage === page ? '2px solid #af101a' : '2px solid transparent',
                paddingBottom: 2,
                transition: 'color 150ms, transform 150ms',
              }}
                onMouseEnter={e => { e.currentTarget.style.color = '#af101a'; e.currentTarget.style.transform = 'scale(1.05)'; }}
                onMouseLeave={e => { e.currentTarget.style.color = currentPage === page ? '#af101a' : 'var(--text-secondary)'; e.currentTarget.style.transform = 'scale(1)'; }}
              >
                {label}
              </button>
            ))}
          </div>
        )}

        {/* Right side: hamburger (mobile) + cart */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          {/* Hamburger button — mobile only */}
          {isMobile && (
            <button
              className={`ffc-hamburger${menuOpen ? ' open' : ''}`}
              onClick={() => setMenuOpen(o => !o)}
              aria-label={menuOpen ? 'Close menu' : 'Open menu'}
              aria-expanded={menuOpen}
              style={{
                background: 'none', border: 'none', cursor: 'pointer',
                display: 'flex', flexDirection: 'column', justifyContent: 'center',
                gap: 6, padding: 8, width: 40, height: 40,
              }}
            >
              <span className="ffc-hamburger-line"/>
              <span className="ffc-hamburger-line"/>
              <span className="ffc-hamburger-line"/>
            </button>
          )}

          {/* Cart */}
          <button onClick={() => { onNavigate('cart'); setMenuOpen(false); }} style={{
            background: 'none', border: 'none', cursor: 'pointer',
            color: currentPage === 'cart' ? '#930010' : '#af101a', position: 'relative',
            transition: 'transform 150ms',
          }}
            onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.12)'}
            onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
          >
            <span className="material-symbols-outlined" style={{ fontSize: 26, verticalAlign: 'middle' }}>shopping_basket</span>
            {cartCount > 0 && (
              <span style={{
                position: 'absolute', top: -4, right: -6,
                background: '#af101a', color: '#fff',
                borderRadius: '50%', width: 16, height: 16,
                fontSize: 10, fontWeight: 700,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: "'Plus Jakarta Sans', sans-serif",
              }}>{cartCount}</span>
            )}
          </button>
        </div>
      </nav>

      {/* Mobile slide-down drawer */}
      {isMobile && (
        <div className={`ffc-mobile-drawer${menuOpen ? ' open' : ''}`}>
          {links.map(({ label, page }) => (
            <button
              key={page}
              onClick={() => { onNavigate(page); setMenuOpen(false); }}
              style={{
                display: 'block', width: '100%', textAlign: 'left',
                background: currentPage === page ? 'var(--bg-low)' : 'none',
                border: 'none', cursor: 'pointer',
                borderBottom: '1px solid #e4beba',
                padding: '16px 24px',
                fontFamily: "'Plus Jakarta Sans', sans-serif",
                fontSize: 18, fontWeight: 600,
                color: currentPage === page ? '#af101a' : 'var(--text-secondary)',
                letterSpacing: '0.02em',
              }}
            >
              {label}
            </button>
          ))}
        </div>
      )}
    </header>
    {/* Backdrop outside <header> so it doesn't sit above the drawer links */}
    {isMobile && (
      <div
        className={`ffc-drawer-backdrop${menuOpen ? ' visible' : ''}`}
        onClick={() => setMenuOpen(false)}
      />
    )}
  </>
  );
};

Object.assign(window, { NavBar });