// Nav.jsx
function Nav({ theme, onInquire }) {
  const isDark = theme === 'dark';
  const bg = isDark ? 'rgba(26,26,23,0.82)' : 'rgba(251,248,243,0.92)';
  const fg = isDark ? 'var(--cream)' : 'var(--night-owl)';
  const border = isDark ? 'rgba(196,162,101,0.18)' : 'var(--sandstone)';
  const links = [
    { label: 'Strategies', href: '#strategies' },
    { label: 'Services', href: '#services' },
    { label: 'Results', href: '#results' },
    { label: 'Case Study', href: '#case' },
    { label: 'FAQ', href: '#faq' },
  ];

  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    if (!menuOpen) return;
    const onKey = e => { if (e.key === 'Escape') setMenuOpen(false); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [menuOpen]);

  return (
    <React.Fragment>
      <nav className="sv-bar" style={{ ...navStyles.bar, background: bg, borderBottom: `1px solid ${border}` }}>
        <div style={navStyles.inner}>
          <a href="#" style={{ ...navStyles.brand, color: fg }} onClick={() => setMenuOpen(false)}>
            <Wordmark color={fg} theme={theme} />
          </a>
          <div style={navStyles.links} className="sv-nav-links">
            {links.map(l => (
              <a key={l.label} href={l.href} style={{ ...navStyles.link, color: fg }}>{l.label}</a>
            ))}
          </div>
          <div style={navStyles.rightGroup}>
            <a href="#portal" style={{ ...navStyles.link, color: fg, opacity: 0.7 }} className="sv-owner-link">Owner login</a>
            <button style={navStyles.cta} className="sv-desktop-cta" onClick={onInquire}>Talk to us</button>
            <button
              type="button"
              aria-label={menuOpen ? 'Close menu' : 'Open menu'}
              aria-expanded={menuOpen}
              aria-controls="sv-mobile-drawer"
              onClick={() => setMenuOpen(o => !o)}
              className="sv-mobile-trigger"
              style={{ ...navStyles.burger, color: fg, borderColor: border }}
            >
              <HamburgerIcon open={menuOpen} />
            </button>
          </div>
        </div>
      </nav>
      <MobileDrawer
        open={menuOpen}
        onClose={() => setMenuOpen(false)}
        links={links}
        theme={theme}
        onInquire={() => { setMenuOpen(false); onInquire(); }}
      />
    </React.Fragment>
  );
}

function HamburgerIcon({ open }) {
  const line = {
    stroke: 'currentColor',
    strokeWidth: 1.6,
    strokeLinecap: 'round',
    transformOrigin: '50% 50%',
    transition: 'transform 260ms var(--ease-out), opacity 200ms var(--ease-out)',
  };
  return (
    <svg width="22" height="16" viewBox="0 0 22 16" fill="none" aria-hidden="true">
      <line x1="1" y1="2"  x2="21" y2="2"  style={{ ...line, transform: open ? 'translateY(6px) rotate(45deg)'  : 'none' }} />
      <line x1="1" y1="8"  x2="21" y2="8"  style={{ ...line, opacity: open ? 0 : 1 }} />
      <line x1="1" y1="14" x2="21" y2="14" style={{ ...line, transform: open ? 'translateY(-6px) rotate(-45deg)' : 'none' }} />
    </svg>
  );
}

