/* 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 HeroDebtSlide({ active }) {
  const lang = useLang();
  const tx = useTx();
  const cjk = lang === 'ZH' ? ' cjk' : '';
  const h1 = tx(HERO_DEBT.h1);
  return (
    <div className={'hero-slide' + (active ? ' active' : '')} aria-hidden={!active}>
      <img className="hero-video show" src={rjAsset(HERO_DEBT.image)} 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_DEBT.eyebrow)}</span>
            <h1 className={cjk}>{h1[0]}<br />{h1[1]}</h1>
            <p className={'lede' + cjk} style={{ marginTop: 18 }}>{tx(HERO_DEBT.sub)}</p>
            <div className={'hero-price' + cjk}>{(tx(HERO_DEBT.price)).map((line, i) => <span key={i} className="hero-price-line">{line}</span>)}</div>
            <p className={'hero-price-note' + cjk}>{tx(HERO_DEBT.note)}</p>
            <div className="hero-cta">
              <button className={'btn btn-gold btn-lg' + cjk} onClick={() => rjWA('Debt / legal letter')}><Icon name="message-circle" size={18} />{tx(HERO_DEBT.cta)}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function HeroReferralSlide({ active, onHotline, onFees }) {
  const lang = useLang();
  const tx = useTx();
  const cjk = lang === 'ZH' ? ' cjk' : '';
  const h1 = tx(HERO.h1);
  return (
    <div className={'hero-slide' + (active ? ' active' : '')} aria-hidden={!active}>
      <div className="hero-sky" aria-hidden="true" />
      <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>
  );
}

function Hero({ onEnquire, onHotline, onFees }) {
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const SLIDES = 2;
  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx(i => (i + 1) % SLIDES), 6500);
    return () => clearInterval(t);
  }, [paused]);
  return (
    <section className="hero hero-carousel" id="top"
      onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <HeroDebtSlide active={idx === 0} />
      <HeroReferralSlide active={idx === 1} onHotline={onHotline} onFees={onFees} />
      <div className="hero-dots" role="tablist">
        {Array.from({ length: SLIDES }).map((_, i) => (
          <button key={i} className={'hero-dot' + (idx === i ? ' on' : '')} aria-label={'Slide ' + (i + 1)}
            aria-selected={idx === i} onClick={() => setIdx(i)} />
        ))}
      </div>
      <button className="hero-arrow prev" aria-label="Previous" onClick={() => setIdx(i => (i - 1 + SLIDES) % SLIDES)}><Icon name="chevron-left" size={24} /></button>
      <button className="hero-arrow next" aria-label="Next" onClick={() => setIdx(i => (i + 1) % SLIDES)}><Icon name="chevron-right" size={24} /></button>
      <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 });