// WorkflowCard - numbered counter + outcome chip + title + body + outcome line.
// Used on the live site for the four stages: Workshop, Blueprint, Engineering, Partnership.
const WorkflowCard = ({ number, outcome, title, body, footer }) => (
  <article style={wfStyles.card}>
    <div style={wfStyles.head}>
      <div style={wfStyles.number}>{number}</div>
      <div style={wfStyles.chip}>{outcome}</div>
    </div>
    <h3 style={wfStyles.title}>{title}</h3>
    <p style={wfStyles.body}>{body}</p>
    {footer ? (
      <div style={wfStyles.footer}>
        <span style={wfStyles.footerLabel}>Outcome ·</span> {footer}
      </div>
    ) : null}
  </article>
);

const wfStyles = {
  card: {
    background: 'var(--bg-elev-1)',
    border: '1px solid var(--border-soft)',
    borderRadius: 4, padding: '32px 30px',
    display: 'flex', flexDirection: 'column', gap: 18,
    transition: 'border-color 260ms cubic-bezier(0.22,0.61,0.36,1), box-shadow 260ms',
  },
  head: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16 },
  number: {
    fontFamily: 'var(--font-display)', fontSize: 56, lineHeight: 1,
    color: 'var(--fg-accent)', fontWeight: 500, letterSpacing: '-0.02em',
  },
  chip: {
    fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em',
    textTransform: 'uppercase', color: 'var(--fg-accent-soft)',
    background: 'var(--gold-dim)',
    border: '1px solid var(--border-gold)',
    padding: '6px 12px', borderRadius: 999,
  },
  title: {
    fontFamily: 'var(--font-display)', fontSize: 28, lineHeight: 1.1,
    fontWeight: 500, color: 'var(--fg-1)', margin: 0,
  },
  body: {
    fontSize: 16, lineHeight: 1.65, color: 'var(--fg-1)', opacity: 0.78, margin: 0,
  },
  footer: {
    fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em',
    color: 'var(--fg-accent)', borderTop: '1px solid var(--border-gold)',
    paddingTop: 16, marginTop: 8,
  },
  footerLabel: { color: 'var(--fg-2)' },
};

Object.assign(window, { WorkflowCard });