function Pricing() {
  const tiers = [
    {
      name: 'Başlangıç',
      desc: 'Bireysel avukatlar ve küçük bürolar için.',
      price: 'Talep üzerine',
      unit: '',
      featured: false,
      feats: [
        'Dosya, iş, duruşma, masraf yönetimi',
        'UYAP entegrasyonu + OCR (Titan Agent ile)',
        'Dosya bazlı AI sohbet (ayda 500 mesaj)',
        '100 GB evrak alanı',
        'E-posta destek',
      ],
      cta: 'Demo talep et',
    },
    {
      name: 'Profesyonel',
      desc: 'Orta-büyük bürolar için.',
      price: 'Talep üzerine',
      unit: '',
      featured: true,
      feats: [
        'Başlangıç paketindeki her şey',
        'Agentic Karar Arama — tüm yargı birimleri, sınırsız',
        'UYAP Otomatik İmza Agent (5 oturum)',
        'Sınırsız AI sohbet + uzun yanıt desteği',
        '1 TB evrak alanı · öncelikli OCR',
        'Telefon + WhatsApp destek',
      ],
      cta: 'Demo talep et',
    },
    {
      name: 'Kurumsal',
      desc: 'On-prem kurulum, SLA, özel entegrasyonlar.',
      price: 'Özel teklif',
      unit: '',
      featured: false,
      feats: [
        'Profesyonel paketteki her şey',
        'Şirket içi (on-prem) kurulum',
        'Özel model seçimi (Claude / Gemini / açık kaynak)',
        'Kurumsal kimlik doğrulama (SSO / LDAP) ve rol bazlı yetki',
        'SLA öncelikli destek + atanmış başarı yöneticisi',
        'Özel şablon ve dilekçe entegrasyonu',
      ],
      cta: 'İletişime geç',
    },
  ];

  return (
    <section className="section container" id="pricing">
      <div className="section-head">
        <span className="kicker">fiyatlandırma</span>
        <h2>Her ölçekteki büroya uygun</h2>
        <p className="lede">Demo talep edin, büronuzda deneyin. İptali her zaman yapabilirsiniz.</p>
      </div>
      <div className="price-grid">
        {tiers.map((t,i) => (
          <div key={i} className={'price ' + (t.featured ? 'price-featured' : '')}>
            {t.featured && <span className="price-featured-tag">En popüler</span>}
            <div>
              <div className="price-name">{t.name}</div>
              <div className="price-desc" style={{marginTop:6}}>{t.desc}</div>
            </div>
            <div className="price-amount">
              <span className="price-amount-num">{t.price}</span>
              <span className="price-amount-unit">{t.unit}</span>
            </div>
            <ul className="price-list">
              {t.feats.map((f,j) => (
                <li key={j}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  {f}
                </li>
              ))}
            </ul>
            <a href="#demo" className={'btn price-btn ' + (t.featured ? 'btn-primary' : 'btn-ghost')}>{t.cta}</a>
          </div>
        ))}
      </div>
    </section>
  );
}
window.Pricing = Pricing;