// Shared THINKLAB components — globals on window for cross-script access

const { useState, useEffect, useRef, useMemo, useCallback } = React;

// —— Top bar ——————————————————————————————————————————————
function TopBar({ route, onNav, inverse, lang, onLang }) {
  const [solid, setSolid] = useState(false);
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 40);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => {
    const t = setInterval(() => setNow(new Date()), 30000);
    return () => clearInterval(t);
  }, []);
  const NAV = [
    { id:'home',     en:'Home',     cjk:'首頁' },
    { id:'firm',     en:'Firm',     cjk:'之物' },
    { id:'projects', en:'Projects', cjk:'作品' },
    { id:'lab',      en:'Lab',      cjk:'實驗室' },
    { id:'art',      en:'Art',      cjk:'藝術' },
    { id:'contact',  en:'Contact',  cjk:'聯繫' },
  ];
  const tpe = now.toLocaleTimeString('en-GB', { timeZone:'Asia/Taipei', hour:'2-digit', minute:'2-digit' });
  return (
    <header className={`tl-topbar ${solid?'tl-topbar--solid':''} ${inverse&&!solid?'tl-topbar--inverse':''}`}>
      <div className="brand" onClick={() => onNav('home')}>
        <b>THINKLAB</b>
        <span className="cjk">之物建築</span>
      </div>
      <nav>
        {NAV.map(n => (
          <a key={n.id} className={route===n.id?'active':''} onClick={() => onNav(n.id)}>
            {lang==='cjk' ? n.cjk : n.en}
          </a>
        ))}
      </nav>
      <div className="right">
        <span className="clock">TPE · {tpe}</span>
        <span className="lang">
          <button className={lang==='en'?'on':''} onClick={() => onLang('en')}>EN</button>
          <button className={lang==='cjk'?'on':''} onClick={() => onLang('cjk')}>繁中</button>
        </span>
      </div>
    </header>
  );
}

// —— Footer (real contact info) ——————————————————————————
function Footer({ onNav }) {
  return (
    <footer className="tl-foot">
      <div className="grid">
        <div>
          <div className="mark">THINKLAB<span className="cjk">之物建築</span></div>
          <p>An award-winning architectural practice across Taiwan and China — architecture, urban complexes, interior, and concept design.</p>
        </div>
        <div>
          <h6>Studio</h6>
          <ul>
            <li><a onClick={()=>onNav('firm')}>Firm 之物</a></li>
            <li><a onClick={()=>onNav('projects')}>Projects 作品</a></li>
            <li><a onClick={()=>onNav('lab')}>Lab 實驗室</a></li>
            <li><a onClick={()=>onNav('art')}>Art 藝術</a></li>
          </ul>
        </div>
        <div>
          <h6>Work</h6>
          <ul>
            <li><a onClick={()=>onNav('projects')}>Architecture 建築</a></li>
            <li><a onClick={()=>onNav('projects')}>Built 完工</a></li>
            <li><a onClick={()=>onNav('projects')}>Concept 概念</a></li>
            <li><a onClick={()=>onNav('projects')}>Interior 室內</a></li>
          </ul>
        </div>
        <div>
          <h6>Connect</h6>
          <ul>
            <li><a onClick={()=>onNav('contact')}>Contact 聯繫</a></li>
            <li><a href="mailto:LK@tlabarc.com">LK@tlabarc.com</a></li>
          </ul>
        </div>
        <div>
          <h6>Index</h6>
          <ul>
            <li><a>Built · 完工</a></li>
            <li><a>Concept · 概念</a></li>
            <li><a>Award · 得獎</a></li>
            <li><a>Selected works</a></li>
          </ul>
        </div>
      </div>
      <div className="row-ad">
        <div className="ad"><b>Kaohsiung 高雄</b>高雄市鹽埕區大勇路 11 號 3 樓</div>
        <div className="ad"><b>Pingtung 屏東</b>屏東市公益街 37 號 6 樓</div>
        <div className="ad"><b>Shanghai 上海</b>上海市長寧區鎮寧路 9 號</div>
        <div className="ad"><b>Studio</b>LK@tlabarc.com</div>
      </div>
      <div className="legal">
        <span>© 2026 THINKLAB · 之物建築</span>
        <span>Site v4.0 · Compiled 2026.04 · TPE/SHA</span>
      </div>
    </footer>
  );
}

// —— Reveal-on-scroll ——————————————————————————————————————
function Reveal({ children, delay=0, as:Tag='div', ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(es => {
      es.forEach(e => { if (e.isIntersecting) { setTimeout(()=>e.target.classList.add('in'), delay); io.unobserve(e.target); } });
    }, { threshold: .12 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <Tag ref={ref} data-reveal="" {...rest}>{children}</Tag>;
}

Object.assign(window, { TopBar, Footer, Reveal });