function Features() {
  const items = [
    { span: 'feat-wide', kicker: '01 / dosya', title: 'Dosya yönetimi', desc: 'Müvekkil, karşı taraf, duruşma, masraf, not ve aşamalar — tek dosya altında. Bir iş biter, bir sonraki otomatik düşer. Cevap dilekçesi → bilirkişi takibi → duruşma günü gibi zincirleme akış.',
      visual: <DosyaVisual/> },
    { span: 'feat-wide', kicker: '02 / uyap', title: 'UYAP entegrasyonu', desc: 'Titan Agent, ofis ağında çalışan bir bilgisayar ile UYAP\'a doğrudan bağlanır. Evrak indirme, auto-OCR, taraf eşleme, duruşma çekimi — tek tıklama, arka planda.',
      visual: <UyapVisual/> },
    { span: 'feat', kicker: '03 / chat', title: 'Dosya bazlı AI sohbet', desc: 'Evraklarınızı okuyup soruyu cevaplar. Her yanıt kaynak evraka atıflı: (Bkz: Dilekçe − 12.03.2025).',
      visual: <ChatVisual/> },
    { span: 'feat', kicker: '04 / karar', title: 'Agentic karar arama', desc: 'Tüm yargı birimlerini eş zamanlı tarayan ajan. Tez bazlı lehinize-aleyhine değerlendirme ile içtihat raporu üretir.',
      visual: <KararVisual/> },
    { span: 'feat', kicker: '05 / imza', title: 'Otomatik UDF imzası', desc: 'USB e-imza ofis ağında paylaşılır. Dilekçe yüklendiğinde agent arka planda UYAP standardındaki e-imzayı otomatik üretir.',
      visual: <ImzaVisual/> },
  ];

  return (
    <section className="section container" id="features">
      <div className="section-head">
        <span className="kicker">tek platform — beş modül</span>
        <h2>Hukuk büronuzun çalışma tezgâhı, baştan sona</h2>
        <p className="lede">Dava kabulünden nihai karara kadar; evrak, iş, duruşma, içtihat ve imza akışlarının hepsi tek bir arayüzde. Her modül tek başına çalışır, birlikte ise bir sistemdir.</p>
      </div>

      <div className="features-grid">
        {items.map((it,i) => (
          <div key={i} className={`feat ${it.span}`}>
            <div className="feat-icon">
              <FeatIcon idx={i}/>
            </div>
            <span className="mono" style={{fontSize:10}}>{it.kicker}</span>
            <h3>{it.title}</h3>
            <p>{it.desc}</p>
            <div className="feat-visual">{it.visual}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function FeatIcon({idx}) {
  const svgs = [
    <svg key="0" width="18" height="18" 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>,
    <svg key="1" width="18" height="18" 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>,
    <svg key="2" width="18" height="18" 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>,
    <svg key="3" width="18" height="18" viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="1.5"/><path d="M21 21l-4.3-4.3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>,
    <svg key="4" width="18" height="18" 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"/><path d="M9 12l2 2 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>,
  ];
  return svgs[idx];
}

function DosyaVisual() {
  return (
    <div style={{border:'1px solid var(--line-2)', borderRadius:8, overflow:'hidden', background:'var(--bg-elev)'}}>
      {[
        {n:'2024/3312', t:'Müvekkil A', s:'İş Davası', a:'İstinaf', c:'var(--accent-hover)'},
        {n:'2024/442',  t:'Müvekkil B', s:'Tazminat', a:'Bilirkişi', c:'var(--bordo)'},
        {n:'2023/1184', t:'Müvekkil C', s:'Ticari',   a:'Duruşma',  c:'var(--olive)'},
      ].map((r,i) => (
        <div key={i} style={{display:'grid',gridTemplateColumns:'auto 1fr auto auto',gap:10,padding:'11px 14px',borderBottom: i<2 ? '1px solid var(--line)':'none',fontSize:12.5,alignItems:'center'}}>
          <div style={{fontFamily:'var(--font-mono)',fontSize:10,color:'var(--ink-dim)',letterSpacing:'0.02em'}}>{r.n}</div>
          <div style={{fontWeight:600,color:'var(--ink)'}}>{r.t}</div>
          <span className="dash-pill">{r.s}</span>
          <span className="dash-pill" style={{background:'transparent',color:r.c,borderColor:r.c}}>{r.a}</span>
        </div>
      ))}
    </div>
  );
}

function UyapVisual() {
  return (
    <div style={{background:'var(--bg-elev)',border:'1px solid var(--line-2)',borderRadius:8,padding:'14px 16px',fontFamily:'var(--font-mono)',fontSize:11.5,color:'var(--ink-mute)',lineHeight:1.75}}>
      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:8,paddingBottom:8,borderBottom:'1px solid var(--line)'}}>
        <span className="live-dot"></span>
        <span style={{fontSize:10,textTransform:'uppercase',letterSpacing:'0.08em',color:'var(--ink-dim)'}}>Titan Agent · ofis PC</span>
      </div>
      <div>→ <span style={{color:'var(--ink)'}}>2024/3312</span> · evrak indirildi <span style={{color:'var(--olive)'}}>✓</span></div>
      <div>→ OCR · chunking tamamlandı <span style={{color:'var(--olive)'}}>✓</span></div>
      <div>→ Taraflar: <span style={{color:'var(--ink)'}}>müvekkil</span> · <span style={{color:'var(--ink)'}}>karşı taraf</span> eşleşti</div>
      <div>→ Duruşma: tebliğ <span style={{color:'var(--bordo)'}}>yeni</span></div>
    </div>
  );
}

function ChatVisual() {
  return (
    <div style={{background:'var(--bg-elev)',border:'1px solid var(--line-2)',borderRadius:8,padding:'12px 14px',fontSize:12.5,lineHeight:1.6,display:'flex',flexDirection:'column',gap:8}}>
      <div style={{display:'flex',gap:8}}>
        <div style={{fontFamily:'var(--font-mono)',fontSize:10,color:'var(--ink-dim)',minWidth:32}}>sen</div>
        <div style={{color:'var(--ink-body)'}}>Karşı taraf harç yatırmış mı?</div>
      </div>
      <div style={{display:'flex',gap:8}}>
        <div style={{fontFamily:'var(--font-mono)',fontSize:10,color:'var(--bordo)',minWidth:32,fontWeight:600}}>Titan</div>
        <div style={{color:'var(--ink)'}}>Evet, 12.03.2025 tarihli makbuz. 4.280 TL. <span style={{color:'var(--accent-hover)',fontStyle:'italic'}}>(Bkz: Harç Makbuzu)</span></div>
      </div>
    </div>
  );
}

function KararVisual() {
  const dbs = [
    {n:'Yargıtay', c:'yuksek'},
    {n:'BAM HK', c:'yuksek'},
    {n:'Danıştay', c:'yuksek'},
    {n:'Rekabet', c:'kurum'},
    {n:'Anayasa', c:'yuksek'},
    {n:'KVKK', c:'kurum'},
    {n:'Sayıştay', c:'yuksek'},
  ];
  const colorMap = {
    yuksek: {bg: 'rgba(184,134,11,0.14)', c: 'var(--accent-hover)', bd: 'var(--accent-soft)'},
    kurum:  {bg: 'var(--bordo-dim)', c: 'var(--bordo)', bd: 'rgba(114,47,55,0.25)'},
  };
  return (
    <div style={{display:'flex',flexWrap:'wrap',gap:6}}>
      {dbs.map((d,i) => {
        const col = colorMap[d.c];
        return <span key={i} className="dash-pill" style={{background:col.bg,color:col.c,borderColor:col.bd}}>{d.n}</span>;
      })}
      <span className="dash-pill">+7</span>
    </div>
  );
}

function ImzaVisual() {
  return (
    <div style={{fontFamily:'var(--font-mono)',fontSize:11,color:'var(--ink-mute)',lineHeight:1.8,background:'var(--bg-elev)',border:'1px solid var(--line-2)',borderRadius:8,padding:'12px 14px'}}>
      <div>→ dilekçe.udf · <span style={{color:'var(--ink)'}}>yüklendi</span></div>
      <div>→ hash hesaplandı <span style={{color:'var(--olive)'}}>✓</span></div>
      <div>→ e-imza üretildi <span style={{color:'var(--olive)'}}>✓</span></div>
      <div>→ UYAP'a iletildi · <span style={{color:'var(--accent-hover)'}}>200 OK</span></div>
    </div>
  );
}

window.Features = Features;