const { useState, useEffect } = React;

const navStyles = {
  wrap: {
    position: 'fixed',
    top: 0, left: 0, right: 0,
    zIndex: 100,
    transition: 'background-color 400ms ease, border-color 400ms ease, backdrop-filter 400ms ease',
  },
  inner: {
    maxWidth: 1440,
    margin: '0 auto',
    padding: '22px 48px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  brand: {
    display: 'inline-flex',
    alignItems: 'center',
    height: 34,
  },
  brandImg: {
    height: '100%',
    width: 'auto',
    display: 'block',
    objectFit: 'contain',
  },
  socials: {
    display: 'flex',
    alignItems: 'center',
    gap: 4,
  },
  iconBtn: {
    width: 38, height: 38,
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: 'rgba(255,255,255,0.6)',
    transition: 'color 200ms ease, transform 200ms ease',
    cursor: 'pointer',
  },
};

const NAV_SOCIALS = [
  { name: 'Instagram',    Icon: window.IconInstagram,   href: 'https://www.instagram.com/eshwarhq/' },
  { name: 'YouTube',      Icon: window.IconYouTube,     href: 'https://www.youtube.com/channel/UCp4n6jt4JE0_Y-1VVKkgZbQ' },
  { name: 'Spotify',      Icon: window.IconSpotify,     href: 'https://open.spotify.com/artist/1hNm0KMAwufnraxLBhDBEh?si=Q9h-fqRQSyadw1oAD48xsg' },
  { name: 'Apple Music',  Icon: window.IconAppleMusic,  href: 'https://music.apple.com/us/artist/eshwar/1886541880' },
  { name: 'SoundCloud',   Icon: window.IconSoundCloud,  href: 'https://on.soundcloud.com/zbFXNnHxWNTatSJHjx' },
  { name: 'TikTok',       Icon: window.IconTikTok,      href: 'https://www.tiktok.com/@eshwarhq' },
  { name: 'Amazon Music', Icon: window.IconAmazonMusic, href: 'https://music.amazon.com/tracks/B0GT6Z5LXN' },
];

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [hovered, setHovered] = useState(null);

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

  return (
    <nav
      style={{
        ...navStyles.wrap,
        backgroundColor: scrolled ? 'rgba(10,10,10,0.82)' : 'transparent',
        backdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
        borderBottom: `1px solid ${scrolled ? 'rgba(255,255,255,0.06)' : 'transparent'}`,
      }}
    >
      <div className="nav-inner" style={navStyles.inner}>
        <a href="#top" style={navStyles.brand} aria-label="Eshwar — Home">
          <img
            src="assets/logo-white.png"
            alt="Eshwar"
            style={navStyles.brandImg}
          />
        </a>
        <div style={navStyles.socials}>
          {NAV_SOCIALS.map(({ name, Icon, href }) => (
            <a
              key={name}
              href={href}
              target="_blank"
              rel="noopener noreferrer"
              aria-label={name}
              title={name}
              style={{
                ...navStyles.iconBtn,
                color: hovered === name ? '#fff' : 'rgba(255,255,255,0.55)',
                transform: hovered === name ? 'translateY(-1px)' : 'translateY(0)',
              }}
              onMouseEnter={() => setHovered(name)}
              onMouseLeave={() => setHovered(null)}
            >
              <Icon size={17} />
            </a>
          ))}
        </div>
      </div>
    </nav>
  );
}

window.Nav = Nav;