// Modüller — 3 büyük modülün zikzak detayı
// HowItWorks ile KararArama arasında yer alır.

function Modules() {
  return (
    <section className="modules" id="modules">
      <div className="container">
        <div className="section-head">
          <span className="kicker">modüller</span>
          <h2>Yakından bakın</h2>
          <p className="lede">Beş modülün ayrıntısı. Her biri tek başına iş görür, birlikte hukuk bürosu yönetiminin belkemiğini oluşturur.</p>
        </div>
      </div>

      <ModuleBlock
        idx="01"
        kicker="dosya yönetimi"
        title="Dosyanızdaki her gelişme, düzen içinde."
        paragraphs={[
          "Her dosya, bir takım olarak çalışır. Müvekkil, karşı taraf, duruşmalar, masraflar, aşamalar ve evraklar tek bir görünümde toplanır. Sağ tık, dropdown, üç tab arası gezinti yok — bir dosyayı açar, her şeyi görürsünüz.",
          "İş takibi \"zincir\" mantığıyla çalışır: cevap dilekçesi tamamlandığında bilirkişi takibi otomatik düşer. Bir görev biter, diğeri doğar.",
          "Takvimde bir görevi başka bir güne sürüklerseniz, sistem nedenini sorar — ve bunu dosyanın \"yapılan işler\" geçmişine otomatik kayıt eder.",
        ]}
        feats={[
          "Zincirleme iş akışı — bir iş biter, sonraki otomatik düşer",
          "Sürükle-bırak takvim — tarih değişimi gerekçesiyle kayıt altında",
          "Sorumlular, vadeler, geciken işler tek panelde",
          "Tebligat geldiğinde 5 günlük yanıt süresi sayacı otomatik başlar",
          "Dosya aşamaları (Derdest → Karara Çıktı → İnfaz) tek tıkla ilerler",
          "Masraf takibi, müvekkil avansı, toplam bakiye dosya detayında",
        ]}
        visualRight={true}
        visual={<ModuleVisualDosya/>}
        bg="bg"
      />

      <ModuleBlock
        idx="02"
        kicker="yapay zeka sohbet"
        title="Dosyanızla konuşun. Cevaplar evraklarınızdan gelsin."
        paragraphs={[
          "Ekranın sağ altında sürekli duran bir sohbet penceresi. Dosyayı açar, sorarsınız: \"Bilirkişi raporunda kusur nispeti ne?\" — yapay zeka dosyanın evraklarını tarar, ilgili bölümü bulur, cevaplar. Her cevap kaynak belgeye atıflıdır.",
          "Uzun dilekçeler, 50 sayfalık bilirkişi raporları, UYAP'tan gelen karmaşık belgeler — Titan okumayı sizin yerinize yapar. Soru tipine göre cevap: \"özet çıkar\", \"karşı tarafın iddiası ne\", \"eksik deliller neler\".",
          "Her yeni evrak yüklendiğinde yapay zeka otomatik özet çıkarır ve kritik / orta / rutin olarak sınıflar. 50 evraklık bir dosyada gözünüzü önce 3-4 kritik evraka çevirirsiniz.",
        ]}
        feats={[
          "Kaynak atıflı cevap — her yanıt evrak referanslı",
          "Uzun yanıt desteği (16K token, otomatik devam)",
          "Dosya bazlı bağlam — her dosya kendi sohbet geçmişine sahip",
          "Otomatik evrak özeti ve önem sınıflandırma (kritik / orta / rutin)",
          "Duruşma öncesi hazırlık notu yapay zeka tarafından üretilir",
          "Üslup seçici — Formal, Sade veya Kısa cevap modu",
        ]}
        visualRight={false}
        visual={<ModuleVisualChat/>}
        bg="bg-elev"
      />

      <ModuleBlock
        idx="03"
        kicker="uyap otomasyonu"
        title="UYAP her gece sizin yerinize kontrol edilir."
        paragraphs={[
          "Her gece 00:30'da Titan Agent arka planda tüm aktif dosyalarınızı UYAP'tan kontrol eder. Yeni evrak var mı, duruşma değişti mi, tebligat geldi mi — hepsini indirir, OCR ile metne çevirir, yapay zeka ile özetler. Sabah kahvenizi yudumlarken dosyalarınızı güncel bulursunuz.",
          "Tebligat otomatik yakalanır: OCR sonrası evrak metni taranır, büronuz isim olarak geçiyorsa tebligat etiketini alır, 5 günlük yanıt süresi sayacı başlar. Sayaç 3 güne düşünce panelinizde kırmızı uyarı belirir.",
          "UYAP'tan gelen karşı taraf ve müvekkil bilgileri otomatik eşleşir. Aynı müvekkil farklı dosyada mı var? Sistem bulur, yeni müvekkil oluşturmadan mevcut kayda bağlar.",
        ]}
        feats={[
          "Gece eşitleme (00:30) — yeni evrak, duruşma, taraf bilgileri otomatik güncel",
          "OCR ile evrak metni çıkarımı — Türkçe optimize, %95+ doğruluk",
          "Tebligat otomatik yakalama + 5 gün yanıt süresi sayacı",
          "Taraf eşleme — aynı müvekkil farklı dosyalarda tek kayıt",
          "Duruşma çekimi — UYAP'tan duruşma takvime otomatik düşer",
          "Manuel \"eşitle\" butonu — istediğinizde tek tıkla canlı sync",
        ]}
        visualRight={true}
        visual={<ModuleVisualUyap/>}
        bg="bg"
      />

      <div className="container">
        <div className="modules-bridge">
          <p>Modüller burada bitmiyor. Asıl güç, yapay zekanın tezinize göre paralel çalışmasında...</p>
          <a href="#karar" className="modules-bridge-link">
            <span>Karar Arama'ya geç</span>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M12 4v16M6 14l6 6 6-6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
        </div>
      </div>
    </section>
  );
}

