function ProcessFlow({ steps, accent }) {
  const color = accent || 'var(--coral-deep)';
  return React.createElement('div', { style: { position: 'relative', padding: '48px 0 0' } },
    React.createElement('div', { style: { position: 'absolute', top: 31, left: '9%', right: '9%', height: 3, background: color, transformOrigin: 'left center', animation: 'vv-line-grow 1.1s ease-out forwards' } }),
    React.createElement('div', { style: { position: 'relative', zIndex: 1, display: 'flex', justifyContent: 'space-between' } },
      steps.map((s, i) => React.createElement('div', { key: i, style: { flex: 1, textAlign: 'center', padding: '0 10px', animation: 'vv-fade-up 0.6s ease-out both', animationDelay: (i * 0.15) + 's' } },
        React.createElement('div', { style: { width: 64, height: 64, borderRadius: '50%', background: 'var(--ink-900)', color: 'var(--white)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px', fontFamily: 'var(--font-serif-display)', fontSize: 22, boxShadow: '0 0 0 4px ' + color } }, s.n),
        React.createElement('div', { style: { fontWeight: 700, fontSize: 17, marginBottom: 12 } }, s.title),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 6 } },
          s.items.map((it, j) => React.createElement('div', { key: j, style: { fontSize: 13, color: 'var(--text-muted)' } }, it))
        )
      ))
    )
  );
}
function FlatShowcase({ images }) {
  return React.createElement('div', { style: { display: 'flex', gap: 16 } },
    images.map((im, i) => React.createElement('div', { key: i, style: { flex: 1, position: 'relative' } },
      React.createElement('img', { src: im.img, style: { width: '100%', height: 220, objectFit: 'cover', display: 'block', borderRadius: 8 } }),
      React.createElement('div', { style: { marginTop: 10, fontSize: 13, color: 'var(--text-muted)' } }, im.caption)
    ))
  );
}
window.ProcessFlow = ProcessFlow;
window.FlatShowcase = FlatShowcase;