// Top navigation — transforms from transparent on hero to solid on scroll
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

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

  const links = [
    { label: 'Services', href: '#services' },
    { label: 'Methodology', href: '#methodology' },
    { label: 'Projects', href: '#projects' },
    { label: 'Markets', href: '#markets' },
    { label: 'Studio', href: '#about' },
    { label: 'Contact', href: '#contact' },
  ];

  return (
    <header
      style={{
        position: 'fixed',
        top: 0, left: 0, right: 0,
        zIndex: 50,
        padding: `${scrolled ? '18px' : '30px'} var(--page-pad-x)`,
        background: scrolled ? 'rgba(10, 22, 40, 0.88)' : 'transparent',
        backdropFilter: scrolled ? 'blur(14px) saturate(1.1)' : 'none',
        borderBottom: scrolled ? '1px solid rgba(242, 237, 228, 0.08)' : '1px solid transparent',
        transition: 'all 0.4s cubic-bezier(0.2, 0.7, 0.1, 1)',
        color: 'var(--bone-100)',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', maxWidth: 'var(--container-max)', margin: '0 auto' }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <Logo />
        </a>

        <nav style={{ display: 'flex', alignItems: 'center', gap: 36 }} className="desktop-nav">

          {links.map(l => (
            <a
              key={l.href}
              href={l.href}
              style={{
                fontSize: 13,
                letterSpacing: '0.04em',
                opacity: 0.82,
                transition: 'opacity 0.3s',
              }}
              onMouseEnter={e => e.currentTarget.style.opacity = 1}
              onMouseLeave={e => e.currentTarget.style.opacity = 0.82}
            >
              {l.label}
            </a>
          ))}
          <a
            href="#contact"
            style={{
              fontSize: 12,
              letterSpacing: '0.12em',
              textTransform: 'uppercase',
              padding: '10px 18px',
              border: '1px solid rgba(242, 237, 228, 0.3)',
              borderRadius: 2,
              transition: 'all 0.3s',
            }}
            onMouseEnter={e => {
              e.currentTarget.style.background = 'var(--brass-500)';
              e.currentTarget.style.borderColor = 'var(--brass-500)';
              e.currentTarget.style.color = 'var(--navy-900)';
            }}
            onMouseLeave={e => {
              e.currentTarget.style.background = 'transparent';
              e.currentTarget.style.borderColor = 'rgba(242, 237, 228, 0.3)';
              e.currentTarget.style.color = 'var(--bone-100)';
            }}
          >
            Start a Project
          </a>
        </nav>

        {/* Mobile hamburger */}
        <button
          className="mobile-nav-toggle"
          onClick={() => setOpen(o => !o)}
          aria-label="Menu"
          style={{
            display: 'none',
            flexDirection: 'column',
            justifyContent: 'center',
            gap: 5,
            width: 40,
            height: 40,
            border: '1px solid rgba(242,237,228,0.3)',
            padding: 0,
            alignItems: 'center',
          }}
        >
          <span style={{ display: 'block', width: 18, height: 1, background: 'var(--bone-100)', transform: open ? 'translateY(3px) rotate(45deg)' : 'none', transition: 'transform 0.3s' }} />
          <span style={{ display: 'block', width: 18, height: 1, background: 'var(--bone-100)', transform: open ? 'translateY(-3px) rotate(-45deg)' : 'none', transition: 'transform 0.3s' }} />
        </button>
      </div>

      {/* Mobile dropdown */}
      {open && (
        <div
          style={{
            position: 'absolute',
            top: '100%',
            left: 0,
            right: 0,
            background: 'rgba(10, 22, 40, 0.96)',
            backdropFilter: 'blur(14px)',
            borderTop: '1px solid rgba(242,237,228,0.08)',
            padding: '24px var(--page-pad-x) 32px',
            display: 'flex',
            flexDirection: 'column',
            gap: 4,
          }}
        >
          {links.map(l => (
            <a
              key={l.href}
              href={l.href}
              onClick={() => setOpen(false)}
              style={{
                fontSize: 18,
                fontFamily: 'var(--font-display)',
                letterSpacing: '-0.01em',
                padding: '14px 0',
                borderBottom: '1px solid rgba(242,237,228,0.08)',
              }}
            >
              {l.label}
            </a>
          ))}
          <a
            href="#contact"
            onClick={() => setOpen(false)}
            style={{
              marginTop: 20,
              padding: '16px 20px',
              background: 'var(--brass-500)',
              color: 'var(--navy-900)',
              fontSize: 12,
              letterSpacing: '0.14em',
              textTransform: 'uppercase',
              textAlign: 'center',
            }}
          >
            Start a Project →
          </a>
        </div>
      )}
    </header>
  );
};

const Logo = () => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
    <svg width="42" height="42" viewBox="0 0 32 32" fill="none">
      <rect x="2" y="2" width="28" height="28" stroke="currentColor" strokeWidth="1" />
      <path d="M8 22 L8 10 L16 10 L16 16 L24 16 L24 22" stroke="currentColor" strokeWidth="1" fill="none" />
      <circle cx="20" cy="12" r="1.4" fill="var(--brass-500)" />
    </svg>
    <div style={{ lineHeight: 1.05 }}>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '0.01em' }}>Palmetto</div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.6, marginTop: 2 }}>Build Group</div>
    </div>
  </div>
);

window.Nav = Nav;
window.Logo = Logo;