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

function Problem() {
  const c = useCopy();
  return (
    <section id="problem" style={{ maxWidth: 'var(--page-max-width)', margin: '0 auto', padding: '0 var(--page-gutter)' }}>
      <Divider />
      <div style={{ padding: '80px 0', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--spacing-20)' }}>
        <Reveal><EyebrowLabel align="center">{c.problem.eyebrow}</EyebrowLabel></Reveal>
        <Reveal delay={80}><DisplayHeadline size="md" align="center" style={{ maxWidth: '16em' }}>{c.problem.title1}<br />{c.problem.title2}</DisplayHeadline></Reveal>
        <Reveal delay={160} as="p" style={{ margin: 0, maxWidth: '38em', textAlign: 'center', fontSize: '16px', lineHeight: 1.8, color: 'var(--color-graphite)' }}>{c.problem.body}</Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'var(--spacing-40)', marginTop: 'var(--spacing-24)', width: '100%' }}>
          {c.problem.pains.map(([t, d], i) => (
            <Reveal key={t} delay={i * 90} style={{ borderTop: '1px solid var(--color-ash-gray)', paddingTop: 'var(--spacing-16)' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--color-smoke)', marginBottom: '10px' }}>{'0' + (i + 1)}</div>
              <div style={{ fontSize: '18px', fontWeight: 500, marginBottom: '8px' }}>{t}</div>
              <div style={{ fontSize: '15px', lineHeight: 1.7, color: 'var(--color-graphite)', textWrap: 'pretty' }}>{d}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Problem });