// "Bunların hepsinin yerine" — tek-yazılım tezini ikame tablosuyla somutlaştırır.
// Hero'dan hemen sonra gelir. Marka adı bilinçli olarak YOK (karşılaştırmalı
// reklam riski) — avukat kitle kategorileri zaten tanır.
function Replaces() {
  const rows = [
    { old: 'Büro takip programı + Excel listeleri',      neu: 'Dosya, iş zinciri, takvim, masraf ve tahsilat — tek arayüzde' },
    { old: 'İçtihat araştırma aboneliği',                 neu: 'Karar Arama: gerçek alıntılı kararlar + lehe/aleyhe derin rapor' },
    { old: 'Ayrı imza otomasyon programı',                neu: 'Dilekçe yükle — ofisteki USB e-imza arka planda imzalar, UYAP\'a gider' },
    { old: 'UETS portalını elle kontrol etmek',           neu: 'e-Tebligatlar saatte bir otomatik takip, süre sayaçları kendiliğinden' },
    { old: 'Klasörlerde PDF açıp kapatarak arama',        neu: 'OCR + AI özet: "bilirkişi kusur oranı ne dedi?" diye sorarsınız' },
    { old: 'Word\'de dilekçe kopyala-yapıştır',           neu: 'Şablon sistemi: dosya bilgileri değişkenlere kendiliğinden dolar' },
  ];
  return (
    <section className="section container" id="yerine">
      <div className="section-head">
        <span className="kicker">tek yazılım</span>
        <h2>Bunların hepsinin yerine</h2>
        <p className="lede">Bir hukuk bürosu bugün dört-beş ayrı araca ayrı ayrı para ve mesai harcıyor. Titan, hepsinin yaptığını tek çatı altında ve birbiriyle konuşur hâlde yapar.</p>
      </div>
      <div className="repl-card">
        {rows.map((r, i) => (
          <div key={i} className="repl-row">
            <div className="repl-old">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
              <span>{r.old}</span>
            </div>
            <div className="repl-arrow" aria-hidden="true">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
            <div className="repl-new">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M20 6L9 17l-5-5" stroke="var(--olive)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
              <span>{r.neu}</span>
            </div>
          </div>
        ))}
        <div className="repl-foot">Tek abonelik. Tek arayüz. Tek veri tabanı.</div>
      </div>
    </section>
  );
}
window.Replaces = Replaces;