/* global React, RESUME */
const { useState, useEffect, useRef } = React;

// ============= LANG CONTEXT =============
const LangContext = React.createContext({ lang: 'zh', setLang: () => {} });
const useLang = () => React.useContext(LangContext);
const t = (obj, lang) => {
  if (obj == null) return '';
  if (typeof obj === 'string') return obj;
  return obj[lang] ?? obj.zh ?? obj.en ?? '';
};

// ============= ICONS =============
const Icon = {
  Arrow: () => (
    <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  Chev: () => (
    <svg className="chev" width="10" height="10" viewBox="0 0 10 10" fill="none">
      <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  Sun: () => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <circle cx="7" cy="7" r="2.5" stroke="currentColor" strokeWidth="1.3" />
      <path d="M7 1V2.5M7 11.5V13M1 7H2.5M11.5 7H13M2.6 2.6L3.6 3.6M10.4 10.4L11.4 11.4M2.6 11.4L3.6 10.4M10.4 3.6L11.4 2.6" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
    </svg>
  ),
  Moon: () => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M11.5 8.5C10.5 9.4 9.2 10 7.7 10C4.6 10 2 7.5 2 4.4C2 2.9 2.6 1.6 3.5 0.6C1.4 1.4 0 3.4 0 5.7C0 8.8 2.5 11.3 5.6 11.3C7.9 11.3 9.9 9.9 10.7 7.8C11 8 11.3 8.3 11.5 8.5Z" fill="currentColor" />
    </svg>
  ),
  Print: () => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <rect x="3" y="2" width="8" height="3.5" stroke="currentColor" strokeWidth="1.2" />
      <rect x="2" y="5.5" width="10" height="5" rx="1" stroke="currentColor" strokeWidth="1.2" />
      <rect x="3.5" y="8" width="7" height="3.5" stroke="currentColor" strokeWidth="1.2" fill="var(--bg-card)" />
    </svg>
  ),
  Phone: () => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M3 1.5C2.4 1.5 2 1.9 2 2.5C2 8 6 12 11.5 12C12.1 12 12.5 11.6 12.5 11V9.5L10 8.5L9 10C7 9 5 7 4 5L5.5 4L4.5 1.5H3Z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" />
    </svg>
  ),
  Mail: () => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <rect x="1.5" y="3" width="11" height="8" rx="1" stroke="currentColor" strokeWidth="1.2" />
      <path d="M2 4L7 8L12 4" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" />
    </svg>
  ),
  Pin: () => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M7 1.5C5 1.5 3 3.2 3 5.5C3 8.5 7 12.5 7 12.5C7 12.5 11 8.5 11 5.5C11 3.2 9 1.5 7 1.5Z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" />
      <circle cx="7" cy="5.5" r="1.3" stroke="currentColor" strokeWidth="1.2" />
    </svg>
  ),
};

// ============= CRYSTAL VISUAL =============
function Crystal() {
  return (
    <div className="crystal-wrap" aria-hidden="true">
      <div className="crystal-orbits"><span className="node" /></div>
      <div className="crystal-orbits inner"><span className="node" /></div>
      <div className="crystal">
        <img src="assets/crystal.png" alt="" className="crystal-img" />
      </div>
    </div>
  );
}

// ============= TOPBAR =============
function TopBar({ onPrint, theme, setTheme }) {
  const { lang, setLang } = useLang();
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={`topbar ${scrolled ? 'scrolled' : ''}`}>
      <div className="brand">
      </div>
      <div className="tools">
        <div className="lang-toggle" role="tablist" aria-label="Language">
          <button className={lang === 'zh' ? 'on' : ''} onClick={() => setLang('zh')}>中文</button>
          <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
        </div>
        <button className="tool-btn" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} aria-label="Theme">
          {theme === 'dark' ? <Icon.Sun /> : <Icon.Moon />}
        </button>
        <button className="tool-btn primary" onClick={onPrint}>
          <Icon.Print />
          <span>{lang === 'zh' ? '下载 PDF' : 'Download PDF'}</span>
        </button>
      </div>
    </header>
  );
}

// ============= DOCK NAV =============
function DockNav({ sections, activeId, onJump }) {
  return (
    <nav className="dock" aria-label="Sections">
      {sections.map(s => (
        <button
          key={s.id}
          className={`dock-item ${activeId === s.id ? 'active' : ''}`}
          onClick={() => onJump(s.id)}
          aria-label={s.label}
        >
          <span className="dock-tip">{s.label}</span>
        </button>
      ))}
    </nav>
  );
}

window.useLang = useLang;
window.LangContext = LangContext;
window.tr = t;
window.Icon = Icon;
window.Crystal = Crystal;
window.TopBar = TopBar;
window.DockNav = DockNav;