/* global React */

// NavLux — three single-page links + one CTA. Translucent chrome
// that reads on dark hero AND on the cream page body.
function NavLux() {
  const isMobile = useIsMobile();
  const baseLinkStyle = {
    fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 400,
    letterSpacing: '0.2em', textTransform: 'uppercase',
    textDecoration: 'none',
    color: 'var(--cream-50)',
    textShadow: '0 1px 2px rgba(28,26,23,0.35)',
    transition: 'opacity 240ms ease',
  };

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: 'rgba(28, 26, 23, 0.32)',
      backdropFilter: 'blur(20px) saturate(160%)',
      WebkitBackdropFilter: 'blur(20px) saturate(160%)',
      borderBottom: '1px solid rgba(251, 248, 242, 0.08)',
    }}>
      <div style={{
        maxWidth: 1680, margin: '0 auto',
        padding: isMobile ? '16px 20px' : '24px 48px',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr auto' : '1fr auto 1fr',
        alignItems: 'center',
        gap: isMobile ? 16 : 48,
      }}>
        {/* Left links — hidden on mobile */}
        {!isMobile && (
          <div style={{ display: 'flex', gap: 40, alignItems: 'center' }}>
            <a href="#how" style={baseLinkStyle}>How it works</a>
            <a href="#why" style={baseLinkStyle}>Our model</a>
          </div>
        )}

        {/* Wordmark */}
        <a href="#" style={{
          fontFamily: 'var(--font-wordmark)',
          fontSize: isMobile ? 14 : 17,
          letterSpacing: isMobile ? '0.22em' : '0.32em',
          color: 'var(--cream-50)',
          textDecoration: 'none',
          textShadow: '0 1px 2px rgba(28,26,23,0.4)',
          lineHeight: 1,
          whiteSpace: 'nowrap',
          justifySelf: isMobile ? 'start' : 'center',
        }}>
          DIVERGENT&nbsp;&nbsp;ESTATES
        </a>

        {/* Right CTA */}
        <div style={{ display: 'flex', gap: 24, alignItems: 'center', justifyContent: 'flex-end' }}>
          <a href="#enquire" style={{
            ...baseLinkStyle,
            display: 'inline-flex', alignItems: 'center', gap: 10,
          }}>
            <em style={{
              fontFamily: 'var(--font-display)', fontStyle: 'italic',
              fontWeight: 400, letterSpacing: '0.04em',
              textTransform: 'none',
              fontSize: isMobile ? 13 : 14,
            }}>{isMobile ? 'Get an estimate' : 'Get a property estimate'}</em>
            <span style={{
              fontFamily: 'var(--font-display)', fontStyle: 'italic',
              letterSpacing: 0, fontSize: 14, opacity: 0.9,
            }}>—&nbsp;&rsaquo;</span>
          </a>
        </div>
      </div>
    </nav>
  );
}

Object.assign(window, { NavLux });