var { Button, Icon } = window.GloryWaveDesignSystem_1a6704;

var WRAP = { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)' };

function Wordmark({ inverse, size = 20 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: size, letterSpacing: '-0.02em', color: inverse ? 'var(--white)' : 'var(--text-primary)' }}>GloryWave</span>
      <span style={{ fontFamily: 'var(--font-cjk)', fontSize: size * 0.7, color: inverse ? 'var(--ink-300)' : 'var(--text-muted)' }}>群來能源</span>
    </div>
  );
}

function LangSwitch() {
  const [lang, setL] = React.useState(window.gwGetLang ? window.gwGetLang() : 'zh');
  React.useEffect(() => { const h = () => setL(window.gwGetLang()); window.addEventListener('gw-lang', h); return () => window.removeEventListener('gw-lang', h); }, []);
  const setLang = (k) => window.gwSetLang && window.gwSetLang(k);
  const opts = [['zh', '中文'], ['en', 'EN'], ['ja', '日本語']];
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
      {opts.map(([k, l], i) => (
        <React.Fragment key={k}>
          {i > 0 && <span style={{ color: 'var(--border-default)', fontSize: 'var(--size-caption)' }}>·</span>}
          <button onClick={() => setLang(k)} style={{ border: 0, background: 'transparent', cursor: 'pointer', padding: '6px 8px', fontFamily: k === 'en' ? 'var(--font-sans)' : 'var(--font-cjk)', fontSize: 'var(--size-body-sm)', fontWeight: lang === k ? 700 : 500, color: lang === k ? 'var(--text-primary)' : 'var(--text-muted)' }}>{l}</button>
        </React.Fragment>
      ))}
    </div>
  );
}

function Logo() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <img src="../../assets/logo-main-v2.png" alt="GloryWave" style={{ height: 40, display: 'block' }} />
      <span style={{ fontFamily: 'var(--font-cjk)', fontWeight: 700, fontSize: 18, letterSpacing: '0.2em', whiteSpace: 'nowrap', color: '#1e3a6e', paddingLeft: 12, borderLeft: '1px solid var(--border-default)' }}>群來能源</span>
    </div>
  );
}

function Announce({ go }) {
  return (
    <div style={{ background: 'var(--surface-ink)', color: 'var(--ink-200)', fontSize: 'var(--size-caption)' }}>
      <div className="gw-announce" style={{ ...WRAP, height: 36, display: 'flex', alignItems: 'center', gap: 12, fontFamily: 'var(--font-cjk)' }}>
        <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--amber-400)' }}>2026/10/14–16</span>
        <span>台灣能源展｜魔方 Demo Kit＋SPB、立面欄杆現場展示</span>
      </div>
    </div>
  );
}

function SiteHeader({ page, go }) {
  const nav = [['home', '首頁'], ['products', '產品與系統'], ['coop', '合作洽詢'], ['contact', '聯絡我們']];
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 20, background: 'var(--glass-light)', backdropFilter: 'var(--blur-glass)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div className="gw-header" style={{ ...WRAP, height: 68, display: 'flex', alignItems: 'center', gap: 'var(--space-9)' }}>
        <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }}><Logo /></a>
        <nav className="gw-nav" style={{ display: 'flex', gap: 'var(--space-7)', marginLeft: 'auto' }}>
          {nav.map(([id, label]) => (
            <a key={id} href="#" onClick={(e) => { e.preventDefault(); go(id); }}
              style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-body-sm)', fontWeight: 600, whiteSpace: 'nowrap', color: page === id ? 'var(--text-primary)' : 'var(--text-secondary)', borderBottom: page === id ? '2px solid var(--accent)' : '2px solid transparent', paddingBottom: 4 }}>
              {label}
            </a>
          ))}
        </nav>
        <div className="gw-lang" style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'center' }}>
          <LangSwitch />
        </div>
      </div>
    </header>
  );
}

