/* global React, Logo, Icon */
const { useState: useStateNav } = React;
// Sticky top nav over a LIGHT hero: dark ink throughout. Transparent at the very top,
// then a translucent white + blur once scrolled. Includes the gear (admin) button.
const MLN_NAV = [
  { id: 'about', label: 'מי אני' },
  { id: 'lectures', label: 'הרצאות' },
  { id: 'store', label: 'חנות' },
  { id: 'gallery', label: 'גלריה' },
  { id: 'testimonials', label: 'המלצות' },
  { id: 'faq', label: 'שאלות ותשובות' },
  { id: 'contact', label: 'יצירת קשר' },
];

const NavBar = ({ scrolled, onNav, onAdmin }) => {
  const solid = scrolled;
  const [open, setOpen] = useStateNav(false);
  const linkColor = 'var(--ink-700)';

  const gearBtn = (
    <button onClick={onAdmin} title="אזור ניהול" aria-label="אזור ניהול" style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: 40, height: 40, borderRadius: '50%', cursor: 'pointer',
      background: 'var(--surface-tint)', color: 'var(--brand)',
      border: '1px solid var(--border)',
      transition: 'all 220ms var(--ease-soft)',
    }}
      onMouseEnter={e => { e.currentTarget.style.transform = 'rotate(45deg)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = 'rotate(0deg)'; }}
    ><Icon name="gear" size={19} /></button>
  );

  return (
    <header style={{
      position: 'fixed', top: 0, right: 0, left: 0, zIndex: 50,
      transition: 'all 420ms cubic-bezier(.22,.61,.36,1)',
      background: solid ? 'rgba(255,255,255,0.94)' : 'transparent',
      backdropFilter: solid ? 'blur(14px)' : 'none',
      WebkitBackdropFilter: solid ? 'blur(14px)' : 'none',
      borderBottom: solid ? '1px solid var(--border-strong)' : '1px solid transparent',
      boxShadow: solid ? '0 4px 20px rgba(28,20,19,0.12)' : 'none',
    }}>
      <div style={{
        maxWidth: 'var(--maxw)', margin: '0 auto', padding: '0 24px', height: 74,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
      }}>
        <Logo dark={false} size={48} onClick={() => onNav('top')} />

        {/* desktop nav */}
        <nav className="mln-desktop-nav" style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
          {MLN_NAV.map(n => (
            <button key={n.id} onClick={() => onNav(n.id)} style={{
              background: 'none', border: 'none', cursor: 'pointer', padding: '6px 0',
              fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 15,
              color: linkColor, transition: 'color 200ms', whiteSpace: 'nowrap',
            }}
              onMouseEnter={e => e.currentTarget.style.color = 'var(--brand)'}
              onMouseLeave={e => e.currentTarget.style.color = linkColor}
            >{n.label}</button>
          ))}
          {gearBtn}
        </nav>

        {/* mobile controls */}
        <div className="mln-mobile-nav" style={{ display: 'none', alignItems: 'center', gap: 10 }}>
          {gearBtn}
          <button onClick={() => setOpen(o => !o)} aria-label="תפריט" style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 40, height: 40, borderRadius: '50%', cursor: 'pointer',
            background: 'var(--surface-tint)', color: 'var(--brand)',
            border: '1px solid var(--border)',
          }}><Icon name={open ? 'x' : 'menu'} size={20} /></button>
        </div>
      </div>

      {/* mobile dropdown */}
      <div className="mln-mobile-nav" style={{
        display: 'none', overflow: 'hidden',
        maxHeight: open ? 460 : 0, transition: 'max-height 360ms var(--ease-soft)',
        background: 'rgba(251,246,242,0.97)', backdropFilter: 'blur(14px)',
        borderTop: open ? '1px solid var(--border)' : 'none',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', padding: '8px 24px 18px' }}>
          {MLN_NAV.map(n => (
            <button key={n.id} onClick={() => { onNav(n.id); setOpen(false); }} style={{
              background: 'none', border: 'none', borderBottom: '1px solid var(--border)',
              cursor: 'pointer', padding: '15px 0', textAlign: 'right',
              fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 17, color: 'var(--ink-900)',
            }}>{n.label}</button>
          ))}
        </div>
      </div>
    </header>
  );
};
window.NavBar = NavBar;