// DGHeader.jsx — sticky nav with scroll shadow, gold rule, cart button
const { useState, useEffect } = React;

const DGHeader = ({ cartCount, onCartOpen }) => {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

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

  const links = [
    { label: 'Our Story',  href: '#about'    },
    { label: 'Products',   href: '#products'  },
    { label: 'Classes',    href: '#classes'   },
    // { label: 'Recipes',    href: '#recipes'   },
    { label: 'Contact',    href: '#contact'   },
  ];

  const handleNavClick = () => setMenuOpen(false);

  return (
    <>
      <header style={{
        ...hdrSt.root,
        background: scrolled ? 'rgba(242,236,220,0.97)' : '#F2ECDC',
        boxShadow: scrolled ? '0 2px 16px rgba(26,26,26,0.08)' : 'none',
      }}>
        <div style={hdrSt.inner}>
          <a href="#hero" style={hdrSt.logoWrap}>
            <img src="assets/logo_primary.png" alt="The Dashing Gent Bitters Co." style={hdrSt.logo} />
          </a>
          <nav style={hdrSt.nav} className="dg-header-nav">
            {links.map(({ label, href }) => (
              <a key={label} href={href} style={hdrSt.link}
                 onMouseEnter={e => e.target.style.color = '#B8904A'}
                 onMouseLeave={e => e.target.style.color = '#1A1A1A'}>
                {label}
              </a>
            ))}
          </nav>
          <div style={hdrSt.rightGroup}>
            <button
              className="dg-hamburger"
              style={hdrSt.hamburger}
              onClick={() => setMenuOpen(o => !o)}
              aria-label="Menu">
              {menuOpen
                ? <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" strokeWidth="2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                : <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" strokeWidth="2" strokeLinecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
              }
            </button>
            <button
              style={hdrSt.cartBtn}
              onClick={onCartOpen}
              onMouseEnter={e => { e.currentTarget.style.background = '#1A1A1A'; e.currentTarget.style.color = '#F2ECDC'; e.currentTarget.style.borderColor = '#1A1A1A'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#1A1A1A'; e.currentTarget.style.borderColor = 'rgba(184,144,74,0.55)'; }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/>
              </svg>
              Cart
              {cartCount > 0 && <span style={hdrSt.badge}>{cartCount}</span>}
            </button>
          </div>
        </div>
        <div style={hdrSt.rule} />

        {/* Mobile drawer */}
        {menuOpen && (
          <div style={hdrSt.mobileMenu} className="dg-mobile-menu">
            {links.map(({ label, href }) => (
              <a key={label} href={href} style={hdrSt.mobileLink} onClick={handleNavClick}
                 onMouseEnter={e => e.target.style.color = '#B8904A'}
                 onMouseLeave={e => e.target.style.color = '#1A1A1A'}>
                {label}
              </a>
            ))}
          </div>
        )}
      </header>
    </>
  );
};

const hdrSt = {
  root: {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
    borderBottom: '1px solid rgba(184,144,74,0.28)',
    backdropFilter: 'blur(10px)',
    transition: 'box-shadow 0.3s, background 0.3s',
  },
  inner: {
    maxWidth: 1160, margin: '0 auto', padding: '0 40px',
    height: 88, display: 'flex', alignItems: 'center',
  },
  logoWrap: { flex: 1, display: 'flex', alignItems: 'center', textDecoration: 'none' },
  logo: { height: 52, width: 'auto' },
  nav: { display: 'flex', gap: 28, justifyContent: 'center' },
  link: {
    fontFamily: 'Arial, sans-serif', fontSize: '0.67rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.13em',
    color: '#1A1A1A', textDecoration: 'none', transition: 'color 0.18s',
  },
  cartBtn: {
    display: 'flex', alignItems: 'center', gap: 7,
    fontFamily: 'Arial, sans-serif', fontSize: '0.67rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.1em',
    background: 'transparent', color: '#1A1A1A',
    border: '1.5px solid rgba(184,144,74,0.55)', padding: '8px 18px',
    cursor: 'pointer', flexShrink: 0, transition: 'all 0.18s',
  },
  rightGroup: {
    flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8,
  },
  hamburger: {
    display: 'none', background: 'none', border: 'none',
    cursor: 'pointer', padding: 6, alignItems: 'center', justifyContent: 'center',
  },
  mobileMenu: {
    background: '#F2ECDC',
    borderTop: '1px solid rgba(184,144,74,0.2)',
    display: 'flex', flexDirection: 'column',
    padding: '8px 0 16px',
  },
  mobileLink: {
    fontFamily: 'Arial, sans-serif', fontSize: '0.72rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.13em',
    color: '#1A1A1A', textDecoration: 'none',
    padding: '14px 32px',
    borderBottom: '1px solid rgba(184,144,74,0.12)',
    transition: 'color 0.18s',
  },
  badge: {
    background: '#B8904A', color: '#F2ECDC', fontSize: '0.58rem', fontWeight: 700,
    width: 18, height: 18, borderRadius: '50%',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
  },
  rule: {
    height: 2,
    background: 'linear-gradient(90deg, transparent 0%, #B8904A 30%, #D4B070 50%, #B8904A 70%, transparent 100%)',
  },
};

Object.assign(window, { DGHeader });