// TitanNav.jsx — Titan Ledgers navigation

const TitanNav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  const links = [
    { label: 'Services', href: '#services' },
    { label: 'About', href: '#about' },
    { label: 'Pricing', href: '#pricing' },
    { label: 'FAQ', href: '#faq' },
    { label: 'Contact', href: '#contact' },
  ];

  // Outer bar spans full viewport (so the scroll-triggered background blur and
  // bottom border reach edge-to-edge). Inner contents are capped to the page
  // grid (1080px) so the logo aligns vertically with hero/section content.
  const navStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
    display: 'flex', justifyContent: 'center', alignItems: 'stretch', height: 72, padding: '0 24px',
    background: scrolled || menuOpen ? 'rgba(255,255,255,0.97)' : 'rgba(255,255,255,0)',
    backdropFilter: scrolled || menuOpen ? 'blur(12px)' : 'none',
    borderBottom: scrolled || menuOpen ? '1px solid #e5edf5' : '1px solid transparent',
    boxShadow: scrolled ? 'rgba(15,26,46,0.08) 0px 4px 12px 0px' : 'none',
    transition: 'background 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out',
    fontFamily: "'DM Sans', sans-serif",
  };

  // 3-column grid: logo (auto), centered link cluster (1fr), review pill (auto).
  // Matches the 1080px page max-width so the logo's left edge sits in the same
  // gutter as everything below it.
  const navInnerStyle = {
    display: 'grid',
    gridTemplateColumns: 'auto 1fr',
    alignItems: 'center',
    width: '100%', maxWidth: 1080,
    columnGap: 24,
  };

  const logoMark = {
    display: 'flex', alignItems: 'center', textDecoration: 'none', cursor: 'pointer',
  };

  // Equal-width slots so the link cluster reads as an even rhythm regardless
  // of word length (Services=8 chars vs FAQ=3 chars otherwise looks ragged).
  const linkStyle = {
    fontSize: 14, fontWeight: 400, color: '#0F1A2E',
    textDecoration: 'none', padding: '6px 0',
    borderRadius: 4, cursor: 'pointer',
    transition: 'background 150ms, color 150ms',
    minWidth: 88, textAlign: 'center',
  };

  return (
    <>
      <nav style={navStyle}>
        <div style={navInnerStyle}>
          <a href="#" style={logoMark} aria-label="Titan Ledgers home">
            <img
              src="brand/logo-horizontal-on-light.svg"
              alt="Titan Ledgers"
              className="nav-logo-img"
              style={{ display: 'block', height: 54, width: 'auto' }}
            />
          </a>

          {/* Desktop links - centered in the middle grid column.
              Equal-width slots (linkStyle.minWidth) give a uniform rhythm
              so FAQ doesn't read as cramped between Pricing and Contact.
              +0.5px translate zeros out the sub-pixel imbalance left by the
              asymmetric flanking widths of logo (270px) and pill (155px). */}
          <div className="nav-desktop-links" style={{ display: 'flex', alignItems: 'center', gap: 8, justifySelf: 'center', transform: 'translateX(0.5px)' }}>
            {links.map(l => (
              <a key={l.label} href={l.href} style={linkStyle}
                onMouseEnter={e => { e.currentTarget.style.background = 'rgba(189,151,72,0.08)'; e.currentTarget.style.color = '#967844'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#0F1A2E'; }}
              >{l.label}</a>
            ))}
          </div>

          {/* Hamburger button */}
          <button
            className="nav-hamburger"
            onClick={() => setMenuOpen(o => !o)}
            style={{
              display: 'none', marginLeft: 'auto', background: 'none', border: 'none',
              cursor: 'pointer', padding: 8, color: '#0F1A2E',
            }}
            aria-label="Toggle menu"
          >
            {menuOpen ? (
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                <line x1="3" y1="7" x2="21" y2="7"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="17" x2="21" y2="17"/>
              </svg>
            )}
          </button>
        </div>
      </nav>

      {/* Mobile dropdown menu */}
      {menuOpen && (
        <div className="nav-mobile-menu" style={{
          position: 'fixed', top: 72, left: 0, right: 0, zIndex: 99,
          background: 'rgba(255,255,255,0.97)', backdropFilter: 'blur(12px)',
          borderBottom: '1px solid #e5edf5',
          padding: '12px 0 20px',
          fontFamily: "'DM Sans', sans-serif",
        }}>
          {links.map(l => (
            <a key={l.label} href={l.href}
              onClick={() => setMenuOpen(false)}
              style={{
                display: 'block', padding: '14px 24px',
                fontSize: 16, fontWeight: 400, color: '#0F1A2E',
                textDecoration: 'none', borderBottom: '1px solid #f1f5f9',
              }}
            >{l.label}</a>
          ))}
        </div>
      )}

      <style>{`
        @media (max-width: 768px) {
          .nav-desktop-links { display: none !important; }
          .nav-hamburger { display: block !important; }
          .nav-logo-img { max-width: calc(100vw - 80px) !important; height: auto !important; max-height: 54px !important; }
        }
      `}</style>
    </>
  );
};

Object.assign(window, { TitanNav });