function About() {
  return (
    <section className="section container" id="about">
      <div className="about-grid">
        <div>
          <span className="kicker">hakkımızda</span>
          <h2 style={{marginTop:16,marginBottom:20}}>Hukuku yazılım, yazılımı hukuk gibi düşünüyoruz</h2>
          <p style={{fontSize:16,marginBottom:16}}>AMA Yazılım olarak İstanbul merkezli küçük bir ekibiz. Titan Hukuk'u, bir avukatın günlük iş akışını saat saat izleyerek tasarladık: evrak indirmenin kaçıncı dakikasında sabrın bittiğini, hangi tarama sonucunun gerçekten işe yaradığını biliyoruz.</p>
          <p style={{fontSize:16,marginBottom:16}}>Açık standartlara, açık kaynaklı model seçimine ve yerel kurulum seçeneğine önem veriyoruz. Müvekkil verisi bizim sunucumuzdan geçmek zorunda değil.</p>
          <p style={{fontSize:15,color:'var(--ink-mute)'}}>Türk hukuk büroları için sıfırdan geliştirdiğimiz bir platform inşa ediyoruz. Büronuz için özel bir demo planlıyoruz — bize ulaşın, çalışma akışınızı birlikte inceleyelim.</p>
        </div>

        <div style={{border:'1px solid var(--line)',borderRadius:'var(--radius-lg)',padding:32,background:'var(--bg-card)'}}>
          <span className="mono" style={{marginBottom:14,display:'block'}}>İLKELERİMİZ</span>
          <div style={{display:'flex',flexDirection:'column',gap:22}}>
            {[
              {n:'01', t:'Veri sahipliği müvekkilde kalır.', d:'On-prem kurulum + yerel e-imza ajanı. Müvekkil evrakı sunucumuza iletmek zorunlu değil.'},
              {n:'02', t:'Arka plan her zaman çalışır.', d:'Manuel "İndir, Aktar, İşle" butonları yerine polling + job queue. Siz dosyayı açın, yazılım çalışır.'},
              {n:'03', t:'AI çıktısı kaynaklıdır.', d:'Her yanıt evrak atıflı. Karar raporu doğrudan ilgili içtihata bağlanır, hallüsinasyon denetlenir.'},
              {n:'04', t:'Açık standartlar + kendi modeliniz.', d:'OpenRouter ile Claude, Gemini veya kendi açık kaynak modelinize yönlendirebilirsiniz.'},
            ].map((p,i) => (
              <div key={i} style={{display:'flex',gap:16,paddingBottom:i<3?22:0,borderBottom:i<3?'1px solid var(--line)':'none'}}>
                <div style={{fontFamily:'var(--font-mono)',fontSize:11,color:'var(--accent)',minWidth:28}}>{p.n}</div>
                <div>
                  <div style={{fontFamily:'var(--font-display)',fontSize:17,fontWeight:500,letterSpacing:'-0.015em',marginBottom:4}}>{p.t}</div>
                  <div style={{fontSize:14,color:'var(--ink-mute)'}}>{p.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{marginTop:56,paddingTop:56,borderTop:'1px solid var(--line)',display:'grid',gridTemplateColumns:'220px 1fr',gap:48,alignItems:'center'}} className="founder-row">
        <div style={{aspectRatio:'1',background:'var(--accent)',border:'1px solid var(--accent-hover)',borderRadius:12,position:'relative',overflow:'hidden',boxShadow:'0 4px 14px rgba(184,134,11,.2)'}}>
          <div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--font-display)',fontSize:88,fontWeight:700,color:'var(--bg-card)',letterSpacing:'-0.03em'}}>AA</div>
        </div>
        <div>
          <span className="mono" style={{marginBottom:10,display:'block'}}>KURUCU</span>
          <h3 style={{fontSize:32,fontFamily:'var(--font-display)',fontWeight:500,letterSpacing:'-0.025em',marginBottom:8}}>Ali Mert Akyüz</h3>
          <div style={{fontFamily:'var(--font-mono)',fontSize:12,color:'var(--ink-mute)',textTransform:'uppercase',letterSpacing:'0.06em',marginBottom:16}}>Avukat + Yazılım Geliştirici</div>
          <p style={{fontSize:16,maxWidth:560}}>"Kendi büromuzda yaşadığımız sorunları çözmek için Titan'ı inşa ediyorum. Her satır kod, bir avukatın hayatını kolaylaştırmak için yazıldı."</p>
        </div>
      </div>
    </section>
  );
}
window.About = About;