function SiteFooter({ go }) {
  const cols = [
    ['產品 Products', [['創能欄杆', 'products'], ['創能推射窗', 'products'], ['創能落地窗', 'products'], ['創能溫室', 'products'], ['SPB 儲能', 'products']]],
    ['合作洽詢 Partnership', [['PSC 產品', 'contact'], ['光儲系統', 'contact'], ['PSC 生產技術', 'contact']]],
    ['公司 Company', [['關於群來', 'home'], ['展會與活動', 'contact'], ['聯絡我們', 'contact']]],
  ];
  return (
    <footer style={{ background: 'var(--surface-ink)', color: 'var(--text-inverse)', marginTop: 'var(--section-y)' }}>
      <div className="gw-footer-grid" style={{ ...WRAP, padding: '56px var(--gutter) 32px', display: 'grid', gridTemplateColumns: '1.4fr repeat(3, 1fr)', gap: 'var(--space-8)' }}>
        <div>
          <Wordmark inverse />
          <p style={{ color: 'var(--ink-400)', fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-caption)', lineHeight: 1.75, maxWidth: 260, marginTop: 12 }}>
            鈣鈦礦立面發電與儲能系統。<br />Perovskite façade PV and storage systems — Taiwan technology, made in Japan.
          </p>
        </div>
        {cols.map(([head, items]) => (
          <div key={head}>
            <div style={{ fontSize: 'var(--size-label)', fontWeight: 600, letterSpacing: 'var(--track-label)', textTransform: 'uppercase', color: 'var(--ink-400)', marginBottom: 14 }}>{head}</div>
            <div style={{ display: 'grid', gap: 10 }}>
              {items.map(([t, p]) => <a key={t} href="#" onClick={(e) => { e.preventDefault(); go(p); }} style={{ color: 'var(--ink-200)', fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-body-sm)' }}>{t}</a>)}
            </div>
          </div>
        ))}
      </div>
      <div style={{ borderTop: '1px solid var(--border-inverse)' }}>
        <div className="gw-footer-bottom" style={{ ...WRAP, padding: '18px var(--gutter)', display: 'flex', justifyContent: 'space-between', fontSize: 'var(--size-caption)', color: 'var(--ink-500)' }}>
          <span style={{ fontFamily: 'var(--font-mono)' }}>© 2026 GloryWave Energy Co., Ltd.</span>
          <span style={{ display: 'flex', gap: 18 }}><a href="#" onClick={(e) => e.preventDefault()} style={{ color: 'var(--ink-400)' }}>隱私權政策</a><a href="#" onClick={(e) => e.preventDefault()} style={{ color: 'var(--ink-400)' }}>法律聲明</a></span>
        </div>
      </div>
    </footer>
  );
}

function Eyebrow({ children, inverse }) {
  return <div style={{ fontSize: 'var(--size-label)', fontWeight: 600, letterSpacing: 'var(--track-label)', textTransform: 'uppercase', color: inverse ? 'var(--amber-400)' : 'var(--text-accent)' }}>{children}</div>;
}

function H2({ children, inverse, style }) {
  return <h2 style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-display-3)', lineHeight: 1.3, fontWeight: 700, color: inverse ? 'var(--white)' : 'var(--text-primary)', margin: '14px 0 var(--space-8)', textWrap: 'pretty', ...style }}>{children}</h2>;
}

function ImageSlot({ label, height = 280, inverse }) {
  return (
    <div style={{ height, borderRadius: 'var(--radius-md)', border: '1px dashed var(--border-default)', backgroundImage: inverse ? 'var(--texture-dots-ink)' : 'var(--texture-dots)', backgroundSize: 'var(--texture-dots-size)', backgroundColor: inverse ? 'var(--surface-ink-soft)' : 'var(--surface-page)', display: 'grid', placeItems: 'center', color: inverse ? 'var(--ink-400)' : 'var(--text-muted)', fontSize: 'var(--size-caption)', letterSpacing: 'var(--track-label)', textTransform: 'uppercase', textAlign: 'center', padding: 16 }}>
      {label}
    </div>
  );
}

Object.assign(window, { WRAP, Wordmark, Logo, Announce, SiteHeader, SiteFooter, Eyebrow, H2, ImageSlot });
