const NAV_ITEMS = [
  { id: 'about', label: 'About' },
  { id: 'services', label: 'Services' },
  { id: 'why', label: 'Approach' },
  { id: 'testimonials', label: 'Experience' },
  { id: 'contact', label: 'Contact' },
];

function Navbar({ active }) {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

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

  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const handleClick = (e, id) => {
    e.preventDefault();
    setOpen(false);
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 72, behavior: 'smooth' });
  };

  return (
    <header
      className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${
        scrolled ? 'backdrop-blur bg-[rgba(247,241,232,0.86)] border-b border-[var(--line)]' : 'bg-transparent'
      }`}
    >
      <div className="max-w-[1240px] mx-auto px-6 md:px-10 h-16 md:h-[72px] flex items-center justify-between">
        <a href="#top" onClick={(e) => handleClick(e, 'top')} className="flex items-center gap-2.5 group">
          <span
            className="w-8 h-8 rounded-full grid place-items-center"
            style={{ background: 'var(--accent)', color: 'var(--accent-ink)' }}
          >
            <IconHouseTag size={17} />
          </span>
          <span className="font-display text-[19px] tracking-tight">
            Clair
          </span>
        </a>

        <nav className="hidden md:flex items-center gap-9">
          {NAV_ITEMS.map((item) => (
            <a
              key={item.id}
              href={`#${item.id}`}
              onClick={(e) => handleClick(e, item.id)}
              data-active={active === item.id}
              className="nav-link text-[14px] text-[var(--ink-2)] hover:text-[var(--ink)] transition-colors"
            >
              {item.label}
            </a>
          ))}
          <a
            href="#contact"
            onClick={(e) => handleClick(e, 'contact')}
            className="btn-primary text-[13px] font-medium px-4 py-2 rounded-full"
          >
            Request appraisal
          </a>
        </nav>

        <button
          onClick={() => setOpen((v) => !v)}
          className="md:hidden w-10 h-10 grid place-items-center rounded-full border border-[var(--line)]"
          aria-label="Toggle menu"
        >
          {open ? <IconClose /> : <IconMenu />}
        </button>
      </div>

      <div
        className={`md:hidden mobile-menu absolute top-16 inset-x-0 bg-[var(--bg)] border-b border-[var(--line)] ${
          open ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2 pointer-events-none'
        }`}
      >
        <nav className="px-6 py-6 flex flex-col gap-1">
          {NAV_ITEMS.map((item, i) => (
            <a
              key={item.id}
              href={`#${item.id}`}
              onClick={(e) => handleClick(e, item.id)}
              className="font-display text-[28px] py-2 border-b border-[var(--line)] last:border-b-0 flex items-center justify-between"
            >
              <span>{item.label}</span>
              <span className="text-[var(--muted)] text-[12px] font-sans">0{i + 1}</span>
            </a>
          ))}
          <a
            href="#contact"
            onClick={(e) => handleClick(e, 'contact')}
            className="btn-primary text-center font-medium px-4 py-3 rounded-full mt-4"
          >
            Request appraisal
          </a>
        </nav>
      </div>
    </header>
  );
}

Object.assign(window, { Navbar, NAV_ITEMS });