/* global React */
const marketingNavSite = window.RentLensSite;

function Nav() {
  const { isMobile } = marketingNavSite.useViewport();
  const links = [
    ['How it works', '#how-it-works'],
    ['For investors', '#for-investors'],
    ['Services', '#services'],
    ['Pricing', '#pricing'],
  ];

  if (isMobile) {
    return (
      <header style={{
        position: 'sticky', top: 0, zIndex: 50,
        background: 'rgba(247,244,237,0.82)',
        backdropFilter: 'blur(12px)',
        WebkitBackdropFilter: 'blur(12px)',
        borderBottom: '1px solid var(--hairline)',
      }}>
        <div style={{
          maxWidth: 1200, margin: '0 auto', padding: '12px 20px',
          display: 'flex', flexDirection: 'column', gap: 12,
        }}>
          <a href="#top" style={{ display: 'flex', alignItems: 'center', textDecoration: 'none' }}>
            <img src="../../assets/logo-full.svg" alt="Propbee" style={{ height: 28 }} />
          </a>
          <a href={marketingNavSite.buildHref(marketingNavSite.paths.app, 'deal-inputs')} style={{
            fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 14,
            background: 'var(--brand-500)', color: '#fff', border: 'none',
            padding: '10px 14px', borderRadius: 10, cursor: 'pointer',
            textDecoration: 'none', justifyContent: 'center',
            width: '100%', display: 'inline-flex',
          }}>Analyze a property</a>
          <nav style={{
            display: 'flex',
            gap: 10,
            overflowX: 'auto',
            paddingBottom: 2,
            width: '100%',
          }}>
            {links.map(([label, href]) => (
              <a key={label} href={href} style={{
                fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500,
                color: 'var(--ink-2)', textDecoration: 'none', whiteSpace: 'nowrap',
                padding: '8px 12px',
                borderRadius: 999,
                border: '1px solid var(--hairline)',
                background: '#fff',
              }}>{label}</a>
            ))}
          </nav>
        </div>
      </header>
    );
  }

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(247,244,237,0.82)',
      backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      borderBottom: '1px solid var(--hairline)',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto', padding: '14px 32px',
        display: 'flex', alignItems: 'center', gap: 32,
      }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', textDecoration: 'none', flexShrink: 0 }}>
          <img src="../../assets/logo-full.svg" alt="Propbee" style={{ height: 28 }} />
        </a>
        <nav style={{
          display: 'flex',
          gap: 32,
          marginLeft: 20,
          alignItems: 'center',
        }}>
          {links.map(([label, href]) => (
            <a key={label} href={href} style={{
              fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500,
              color: 'var(--ink-2)', textDecoration: 'none', whiteSpace: 'nowrap',
            }}>{label}</a>
          ))}
        </nav>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 12, alignItems: 'center', flexShrink: 0 }}>
          <a href={marketingNavSite.buildHref(marketingNavSite.paths.app, 'saved-deals')} style={{
            fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500,
            color: 'var(--ink-2)', textDecoration: 'none',
          }}>Sign in</a>
          <a href={marketingNavSite.buildHref(marketingNavSite.paths.app, 'deal-inputs')} style={{
            fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 14,
            background: 'var(--brand-500)', color: '#fff', border: 'none',
            padding: '9px 16px', borderRadius: 10,
            cursor: 'pointer', textDecoration: 'none', display: 'inline-flex',
            justifyContent: 'center',
          }}>Analyze a property</a>
        </div>
      </div>
    </header>
  );
}

window.Nav = Nav;
