// Nav + Footer

const PAGES = [
  { id: 'home',     zh: '關於鐵吹',     en: 'ABOUT' },
  { id: 'services', zh: '服務內容',     en: 'SERVICES' },
  { id: 'cases',    zh: '製作案例',     en: 'CASES' },
  { id: 'tech',     zh: '技術探討',     en: 'TECH' },
  { id: 'team',     zh: '鐵吹成員',     en: 'TEAM' },
  { id: 'contact',  zh: '聯絡我們',     en: 'CONTACT' },
];

function Nav({ active, onNavigate }) {
  const { lang, setLang } = useI18N();
  const clock = useClock();
  const [open, setOpen] = React.useState(false);
  const go = (id) => { setOpen(false); onNavigate(id); };
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a className="logo" href="#home" onClick={(e) => { e.preventDefault(); go('home'); }}>
          <div className="logo-mark" />
          <div>
            <div>鐵吹製作</div>
            <div className="logo-sub">FEBLOW PRODUCTION</div>
          </div>
        </a>
        <div className="nav-links">
          {PAGES.map((p, i) => (
            <a key={p.id}
              className={`nav-link ${active === p.id ? 'active' : ''}`}
              href={`#${p.id}`}
              onClick={(e) => { e.preventDefault(); onNavigate(p.id); }}
            >
              <span className="nav-link-num">{String(i+1).padStart(2, '0')}</span>
              {lang === 'en' ? p.en : p.zh}
            </a>
          ))}
        </div>
        <div className="nav-right">
          <div className="nav-status">
            <span className="status-dot" />
            <span>ONLINE · {fmtTime(clock)}</span>
          </div>
          <div className="lang-toggle">
            <button className={lang === 'zh' ? 'active' : ''} onClick={() => setLang('zh')}>ZH</button>
            <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
          </div>
          <button className="nav-burger" onClick={() => setOpen(o => !o)} aria-label="menu">
            {open ? <span style={{ fontFamily: 'var(--mono)', fontSize: 14, width: 'auto', height: 'auto', background: 'transparent' }}>✕</span> : <span />}
          </button>
        </div>
      </div>
      <div className={`nav-drawer ${open ? 'open' : ''}`}>
        {PAGES.map((p, i) => (
          <a key={p.id}
            className={`drawer-link ${active === p.id ? 'active' : ''}`}
            href={`#${p.id}`}
            onClick={(e) => { e.preventDefault(); go(p.id); }}
          >
            <span>
              <span className="num">{String(i+1).padStart(2, '0')} · </span>
              {p.zh} <span style={{ color: 'var(--muted)', fontSize: 11 }}>{p.en}</span>
            </span>
            <span className="arr">→</span>
          </a>
        ))}
        <div className="drawer-foot">
          <span><span className="status-dot" style={{ display: 'inline-block', marginRight: 8, verticalAlign: 'middle' }} />ONLINE · {fmtTime(clock)}</span>
          <span>v2026.04</span>
        </div>
      </div>
    </nav>
  );
}

function Footer({ onNavigate }) {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-col">
          <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 16 }}>
            <div className="logo-mark" style={{ width: 24, height: 24 }} />
            <div className="mono" style={{ fontSize: 13, fontWeight: 600 }}>FEBLOW</div>
          </div>
          <p style={{ color: 'var(--text-2)', fontSize: 12.5, lineHeight: 1.7, maxWidth: 260 }}>
            <Bi
              zh="用技術和愛做音響，讓你的音樂聽起來好聽又感人。"
              en="We build sound with science and love — so your music is heard, and felt."
            />
          </p>
        </div>
        <div className="footer-col">
          <h4>SITEMAP</h4>
          <ul>
            {PAGES.map(p => (
              <li key={p.id}><a href={`#${p.id}`} onClick={(e) => { e.preventDefault(); onNavigate(p.id); }}>{p.zh} · <span className="mono" style={{ fontSize: 10, color: 'var(--muted)' }}>{p.en}</span></a></li>
            ))}
          </ul>
        </div>
        <div className="footer-col">
          <h4>CONTACT</h4>
          <ul>
            <li><a href="tel:+886931040560" className="mono">+886 931-040-560</a></li>
            <li><a href="mailto:contact@feblow.co" className="mono">contact@feblow.co</a></li>
            <li className="mono" style={{ color: 'var(--muted)', fontSize: 12 }}>臺北市 · Taipei, Taiwan</li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>SIGNAL</h4>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--muted)', lineHeight: 1.8 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span>SAMPLE</span><span style={{ color: 'var(--text-2)' }}>48.000 kHz</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span>BITRATE</span><span style={{ color: 'var(--text-2)' }}>24 bit</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span>LATENCY</span><span style={{ color: 'var(--green)' }}>3.2 ms</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span>STATUS</span><span style={{ color: 'var(--green)' }}>● ONLINE</span>
            </div>
          </div>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 FEBLOW PRODUCTION LTD · 鐵吹有限公司 · ALL RIGHTS RESERVED</span>
        <span>COVER PHOTO BY 陳宥中</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Footer, PAGES });