function MobileDrawer({ open, onClose, links, theme, onInquire }) {
  const isDark = theme === 'dark';
  const sheetBg = isDark ? 'var(--obsidian)' : 'var(--linen)';
  const fg = isDark ? 'var(--cream)' : 'var(--night-owl)';
  const mute = isDark ? 'var(--warm-sand)' : 'var(--dusk)';
  const border = isDark ? 'rgba(196,162,101,0.18)' : 'var(--sandstone)';

  return (
    <div
      id="sv-mobile-drawer"
      aria-hidden={!open}
      style={{
        position: 'fixed', inset: 0, zIndex: 80,
        pointerEvents: open ? 'auto' : 'none',
      }}
    >
      <div
        onClick={onClose}
        aria-hidden="true"
        style={{
          position: 'absolute', inset: 0,
          background: 'rgba(26,26,23,0.55)',
          backdropFilter: 'blur(4px)',
          WebkitBackdropFilter: 'blur(4px)',
          opacity: open ? 1 : 0,
          transition: 'opacity 260ms var(--ease-out)',
        }}
      />
      <aside
        role="dialog"
        aria-modal="true"
        aria-label="Site navigation"
        style={{
          position: 'absolute',
          top: 0, right: 0, bottom: 0,
          width: 'min(86vw, 360px)',
          background: sheetBg,
          color: fg,
          borderLeft: `1px solid ${border}`,
          padding: '96px 28px 32px',
          transform: open ? 'translateX(0)' : 'translateX(100%)',
          transition: 'transform 340ms var(--ease-out)',
          display: 'flex', flexDirection: 'column',
          boxShadow: open ? '-24px 0 64px rgba(0,0,0,0.32)' : 'none',
        }}
      >
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--sovana-gold)', fontWeight: 600, marginBottom: 18 }}>// Navigate</div>
        <nav style={{ display: 'flex', flexDirection: 'column', borderTop: `1px solid ${border}` }}>
          {links.map(l => (
            <a
              key={l.label}
              href={l.href}
              onClick={onClose}
              style={{
                padding: '20px 0',
                borderBottom: `1px solid ${border}`,
                fontFamily: 'var(--font-display)',
                fontSize: 26,
                fontWeight: 500,
                color: fg,
                textDecoration: 'none',
                letterSpacing: '-0.005em',
              }}
            >{l.label}</a>
          ))}
          <a
            href="#portal"
            onClick={onClose}
            style={{
              padding: '22px 0',
              borderBottom: `1px solid ${border}`,
              fontFamily: 'var(--font-sans)',
              fontWeight: 700,
              fontSize: 12,
              letterSpacing: '0.14em',
              textTransform: 'uppercase',
              color: mute,
              textDecoration: 'none',
            }}
          >Owner login →</a>
        </nav>
        <button
          onClick={onInquire}
          style={{
            marginTop: 32,
            background: 'var(--sovana-gold)',
            color: 'var(--obsidian)',
            border: 0,
            padding: '16px 22px',
            borderRadius: 4,
            fontFamily: 'var(--font-sans)',
            fontWeight: 700,
            fontSize: 12,
            letterSpacing: '0.14em',
            textTransform: 'uppercase',
            cursor: 'pointer',
          }}
        >Talk to us</button>
        <div style={{ marginTop: 'auto', paddingTop: 24, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: mute, textTransform: 'uppercase' }}>
          // Sovana · Chicagoland
        </div>
      </aside>
    </div>
  );
}

function Wordmark({ color, size = 26, theme = 'dark' }) {
  const logoSrc = theme === 'dark' ? 'brand-assets/logo-dark.png' : 'brand-assets/logo-light.png';
  const markH = Math.round(size * 2.6);
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 14, fontFamily: 'var(--font-display)', lineHeight: 1 }}>
      <img src={logoSrc} alt="Sovana" style={{ height: markH, width: markH, display: 'block', objectFit: 'contain' }} />
      <span className="sv-wordmark-sub" style={{ fontWeight: 400, color, fontSize: Math.round(size * 0.86), letterSpacing: '-0.005em' }}>Property Management</span>
    </span>
  );
}

const navStyles = {
  bar: { position: 'sticky', top: 0, zIndex: 100, backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)', transition: 'background 300ms var(--ease-out)' },
  inner: { maxWidth: 1280, margin: '0 auto', padding: '18px 40px', display: 'flex', alignItems: 'center', gap: 32 },
  brand: { textDecoration: 'none' },
  links: { display: 'flex', gap: 26, marginLeft: 20 },
  link: { textDecoration: 'none', fontWeight: 700, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', fontFamily: 'var(--font-sans)' },
  rightGroup: { marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 20 },
  cta: { border: '1.5px solid var(--sovana-gold)', background: 'transparent', color: 'var(--sovana-gold)', padding: '10px 18px', borderRadius: 4, fontWeight: 700, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', cursor: 'pointer', fontFamily: 'var(--font-sans)' },
  burger: { display: 'none', alignItems: 'center', justifyContent: 'center', width: 42, height: 42, padding: 0, borderRadius: 4, border: '1px solid', background: 'transparent', cursor: 'pointer' },
};

window.Nav = Nav;
window.Wordmark = Wordmark;