// WorkItem.jsx — case-study row
function WorkItem({ client, sector, summary, metric, metricLabel }) {
  return (
    <article style={workStyles.row}>
      <div style={workStyles.left}>
        <div style={workStyles.eyebrow}>{sector}</div>
        <h3 style={workStyles.client}>{client}</h3>
        <p style={workStyles.summary}>{summary}</p>
      </div>
      <div style={workStyles.right}>
        <div style={workStyles.metric}>{metric}</div>
        <div style={workStyles.metricLabel}>{metricLabel}</div>
      </div>
    </article>
  );
}

const workStyles = {
  row: {
    display: 'grid', gridTemplateColumns: '1fr auto', gap: 48,
    alignItems: 'center', padding: '36px 0',
    borderBottom: '1px solid var(--rule)',
    transition: 'background 180ms var(--ease-out)',
  },
  left: { display: 'flex', flexDirection: 'column', gap: 8 },
  eyebrow: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'var(--ink-soft)' },
  client: { fontFamily: 'var(--serif-display)', fontWeight: 400, fontSize: 32, lineHeight: 1.15, color: 'var(--ink)', margin: 0 },
  summary: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 16, lineHeight: 1.55, color: 'var(--ink-brown)', margin: 0, maxWidth: '60ch' },
  right: { textAlign: 'right' },
  metric: { fontFamily: 'var(--serif-display)', fontWeight: 400, fontSize: 56, lineHeight: 1, letterSpacing: '-0.01em', color: 'var(--accent)' },
  metricLabel: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ink-soft)', marginTop: 8 },
};

window.WorkItem = WorkItem;