// Pretty Rare Boutique — Site Nav (responsive with logo)

const { useState: prUseState, useEffect: prUseEffect } = React;

function SiteNav({ onBook, onJump, current }) {
  const [scrolled, setScrolled] = prUseState(false);
  const [menuOpen, setMenuOpen] = prUseState(false);
  const mobile = useMobile();

  prUseEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  prUseEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const navBg = scrolled || menuOpen;
  const wrap = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: mobile ? '14px 24px' : (scrolled ? '14px 40px' : '22px 40px'),
    background: navBg ? 'rgba(251, 247, 248, 0.96)' : 'transparent',
    backdropFilter: navBg ? 'blur(24px) saturate(1.2)' : 'none',
    WebkitBackdropFilter: navBg ? 'blur(24px) saturate(1.2)' : 'none',
    borderBottom: navBg ? '1px solid var(--border)' : '1px solid transparent',
    transition: 'all 320ms var(--ease-soft)',
  };

  const link = (active) => ({
    fontFamily: 'var(--font-sans)', fontSize: 11, letterSpacing: '0.22em',
    textTransform: 'uppercase', fontWeight: 500,
    color: active ? 'var(--accent)' : 'var(--fg)',
    cursor: 'pointer', transition: 'color 220ms var(--ease-soft)',
  });

  const logo = (
    <div onClick={() => { onJump('top'); setMenuOpen(false); }} style={{ cursor: 'pointer', lineHeight: 0 }}>
      <img
        src="assets/logo.jpg"
        alt="Pretty Rare Boutique"
        style={{
          height: scrolled || mobile ? 44 : 56,
          width: 'auto',
          objectFit: 'contain',
          transition: 'height 320ms var(--ease-soft)',
          borderRadius: 4,
        }}
      />
    </div>
  );

  if (mobile) {
    return (
      <>
        <nav style={wrap} data-screen-label="nav">
          {logo}
          <button
            onClick={() => setMenuOpen(!menuOpen)}
            style={{ background: 'transparent', border: 0, padding: 8, cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 5, alignItems: 'flex-end' }}
            aria-label="Toggle menu"
          >
            <span style={{ display: 'block', width: 22, height: 1.5, background: 'var(--fg)', borderRadius: 1, transform: menuOpen ? 'rotate(45deg) translate(4.5px, 4.5px)' : 'none', transition: 'transform 280ms var(--ease-soft)' }} />
            <span style={{ display: 'block', width: 16, height: 1.5, background: 'var(--fg)', borderRadius: 1, opacity: menuOpen ? 0 : 1, transition: 'opacity 200ms' }} />
            <span style={{ display: 'block', width: 22, height: 1.5, background: 'var(--fg)', borderRadius: 1, transform: menuOpen ? 'rotate(-45deg) translate(4.5px, -4.5px)' : 'none', transition: 'transform 280ms var(--ease-soft)' }} />
          </button>
        </nav>
        <div style={{
          position: 'fixed', inset: 0, zIndex: 99,
          background: 'var(--bg)',
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 44,
          opacity: menuOpen ? 1 : 0,
          pointerEvents: menuOpen ? 'auto' : 'none',
          transition: 'opacity 320ms var(--ease-soft)',
        }}>
          {[
            { key: 'treatments', label: 'Treatments' },
            { key: 'experience', label: 'Experience' },
            { key: 'about', label: 'About' },
            { key: 'visit', label: 'Visit' },
          ].map(({ key, label }) => (
            <a key={key} onClick={() => { onJump(key); setMenuOpen(false); }} style={{
              fontFamily: 'var(--font-sans)', fontWeight: 600,
              fontSize: 28, letterSpacing: '-0.02em',
              color: current === key ? 'var(--accent)' : 'var(--fg)', cursor: 'pointer',
            }}>{label}</a>
          ))}
          <button className="btn" style={{ marginTop: 8 }} onClick={() => { onBook(); setMenuOpen(false); }}>
            Book an appointment
          </button>
        </div>
      </>
    );
  }

  return (
    <nav style={{ ...wrap, display: 'grid', gridTemplateColumns: '1fr auto 1fr' }} data-screen-label="nav">
      <div style={{ display: 'flex', gap: 36, alignItems: 'center' }}>
        <a style={link(current === 'treatments')} onClick={() => onJump('treatments')}>Treatments</a>
        <a style={link(current === 'experience')} onClick={() => onJump('experience')}>Experience</a>
        <a style={link(current === 'about')} onClick={() => onJump('about')}>About</a>
      </div>
      {logo}
      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 24, alignItems: 'center' }}>
        <a style={link(current === 'visit')} onClick={() => onJump('visit')}>Visit</a>
        <button className="btn btn--sm" onClick={onBook}>Book</button>
      </div>
    </nav>
  );
}

window.SiteNav = SiteNav;