/* global React */

function Nav() {
  const links = [
    { l: 'Services', href: '#services' },
    { l: 'Approach', href: '#approach' },
    { l: 'Work', href: '#work' },
    { l: 'Cothon', href: '#cothon' },
    { l: 'FAQ', href: '#faq' },
  ];
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const mailto = 'mailto:management@mirconsulting.ca?subject=Working%20with%20Mir%20Consulting';

  return (
    <div style={{position:'fixed', top:0, left:0, right:0, zIndex:60}}>
      <div style={{
        background: scrolled ? 'rgba(13,43,82,0.78)' : 'rgba(13,43,82,0.35)',
        borderBottom: `1px solid ${scrolled ? 'var(--cothon-navy-border)' : 'transparent'}`,
        backdropFilter:'blur(16px)',
        WebkitBackdropFilter:'blur(16px)',
        transition:'background 300ms var(--ease-out), border-color 300ms var(--ease-out)',
      }}>
        <div style={{
          maxWidth:1240, margin:'0 auto', padding:'14px 32px',
          display:'flex', alignItems:'center', justifyContent:'space-between', gap:24,
        }}>
          <div style={{display:'flex', alignItems:'center', gap:26}}>
            <Logo size={30} sub />
            <span style={{width:1, height:22, background:'var(--cothon-navy-border)'}} className="nav-sep"/>
            <div style={{display:'flex', alignItems:'center', gap:18}} className="nav-links">
              {links.map((it) => (
                <a key={it.l} href={it.href} style={{
                  fontSize:13.5, color:'var(--cothon-sand)', fontWeight:400,
                  transition:'color 180ms',
                }}
                onMouseEnter={e => e.currentTarget.style.color='var(--cothon-cream)'}
                onMouseLeave={e => e.currentTarget.style.color='var(--cothon-sand)'}>
                  {it.l}
                </a>
              ))}
            </div>
          </div>

          <div style={{display:'flex', alignItems:'center', gap:16}}>
            <div style={{
              display:'flex', alignItems:'center', gap:6,
              fontSize:12, color:'var(--cothon-sand)', cursor:'pointer',
            }} className="nav-lang">
              <Globe size={13}/>
              <span style={{color:'var(--cothon-cream)'}}>EN</span>
              <span style={{opacity:0.4}}>/</span>
              <span style={{opacity:0.5}}>FR</span>
            </div>
            <CTAButton size="sm" icon={false} href={mailto}>Book a call</CTAButton>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Nav });