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

function Nav() {
  const [solid, setSolid] = useState(false);
  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > window.innerHeight * 0.9);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={'nav' + (solid ? ' solid' : '')} style={{ height: "50px" }}>
      <a href="#" className="brand" aria-label="富美帽饰博物馆">
        <img className="brand-logo" src={solid ? '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>
    </nav>);

}

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;