function Features() {
  const items = [
    { span: 'feat', kicker: '01 / dosya',   title: 'Dosya yönetimi',   desc: 'Müvekkil, karşı taraf, duruşma, masraf, tahsilat ve evrak — tek dosya altında, kayıpsız.',
      visual: <DosyaVisual/> },
    { span: 'feat', kicker: '02 / iş',      title: 'İş takibi',         desc: 'Cevap → bilirkişi → duruşma. Bir iş biter, zincirin sonraki halkası otomatik düşer.',
      visual: <IsTakibiVisual/> },
    { span: 'feat', kicker: '03 / takvim',  title: 'Takvim',            desc: 'Aylık, haftalık, günlük görünüm. Görevi başka güne sürükle-bırak, sebebini gir.',
      visual: <TakvimVisual/> },
    { span: 'feat', kicker: '04 / uyap',    title: 'UYAP entegrasyonu', desc: 'Titan Agent ofis ağında oturum havuzu yönetir. Evrak indirme, OCR, e-imza arka planda.',
      visual: <UyapVisual/> },
    { span: 'feat', kicker: '05 / ai',      title: 'AI modülleri',      desc: 'Karar Arama V3, Tez Doğrulama, dosya bazlı sohbet — atıflı yanıt, halüsinasyon yok.',
      visual: <KararVisual/> },
    { span: 'feat', kicker: '06 / yönetim', title: 'Bütçe & roller',    desc: 'Aylık AI bütçesi, üç katmanlı rol sistemi, denetim kayıtları — kontrol sende.',
      visual: <YonetimVisual/> },
  ];

  return (
    <section className="section container" id="features">
      <div className="section-head">
        <span className="kicker">tek platform — altı modül</span>
        <h2>Hukuk büronuzun çalışma tezgâhı, baştan sona</h2>
        <p className="lede">Dava kabulünden nihai karara kadar; dosya, iş, takvim, UYAP, AI ve yönetim 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>

      {/* "Tüm özellikleri gör" — features.html'e link */}
      <div className="features-all-link">
        <a href="/features.html">
          Tüm 30 özelliği gör
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
            <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </a>
      </div>
    </section>
  );
}

function FeatIcon({idx}) {
  // 6 kart için 6 icon — sırasıyla: dosya, iş zinciri, takvim, UYAP (globe),
  // AI (search/sparkle), yönetim (shield+chart)
  const svgs = [
    // 0 — dosya (folder)
    <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>,
    // 1 — iş takibi (check-circle chain)
    <svg key="1" width="18" height="18" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.5"/><path d="M9 12l2 2 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>,
    // 2 — takvim
    <svg key="2" width="18" height="18" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="1.5"/><path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>,
    // 3 — UYAP (globe)
    <svg key="3" 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>,
    // 4 — AI (sparkle)
    <svg key="4" width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 3l1.7 5.2L19 10l-5.3 1.8L12 17l-1.7-5.2L5 10l5.3-1.8L12 3z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/></svg>,
    // 5 — yönetim (shield)
    <svg key="5" 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" strokeLinejoin="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>
  );
}

function IsTakibiVisual() {
  const items = [
    { d: '12.03', s: 'done',   t: 'Cevap dilekçesi sunuldu' },
    { d: '24.03', s: 'done',   t: 'Bilirkişi raporu talep' },
    { d: '08.04', s: 'done',   t: 'Rapor tebliğ alındı' },
    { d: '15.04', s: 'active', t: 'İtiraz dilekçesi hazırla' },
  ];
  return (
    <div style={{background:'var(--bg-elev)',border:'1px solid var(--line-2)',borderRadius:8,padding:'12px 14px'}}>
      <div style={{fontSize:10,color:'var(--ink-dim)',letterSpacing:'0.08em',textTransform:'uppercase',marginBottom:8}}>Cevap dilekçesi · zincir</div>
      {items.map((it,i) => (
        <div key={i} style={{display:'flex',alignItems:'center',gap:10,padding:'4px 0',fontSize:12,color: it.s === 'done' ? 'var(--ink-dim)' : 'var(--ink)'}}>
          <span style={{fontFamily:'var(--font-mono)',fontSize:9,color:'var(--ink-dim)',minWidth:30}}>{it.d}</span>
          <span style={{
            width:8,height:8,borderRadius:'50%',
            background: it.s === 'done' ? 'var(--olive)' : 'var(--accent)',
            flexShrink:0,
            boxShadow: it.s === 'active' ? '0 0 0 3px rgba(59,130,246,0.18)' : 'none',
          }}/>
          <span style={{textDecoration: it.s === 'done' ? 'line-through' : 'none', fontWeight: it.s === 'active' ? 600 : 400}}>{it.t}</span>
        </div>
      ))}
    </div>
  );
}

function TakvimVisual() {
  return (
    <div style={{background:'var(--bg-elev)',border:'1px solid var(--line-2)',borderRadius:8,padding:8}}>
      <div style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)',fontSize:8,color:'var(--ink-dim)',textTransform:'uppercase',letterSpacing:'0.08em',textAlign:'center',marginBottom:4}}>
        {['Pzt','Sal','Çar','Per','Cum','Cmt','Paz'].map(d => <div key={d}>{d}</div>)}
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)',gap:1,background:'var(--line-2)',border:'1px solid var(--line-2)'}}>
        {Array.from({length:21},(_,i) => {
          const today = i === 9;
          const hasHearing = [3,12,18].includes(i);
          const hasTask = [5,7,14].includes(i);
          return (
            <div key={i} style={{background: today ? 'rgba(59,130,246,0.12)' : 'var(--bg-elev)', minHeight:30, padding:'3px 4px', position:'relative'}}>
              <div style={{fontFamily:'var(--font-mono)',fontSize:9,color: today ? 'var(--accent)' : 'var(--ink-dim)',fontWeight: today ? 700 : 400}}>{(i % 30) + 1}</div>
              {hasHearing && <div style={{position:'absolute',bottom:3,left:4,right:4,height:3,background:'var(--bordo)',borderRadius:2}}/>}
              {hasTask && <div style={{position:'absolute',bottom:8,left:4,right:4,height:3,background:'var(--accent)',borderRadius:2}}/>}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function YonetimVisual() {
  return (
    <div style={{background:'var(--bg-elev)',border:'1px solid var(--line-2)',borderRadius:8,padding:'12px 14px'}}>
      <div style={{fontSize:10,color:'var(--ink-dim)',letterSpacing:'0.08em',textTransform:'uppercase',marginBottom:6}}>YZ Bakiyesi</div>
      <div style={{display:'flex',alignItems:'baseline',gap:6,marginBottom:8}}>
        <span style={{fontSize:18,fontWeight:700,color:'var(--ink)'}}>$24.50</span>
        <span style={{fontSize:10,color:'var(--ink-mute)'}}>/ $30</span>
      </div>
      <div style={{height:5,borderRadius:3,background:'var(--bg-deep)',overflow:'hidden',marginBottom:10}}>
        <div style={{height:'100%',width:'82%',background:'var(--warn)',borderRadius:3}}/>
      </div>
      <div style={{display:'flex',gap:4,flexWrap:'wrap'}}>
        {['Admin','Yönetici','Avukat'].map((r,i) => (
          <span key={i} className="dash-pill" style={{fontSize:9,padding:'2px 6px'}}>{r}</span>
        ))}
      </div>
    </div>
  );
}

window.Features = Features;