function Process() {
  const { t } = useLang();
  const rows = [
    { n: '01', t: t('proc.1.t'), cn: t('proc.1.cn'), d: t('proc.1.d'), tags: ['Audit','Scoping','Roadmap'] },
    { n: '02', t: t('proc.2.t'), cn: t('proc.2.cn'), d: t('proc.2.d'), tags: ['Figma','UX','UI','Prototype'] },
    { n: '03', t: t('proc.3.t'), cn: t('proc.3.cn'), d: t('proc.3.d'), tags: ['Next.js','Laravel','Postgres','TypeScript'] },
    { n: '04', t: t('proc.4.t'), cn: t('proc.4.cn'), d: t('proc.4.d'), tags: ['AWS','Vercel','CI/CD','Monitoring'] },
    { n: '05', t: t('proc.5.t'), cn: t('proc.5.cn'), d: t('proc.5.d'), tags: ['24/7 Support','SEO','A/B','Iteration'] },
  ];
  return (
    <section className="section" id="process" style={{paddingTop:90}}>
      <div className="wrap">
        <div className="section-head">
          <div className="reveal">
            <div className="kicker"><span className="dot"></span><span>{t('proc.kicker')}</span><span className="bar"></span><span>{t('proc.kicker.right')}</span></div>
            <h2 className="section-title" style={{marginTop:20}} dangerouslySetInnerHTML={tHtml('proc.title.html')}/>
          </div>
          <div className="reveal d1">
            <p className="lead">{t('proc.lead')}</p>
          </div>
        </div>

        <div className="process-list reveal">
          {rows.map(r => (
            <div className="process-row" key={r.n}>
              <div className="n">{r.n}</div>
              <div className="t">{r.t}<span className="cn">{r.cn}</span></div>
              <div className="d">{r.d}</div>
              <div className="tags">{r.tags.map(tg => <span key={tg} className="tag">{tg}</span>)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Process = Process;