function HowItWorks() {
  const steps = [
    {
      n: '01',
      t: 'Titan Agent\'ı ofis ağına kur',
      d: 'Bir ofis bilgisayarına 5 dakikada kurulur. USB e-imza takılı kalır, tüm avukatlar LAN üzerinden ortak kullanır. Her avukat için ayrı token gerekmez.',
    },
    {
      n: '02',
      t: 'UYAP\'a bağlan',
      d: 'Avukat portalı oturumu havuzla yönetilir (5 paralel slot). Tüm dosya sorgulama, evrak indirme, e-imza süreci doğrudan UYAP\'a bağlanır — Cloud aracı yok.',
    },
    {
      n: '03',
      t: 'Dosyalar gece otomatik gelir',
      d: 'Backend Agent her gece 00:30\'da aktif dosyalarını UYAP\'tan kontrol eder. Yeni evrak, duruşma, taraf değişikliği — hepsi sabaha hazır, OCR\'lı ve özetlenmiş.',
    },
    {
      n: '04',
      t: 'AI ile sor, araştır, üret',
      d: 'Floating Chat ile dosyana soru sor (cevap atıflı). Karar Arama V3 ile 13+ yargı veritabanından lehine + aleyhine içtihat raporu üret. Yapılan/yapılacak işi AI profesyonelleştirsin.',
    },
    {
      n: '05',
      t: 'Tek tıkla imzala, UYAP\'a gönder',
      d: 'Dilekçeni yükle. Ofis ağındaki USB e-imza ile UYAP standardında otomatik imzalanır ve gönderilir — İmza Pro butonuna tıklamana gerek yok.',
    },
  ];

  return (
    <section className="section container" id="how">
      <div className="section-head">
        <span className="kicker">nasıl çalışır</span>
        <h2>Beş adımda büro otomasyonu</h2>
        <p className="lede">
          Manuel butonlarla bir dakikalık işi on dakikaya çeviren yazılımlardan yorulduysan —
          Titan arka planda çalışır, sen sonucu görürsün.
        </p>
      </div>
      <div className="how-grid how-grid-5">
        {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;