function ModuleBlock({ idx, kicker, title, paragraphs, feats, visualRight, visual, bg }) {
  return (
    <div className={`mod-block mod-bg-${bg}`}>
      <div className="container">
        <div className={`mod-grid ${visualRight ? 'mod-visual-right' : 'mod-visual-left'}`}>
          <div className="mod-text">
            <div className="mod-num">{idx}</div>
            <span className="kicker" style={{color:'var(--bordo)'}}>{kicker}</span>
            <h3 className="mod-title">{title}</h3>
            <div className="mod-body">
              {paragraphs.map((p,i) => <p key={i}>{p}</p>)}
            </div>
            <ul className="mod-feats">
              {feats.map((f,i) => (
                <li key={i}>
                  <svg width="16" height="16" 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>{f}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="mod-visual">{visual}</div>
        </div>
      </div>
    </div>
  );
}

/* ========== Visual: Dosya detayı ========== */
function ModuleVisualDosya() {
  return (
    <div className="mv-card">
      <div className="mv-head">
        <span className="mv-head-folder">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" stroke="currentColor" strokeWidth="1.5"/></svg>
          <span>2024/3312 · Müvekkil A</span>
        </span>
        <span className="mv-head-status">Derdest</span>
      </div>
      <div className="mv-tabs">
        <span className="mv-tab active">İş Takibi</span>
        <span className="mv-tab">Evraklar</span>
        <span className="mv-tab">UYAP</span>
      </div>
      <div className="mv-tasks">
        <div className="mv-task mv-task-done">
          <span className="mv-task-icon">✓</span>
          <div className="mv-task-body">
            <div className="mv-task-title">Cevap dilekçesi yazıldı</div>
            <div className="mv-task-meta">12.03.2025 · Av. M. Akyüz</div>
          </div>
          <span className="mv-chip ok">tamamlandı</span>
        </div>
        <div className="mv-task mv-task-pending">
          <span className="mv-task-icon">⏳</span>
          <div className="mv-task-body">
            <div className="mv-task-title">Bilirkişi raporu takibi</div>
            <div className="mv-task-meta">Vade 24 Nis · Av. E. Yıldız</div>
          </div>
          <span className="mv-chip warn">24 Nis</span>
        </div>
        <div className="mv-task mv-task-shifted">
          <span className="mv-task-icon">📆</span>
          <div className="mv-task-body">
            <div className="mv-task-title">Son tarih değişti — müvekkil belge bekleniyor</div>
            <div className="mv-task-meta">Sürüklendi · otomatik kayıt</div>
          </div>
          <span className="mv-chip shift">21 Nis → 24 Nis</span>
        </div>
      </div>
      <div className="mv-cal">
        <div className="mv-cal-head">Nisan 2025</div>
        <div className="mv-cal-grid">
          {[18,19,20,21,22,23,24].map((d,i) => (
            <div key={i} className={`mv-cal-day ${d===21?'mv-cal-from':''} ${d===24?'mv-cal-to':''}`}>
              <div className="mv-cal-num">{d}</div>
              {d===21 && <span className="mv-cal-dot empty"></span>}
              {d===24 && <span className="mv-cal-dot full"></span>}
            </div>
          ))}
        </div>
        <div className="mv-cal-arrow">
          <svg width="80" height="20" viewBox="0 0 80 20" fill="none" aria-hidden="true">
            <path d="M4 10 Q 40 0 76 10" stroke="var(--accent)" strokeWidth="1.5" fill="none" strokeDasharray="3 3"/>
            <path d="M72 6 L76 10 L72 14" stroke="var(--accent)" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          <span className="mv-cal-arrow-label">görev taşındı</span>
        </div>
      </div>
    </div>
  );
}

/* ========== Visual: Chat ========== */
function ModuleVisualChat() {
  return (
    <div className="mv-card">
      <div className="mv-head">
        <span className="mv-head-folder">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z" stroke="currentColor" strokeWidth="1.5"/></svg>
          <span>Sohbet · 2024/3312</span>
        </span>
        <span className="live-dot"></span>
      </div>
      <div className="mv-chat">
        <div className="mv-msg mv-msg-user">
          <div className="mv-msg-label">Sen · 15:32</div>
          <div className="mv-msg-body">"Bilirkişi raporunda müvekkilin kusur oranı ne kadar?"</div>
        </div>
        <div className="mv-msg mv-msg-ai">
          <div className="mv-msg-label">Titan · 15:32</div>
          <div className="mv-msg-body">
            Bilirkişi raporuna göre müvekkilin kusur nispeti <strong>%30</strong>, karşı tarafın <strong>%70</strong> olarak tespit edilmiştir. Rapor, davalının araç hızının yasal sınırı aştığını ve müvekkilin "ikinci derece kusurlu" olduğunu belirtiyor.
            <div className="mv-cite">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2" stroke="currentColor" strokeWidth="1.5"/></svg>
              <span>Bilirkişi Raporu · 15.03.2025, s. 8</span>
            </div>
          </div>
        </div>
      </div>
      <div className="mv-docs">
        <div className="mv-doc">
          <span className="mv-doc-icon">📄</span>
          <span className="mv-doc-name">Bilirkişi Raporu.pdf</span>
          <span className="mv-chip crit">Kritik</span>
        </div>
        <div className="mv-doc">
          <span className="mv-doc-icon">📄</span>
          <span className="mv-doc-name">Dava Dilekçesi.pdf</span>
          <span className="mv-chip warn">Orta</span>
        </div>
        <div className="mv-doc">
          <span className="mv-doc-icon">📄</span>
          <span className="mv-doc-name">Cevap Dilekçesi.pdf</span>
          <span className="mv-chip">Rutin</span>
        </div>
      </div>
    </div>
  );
}

/* ========== Visual: UYAP Log ========== */
function ModuleVisualUyap() {
  const lines = [
    {t:'00:30:02', m:'Gece eşitleme başladı · 127 aktif dosya', c:'ink'},
    {t:'00:30:04', m:'→ 2024/3312 · 3 yeni evrak indirildi', c:'accent'},
    {t:'00:30:12', m:'→ Bilirkişi Raporu.pdf · OCR ✓ · 23 sayfa', c:'olive'},
    {t:'00:30:13', m:'→ Tebligat tespit edildi · 5 gün sayacı başladı', c:'bordo'},
    {t:'00:30:18', m:'→ 2023/1184 · Duruşma tarihi güncellendi (2025-05-14)', c:'accent'},
    {t:'00:30:25', m:'→ Taraf eşleşme: "Mustafa Şenel" → mevcut müvekkil #384', c:'ink'},
    {t:'00:32:41', m:'Gece eşitleme tamamlandı · 12 dk · 47 yeni evrak', c:'olive'},
  ];
  const colorMap = {
    ink:'var(--ink)',
    accent:'var(--accent-hover)',
    olive:'var(--olive)',
    bordo:'var(--bordo)',
  };
  return (
    <div className="mv-card">
      <div className="mv-head">
        <span className="mv-head-folder">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M4 12a8 8 0 1016 0 8 8 0 00-16 0zM4 12h16M12 4c2 2.4 3 5 3 8s-1 5.6-3 8" stroke="currentColor" strokeWidth="1.5"/></svg>
          <span>Titan Agent · UYAP Otomasyonu</span>
        </span>
        <span className="mv-head-status ok">çevrimiçi</span>
      </div>
      <div className="mv-log">
        {lines.map((l,i) => (
          <div key={i} className="mv-log-row">
            <span className="mv-log-time">[{l.t}]</span>
            <span className="mv-log-msg" style={{color: colorMap[l.c]}}>{l.m}</span>
          </div>
        ))}
      </div>
      <div className="mv-stats">
        <div className="mv-stat">
          <span className="live-dot"></span>
          <span>Aktif oturum · 5/5</span>
        </div>
        <div className="mv-stat">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M2 12h4M18 12h4M12 2v4M12 18v4M5 5l3 3M16 16l3 3M5 19l3-3M16 8l3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
          <span>Son sync: 08:45 · 3 dk önce</span>
        </div>
        <div className="mv-stat">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-4z" stroke="currentColor" strokeWidth="1.5"/></svg>
          <span>Audit: 90 gün log tutuluyor</span>
        </div>
      </div>
    </div>
  );
}

window.Modules = Modules;