/* ============================================================
   Sticky site navigation. Transparent over hero, gains a
   blurred backdrop once scrolled. Mobile: slide-down menu.
   ============================================================ */
const { useState: useNavState, useEffect: useNavEffect } = React;

const NAV_LINKS = [
  { label: 'About', href: '#about' },
  { label: 'Services', href: '#services' },
  { label: 'Products', href: '#products' },
  { label: 'Pricing', href: '#pricing' },
  { label: 'Samples', href: '/samples' },
  { label: 'Contact', href: '#contact' },
];

function Navbar() {
  const [scrolled, setScrolled] = useNavState(false);
  const [open, setOpen] = useNavState(false);

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

  const go = (e, href) => {
    // Full-path links (e.g. /samples) navigate normally; only hash links smooth-scroll.
    if (!href.startsWith('#')) { setOpen(false); return; }
    e.preventDefault();
    setOpen(false);
    const el = document.querySelector(href);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 72, behavior: 'smooth' });
  };

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      transition: 'background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease',
      background: scrolled ? 'rgba(10,12,24,0.72)' : 'transparent',
      backdropFilter: scrolled ? 'blur(16px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(16px)' : 'none',
      borderBottom: `1px solid ${scrolled ? 'rgba(255,255,255,0.08)' : 'transparent'}`,
      boxShadow: scrolled ? '0 10px 40px rgba(0,0,0,0.35)' : 'none',
    }}>
      <div className="mx-auto px-5 sm:px-8" style={{ maxWidth: '1280px' }}>
        <div className="flex items-center justify-between" style={{ height: scrolled ? '70px' : '88px', transition: 'height 0.35s ease' }}>
          <a href="#top" onClick={(e) => go(e, '#top')} aria-label="Tayhami Labs home" className="flex items-center">
            <img src="assets/tayhami-logo-trans.png" alt="Tayhami Labs Private Limited"
              style={{ height: scrolled ? '46px' : '58px', width: 'auto', display: 'block', transition: 'height 0.35s ease', filter: 'drop-shadow(0 3px 14px rgba(0,0,0,0.5))' }} />
          </a>

          {/* Desktop links */}
          <nav className="items-center" style={{ display: 'none', gap: '6px' }} data-desktop-nav>
            {NAV_LINKS.map((l) => (
              <a key={l.href} href={l.href} onClick={(e) => go(e, l.href)} className="nav-link"
                style={{ padding: '9px 14px', borderRadius: '9999px', fontSize: '0.95rem', fontWeight: 500, color: 'rgba(236,234,242,0.82)', textDecoration: 'none', transition: 'color 0.2s, background 0.2s' }}>
                {l.label}
              </a>
            ))}
            <a href="#contact" onClick={(e) => go(e, '#contact')} className="cta-btn"
              style={{ marginLeft: '10px', background: 'var(--grad-accent)', color: '#0A0C18', borderRadius: '9999px', padding: '11px 22px', fontWeight: 700, fontSize: '0.95rem', textDecoration: 'none', boxShadow: '0 4px 22px rgba(139,92,246,0.34)' }}>
              Let's talk
            </a>
          </nav>

          {/* Mobile toggle */}
          <button onClick={() => setOpen(!open)} aria-label="Menu" data-mobile-toggle
            style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: '12px', width: '44px', height: '44px', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: '#fff' }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              {open ? <><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></> : <><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>
        </div>
      </div>

      {/* Mobile menu */}
      <div data-mobile-menu style={{
        overflow: 'hidden', maxHeight: open ? '420px' : '0px', transition: 'max-height 0.4s cubic-bezier(0.22,1,0.36,1)',
        background: 'rgba(10,12,24,0.96)', backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)',
        borderBottom: open ? '1px solid rgba(255,255,255,0.08)' : 'none',
      }}>
        <nav className="px-5 sm:px-8" style={{ display: 'flex', flexDirection: 'column', gap: '4px', padding: '12px 20px 22px' }}>
          {NAV_LINKS.map((l) => (
            <a key={l.href} href={l.href} onClick={(e) => go(e, l.href)}
              style={{ padding: '13px 12px', borderRadius: '12px', fontSize: '1.05rem', fontWeight: 500, color: 'rgba(236,234,242,0.9)', textDecoration: 'none' }}>
              {l.label}
            </a>
          ))}
          <a href="#contact" onClick={(e) => go(e, '#contact')}
            style={{ marginTop: '8px', textAlign: 'center', background: 'var(--grad-accent)', color: '#0A0C18', borderRadius: '9999px', padding: '14px', fontWeight: 700, textDecoration: 'none' }}>
            Let's talk
          </a>
        </nav>
      </div>
    </header>
  );
}

Object.assign(window, { Navbar });