// Header.jsx — top nav with centered wordmark + language picker
const Header = ({ view, setView, lang, setLang, onContact, theme, toggleTheme }) => {
  const [open, setOpen] = React.useState(false);
  const panelRef = React.useRef(null);
  const burgerRef = React.useRef(null);
  const items = [
    { id: 'home', en: 'Home', ko: '홈' },
    { id: 'sales', en: 'Sales', ko: '매매' },
    { id: 'rentals', en: 'Rentals', ko: '임대' },
    { id: 'notes', en: 'Notes', ko: '노트' },
    { id: 'about', en: 'About', ko: '소개' },
  ];
  const langs = ['EN', 'KR'];
  const pick = (v) => { setView(v); setOpen(false); };

  // While the mobile menu is open: lock body scroll, close on Escape,
  // move focus into the panel, and trap Tab focus inside it.
  React.useEffect(() => {
    if (!open) return;
    const panel = panelRef.current;
    const getFocusable = () => Array.from(
      panel.querySelectorAll('button, a[href], input, [tabindex]:not([tabindex="-1"])')
    ).filter((el) => !el.disabled && el.offsetParent !== null);

    const focusables = getFocusable();
    if (focusables[0]) focusables[0].focus();

    const onKeyDown = (e) => {
      if (e.key === 'Escape') { setOpen(false); return; }
      if (e.key !== 'Tab') return;
      const f = getFocusable();
      if (f.length === 0) return;
      const first = f[0];
      const last = f[f.length - 1];
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    };

    document.addEventListener('keydown', onKeyDown);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKeyDown);
      document.body.style.overflow = prevOverflow;
      if (burgerRef.current) burgerRef.current.focus();
    };
  }, [open]);

  const menuLabel = lang === 'KR' ? '메뉴 열기' : 'Open menu';
  const closeLabel = lang === 'KR' ? '메뉴 닫기' : 'Close menu';
  const themeLabel = theme === 'dark'
    ? (lang === 'KR' ? '라이트 모드로 전환' : 'Switch to light mode')
    : (lang === 'KR' ? '다크 모드로 전환' : 'Switch to dark mode');

  return (
    <>
      <header className="ms-header" data-screen-label="Header">
        <a
          className="ms-wordmark"
          href="/"
          onClick={(e) => { e.preventDefault(); pick('home'); }}
          aria-label="Elle Lee — Home"
        >
          <img src="/assets/logo-elle-pinned.svg" alt="Elle Lee" className="ms-wordmark-icon" />
          <small className="ms-wordmark-sub">{lang === 'KR' ? '부동산' : 'Real Estate'}</small>
        </a>
        <nav className="ms-nav">
          {items.map((it) => (
            <a
              key={it.id}
              href={it.id === 'home' ? '/' : '/' + it.id}
              className={view === it.id ? 'active' : ''}
              onClick={(e) => { e.preventDefault(); pick(it.id); }}
            >
              {lang === 'KR' ? it.ko : it.en}
            </a>
          ))}
        </nav>
        <div className="ms-lang">
          {langs.map((l, i) => (
            <React.Fragment key={l}>
              <button className={lang === l ? 'active' : ''} onClick={() => setLang(l)}>{l}</button>
              {i < langs.length - 1 && <span>·</span>}
            </React.Fragment>
          ))}
          <button
            className="ms-theme-toggle"
            onClick={toggleTheme}
            aria-label={themeLabel}
            title={themeLabel}
          >
            {theme === 'dark' ? (
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <circle cx="12" cy="12" r="4.2" />
                <path d="M12 2.6v2.3M12 19.1v2.3M4.7 4.7l1.6 1.6M17.7 17.7l1.6 1.6M2.6 12h2.3M19.1 12h2.3M4.7 19.3l1.6-1.6M17.7 6.3l1.6-1.6" />
              </svg>
            ) : (
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M20.5 14.6A8.2 8.2 0 0 1 9.4 3.5a6.8 6.8 0 1 0 11.1 11.1z" />
              </svg>
            )}
          </button>
          <button
            className="ms-burger"
            ref={burgerRef}
            onClick={() => setOpen(true)}
            aria-label={menuLabel}
            aria-expanded={open}
            aria-controls="ms-mobile-menu"
          >
            ☰
          </button>
        </div>
      </header>

      <div
        className={"ms-mobile-backdrop" + (open ? " open" : "")}
        onClick={() => setOpen(false)}
        aria-hidden="true"
      ></div>
      <aside
        id="ms-mobile-menu"
        className={"ms-mobile-panel" + (open ? " open" : "")}
        ref={panelRef}
        role="dialog"
        aria-modal="true"
        aria-label={lang === 'KR' ? '메뉴' : 'Menu'}
        aria-hidden={open ? undefined : "true"}
      >
        <button
          className="ms-mobile-close"
          onClick={() => setOpen(false)}
          aria-label={closeLabel}
        >
          ×
        </button>
        <nav className="ms-mobile-nav">
          {items.map((it) => (
            <a
              key={it.id}
              href={it.id === 'home' ? '/' : '/' + it.id}
              className={view === it.id ? 'active' : ''}
              onClick={(e) => { e.preventDefault(); pick(it.id); }}
              tabIndex={open ? 0 : -1}
            >
              {lang === 'KR' ? it.ko : it.en}
            </a>
          ))}
        </nav>
      </aside>
    </>
  );
};

window.Header = Header;