/* ── Navbar Component ────────────────────────────────────── */
const { useState: useNavState, useEffect: useNavEffect } = React;

const Navbar = ({ isHome, onNavigate }) => {
  const [scrolled, setScrolled] = useNavState(false);

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

  const solid = !isHome || scrolled;

  const scrollTo = (id) => {
    if (!isHome) {
      onNavigate('home', id);
      return;
    }
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.pageYOffset - 80;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  return (
    <nav className={`navbar${solid ? ' solid' : ''}`}>
      <div
        className="nav-logo"
        onClick={() => onNavigate('home')}
        style={{ cursor: 'pointer' }}
      >
        LUXE ESTATES
      </div>

      <ul className="nav-links">
        <li>
          <a href="#" onClick={e => { e.preventDefault(); onNavigate('home'); }}>
            Home
          </a>
        </li>
        <li>
          <a href="#" onClick={e => { e.preventDefault(); scrollTo('properties'); }}>
            Properties
          </a>
        </li>
        <li>
          <a href="#" onClick={e => { e.preventDefault(); scrollTo('about'); }}>
            About
          </a>
        </li>
        <li>
          <a href="#" onClick={e => { e.preventDefault(); scrollTo('contact'); }}>
            Contact
          </a>
        </li>
      </ul>

      <button
        className="nav-cta"
        onClick={() => scrollTo('contact')}
      >
        Book a Viewing
      </button>
    </nav>
  );
};

Object.assign(window, { Navbar });