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

const ICONS = [['route', 'var(--color-ember-orange)'], ['layers', 'var(--color-iris-blue)'], ['cpu', 'var(--color-signal-green)'], ['activity', 'var(--color-coral)'], ['shield', 'var(--color-amber)'], ['chart', 'var(--color-graphite)']];

function Features() {
  const c = useCopy();
  return (
    <section id="product" style={{ maxWidth: 'var(--page-max-width)', margin: '0 auto', padding: '0 var(--page-gutter)' }}>
      <Divider />
      <div style={{ padding: '80px 0', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-40)' }}>
        <Reveal style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-16)', maxWidth: '40em' }}>
          <EyebrowLabel>{c.features.eyebrow}</EyebrowLabel>
          <DisplayHeadline size="sm">{c.features.title}</DisplayHeadline>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'var(--spacing-24)' }}>
          {c.features.items.map(([title, body, meta], i) => (
            <Reveal key={meta} delay={(i % 3) * 80 + Math.floor(i / 3) * 40} style={{ display: 'flex' }}>
              <FeatureCard title={title} meta={meta} style={{ flex: 1 }} icon={<Icon name={ICONS[i][0]} size={22} color={ICONS[i][1]} />}>{body}</FeatureCard>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Features });