var { Button: PButton, Badge: PBadge } = window.GloryWaveDesignSystem_1a6704;

function ProductRow({ p, i }) {
  const [zh, en, d, use, img, credit] = p;
  const flip = i % 2 === 1;
  return (
    <div id={'p-' + i} style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 360px), 1fr))', gap: 'var(--space-10)', alignItems: 'center', padding: 'var(--space-10) 0', borderTop: '1px solid var(--border-subtle)' }}>
      <figure style={{ margin: 0, order: flip ? 2 : 0 }}>
        {img ? <img src={img} alt={zh} style={{ width: '100%', aspectRatio: '4 / 3', objectFit: 'cover', display: 'block', borderRadius: 'var(--radius-md)' }} /> : <ImageSlot label={zh + ' 產品照'} height={300} />}
        {credit && <figcaption style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-caption)', color: 'var(--text-muted)', marginTop: 'var(--space-2)' }}>圖片：{credit}</figcaption>}
      </figure>
      <div style={{ order: flip ? 1 : 0 }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--size-caption)', color: 'var(--accent-hover)' }}>0{i + 1}</span>
        <h2 style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-display-3)', fontWeight: 700, margin: '8px 0 4px', whiteSpace: 'nowrap' }}>{zh}</h2>
        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--size-body)', color: 'var(--text-muted)', marginBottom: 'var(--space-5)' }}>{en}</div>
        <p style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-body)', lineHeight: 1.8, color: 'var(--text-secondary)', margin: '0 0 var(--space-5)', maxWidth: 520 }}>{d}</p>
        <PBadge tone="neutral">{use}</PBadge>
      </div>
    </div>
  );
}

function Products({ go }) {
  return (
    <div>
      <section style={{ ...WRAP, padding: 'var(--section-y-tight) var(--gutter) 0' }}>
        <Eyebrow>Products & System</Eyebrow>
        <h1 style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-display-2)', fontWeight: 700, lineHeight: 1.3, margin: '14px 0 12px' }}>產品與系統</h1>
        <p style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-body)', lineHeight: 1.8, color: 'var(--text-secondary)', maxWidth: 680, margin: '0 0 var(--space-8)' }}>
          以 PSC 模組組成的鈣鈦礦創能建材，搭配 SPB 儲能，從發電、電力轉換到儲能，一套完整的光儲系統。
        </p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-2)', marginBottom: 'var(--space-4)' }}>
          {PRODUCTS.map(([zh], i) => (
            <a key={zh} href={'#p-' + i} onClick={(e) => { e.preventDefault(); const el = document.getElementById('p-' + i); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' }); }} style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-body-sm)', fontWeight: 600, padding: '6px 14px', borderRadius: 999, border: '1px solid var(--border-default)', color: 'var(--text-primary)', whiteSpace: 'nowrap' }}>{zh}</a>
          ))}
        </div>
        {PRODUCTS.map((p, i) => <ProductRow key={p[0]} p={p} i={i} />)}
      </section>
      <SystemB />
      <section style={{ ...WRAP, padding: 'var(--section-y) var(--gutter) 0', display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 'var(--space-6)' }}>
        <div>
          <H2 style={{ margin: 0 }}>想導入 PSC 產品或光儲系統？</H2>
        </div>
        <PButton variant="primary" size="lg" iconRight="arrow-right" style={{ marginLeft: 'auto' }} onClick={() => go('coop')}>合作洽詢</PButton>
      </section>
    </div>
  );
}
Object.assign(window, { Products });
