function Hero() {
  const [tagline] = React.useState(() => window.__tagline || 'Hukukta yapay zeka çağı.');

  return (
    <section className="hero container" id="top">
      <div className="hero-eyebrow">
        <span className="hero-eyebrow-dot"></span>
        UYAP otomatik imza ve tüm yargı birimlerinde agentic karar arama
      </div>
      <div className="hero-trust">
        İstanbul merkezli hukuk bürolarında canlı kullanımda
        <span className="hero-trust-sep">·</span>
        Türk yargı sistemi için sıfırdan geliştirildi
      </div>
      <h1>
        {tagline.split(' ').map((w, i, arr) => (
          <React.Fragment key={i}>
            {i === arr.length - 1 ? <em>{w}</em> : w}{i < arr.length - 1 ? ' ' : ''}
          </React.Fragment>
        ))}
      </h1>
      <p className="hero-sub">
        Türk hukuk büroları için uçtan uca dava yönetimi. UYAP entegrasyonu, dosya bazlı yapay zeka sohbet, içtihat araştıran ajan sistemi ve USB e-imza otomasyonu — hepsi tek platformda.
      </p>
      <div className="hero-cta">
        <a href="#demo" className="btn btn-primary">
          Demo talep et
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </a>
        <a href="#how" className="btn btn-ghost">
          Nasıl çalışır
        </a>
      </div>
      <div className="hero-meta">
        <div className="hero-meta-item">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          Tüm yargı birimlerinde karar arama
        </div>
        <div className="hero-meta-item">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          USB e-imza paylaşımı, LAN'da 5 oturum
        </div>
        <div className="hero-meta-item">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          VPS veya şirket içi kurulum
        </div>
      </div>

      {/* Dashboard mock */}
      <div className="dash-frame">
        <div className="dash-topbar">
          <span className="dash-dot"></span><span className="dash-dot"></span><span className="dash-dot"></span>
          <span className="dash-url">titan.amayazilim.com / dashboard</span>
          <span style={{marginLeft:'auto',fontFamily:'var(--font-mono)',fontSize:11,color:'var(--ink-dim)'}}>
            <span className="live-dot" style={{marginRight:6}}></span>3 dosya işleniyor
          </span>
        </div>
        <div className="dash-body">
          <aside className="dash-side">
            <div className="dash-side-brand"><TitanHelmet size={18} /> Büronuz</div>
            <div className="dash-side-section">Çalışma</div>
            <div className="dash-side-item active">
              <svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="1.5"/><path d="M9 9h6M9 13h6M9 17h3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
              Dosyalar<span className="dash-side-badge">127</span>
            </div>
            <div className="dash-side-item">
              <svg viewBox="0 0 24 24" fill="none"><path d="M9 11l3 3L22 4M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
              İş takibi<span className="dash-side-badge">34</span>
            </div>
            <div className="dash-side-item">
              <svg viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="1.5"/><path d="M16 2v4M8 2v4M3 10h18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
              Duruşmalar<span className="dash-side-badge">8</span>
            </div>
            <div className="dash-side-item">
              <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.5"/><path d="M12 7v5l3 2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
              Karar Arama<span className="dash-side-badge" style={{color:'var(--accent)'}}>● 3</span>
            </div>
            <div className="dash-side-section">Entegrasyon</div>
            <div className="dash-side-item">
              <svg viewBox="0 0 24 24" fill="none"><path d="M4 12a8 8 0 1016 0 8 8 0 00-16 0z" stroke="currentColor" strokeWidth="1.5"/><path d="M4 12h16M12 4c2 2.4 3 5 3 8s-1 5.6-3 8c-2-2.4-3-5-3-8s1-5.6 3-8z" stroke="currentColor" strokeWidth="1.5"/></svg>
              UYAP Portal
            </div>
            <div className="dash-side-item">
              <svg viewBox="0 0 24 24" fill="none"><path d="M9 2v20M15 2v20M3 7h18M3 17h18" stroke="currentColor" strokeWidth="1.5"/></svg>
              e-İmza Agent
            </div>
          </aside>

          <main className="dash-main">
            <div className="dash-main-head">
              <div className="dash-main-title">Genel bakış <span style={{fontFamily:'var(--font-mono)',fontSize:11,fontStyle:'italic',color:'var(--ink-dim)',opacity:0.6,marginLeft:10,fontWeight:400}}>örnek görünüm</span></div>
              <div style={{display:'flex',gap:8}}>
                <span className="dash-pill">Bu hafta</span>
                <span className="dash-pill active">Tümü</span>
              </div>
            </div>
            <div className="dash-stats">
              <div className="dash-stat"><div className="dash-stat-label">Aktif dosya</div><div className="dash-stat-value">127</div><div className="dash-stat-delta">+4 bu hafta</div></div>
              <div className="dash-stat"><div className="dash-stat-label">Bekleyen iş</div><div className="dash-stat-value">34</div><div className="dash-stat-delta neg">−2</div></div>
              <div className="dash-stat"><div className="dash-stat-label">OCR sıra</div><div className="dash-stat-value">8</div><div className="dash-stat-delta">işleniyor</div></div>
              <div className="dash-stat"><div className="dash-stat-label">İçtihat / 30g</div><div className="dash-stat-value">412</div><div className="dash-stat-delta">+38%</div></div>
            </div>
            <div className="dash-cols">
              <div className="dash-panel">
                <div className="dash-panel-head">
                  <div className="dash-panel-title">Yaklaşan duruşmalar <span style={{fontFamily:'var(--font-mono)',fontSize:10,color:'var(--ink-dim)',marginLeft:6,fontWeight:400}}>— örnek görünüm</span></div>
                  <span className="mono" style={{fontSize:10}}>bu hafta · 4</span>
                </div>
                <div className="dash-panel-body">
                  <div className="dash-row">
                    <div><div className="dash-row-title">Müvekkil A — Tazminat</div><div className="dash-row-meta">İstanbul 14. Asliye · 2024/3312</div></div>
                    <div className="dash-row-meta">Salı 10:30</div>
                    <span className="dash-pill active">bugün</span>
                  </div>
                  <div className="dash-row">
                    <div><div className="dash-row-title">Müvekkil B — İş Davası</div><div className="dash-row-meta">İş Mh. 8 · 2023/1184</div></div>
                    <div className="dash-row-meta">Çar 14:00</div>
                    <span className="dash-pill">yarın</span>
                  </div>
                  <div className="dash-row">
                    <div><div className="dash-row-title">Müvekkil C — Vergi</div><div className="dash-row-meta">Vergi Mh. 3 · 2024/442</div></div>
                    <div className="dash-row-meta">Per 09:30</div>
                    <span className="dash-pill">2 gün</span>
                  </div>
                  <div className="dash-row">
                    <div><div className="dash-row-title">Müvekkil D — Aile</div><div className="dash-row-meta">Aile Mh. 2 · 2024/109</div></div>
                    <div className="dash-row-meta">Cum 11:00</div>
                    <span className="dash-pill warn">hazırlık</span>
                  </div>
                </div>
              </div>
              <div className="dash-panel">
                <div className="dash-panel-head">
                  <div className="dash-panel-title">Karar Arama — canlı</div>
                  <span><span className="live-dot"></span></span>
                </div>
                <div className="dash-agent">
                  <div className="agent-line"><span className="agent-tag">analiz</span><span>"haksız rekabet · TTK 54"</span></div>
                  <div className="agent-line"><span className="agent-tag">plan</span><span>7 DB seçildi (Yargıtay, BAM, Danıştay…)</span></div>
                  <div className="agent-line ok"><span className="agent-tag">Yargıtay</span><span>28 karar → 14 uygun ✓</span></div>
                  <div className="agent-line ok"><span className="agent-tag">BAM HK</span><span>19 karar → 9 uygun ✓</span></div>
                  <div className="agent-line"><span className="agent-tag">Danıştay</span><span>sayfa 2/5 · reflect...</span></div>
                  <div className="agent-line"><span className="agent-tag">Rekabet</span><span>6 karar → eval</span></div>
                  <div className="agent-line"><span className="agent-tag">Anayasa</span><span>aranıyor<span className="agent-cursor"></span></span></div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;