// Hero: cinematic museum exterior background, no 3D rotation.
const { useState, useEffect } = React;

function Nav() {
  const [solid, setSolid] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > window.innerHeight * 0.9);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
  }, [menuOpen]);
  const close = () => setMenuOpen(false);
  return (
    <>
      <nav className={'nav' + (solid ? ' solid' : '') + (menuOpen ? ' menu-open' : '')} style={{ height: "50px" }}>
        <a href="#" className="brand" aria-label="富美帽饰博物馆">
          <img className="brand-logo" src={(solid || menuOpen) ? 'assets/logo.png?v=2' : 'assets/logo-white.png?v=2'} alt="Fumei Hat Museum" style={{ objectFit: "cover", width: "250px" }} />
        </a>
        <div className="nav-links">
          <a href="#about">About / 关于</a>
          <a href="#exhibitions">Exhibitions / 展览</a>
          <a href="#collection">Collection / 典藏</a>
          <a href="#visit">Visit / 参观</a>
        </div>
        <div className="nav-cta">
          <span className="lang active">CN</span>
          <span>·</span>
          <span className="lang">EN</span>
        </div>
        <button
          className="nav-burger"
          aria-label={menuOpen ? '关闭菜单' : '打开菜单'}
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen(o => !o)}>
          <span></span><span></span><span></span>
        </button>
      </nav>
      <div className={'nav-drawer' + (menuOpen ? ' open' : '')} aria-hidden={!menuOpen}>
        <a href="#about" onClick={close}>About<span>关于</span></a>
        <a href="#exhibitions" onClick={close}>Exhibitions<span>展览</span></a>
        <a href="#collection" onClick={close}>Collection<span>典藏</span></a>
        <a href="#gallery" onClick={close}>Gallery<span>影像</span></a>
        <a href="#visit" onClick={close}>Visit<span>参观</span></a>
        <div className="nav-drawer-foot">
          <span className="lang active">CN</span><span>·</span><span className="lang">EN</span>
        </div>
      </div>
    </>);

}

function Hero() {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-bg" aria-hidden></div>
      <div className="hero-grain" aria-hidden></div>
      <div className="hero-overlay">
        <div></div>
        <div className="hero-headline">
          <div className="eyebrow mono">
            <span className="dot"></span>
            <span>Est. Nantong · A Museum of Headwear</span>
          </div>
          <h1>
            The <span className="em">Crown</span><br />
            of <span className="cn-stack">华夏</span>
          </h1>
        </div>
        <div className="hero-bottom">
          <div className="bcol">
            <span className="label mono">Now Showing</span>
            观帽 · A Reading of Crowns —— 一场关于头顶之上千年风物的展览
          </div>
          <div className="bcol">
            <span className="label mono">Collection</span>
            From Tang court coronets to Republican-era straw fedoras. 1,200+ pieces.
          </div>
          <div className="bcol">
            <span className="label mono">Hours</span>
            Tue – Sun · 09:00 – 17:00<br />南通·崇川区
          </div>
          <div className="scroll">
            <span>Scroll</span>
            <span className="line"></span>
            <span>01 / 06</span>
          </div>
        </div>
      </div>
    </section>);

}

window.Hero = Hero;
window.Nav = Nav;