const { EyebrowLabel, DisplayHeadline, StackedLayerDiagram, Tag, Icon, Reveal } = window.YUANJIEDesignSystem_590ef9;

const TINTS = ['#ede9fe', '#fef3c7', '#ffffff', '#f1f1f1'];
const PROTOCOLS = [['SECS/GEM', 'var(--color-ember-orange)'], ['CORBA', 'var(--color-iris-blue)'], ['MQTT', 'var(--color-signal-green)'], ['TIBCO RV', 'var(--color-graphite)'], ['SQL Server · Oracle', 'var(--color-slate)']];

function Architecture() {
  const c = useCopy();
  const layers = c.arch.layers.map((l, i) => ({ label: l[0], meta: l[1], tint: TINTS[i] }));
  return (
    <section id="arch" style={{ background: 'var(--color-mist)', borderTop: '1px solid var(--color-ash-gray)', borderBottom: '1px solid var(--color-ash-gray)' }}>
      <div style={{ maxWidth: 'var(--page-max-width)', margin: '0 auto', padding: '80px var(--page-gutter)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--spacing-64)', alignItems: 'center' }}>
          <Reveal style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-20)' }}>
            <EyebrowLabel>{c.arch.eyebrow}</EyebrowLabel>
            <DisplayHeadline size="sm">{c.arch.title}</DisplayHeadline>
            <p style={{ margin: 0, fontSize: '16px', lineHeight: 1.8, color: 'var(--color-graphite)', textWrap: 'pretty' }}>{c.arch.body}</p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-8)' }}>
              {PROTOCOLS.map(([p, col]) => <Tag key={p} accent={col}>{p}</Tag>)}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginTop: 'var(--spacing-8)' }}>
              {c.arch.bullets.map((t) => (
                <div key={t} style={{ display: 'flex', gap: '10px', alignItems: 'flex-start', fontSize: '15px', color: 'var(--color-graphite)' }}>
                  <Icon name="shield" size={16} color="var(--color-signal-green)" style={{ marginTop: '3px' }} />
                  <span>{t}</span>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={140} style={{ display: 'flex', justifyContent: 'center' }}>
            <StackedLayerDiagram style={{ width: '78%' }} layers={layers} />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Architecture });