function HowItWorks() {
  const steps = [
    { n: '01', t: 'Dosyanızı açın', d: 'Yeni dava açın veya UYAP üzerinden mevcut dosyanızı Titan\'a bağlayın. Taraflar, masraflar, aşamalar otomatik çekilir.' },
    { n: '02', t: 'Evraklar akarken işlenir', d: 'Her yeni evrak taranır, metne çevrilir, içerik analiz edilir. Arka planda, siz beklemezsiniz.' },
    { n: '03', t: 'Siz sorun, Titan çalışsın', d: 'AI sohbetten dosyanızı sorgulayın; Karar Arama ajanına tezinizi verin, tüm yargı birimlerini sizin için dolaşsın.' },
    { n: '04', t: 'Tek tıkla imzalayın', d: 'Dilekçenizi yükleyin; ofis ağındaki agent USB e-imza ile saniyeler içinde imzalar, UYAP\'a iletir.' },
  ];

  return (
    <section className="section container" id="how">
      <div className="section-head">
        <span className="kicker">nasıl çalışır</span>
        <h2>Dört adımda dava yönetimi</h2>
        <p className="lede">Manuel butonlarla bir dakikalık işi on dakikaya çeviren yazılımlardan yorulduysanız — Titan arka planda çalışır, siz sonucu görürsünüz.</p>
      </div>
      <div className="how-grid">
        {steps.map((s,i) => (
          <div key={i} className="how-step">
            <div className="how-step-num">{s.n}</div>
            <h3>{s.t}</h3>
            <p>{s.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}
window.HowItWorks = HowItWorks;