/* REVO JURIS — Header, mobile drawer, video hero, stats (single-language) */

function Brand({ footer }) {
  const onDark = footer;
  const src = onDark ? 'assets/logomark-inverse.svg' : 'assets/logomark.svg';
  return (
    <a className="brand" href={rjResolveHref('index.html#top')}>
      <img src={rjAsset(src)} alt="REVO JURIS 億誠國際法律顧問" />
      <span className="wm">
        <span className="name">REVO <em>JURIS</em></span>
        <span className="sub">Consulting Limited</span>
        <span className="zh cjk">億誠國際法律顧問有限公司</span>
      </span>
    </a>
  );
}

function Header({ onEnquire, lang, setLang }) {
  const tx = useTx();
  const [scrolled, setScrolled] = React.useState(false);
  const [drawer, setDrawer] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const cjk = lang === 'ZH' ? ' cjk' : '';
  return (
    <React.Fragment>
      <div className="utility">
        <div className="container">
          <span className="ut-right">
            <span className={'ut-hot' + cjk}><span className="dot" />{tx(UI.hotShort)} · +852 5715 5628</span>
            <span className={'ut-lang' + cjk}>{tx(UI.langs)}</span>
          </span>
        </div>
      </div>
      <header className={'header' + (scrolled ? ' scrolled' : '')}>
        <div className="container">
          <Brand />
          <nav className={'nav' + cjk}>
            {NAV_LINKS.map(([t, h]) => <a key={h} href={rjResolveHref(h)}>{tx(t)}</a>)}
          </nav>
          <div className="header-actions">
            <div className="lang-toggle">
              <button className={lang === 'EN' ? 'on' : ''} onClick={() => setLang('EN')}>EN</button>
              <button className={lang === 'ZH' ? 'on' : ''} onClick={() => setLang('ZH')}>中</button>
            </div>
            <button className={'btn btn-primary btn-sm' + cjk} onClick={() => rjWA()}>
              <Icon name="message-circle" size={16} />{tx(UI.findSolicitor)}
            </button>
            <button className="menu-btn" onClick={() => setDrawer(true)} aria-label={tx(UI.menu)}><Icon name="menu" size={26} /></button>
          </div>
        </div>
      </header>
      <div className={'drawer' + (drawer ? ' open' : '') + cjk}>
        <button className="dclose" onClick={() => setDrawer(false)}><Icon name="x" size={28} /></button>
        <div className="drawer-lang">
          <button className={lang === 'EN' ? 'on' : ''} onClick={() => setLang('EN')}>English</button>
          <button className={lang === 'ZH' ? 'on' : ''} onClick={() => setLang('ZH')}>中文</button>
        </div>
        {NAV_LINKS.map(([t, h]) => <a key={h} href={rjResolveHref(h)} onClick={() => setDrawer(false)}>{tx(t)}</a>)}
        <button className="btn btn-gold btn-lg" style={{ marginTop: 24 }} onClick={() => { setDrawer(false); rjWA(); }}>
          <Icon name="message-circle" size={18} />{tx(UI.findSolicitor)}
        </button>
      </div>
    </React.Fragment>
  );
}

function Hero({ onEnquire, onHotline, onFees }) {
  const lang = useLang();
  const tx = useTx();
  const cjk = lang === 'ZH' ? ' cjk' : '';
  const h1 = tx(HERO.h1);
  const videoRef = React.useRef(null);
  const [videoOk, setVideoOk] = React.useState(false);
  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = true; v.defaultMuted = true;
    const tryPlay = () => { const p = v.play(); if (p) p.catch(() => {}); };
    const onData = () => { if (v.videoWidth > 0) setVideoOk(true); tryPlay(); };
    tryPlay();
    v.addEventListener('loadeddata', onData);
    v.addEventListener('canplay', onData);
    return () => { v.removeEventListener('loadeddata', onData); v.removeEventListener('canplay', onData); };
  }, []);
  const cityH = [42, 64, 52, 80, 60, 92, 50, 72, 58, 86, 46, 70, 56, 78, 48, 66];
  return (
    <section className="hero" id="top">
      {/* Cinematic fallback scene — always present behind the banner */}
      <div className="hero-sky" aria-hidden="true" />
      <div className="hero-city" aria-hidden="true">
        {cityH.map((h, i) => <div key={i} className="hero-bld" style={{ height: h + '%', animationDelay: (i * 0.05) + 's' }} />)}
      </div>
      <img className="hero-video show" src={rjAsset('assets/photos/banner.png')} alt="" aria-hidden="true" />
      <div className="hero-grad" />
      <div className="hero-inner">
        <div className="container">
          <div className="hero-content">
            <span className={'eyebrow light' + cjk}><span className="ln" />{tx(HERO.eyebrow)}</span>
            <h1 className={cjk}>{h1[0]}<br />{h1[1]}</h1>
            <p className={'lede' + cjk}>{tx(HERO.lede)}</p>
            <div className="hero-cta">
              <button className={'btn btn-gold btn-lg' + cjk} onClick={() => rjWA()}><Icon name="message-circle" size={18} />{tx(UI.findSolicitor)}</button>
              <button className={'btn btn-urgent btn-lg' + cjk} onClick={onHotline}><Icon name="siren" size={18} />{tx(UI.hotline)}</button>
              <button className={'btn btn-outline-light btn-lg' + cjk} onClick={onFees}>{tx(UI.feesCta)}</button>
            </div>
            <div className="hero-trust">
              {HERO.trust.map((c, i) => (
                <span key={i} className={'chip chip-ghost' + cjk}><Icon name={c.icon} size={15} />{tx(c.t)}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
      <div className="hero-goldline" />
    </section>
  );
}

function Stats() {
  const lang = useLang();
  const tx = useTx();
  const cjk = lang === 'ZH' ? ' cjk' : '';
  return (
    <div className="stats">
      <div className="container">
        {STATS.map(([n, label], i) => (
          <div className="stat" key={i}>
            <b className="tnum">{tx(n)}</b>
            <span className={cjk}>{tx(label)}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Header, Hero, Stats, Brand });