function Process() {
  const { t } = window.useT();
  const STEPS = [
    { num: '01', name: t('proc.1.name'), desc: t('proc.1.desc'), deliverable: t('proc.1.deliv') },
    { num: '02', name: t('proc.2.name'), desc: t('proc.2.desc'), deliverable: t('proc.2.deliv') },
    { num: '03', name: t('proc.3.name'), desc: t('proc.3.desc'), deliverable: t('proc.3.deliv') },
    { num: '04', name: t('proc.4.name'), desc: t('proc.4.desc'), deliverable: t('proc.4.deliv') },
    { num: '05', name: t('proc.5.name'), desc: t('proc.5.desc'), deliverable: t('proc.5.deliv') },
  ];

  return (
    <section style={procStyles.wrap} id="process">
      <div style={procStyles.inner}>
        <div style={procStyles.header}>
          <div style={procStyles.eyebrow}>{t('proc.eyebrow')}</div>
          <h2 style={procStyles.h2}>{t('proc.h2')}</h2>
        </div>

        <div style={procStyles.line} />
        <div style={procStyles.steps}>
          {STEPS.map((s, i) => (
            <div key={s.num} style={procStyles.step}>
              <div style={{...procStyles.node, ...(i < 2 ? procStyles.nodeActive : {})}}>{s.num}</div>
              <div style={procStyles.stepName}>{s.name}</div>
              <div style={procStyles.stepDesc}>{s.desc}</div>
              <div style={procStyles.deliverable}>
                <span style={procStyles.delivLabel}>{t('proc.deliverable')}</span>
                <span style={procStyles.delivValue}>{s.deliverable}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const procStyles = {
  wrap: { padding: '96px 32px', background: 'var(--ink-900)', position: 'relative', borderTop: '1px solid var(--border-subtle)' },
  inner: { maxWidth: 1240, margin: '0 auto', position: 'relative' },
  header: { display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 64, maxWidth: 720 },
  eyebrow: { fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: 'var(--cyan-400)', letterSpacing: '0.14em', textTransform: 'uppercase' },
  h2: { fontFamily: 'Montserrat', fontWeight: 700, fontSize: 40, lineHeight: 1.1, letterSpacing: '-0.02em', color: 'var(--fg-1)', margin: 0 },
  line: {
    position: 'absolute', left: 32, right: 32, top: 'calc(120px + 78px)',
    height: 1, background: 'linear-gradient(90deg, transparent 0%, var(--blue-400) 20%, var(--cyan-400) 50%, var(--blue-400) 80%, transparent 100%)',
    opacity: 0.35, pointerEvents: 'none',
  },
  steps: { display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16, position: 'relative' },
  step: { display: 'flex', flexDirection: 'column', gap: 12, padding: 20, background: 'var(--ink-800)', border: '1px solid var(--border-default)', borderRadius: 12 },
  node: {
    width: 52, height: 52, borderRadius: '50%',
    background: 'var(--ink-900)', border: '1px solid var(--border-blue)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'JetBrains Mono, monospace', fontWeight: 500, fontSize: 15,
    color: 'var(--cyan-400)', letterSpacing: '0.04em',
    marginBottom: 6,
  },
  nodeActive: { background: 'var(--blue-500)', borderColor: 'var(--blue-400)', color: '#fff' },
  stepName: { fontFamily: 'Montserrat', fontWeight: 600, fontSize: 16, color: 'var(--fg-1)', letterSpacing: '-0.005em' },
  stepDesc: { fontFamily: 'Inter', fontSize: 13, lineHeight: 1.55, color: 'var(--fg-3)', flex: 1 },
  deliverable: { display: 'flex', flexDirection: 'column', gap: 4, paddingTop: 12, borderTop: '1px solid var(--border-subtle)' },
  delivLabel: { fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: 'var(--fg-4)', letterSpacing: '0.14em' },
  delivValue: { fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: 'var(--fg-1)' },
};