/* global React */

const navStyles = {
  bar: {
    height: 72,
    padding: '0 32px',
    background: '#000',
    color: '#fff',
    display: 'flex',
    alignItems: 'center',
    gap: 28,
    position: 'sticky',
    top: 0,
    zIndex: 50,
    borderBottom: '1px solid rgba(255,255,255,0.10)',
  },
  logoWrap: { display: 'flex', alignItems: 'baseline', gap: 8, textDecoration: 'none' },
  logo: {
    fontFamily: 'var(--font-display)',
    fontWeight: 500,
    fontSize: 22,
    letterSpacing: '-0.24px',
    color: '#fff',
  },
  logoSuffix: {
    fontFamily: 'var(--font-body)',
    fontWeight: 500,
    fontSize: 13,
    letterSpacing: '0.18em',
    textTransform: 'uppercase',
    color: '#d4922a',
    marginLeft: 2,
  },
  links: { display: 'flex', gap: 28, flex: 1, marginLeft: 24, alignItems: 'center', justifyContent: 'flex-end' },
  link: {
    color: 'rgba(255,255,255,0.78)',
    fontFamily: 'var(--font-body)',
    fontSize: 15,
    fontWeight: 500,
    letterSpacing: '0.08px',
    cursor: 'pointer',
    background: 'transparent',
    border: 0,
    padding: '6px 0',
    textDecoration: 'none',
    position: 'relative',
  },
  linkActive: {
    color: '#fff',
    fontWeight: 600,
  },
  underline: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: -22,
    height: 2,
    background: '#d4922a',
  },
  right: { display: 'flex', alignItems: 'center', gap: 18 },
  meta: { color: 'rgba(255,255,255,0.55)', fontSize: 13, cursor: 'pointer', letterSpacing: '0.16em', textTransform: 'uppercase' },
  cta: {
    background: '#d4922a', color: '#fff', border: 0, height: 44, padding: '0 22px',
    borderRadius: 9999, fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, letterSpacing: '0.16px',
    cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8,
    textDecoration: 'none',
  },
};

const NAV_ITEMS = [
  { href: 'index.html',           key: 'home',     label: 'Início' },
  { href: 'produtos.html',        key: 'produtos', label: 'Produtos' },
  { href: 'levante-capital.html', key: 'levante',  label: 'Levante capital', cta: true },
];

function Nav({ active }) {
  return (
    <nav className="arkhe-nav" style={navStyles.bar}>
      <a href="index.html" style={navStyles.logoWrap}>
        <span style={navStyles.logo}>Arkhé</span>
        <span style={navStyles.logoSuffix}>Capital</span>
      </a>
      <div className="arkhe-nav-links" style={navStyles.links}>
        <div className="arkhe-nav-secondary" style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
          {NAV_ITEMS.filter(item => !item.cta).map(item => {
            const isActive = item.key === active;
            return (
              <a
                key={item.key}
                href={item.href}
                style={{ ...navStyles.link, ...(isActive ? navStyles.linkActive : {}) }}
              >
                {item.label}
                {isActive ? <span style={navStyles.underline}/> : null}
              </a>
            );
          })}
        </div>
        {NAV_ITEMS.filter(item => item.cta).map(item => (
          <a key={item.key} href={item.href} className="arkhe-nav-cta" style={navStyles.cta}>
            {item.label} <Icons.Arrow size={16}/>
          </a>
        ))}
      </div>
    </nav>
  );
}

window.Nav = Nav;