const { EyebrowLabel, DisplayHeadline, Badge, Divider, Reveal } = window.YUANJIEDesignSystem_590ef9;

function Specs() {
  const c = useCopy();
  return (
    <section id="support" style={{ maxWidth: 'var(--page-max-width)', margin: '0 auto', padding: '0 var(--page-gutter)' }}>
      <div style={{ padding: '80px 0', display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 'var(--spacing-64)' }}>
        <Reveal style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-16)' }}>
          <EyebrowLabel>{c.specs.eyebrow}</EyebrowLabel>
          <DisplayHeadline size="sm">{c.specs.title}</DisplayHeadline>
          <p style={{ margin: 0, fontSize: '15px', lineHeight: 1.8, color: 'var(--color-graphite)' }}>{c.specs.body}</p>
          <div><Badge tone="default">{c.specs.version}</Badge></div>
        </Reveal>
        <div>
          {c.specs.rows.map(([k, v], i) => (
            <Reveal key={k} delay={i * 50} style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 'var(--spacing-24)', padding: '14px 0', borderBottom: '1px solid var(--color-bone)' }}>
              <div style={{ fontFamily: 'var(--font-ui)', fontSize: '11px', letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--color-smoke)', paddingTop: '3px' }}>{k}</div>
              <div style={{ fontSize: '15px', color: 'var(--color-carbon)', lineHeight: 1.6 }}>{v}</div>
            </Reveal>
          ))}
        </div>
      </div>
      <Divider />
    </section>
  );
}

Object.assign(window, { Specs });