const { useEffect, useMemo, useRef, useState } = React;

const site = {
  name: 'Ebeo CRM',
  email: 'iletisim@zumresoft.com',
  phone: '05417141304',
  logo: '/ebeo-crm-logo-wide.png',
  companyLegalName: 'ZÜMRE SOFT YAZILIM HİZMETLERİ LTD. ŞTİ.',
  address: 'Teknopark, İvedik OSB, 2224. Cd. No:116/1, 06378 Yenimahalle/Ankara',
  mapsUrl: 'https://www.google.com/maps/place//data=!4m2!3m1!1s0x14d34bc417093dab:0x64977de3f37259c8?sa=X&ved=1t:8290&ictx=111'
};

const routes = {
  '/': { title: 'CRM Yazılımı ve Müşteri Takip Programı | Ebeo CRM', description: 'Ebeo CRM ile müşteri, satış, teklif, görev, saha rota ve sözleşme süreçlerini tek panelde yönetin. KOBİ’ler için 14 gün ücretsiz CRM yazılımı.', keywords: 'crm, crm yazılımı, müşteri takip programı, satış takip programı, teklif programı' },
  '/ozellikler': { title: 'CRM Özellikleri', description: 'Müşteri 360, teklif yönetimi, görev kanban, sosyal akış, rol yönetimi, toplu mail ve raporlama özellikleri.' },
  '/moduller': { title: 'CRM Modülleri', description: 'Müşteri, teklif, sözleşme, görev, aktivite, belge yönetimi, mail, rol ve raporlama modülleri.' },
  '/fiyatlandirma': { title: 'Fiyatlandırma', description: 'Ebeo CRM tek paket fiyatlandırması: aylık 30 USD veya yıllık ödeme avantajıyla aylık 20 USD.' },
  '/hakkimizda': { title: 'Hakkımızda', description: 'Ebeo CRM, işletmelerin müşteri ve satış operasyonlarını ölçülebilir hale getiren modern CRM platformudur.' },
  '/blog': { title: 'CRM, ERP ve Dijital Dönüşüm Blogu | Ebeo', description: 'CRM yazılımı, ERP, üretim takibi, teklif hazırlama, müşteri yönetimi ve dijital dönüşüm için kaynaklı, güncel ve uygulanabilir rehberler.' },
  '/crm-yazilimi': { title: 'CRM Yazılımı Nedir? Satış ve Müşteri Yönetimi | Ebeo', description: 'CRM yazılımı ile müşteri bilgilerini, satış fırsatlarını, teklifleri, görevleri ve raporları tek merkezde yönetin. Ebeo CRM’i 14 gün deneyin.', keywords: 'crm yazılımı, crm programı, saas crm, b2b crm, kobi crm' },
  '/musteri-takip-programi': { title: 'Müşteri Takip Programı ve Müşteri Yönetimi | Ebeo CRM', description: 'Firma rehberi, iletişim geçmişi, müşteri 360, takip tarihi, görev, teklif ve belge kayıtlarını tek müşteri takip programında birleştirin.', keywords: 'müşteri takip programı, müşteri yönetimi, müşteri kayıt programı, firma takip programı' },
  '/satis-takip-programi': { title: 'Satış Takip Programı ve Fırsat Yönetimi | Ebeo CRM', description: 'Satış fırsatlarını aşamalara ayırın; sorumlu kullanıcı, tahmini tutar, teklif, görev ve dönüşüm raporlarını tek satış takip programında yönetin.', keywords: 'satış takip programı, satış yönetimi, fırsat yönetimi, satış crm' },
  '/teklif-hazirlama-programi': { title: 'Teklif Hazırlama Programı | TL, USD, EUR ve PDF | Ebeo', description: 'TL, USD ve EUR destekli profesyonel teklif hazırlayın; ürün, KDV, şablon, PDF, ödeme ve sözleşme akışını tek ekrandan yönetin.', keywords: 'teklif hazırlama programı, teklif programı, online teklif hazırlama, teklif takip programı' },
  '/haritadan-musteri-bulma': { title: 'Haritadan Müşteri Bulma ve Satış Rotası Oluşturma | Ebeo', description: 'İl, ilçe ve sektöre göre potansiyel firmaları haritada keşfedin; seçtiğiniz müşteriler için konuma göre satış ziyaret rotası oluşturun.', keywords: 'haritadan müşteri bulma, potansiyel müşteri bulma, saha satış rotası, müşteri haritası' },
  '/iletisim': { title: 'Sizi Arayalım', description: 'Ebeo CRM için iletişim bilgilerinizi bırakın, Zümre Soft ekibi sizi arasın.' },
  '/kullanim-sozlesmesi': { title: 'Kullanım Sözleşmesi', description: 'Ebeo CRM kullanım koşulları ve Zümre Soft Yazılım Hizmetleri hizmet şartları.' },
  '/teslimat-iade-sartlari': { title: 'Teslimat ve İade Şartları', description: 'Ebeo CRM dijital hizmet teslimatı, deneme süreci, iptal ve iade şartları.' },
  '/gizlilik-sozlesmesi': { title: 'Gizlilik Sözleşmesi', description: 'Ebeo CRM kullanıcı verileri, gizlilik, güvenlik ve kişisel veri işleme prensipleri.' },
  '/mesafeli-satis-sozlesmesi': { title: 'Mesafeli Satış Sözleşmesi', description: 'Ebeo CRM abonelik ve dijital hizmet satışına ilişkin mesafeli satış sözleşmesi.' }
};

const solutionPages = {
  '/crm-yazilimi': {
    eyebrow: 'CRM Yazılımı',
    title: 'Satış ekibinizin dağınık bilgisini tek bir müşteri hafızasında birleştirin.',
    lead: 'Ebeo CRM; müşteri kartlarını, satış fırsatlarını, teklifleri, görevleri, aktiviteleri, sözleşmeleri ve raporları firma bazlı güvenli bir çalışma alanında buluşturur.',
    intent: 'CRM yazılımı arayan işletmeler için',
    benefits: [['users','Müşteri 360','Kişiler, görüşmeler, teklifler, fırsatlar, görevler ve belgeler aynı müşteri kartında görünür.'],['chart','Satış görünürlüğü','Fırsat aşamaları, beklenen tutar ve gerçek teklif hareketleri raporlanabilir hale gelir.'],['shield','Firma bazlı güvenlik','Kullanıcı, rol ve işlem yetkileriyle her ekip yalnızca erişmesi gereken alanlarda çalışır.']],
    sections: [
      ['CRM yazılımı neyi çözer?', 'Elektronik tablolar, kişisel notlar ve dağınık mesajlaşmalar müşteri bilgisini kişilerde bırakır. CRM yazılımı bu bilgiyi şirkete ait, aranabilir ve ölçülebilir bir hafızaya dönüştürür. Satış temsilcisi değişse bile görüşme geçmişi, teklif durumu ve sonraki adım kaybolmaz.'],
      ['Ebeo CRM hangi süreçleri birleştirir?', 'Müşteri ve firma rehberi, iletişim kayıtları, satış fırsatları, teklif yaşam döngüsü, görev kanbanı, aktivite takvimi, sözleşmeler, dijital arşiv, bildirimler ve raporlar aynı veri düzeninde çalışır. Böylece aynı bilgi farklı ekranlara tekrar tekrar girilmez.'],
      ['KOBİ ve kurumsal ekipler için ölçeklenebilir yapı', 'Firma bazlı veri ayrımı, rol ve yetki yönetimi, ekip atamaları ve merkezi bildirim yapısı sayesinde küçük bir satış ekibiyle başlayıp süreç büyüdükçe kontrollü biçimde genişleyebilirsiniz.']
    ],
    faqs: [['CRM yazılımı kimler için uygundur?','Müşteri ilişkisi, teklif, satış takibi veya ekip görevi yöneten KOBİ, ajans, danışmanlık, üretim ve hizmet firmaları için uygundur.'],['CRM kurulumu uzun sürer mi?','Ebeo CRM web üzerinden çalışır. Firma hesabı açıldıktan sonra müşteri, ürün ve kullanıcı kayıtlarıyla temel akış hemen kurulabilir.'],['Veriler firmalara göre ayrılır mı?','Evet. Her firma kendi müşteri, teklif, görev, belge ve kullanıcı verileriyle çalışır.'],['Mobil cihazdan kullanılabilir mi?','Responsive web arayüzü telefon, tablet ve masaüstü ekranlara uyum sağlar.'],['Ücretsiz deneyebilir miyim?','Evet. Ebeo CRM 14 günlük ücretsiz deneme süreci sunar.']]
  },
  '/musteri-takip-programi': {
    eyebrow: 'Müşteri Takip Programı',
    title: 'Her müşterinin kim olduğunu, ne konuşulduğunu ve sırada ne olduğunu bilin.',
    lead: 'Firma rehberi, yetkili kişiler, iletişim notları, takip tarihleri, teklifler, görevler ve belgeler tek müşteri detayında kronolojik olarak ilerler.',
    intent: 'Müşteri bilgisini düzenlemek isteyen ekipler için',
    benefits: [['users','Firma ve kişi rehberi','Yetkili kişi, görev, birim, telefon, e-posta ve WhatsApp bilgilerini firmaya bağlı yönetin.'],['calendar','Takip tarihleri','Görüşme notuna takip tarihi ekleyin; yaklaşan iletişimleri ve görevleri kaçırmayın.'],['folder','Tek müşteri dosyası','Teklif, sözleşme, belge, fırsat ve aktivite kayıtlarını ilgili müşteriyle ilişkilendirin.']],
    sections: [['Müşteri takip programı neden gereklidir?','Müşterinin son aramasını, gönderilen teklifi veya beklenen geri dönüşü yalnızca bir çalışanın bilmesi operasyonel risk oluşturur. Merkezi takip yapısı, her yetkili kullanıcının güncel ve izin verilen bilgiye ulaşmasını sağlar.'],['Müşteri 360 görünümü nasıl çalışır?','Ebeo CRM müşteri detayında zaman akışı, genel bilgiler, iletişim kayıtları, fırsatlar, teklifler, görevler, ödemeler, belgeler ve rehber sekmelerini aynı kayıt altında toplar.'],['Doğru raporlama için standart veri','Şehir ve ilçe seçimleri, etiketler, müşteri kaynağı ve sorumlu kullanıcı gibi standart alanlar; filtreleme ve raporlamanın serbest metne göre daha güvenilir olmasını sağlar.']],
    faqs: [['Müşteri kartına birden fazla kişi eklenebilir mi?','Evet. Aynı firmaya birden fazla yetkili kişi, departman ve iletişim bilgisi eklenebilir.'],['Görüşmeler kaydedilebilir mi?','Evet. Kanal, görüşülen kişi, konu, not, iletişim tarihi ve takip tarihi kaydedilebilir.'],['Müşteri kayıtları filtrelenebilir mi?','İsim, tarih, etiket, şehir ve ilgili alanlara göre arama ve filtreleme yapılabilir.'],['Teklif oluştururken müşteri otomatik gelir mi?','Müşteri detayından başlayan teklif, görev ve ödeme işlemlerinde ilgili müşteri otomatik seçilebilir.'],['Silinen müşteri geri alınabilir mi?','Soft delete uygulanan kayıtlar merkezi çöp kutusundan yetki dahilinde geri yüklenebilir.']]
  },
  '/satis-takip-programi': {
    eyebrow: 'Satış Takip Programı',
    title: 'Satış fırsatlarını tahminden çıkarın, net aşamalar ve sorumlularla yönetin.',
    lead: 'Müşteri içinden açılan fırsatları satış sürecine bağlayın; aşama, kapanış tarihi, para birimi, sorumlu kullanıcı ve teklif hareketlerini birlikte izleyin.',
    intent: 'Satış sürecini ölçmek isteyen ekipler için',
    benefits: [['target','Aşama bazlı takip','İlk görüşmeden kazanıldı veya kaybedildi sonucuna kadar süreci firma ihtiyacına göre yönetin.'],['users','Net sorumluluk','Fırsatı oluşturan ve yöneten kullanıcı sistem hesabından belirlenir; elle yazılan temsilci bilgisine bağlı kalmaz.'],['chart','Dönüşüm raporları','Açık fırsat, teklif, kazanılan satış ve kullanıcı performansını gerçek kayıtlardan izleyin.']],
    sections: [['Satış takip programı nasıl çalışır?','Her satış ihtimali ilgili müşteri altında fırsat olarak açılır. Fırsat, seçilen satış sürecinin aşamalarında ilerler; sorumlu, beklenen kapanış, tahmini tutar ve para birimi kayıt altında tutulur.'],['Pipeline yerine anlaşılır satış aşamaları','Ebeo CRM kullanıcıya teknik terimler dayatmak yerine satış süreci ve aşama yönetimini anlaşılır Türkçe etiketlerle sunar. Firma kendi aşamalarını, renklerini ve kazanma olasılıklarını yönetebilir.'],['Fırsattan teklife kesintisiz geçiş','Satış ihtiyacı netleştiğinde müşteri ve sorumlu bilgileri korunarak teklif oluşturulur. Teklifin gönderilmesi, faturalandırılması ve ödeme kayıtları satış görünümüne bağlanır.']],
    faqs: [['Satış aşamalarını değiştirebilir miyim?','Evet. Firma kendi satış sürecini ve aşamalarını yönetebilir.'],['Fırsat tutarı dövizli olabilir mi?','TRY, USD ve EUR para birimleriyle tahmini tutar kaydedilebilir.'],['Satış temsilcisi nasıl belirlenir?','İşlemi yapan veya atanan sistem kullanıcısı kayıtla ilişkilendirilir.'],['Kazanıldı ve kaybedildi ne anlama gelir?','Kazanıldı satışın olumlu sonuçlandığını, kaybedildi ise fırsatın satışa dönüşmeden kapandığını belirtir.'],['Fırsatlar müşteri kartında görünür mü?','Evet. Fırsatlar ilgili müşterinin detay ekranında ayrı sekmede görüntülenir.']]
  },
  '/teklif-hazirlama-programi': {
    eyebrow: 'Teklif Hazırlama Programı',
    title: 'Döviz, KDV, ürün ve şablon hesaplarını tek teklif ekranında doğru yönetin.',
    lead: 'Teklif kalemlerini kendi para biriminde girin; ara tutar, KDV ve genel toplamı izleyin, profesyonel şablonla önizleyin ve PDF çıktısını müşterinizle paylaşın.',
    intent: 'Hızlı ve tutarlı teklif hazırlamak isteyen firmalar için',
    benefits: [['file','Profesyonel şablonlar','Farklı görsel düzene sahip hazır şablonlardan seçim yapın ve varsayılan tasarımınızı belirleyin.'],['chart','TRY, USD ve EUR','Birim fiyatı teklif para biriminde girin; gerekirse güncel TCMB kuru üzerinden TL veya döviz karşılığını gösterin.'],['contract','Tekliften sözleşmeye','Onaylanan tekliften müşteri ve kalem bilgilerini koruyarak sözleşme oluşturun.']],
    sections: [['Teklif hazırlama sürecinde standartlaşma','Farklı çalışanların farklı dosya ve hesap yöntemleri kullanması fiyat hatasına ve marka tutarsızlığına yol açar. Merkezi ürün kataloğu, vergi oranı, para birimi ve şablonlar aynı standardı korur.'],['Dövizli tekliflerde doğru hesaplama','Ebeo CRM teklif ve kalem para birimlerini açık biçimde gösterir. Ara tutar, KDV tutarı ve genel toplam aynı para birimi mantığında hesaplanır; önizleme ve yazdırma çıktısı kayıtla tutarlı kalır.'],['Teklif yaşam döngüsü','Taslak, gönderildi, satışa dönüştü, faturalandı ve ödeme alındı adımları gerektiğinde ileri veya geri yönetilebilir. Fatura dosyası ve ödeme kaydı ilgili teklife bağlı tutulur.']],
    faqs: [['Teklifte ürün kataloğu kullanmak zorunlu mu?','Hayır. Katalogdaki ürün seçilebilir veya yeni kalem girilip istenirse kataloğa eklenebilir.'],['KDV hesaplanıyor mu?','Evet. Ara tutar, KDV tutarı ve genel toplam ayrı gösterilir.'],['Teklif PDF olarak alınabilir mi?','Evet. Seçilen şablonla önizleme ve PDF/yazdırma çıktısı oluşturulabilir.'],['Teklifte ilgili kişi seçilebilir mi?','Evet. Seçilen müşterinin firma rehberindeki kişiler teklif ile ilişkilendirilebilir.'],['Tekliften sözleşme oluşur mu?','Evet. Teklif detayından bağlı sözleşme oluşturulabilir.']]
  },
  '/haritadan-musteri-bulma': {
    eyebrow: 'Haritadan Müşteri Bulma',
    title: 'Potansiyel firmaları haritada keşfedin, seçin ve saha ziyaret rotasına dönüştürün.',
    lead: 'İl, ilçe, sektör ve sonuç sayısına göre firma arayın; çoklu seçim yapın ve konumunuza en yakın duraktan başlayacak satış rotası oluşturun.',
    intent: 'Saha satışı ve yeni müşteri keşfi yapan ekipler için',
    benefits: [['search','Bölgesel firma keşfi','Şehir, ilçe ve sektör kriterlerini birlikte kullanarak hedef bölgedeki işletmeleri araştırın.'],['map','Çoklu rota planı','Seçilen firmaları tahmini mesafe ve süreye göre sıralayıp ziyaret planı oluşturun.'],['users','CRM’e aday ekleme','Uygun firmaları müşteri havuzuna taşıyarak teklif, görev ve iletişim sürecini başlatın.']],
    sections: [['Haritadan müşteri bulma ne sağlar?','Saha ekibinin rastgele bölge gezmesi yerine hedef sektör ve lokasyona odaklanmasını sağlar. Harita sonucu, müşteri kaydı ve ziyaret planı arasında kesintisiz bir iş akışı kurulur.'],['Doğru bölge ve sektör eşleşmesi','Şehir seçimine bağlı ilçe listesi ve sektör kriterleri aramayı daraltır. Sonuçların doğruluğu ve kapsamı kullanılan harita sağlayıcısının güncel işletme verilerine bağlıdır.'],['En yakından uzağa rota','Kullanıcı birden fazla firmayı seçebilir. Rota paneli başlangıç konumuna göre durakları süre ve mesafe bilgileriyle sıralayarak saha gününün planlanmasını kolaylaştırır.']],
    faqs: [['Harita sonuçları nereden gelir?','İşletme sonuçları entegre harita sağlayıcısının güncel yer verilerinden alınır.'],['İlçe ve sektör birlikte seçilebilir mi?','Evet. Şehir, ilçe, sektör ve sonuç sayısı birlikte kullanılabilir.'],['Birden fazla firma seçilebilir mi?','Evet. Kullanıcı uygun gördüğü firmaları çoklu seçebilir.'],['Rota hangi sırayla oluşturulur?','Rota, başlangıç konumuna göre süre ve mesafe değerlendirilerek en uygun ziyaret sırasına dönüştürülür.'],['Bulduğum firmayı CRM’e ekleyebilir miyim?','Evet. Seçilen işletme müşteri veya potansiyel müşteri sürecine alınabilir.']]
  }
};


const crmAppBaseUrl = (() => {
  const isLocalLanding = ['localhost', '127.0.0.1'].includes(window.location.hostname);
  if (isLocalLanding) return 'http://localhost:5086';
  const configured = window.EBEO_CRM_APP_URL || '';
  if (configured) return configured.replace(/\/$/, '');
  return 'https://app.ebeocrm.com';
})();

const turnstileSiteKey = (() => {
  const configured = String(window.EBEO_TURNSTILE_SITE_KEY || '').trim();
  if (configured) return configured;
  return ['localhost', '127.0.0.1'].includes(window.location.hostname)
    ? '1x00000000000000000000AA'
    : '';
})();

function openCrmRoute(path) {
  const route = path.startsWith('/') ? path : `/${path}`;
  window.location.href = `${crmAppBaseUrl}${route}`;
}

const nav = [
  ['Ana Sayfa', '/'],
  ['Özellikler', '/ozellikler'],
  ['Modüller', '/moduller'],
  ['Fiyatlandırma', '/fiyatlandirma'],
  ['Blog', '/blog']
];

const realFeatures = [
  ['Haritadan Müşteri Bulma', 'Google Maps altyapısına hazır müşteri haritası ile il, ilçe ve sektöre göre firma keşfi yapın; seçtiğiniz firmaları potansiyel müşteri akışına taşıyın.', 'search'],
  ['Akıllı Rota Oluşturma', 'Seçilen firmaları kullanıcının konumuna en yakından uzağa doğru sıralayın; saha ziyaretlerini rota ve süre bilgisiyle planlayın.', 'map'],
  ['Müşteri 360 Pro+', 'Firma kartında kişiler, iletişim geçmişi, teklifler, fırsatlar, görevler, belgeler, etiketler ve notlar tek ekranda birleşir.', 'users'],
  ['Teklif ve Döviz Yönetimi', 'TL, USD ve EUR fiyatları güncel kurla hesaplayın; efektif veya döviz satış seçeneğiyle teklif önizlemesine yansıtın.', 'file'],
  ['Tek Tıkla Sözleşme', 'Onaylanan tekliften sözleşme oluşturun; şablon, PDF, imza alanı, versiyon geçmişi ve bağlı teklif akışıyla profesyonel ilerleyin.', 'contract'],
  ['Görev Kanban ve Atama', 'Görevleri şirket içindeki kullanıcılara atayın, kanban üzerinde takip edin, vade ve hatırlatma zamanı geldiğinde bildirim alın.', 'kanban'],
  ['Sosyal Akış ve Etkileşim', 'Firma içinde yapılan işler haber akışına düşer; kullanıcılar paylaşım yapabilir, emoji kullanabilir, yorum ve beğeni bırakabilir.', 'spark'],
  ['Toplu Mail Tasarımcısı', 'HTML bilmeden sürükle-bırak mail şablonu hazırlayın; müşteri veya çalışan gruplarına hedefli toplu mail gönderin.', 'mail'],
  ['Rol, Ekip ve Yetki Kontrolü', 'Aktif sayfalara göre rol tanımlayın, kullanıcı yetkilerini yönetin ve aynı rol setini başka kullanıcıya kolayca kopyalayın.', 'shield'],
  ['Dijital Arşiv ve Belge Yönetimi', 'Firma bazlı klasör ve alt klasör yapısıyla belgeleri sınıflandırın; müşteri, teklif, etiket ve versiyon bilgileriyle kurumsal arşivinizi tek merkezde yönetin.', 'folder'],
  ['Canlı Dashboard ve Raporlar', 'Tekliflerden gelen gerçek gelirleri, alınan ödemeleri, dönüşüm oranını, yaklaşan görevleri ve taksitleri tek panelde görün.', 'chart'],
  ['Bildirim Merkezi', 'Görev, aktivite, taksit, etiketleme ve kullanıcı aksiyonları için modern dropdown ve bildirim sayfasıyla hiçbir takip kaçmaz.', 'bell']
];

const modules = [
  ['Müşteri ve Rehber Yönetimi', 'Firma, kişi, departman, telefon, e-posta, iletişim kaydı, takip tarihi ve etiketlerle gerçek bir müşteri hafızası oluşturur.'],
  ['Harita ve Saha Keşfi', 'Sektöre göre firma bulma, çoklu seçim, rota oluşturma ve ziyaret sıralamasıyla saha satış ekiplerine güçlü keşif alanı sağlar.'],
  ['Teklif, Ödeme ve Fatura Akışı', 'Teklif hazırlama, dövizli fiyat gösterimi, ödeme alındı modalı, fatura dosyası yükleme ve PDF önizleme birlikte çalışır.'],
  ['Sözleşme Hazırlama', 'Boş sözleşme, şablondan sözleşme, tekliften sözleşme, editör, versiyonlama ve PDF çıktı ile satış sonrası evrak sürecini güçlendirir.'],
  ['Görev, Aktivite ve Takvim', 'Kanban görev yönetimi, kullanıcı atama, FullCalendar görünümü, hatırlatma, yaklaşan etkinlik ve bildirim akışı sunar.'],
  ['Sosyal Akış ve Mesajlaşma', 'Şirket içi haber akışı, beğeni, yorum, emoji, kullanıcı etiketleme ve özel mesajlaşma ile ekip içi iletişimi canlı tutar.'],
  ['Toplu Mail ve Şablonlar', 'SMTP ayarları, sürükle-bırak mail tasarımcısı, görsel/link desteği ve hedef kitle seçimiyle pazarlama iletişimini yönetir.'],
  ['Yönetim ve Güvenlik', 'Kullanıcı, rol, ekip, firma, etiket, bildirim ve yetki yönetimiyle firmaya özel kontrollü çalışma alanı oluşturur.'],
  ['Raporlama ve Kontrol Paneli', 'Aylık alınan ödemeler, teklif durumu, satış dönüşümü, yaklaşan taksit/görev ve ekip görünürlüğünü gerçek veriye bağlar.']
];

const integrations = [
  ['Dijital Arşiv', 'Klasör, alt klasör, etiket ve versiyon destekli kurumsal belge altyapısı.'],
  ['SMTP E-posta', 'Firma mail hesabıyla toplu mail ve bildirim gönderimi.'],
  ['TCMB Kur', 'Tekliflerde TL, USD ve EUR dönüşümü.'],
  ['Google Maps', 'Müşteri haritası, firma arama ve rota planlama altyapısı.'],
  ['API Hazırlığı', 'Mobil uygulama ve harici paneller için genişleyebilir yapı.'],
  ['PDF Çıktılar', 'Teklif ve sözleşme belgelerini profesyonel çıktı haline getirme.']
];

const stats = [
  ['360°', 'Müşteri görünümü'],
  ['5+', 'Teklif yaşam döngüsü'],
  ['10', 'Bildirim dropdown limiti'],
  ['3', 'Para birimi desteği']
];

const faqs = [
  ['Genel Kullanım', 'Ebeo CRM hangi firmalar için uygun?', 'Satış yapan, teklif hazırlayan, müşteri takibi yapan, saha ziyareti planlayan veya ekip içi görev yönetimi kullanan tüm firmalar için uygundur. Ajans, danışmanlık, imalat, hizmet, e-ticaret ve saha satış ekipleri aynı yapıdan faydalanabilir.'],
  ['Veri Güvenliği', 'Her firma kendi verisini mi görür?', 'Evet. Sistem firma bazlı çalışacak şekilde kurgulanır. Her firma kendi müşterilerini, tekliflerini, görevlerini, kullanıcılarını, belgelerini ve raporlarını görür. Başka firmaların verilerine erişim olmaz.'],
  ['Deneme Süreci', '14 günlük ücretsiz deneme nasıl başlar?', 'Kayıt formundan firma hesabı oluşturulur. Ardından güvenli ödeme doğrulama adımı tamamlanır ve kullanıcı CRM paneline geçer. Deneme süresi boyunca ücret alınmaz.'],
  ['Satış Yönetimi', 'Tekliften sözleşmeye geçiş var mı?', 'Evet. Onaylanan teklif üzerinden tek tıkla sözleşme oluşturulabilir. Sözleşme teklif, müşteri, kalemler, tutarlar ve ödeme akışıyla ilişkilendirilir.'],
  ['Teklif Yönetimi', 'TL, USD ve EUR teklif hazırlayabilir miyim?', 'Evet. Tekliflerde TL, USD ve EUR desteklenir. Güncel kur mantığıyla fiyat çevirisi yapılabilir ve teklif/PDF çıktısında istenirse dövizli fiyatlar gösterilebilir.'],
  ['Müşteri Yönetimi', 'Müşteri detayında hangi bilgiler tutulur?', 'Firma bilgileri, kişiler, iletişim kayıtları, teklifler, fırsatlar, görevler, ödemeler, belgeler, etiketler ve zaman akışı tek müşteri kartında görülebilir.'],
  ['Saha Satış', 'Haritadan müşteri bulma ve rota oluşturma var mı?', 'Evet. İl, ilçe ve sektöre göre firmalar haritada görüntülenebilir. Kullanıcı seçtiği firmalar için konuma göre rota oluşturabilir ve ziyaret sırasını daha planlı yönetebilir.'],
  ['Ekip Yönetimi', 'Görevler kullanıcılara atanabiliyor mu?', 'Evet. Görevler şirket içindeki kullanıcılara atanabilir. Kanban görünümünde durum takibi yapılır, vade ve hatırlatma zamanı geldiğinde bildirim düşer.'],
  ['Bildirimler', 'Hatırlatmalar ve yaklaşan işler nasıl takip edilir?', 'Görev, aktivite, yaklaşan taksit, yorum, etiketleme ve sistem hareketleri bildirim merkezinde gösterilir. Dropdown içinde en güncel bildirimler, tüm bildirimler sayfasında detaylı liste yer alır.'],
  ['E-Posta', 'Toplu mail gönderimi nasıl çalışır?', 'Firma kendi SMTP hesabını bağlayabilir. HTML bilmeden sürükle-bırak şablon hazırlanır, müşteri veya çalışan gruplarına hedefli toplu mail gönderilebilir.'],
  ['Belge Yönetimi', 'Belgeler nasıl düzenleniyor?', 'Dijital arşiv ekranında firma bazlı klasör ve alt klasörler oluşturulabilir. Belgeler tip, müşteri, teklif, etiket ve versiyon bilgileriyle sınıflandırılıp toplu olarak taşınabilir.'],
  ['Yetkilendirme', 'Kullanıcıların erişimleri sınırlandırılabilir mi?', 'Evet. Rol yönetimi ile her sayfa ve işlem için yetki tanımlanabilir. Bir kullanıcının rol atamaları başka kullanıcıya kopyalanabilir.'],
  ['Raporlama', 'Dashboard ve raporlar gerçek verilerden mi oluşur?', 'Evet. Raporlar teklif, ödeme alındı, faturalandı, görev ve müşteri hareketleri gibi sistemde oluşan gerçek kayıtlar üzerinden hesaplanır.'],
  ['Kurulum', 'Mobil veya API entegrasyonu ileride mümkün mü?', 'Evet. Sistem web panel odaklıdır fakat API-first büyümeye uygun kurgulanır. İleride mobil uygulama, harici servisler ve ek entegrasyonlar bağlanabilir.']
];

const blogPosts = [
  ['CRM içinde müşteri 360 ekranı neden kritiktir?', 'Satış, destek ve yönetim ekiplerinin müşteriye ait tüm hareketleri tek kartta görmesi karar süresini kısaltır.', 'Müşteri Yönetimi'],
  ['Teklif yaşam döngüsü nasıl yönetilmeli?', 'Taslak, gönderildi, satışa dönüştü, ödeme alındı ve faturalandı adımlarıyla satış takibi netleşir.', 'Teklif Yönetimi'],
  ['Görev kanban ekip takibini nasıl kolaylaştırır?', 'Atanan kişi, öncelik, vade ve hatırlatma bilgileriyle operasyon takip edilebilir hale gelir.', 'Operasyon']
];

function Icon({ name, className = 'h-6 w-6' }) {
  const common = { className, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true };
  const paths = {
    users: <><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,
    target: <><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></>,
    file: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/></>,
    kanban: <><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M8 7v10"/><path d="M12 7v6"/><path d="M16 7v8"/></>,
    mail: <><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-10 6L2 7"/></>,
    shield: <><path d="M20 13c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V5l8-3 8 3z"/><path d="m9 12 2 2 4-4"/></>,
    chart: <><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></>,
    calendar: <><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></>,
    folder: <><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7l-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"/></>,
    map: <><path d="M9 18l-6 3V6l6-3 6 3 6-3v15l-6 3-6-3z"/><path d="M9 3v15"/><path d="M15 6v15"/></>,
    bell: <><path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 7h18s-3 0-3-7"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></>,
    contract: <><path d="M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z"/><path d="M14 2v5h5"/><path d="M9 13h6"/><path d="M9 17h4"/><path d="M9 9h1"/></>,
    spark: <><path d="m12 3-1.9 5.8L4 11l6.1 2.2L12 19l1.9-5.8L20 11l-6.1-2.2z"/></>,
    search: <><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></>,
    check: <><path d="M20 6 9 17l-5-5"/></>
  };
  return <svg {...common}>{paths[name] || paths.spark}</svg>;
}

function setPath(path) {
  const next = path === '/' ? '/' : path;
  window.history.pushState({}, '', next);
  window.dispatchEvent(new PopStateEvent('popstate'));
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

function SiteLink({ href, children, className = '', ariaLabel, onClick }) {
  const navigate = event => {
    onClick?.(event);
    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
    event.preventDefault();
    setPath(href);
  };
  return <a href={href} onClick={navigate} className={className} aria-label={ariaLabel}>{children}</a>;
}

function useRoute() {
  const read = () => {
    const legacyHash = window.location.hash.replace('#', '');
    if (legacyHash.startsWith('/')) {
      window.history.replaceState({}, '', legacyHash);
      return legacyHash;
    }
    return window.location.pathname || '/';
  };
  const [path, setCurrentPath] = useState(read());
  useEffect(() => {
    const onChange = () => setCurrentPath(read());
    window.addEventListener('popstate', onChange);
    return () => window.removeEventListener('popstate', onChange);
  }, []);
  return (routes[path] || path.startsWith('/blog/')) ? path : '/';
}

function Seo({ path }) {
  useEffect(() => {
    if (path.startsWith('/blog/')) return undefined;
    const meta = routes[path] || (path.startsWith('/blog/') ? routes['/blog'] : routes['/']);
    document.title = meta.title;
    setHeadMeta('name', 'description', meta.description);
    setHeadMeta('name', 'keywords', meta.keywords || 'crm, crm yazılımı, müşteri takip programı, satış takip programı');
    setHeadLink('canonical', `https://www.ebeocrm.com${path === '/' ? '/' : path}`);
    setHeadMeta('property', 'og:title', meta.title);
    setHeadMeta('property', 'og:description', meta.description);
    setHeadMeta('property', 'og:url', `https://www.ebeocrm.com${path === '/' ? '/' : path}`);
    setHeadMeta('property', 'og:type', 'website');
    setHeadMeta('property', 'og:image', 'https://www.ebeocrm.com/hero-product-screen.png');
    setHeadMeta('name', 'twitter:title', meta.title);
    setHeadMeta('name', 'twitter:description', meta.description);
    setHeadMeta('name', 'twitter:image', 'https://www.ebeocrm.com/hero-product-screen.png');
    setHeadMeta('name', 'robots', 'index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1');
    return undefined;
  }, [path]);
  return null;
}

function SolutionPage({ path }) {
  const page = solutionPages[path];
  const related = Object.entries(solutionPages).filter(([route]) => route !== path).slice(0, 3);

  useEffect(() => {
    if (!page) return undefined;
    const canonical = `https://www.ebeocrm.com${path}`;
    setJsonLd('solution-webpage-schema', {
      '@context': 'https://schema.org', '@type': 'WebPage', name: routes[path].title,
      description: routes[path].description, url: canonical, inLanguage: 'tr-TR',
      isPartOf: { '@type': 'WebSite', name: 'Ebeo CRM', url: 'https://www.ebeocrm.com/' },
      about: { '@type': 'SoftwareApplication', name: 'Ebeo CRM', applicationCategory: 'BusinessApplication' }
    });
    setJsonLd('solution-breadcrumb-schema', {
      '@context': 'https://schema.org', '@type': 'BreadcrumbList', itemListElement: [
        { '@type': 'ListItem', position: 1, name: 'Ana Sayfa', item: 'https://www.ebeocrm.com/' },
        { '@type': 'ListItem', position: 2, name: page.eyebrow, item: canonical }
      ]
    });
    setJsonLd('solution-faq-schema', {
      '@context': 'https://schema.org', '@type': 'FAQPage',
      mainEntity: page.faqs.map(([question, answer]) => ({ '@type': 'Question', name: question, acceptedAnswer: { '@type': 'Answer', text: answer } }))
    });
    return () => ['solution-webpage-schema', 'solution-breadcrumb-schema', 'solution-faq-schema'].forEach(removeJsonLd);
  }, [path, page]);

  if (!page) return null;
  return <div className="seo-solution-page">
    <section className="seo-solution-hero">
      <div className="section-shell">
        <nav aria-label="Breadcrumb"><SiteLink href="/">Ana Sayfa</SiteLink><span>›</span><strong>{page.eyebrow}</strong></nav>
        <div className="seo-solution-hero-grid">
          <div className="reveal">
            <span className="seo-kicker"><i></i>{page.intent}</span>
            <h1>{page.title}</h1>
            <p>{page.lead}</p>
            <div className="seo-solution-actions"><button onClick={() => openCrmRoute('/Auth/Register')}>14 Gün Ücretsiz Dene</button><button onClick={() => setPath('/ozellikler')}>Özellikleri İncele</button></div>
            <small>Kredi kartınızdan deneme süresi boyunca ücret alınmaz.</small>
          </div>
          <div className="seo-solution-visual reveal reveal-delay-2">
            <img src="/hero-product-screen.png" alt={`${page.eyebrow} için Ebeo CRM panel görünümü`} width="1200" height="760" />
            <span><Icon name="check" className="h-4 w-4" /> Firma bazlı güvenli çalışma alanı</span>
          </div>
        </div>
      </div>
    </section>

    <section className="section-shell seo-benefit-grid reveal">
      {page.benefits.map(([icon, title, text]) => <article key={title}><span><Icon name={icon} className="h-6 w-6" /></span><h2>{title}</h2><p>{text}</p></article>)}
    </section>

    <section className="section-shell seo-explainer">
      <div className="seo-explainer-intro reveal"><span>{page.eyebrow}</span><h2>Dağınık kayıtları ölçülebilir bir iş akışına dönüştürün.</h2><p>Ebeo CRM, yalnızca kayıt tutan bir ekran değil; müşteriyle ilk temastan teklif, görev, sözleşme ve raporlamaya uzanan süreci birbirine bağlayan operasyon platformudur.</p></div>
      <div className="seo-explainer-list">
        {page.sections.map(([title, text], index) => <article className="reveal" key={title}><b>{String(index + 1).padStart(2, '0')}</b><div><h2>{title}</h2><p>{text}</p></div></article>)}
      </div>
    </section>

    <section className="seo-comparison-section">
      <div className="section-shell reveal"><div className="seo-comparison-head"><span>Tek merkez</span><h2>Dağınık yöntem yerine Ebeo CRM</h2></div><div className="seo-comparison-table"><div><strong>Dağınık takip</strong><span>Bilgi kişisel dosya ve mesajlarda kalır</span><span>Sonraki adım unutulabilir</span><span>Rapor elle hazırlanır</span><span>Yetki ve kayıt geçmişi belirsizdir</span></div><div className="is-ebeo"><strong>Ebeo CRM</strong><span>Müşteri bilgisi ortak hafızada tutulur</span><span>Görev ve hatırlatma sisteme bağlanır</span><span>Rapor gerçek kayıtlardan oluşur</span><span>Firma, kullanıcı ve rol bazlı kontrol sağlanır</span></div></div></div>
    </section>

    <section className="section-shell seo-faq-section reveal"><div><span>Sıkça sorulan sorular</span><h2>{page.eyebrow} hakkında merak edilenler</h2><p>Karar vermeden önce en çok sorulan soruların kısa ve açık yanıtları.</p></div><div>{page.faqs.map(([question, answer]) => <details key={question}><summary>{question}<b>+</b></summary><p>{answer}</p></details>)}</div></section>

    <section className="section-shell seo-related reveal"><div><span>İlgili çözümler</span><h2>Satış operasyonunun diğer parçalarını keşfedin.</h2></div><div>{related.map(([route, item]) => <SiteLink href={route} key={route}><small>{item.eyebrow}</small><strong>{item.title}</strong><span>İncele ↗</span></SiteLink>)}</div></section>
    <section className="section-shell seo-final-cta reveal"><div><span>14 gün ücretsiz</span><h2>{page.eyebrow} sürecinizi Ebeo CRM’de kurun.</h2><p>Gerçek ekibiniz ve kendi müşteri akışınızla deneyin.</p></div><button onClick={() => openCrmRoute('/Auth/Register')}>Ücretsiz Başlayın</button></section>
  </div>;
}

function setHeadMeta(attribute, key, value) {
  let element = document.head.querySelector(`meta[${attribute}="${key}"]`);
  if (!element) {
    element = document.createElement('meta');
    element.setAttribute(attribute, key);
    document.head.appendChild(element);
  }
  element.setAttribute('content', value || '');
}

function setHeadLink(rel, href) {
  let element = document.head.querySelector(`link[rel="${rel}"]`);
  if (!element) {
    element = document.createElement('link');
    element.setAttribute('rel', rel);
    document.head.appendChild(element);
  }
  element.setAttribute('href', href);
}

function setJsonLd(id, value) {
  let element = document.getElementById(id);
  if (!element) {
    element = document.createElement('script');
    element.id = id;
    element.type = 'application/ld+json';
    document.head.appendChild(element);
  }
  element.textContent = JSON.stringify(value);
}

function removeJsonLd(id) {
  document.getElementById(id)?.remove();
}

function useReveal(path) {
  useEffect(() => {
    if (!('IntersectionObserver' in window)) {
      document.querySelectorAll('.reveal').forEach((element) => element.classList.add('in'));
      return undefined;
    }

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('in');
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12 });

    const observeRevealElements = (root = document) => {
      if (root instanceof Element && root.matches('.reveal:not(.in)')) observer.observe(root);
      root.querySelectorAll?.('.reveal:not(.in)').forEach((element) => observer.observe(element));
    };

    observeRevealElements();
    const mutationObserver = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => mutation.addedNodes.forEach((node) => {
        if (node instanceof Element) observeRevealElements(node);
      }));
    });
    mutationObserver.observe(document.getElementById('root') || document.body, { childList: true, subtree: true });

    return () => {
      mutationObserver.disconnect();
      observer.disconnect();
    };
  }, [path]);
}


function useCountUp(target, duration = 1800) {
  const [value, setValue] = useState(0);
  useEffect(() => {
    let frame = 0;
    let startTime = null;
    const tick = (time) => {
      if (!startTime) startTime = time;
      const progress = Math.min((time - startTime) / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3);
      setValue(Math.round(target * eased));
      if (progress < 1) frame = requestAnimationFrame(tick);
    };
    frame = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(frame);
  }, [target, duration]);
  return value;
}

function Header({ path }) {
  const [open, setOpen] = useState(false);
  return <header className="site-header">
    <nav className="section-shell flex h-20 items-center justify-between" aria-label="Ana menü">
      <SiteLink href="/" className="flex items-center" ariaLabel="Ebeo CRM ana sayfa">
        <img src={site.logo} alt="Ebeo CRM logosu" className="logo-img" />
      </SiteLink>
      <div className="hidden items-center gap-1 lg:flex">
        {nav.map(([label, href]) => {
          const active = href === '/blog' ? path.startsWith('/blog') : path === href;
          return <SiteLink key={href} href={href} className={`rounded-full px-4 py-2 text-sm font-bold transition ${active ? 'brand-gradient text-white shadow-lg shadow-violet-500/20' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-950'}`}>{label}</SiteLink>;
        })}
      </div>
      <div className="hidden items-center gap-3 lg:flex">
        <button onClick={() => { openCrmRoute('/Auth/Login'); }} className="rounded-full px-5 py-3 text-sm font-bold text-slate-700 hover:bg-slate-100">Giriş Yap</button>
        <button onClick={() => openCrmRoute('/Auth/Register')} className="rounded-full brand-gradient px-5 py-3 text-sm font-bold text-white shadow-xl shadow-violet-500/25 transition hover:-translate-y-0.5">14 Gün Ücretsiz Dene</button>
      </div>
      <button type="button" className="inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-slate-200 text-slate-700 lg:hidden" onClick={() => setOpen(!open)} aria-label="Menüyü aç veya kapat">☰</button>
    </nav>
    {open && <div className="section-shell pb-5 lg:hidden">
      <div className="glass-card grid gap-2 rounded-3xl p-3">
        {[...nav, ['Hakkımızda', '/hakkimizda'], ['İletişim', '/iletisim']].map(([label, href]) => <SiteLink key={href} href={href} onClick={() => setOpen(false)} className="rounded-2xl px-4 py-3 text-left text-sm font-bold text-slate-700 hover:bg-slate-100">{label}</SiteLink>)}
        <a href={`${crmAppBaseUrl}/Auth/Login`} className="rounded-2xl px-4 py-3 text-left text-sm font-bold text-slate-700 hover:bg-slate-100">Giriş Yap</a>
        <button onClick={() => { openCrmRoute('/Auth/Register'); setOpen(false); }} className="rounded-2xl brand-gradient px-4 py-3 text-sm font-bold text-white">14 Gün Ücretsiz Dene</button>
      </div>
    </div>}
  </header>;
}

function SectionHeading({ eyebrow, title, description, left = false }) {
  return <div className={left ? 'max-w-3xl' : 'mx-auto max-w-3xl text-center'}>
    {eyebrow && <p className="mb-3 text-sm font-bold uppercase tracking-[0.24em] text-violet-600">{eyebrow}</p>}
    <h2 className="text-3xl font-bold tracking-[-0.035em] text-slate-950 md:text-5xl">{title}</h2>
    <p className="mt-5 text-base leading-8 text-slate-600 md:text-lg">{description}</p>
  </div>;
}

function Hero() {
  const pills = ['Müşteri 360', 'Harita + Rota', 'Teklif + Sözleşme', 'Görev Kanban', 'Toplu Mail'];
  const metrics = [
    ['14 gün', 'ücretsiz deneme'],
    ['Tek panel', 'müşteri ve satış takibi'],
    ['Canlı', 'rapor ve bildirim']
  ];
  return <section className="clickup-hero">
    <div className="clickup-hero-bg"></div>
    <div className="section-shell clickup-hero-inner">
      <div className="clickup-hero-copy reveal">
        <div className="clickup-kicker"><span className="live-dot"></span> Satış, müşteri ve ekip yönetimi için tek akıllı CRM paneli</div>
        <h1 className="clickup-title">Müşteri, satış ve ekip takibini tek CRM panelinde birleştirin.</h1>
        <p className="clickup-lead">Ebeo CRM; haritadan müşteri bulma, rota oluşturma, teklif hazırlama, sözleşme yönetimi, görev kanban, sosyal akış, toplu mail ve raporlamayı aynı çalışma alanında toplar.</p>
        <div className="clickup-actions">
          <button onClick={() => openCrmRoute('/Auth/Register')} className="clickup-primary">14 Gün Ücretsiz Dene</button>
          <button onClick={() => { openCrmRoute('/Auth/Login'); }} className="clickup-secondary">Giriş Yap</button>
        </div>
        <div className="clickup-pills">
          {pills.map(pill => <span key={pill}>{pill}</span>)}
        </div>
      </div>
      <div className="clickup-product reveal reveal-delay-2">
        <div className="clickup-product-glow"></div>
        <div className="clickup-screen-frame">
          <div className="clickup-screen-bar">
            <span></span><span></span><span></span>
            <strong>Ebeo CRM Canlı Operasyon Paneli</strong>
          </div>
          <img src="/hero-product-screen.png" alt="Ebeo CRM ana panel ekran görüntüsü" className="clickup-screen-img" loading="eager" />
        </div>
        <div className="clickup-float-card clickup-float-left">
          <Icon name="map" className="h-5 w-5" />
          <div><strong>Rota oluştur</strong><small>En yakın müşteriden başla</small></div>
        </div>
        <div className="clickup-float-card clickup-float-right">
          <Icon name="chart" className="h-5 w-5" />
          <div><strong>Geliri izle</strong><small>Teklif ve ödeme akışı</small></div>
        </div>
      </div>
      <div className="clickup-metrics reveal reveal-delay-3">
        {metrics.map(([value, label]) => <div key={value + label} className="clickup-metric"><strong>{value}</strong><span>{label}</span></div>)}
      </div>
    </div>
  </section>;
}

function VisualShowcase() {
  return <section className="visual-showcase-section py-14 md:py-20">
    <div className="section-shell">
      <div className="visual-showcase-card reveal">
        <div className="visual-showcase-copy">
          <p className="mb-3 text-sm font-bold uppercase tracking-[0.22em] text-violet-600">Görsel Operasyon Paneli</p>
          <h2 className="text-3xl font-bold tracking-[-0.035em] text-slate-950 md:text-5xl">Harita, rota, teklif ve görev akışı tek ekranda hissedilir.</h2>
          <p className="mt-4 text-base leading-8 text-slate-600">Bu yapı müşteriyi sadece listelemez; sahada bulunacak firmayı, izlenecek rotayı, hazırlanacak teklifi, atanacak görevi ve raporlanacak sonucu aynı operasyon mantığında birleştirir.</p>
        </div>
        <div className="visual-showcase-image-wrap">
          <img src="/hero-crm-command-center.png" alt="Ebeo CRM görsel operasyon paneli" className="visual-showcase-image" loading="lazy" />
        </div>
      </div>
    </div>
  </section>;
}


function AnimatedNumber({ value, prefix = '', suffix = '', compact = false }) {
  const current = useCountUp(value, 1900);
  const formatted = compact ? current.toLocaleString('tr-TR') : current.toLocaleString('tr-TR');
  return <>{prefix}{formatted}{suffix}</>;
}

function GrowthDashboardSection() {
  const cards = [
    ['Teklif Hacmi', 1850000, '₺', '', 'Bu ay oluşturulan teklif değeri', 'chart'],
    ['Gönderilen Teklif', 1248, '', '', 'Müşterilere iletilen teklif sayısı', 'file'],
    ['Tamamlanan Görev', 842, '', '', 'Ekip tarafından sonuçlandırılan iş', 'kanban'],
    ['Kazanılan Satış', 735000, '₺', '', 'Ödeme alındı ve faturalandı akışı', 'target']
  ];
  return <section className="growth-section">
    <div className="section-shell">
      <div className="growth-panel reveal">
        <div className="growth-head">
          <p>Ebeo CRM ile operasyon görünürlüğü</p>
          <h2>Satış, teklif ve görev performansınızı canlı takip edin.</h2>
          <span>Demo verilerle hazırlanmış bu panel, CRM içindeki gerçek dashboard mantığını anlatır: teklif hacmi, görevler, kazanılan satış ve ekip aktiviteleri tek yerde akar.</span>
        </div>
        <div className="growth-content">
          <div className="growth-chart-card">
            <div className="growth-label"><Icon name="chart" className="h-5 w-5" /> Yönetilen Teklif Hacmi</div>
            <strong><AnimatedNumber value={1850000} prefix="₺" /></strong>
            <div className="growth-chart" aria-hidden="true">
              <svg viewBox="0 0 560 260" preserveAspectRatio="none">
                <defs>
                  <linearGradient id="growthFill" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#8b6df6" stopOpacity="0.72" />
                    <stop offset="55%" stopColor="#6c4df6" stopOpacity="0.28" />
                    <stop offset="100%" stopColor="#8b6df6" stopOpacity="0.03" />
                  </linearGradient>
                  <linearGradient id="growthBarFill" x1="0" y1="1" x2="0" y2="0">
                    <stop offset="0%" stopColor="#4f46e5" stopOpacity="0.18" />
                    <stop offset="100%" stopColor="#a78bfa" stopOpacity="0.72" />
                  </linearGradient>
                </defs>
                <g className="growth-grid-lines">
                  <line x1="0" y1="220" x2="560" y2="220" /><line x1="0" y1="170" x2="560" y2="170" /><line x1="0" y1="120" x2="560" y2="120" /><line x1="0" y1="70" x2="560" y2="70" /><line x1="0" y1="20" x2="560" y2="20" />
                </g>
                <g className="growth-bars">
                  <rect style={{ '--i': 0 }} x="22" y="186" width="30" height="54" rx="10" /><rect style={{ '--i': 1 }} x="82" y="158" width="30" height="82" rx="10" /><rect style={{ '--i': 2 }} x="142" y="146" width="30" height="94" rx="10" /><rect style={{ '--i': 3 }} x="202" y="124" width="30" height="116" rx="10" /><rect style={{ '--i': 4 }} x="262" y="86" width="30" height="154" rx="10" /><rect style={{ '--i': 5 }} x="322" y="90" width="30" height="150" rx="10" /><rect style={{ '--i': 6 }} x="382" y="62" width="30" height="178" rx="10" /><rect style={{ '--i': 7 }} x="442" y="28" width="30" height="212" rx="10" /><rect style={{ '--i': 8 }} x="502" y="18" width="30" height="222" rx="10" />
                </g>
                <path className="growth-area" d="M0 240 L0 224 L58 194 L116 160 L174 148 L232 128 L290 90 L348 92 L406 66 L464 28 L520 12 L560 10 L560 240 Z" />
                <path className="growth-line" d="M0 224 L58 194 L116 160 L174 148 L232 128 L290 90 L348 92 L406 66 L464 28 L520 12" />
                <line className="growth-marker-line" x1="520" y1="12" x2="520" y2="240" />
                <circle className="growth-active-point" cx="520" cy="12" r="8" />
                <g className="growth-tooltip">
                  <rect x="388" y="22" width="124" height="50" rx="14" />
                  <text x="404" y="44">Temmuz</text>
                  <text x="404" y="61">₺1,85M</text>
                </g>
                <g className="growth-months">
                  <text x="18" y="256">Oca</text><text x="137" y="256">Mar</text><text x="257" y="256">May</text><text x="376" y="256">Haz</text><text x="498" y="256">Tem</text>
                </g>
              </svg>
            </div>
          </div>
          <div className="growth-side-grid">
            {cards.slice(1).map(([title, value, prefix, suffix, desc, icon]) => <div key={title} className="growth-mini-card">
              <div className="growth-mini-icon"><Icon name={icon} className="h-5 w-5" /></div>
              <span>{title}</span>
              <strong><AnimatedNumber value={value} prefix={prefix} suffix={suffix} /></strong>
              <small>{desc}</small>
            </div>)}
          </div>
        </div>
        <button onClick={() => openCrmRoute('/Auth/Register')} className="growth-arrow" aria-label="14 gün ücretsiz denemeye git">→</button>
      </div>
    </div>
  </section>;
}

function FeatureCards() {
  const moveGlow = (event) => {
    const rect = event.currentTarget.getBoundingClientRect();
    event.currentTarget.style.setProperty('--mx', `${event.clientX - rect.left}px`);
    event.currentTarget.style.setProperty('--my', `${event.clientY - rect.top}px`);
  };
  return <section className="features-premium-section" id="ozellikler">
    <div className="features-orb orb-a"></div>
    <div className="features-orb orb-b"></div>
    <div className="section-shell">
      <div className="features-premium-head reveal">
        <p>Özellikler</p>
        <h2>Ebeo CRM’i satış ekipleri için güçlü yapan özellikler</h2>
        <span>Müşteri bulma, rota çıkarma, teklif kapatma, sözleşme hazırlama, görev takibi ve raporlama aynı ekosistemde birleşir.</span>
      </div>
      <div className="features-premium-grid">
        {realFeatures.map(([title, description, icon], index) => <article key={title} className="feature-premium-card reveal" onMouseMove={moveGlow} style={{ '--delay': `${(index % 6) * 70}ms` }}>
          <div className="feature-card-shine"></div>
          <div className="feature-card-topline"><span>0{index + 1}</span><i></i></div>
          <div className="feature-premium-icon"><Icon name={icon} /></div>
          <h3>{title}</h3>
          <p>{description}</p>
        </article>)}
      </div>
    </div>
  </section>;
}

function ModuleSection() {
  const [active, setActive] = useState(0);
  const moduleIcons = ['users', 'map', 'file', 'contract', 'calendar', 'spark', 'mail', 'shield', 'chart'];
  const goTo = (index) => setActive((index + modules.length) % modules.length);

  useEffect(() => {
    const timer = window.setInterval(() => goTo(active + 1), 4600);
    return () => window.clearInterval(timer);
  }, [active]);

  const getPosition = (index) => {
    let diff = index - active;
    if (diff > modules.length / 2) diff -= modules.length;
    if (diff < -modules.length / 2) diff += modules.length;
    return Math.max(-3, Math.min(3, diff));
  };

  return <section className="module-slider-section">
    <div className="module-slider-bg module-slider-bg-a"></div>
    <div className="module-slider-bg module-slider-bg-b"></div>
    <div className="section-shell">
      <div className="module-slider-head reveal">
        <SectionHeading left eyebrow="Modüller" title="Bir CRM’den beklenen operasyon gücünü modüllere ayırdık" description="Her modül gerçek iş akışına göre çalışır; merkezdeki kart seçili modülü, arkadaki kartlar ise uçtan uca CRM ekosistemini gösterir." />
        <div className="module-slider-controls" aria-label="Modül slider kontrolleri">
          <button type="button" onClick={() => goTo(active - 1)} aria-label="Önceki modül">‹</button>
          <button type="button" onClick={() => goTo(active + 1)} aria-label="Sonraki modül">›</button>
        </div>
      </div>

      <div className="module-slider-stage reveal reveal-delay-2" aria-label="CRM modülleri slider">
        {modules.map(([title, copy], index) => {
          const pos = getPosition(index);
          const visible = Math.abs(pos) <= 2;
          return <article
            key={title}
            className={`module-slide-card ${pos === 0 ? 'is-active' : ''}`}
            style={{ '--pos': pos, '--abs': Math.abs(pos), zIndex: 20 - Math.abs(pos), pointerEvents: visible ? 'auto' : 'none' }}
            aria-hidden={!visible}
            onClick={() => goTo(index)}>
            <div className="module-card-orb"></div>
            <div className="module-card-top">
              <div className="module-card-icon"><Icon name={moduleIcons[index] || 'spark'} /></div>
              <span>{String(index + 1).padStart(2, '0')}</span>
            </div>
            <h3>{title}</h3>
            <p>{copy}</p>
            <div className="module-card-footer">
              <strong>{pos === 0 ? 'Aktif modül' : 'Modülü göster'}</strong>
              <i>→</i>
            </div>
          </article>;
        })}
      </div>

      <div className="module-slider-dots" aria-label="Modül seçimi">
        {modules.map(([title], index) => <button key={title} type="button" className={index === active ? 'is-active' : ''} onClick={() => goTo(index)} aria-label={`${title} modülünü göster`}></button>)}
      </div>
    </div>
  </section>;
}

function WorkflowSection() {
  const pains = [
    ['Dağınık müşteri takibi', 'Firma, kişi, not ve iletişim geçmişi farklı yerlerde kalmaz.', 'users'],
    ['Kaçan satış fırsatları', 'Fırsat, teklif, ödeme ve fatura adımları tek akışta ilerler.', 'target'],
    ['Unutulan görevler', 'Atanan görev, hatırlatma ve bildirimlerle ekip takipten kopmaz.', 'kanban']
  ];
  const flow = [
    ['Müşteri', '360 kayıt', 'users'],
    ['Harita', 'keşif + rota', 'map'],
    ['Fırsat', 'aşama takibi', 'target'],
    ['Teklif', 'PDF + döviz', 'file'],
    ['Sözleşme', 'imza + arşiv', 'contract'],
    ['Rapor', 'gelir görünümü', 'chart']
  ];
  return <section className="sales-context-section">
    <div className="section-shell">
      <div className="sales-context-head reveal">
        <p>Satış Yaşam Döngüsü</p>
        <h2>Dağınık satış takibini tek operasyon akışına çevirin.</h2>
        <span>Müşteri bulmadan faturalandırmaya kadar tüm süreç Ebeo CRM içinde birbirine bağlı çalışır.</span>
      </div>
      <div className="sales-context-visual reveal reveal-delay-2">
        <svg className="sales-flow-line" viewBox="0 0 1200 250" preserveAspectRatio="none" aria-hidden="true">
          <path className="flow-shadow" d="M45 144 C160 42 255 218 365 112 C485 0 575 205 690 112 C805 20 895 205 1012 112 C1090 48 1138 84 1160 62" />
          <path className="flow-main" d="M45 144 C160 42 255 218 365 112 C485 0 575 205 690 112 C805 20 895 205 1012 112 C1090 48 1138 84 1160 62" />
        </svg>
        <div className="sales-flow-icons">
          {flow.map(([title, desc, icon], index) => <div key={title} className={`sales-flow-node node-${index + 1}`}>
            <span><Icon name={icon} className="h-5 w-5" /></span>
            <strong>{title}</strong>
            <small>{desc}</small>
          </div>)}
        </div>
        <div className="sales-question-card question-a">Son görüşme kimde?</div>
        <div className="sales-question-card question-b">Teklif hangi aşamada?</div>
        <div className="sales-question-card question-c">Ödeme alındı mı?</div>
      </div>
      <div className="sales-context-cards reveal reveal-delay-3">
        {pains.map(([title, desc, icon]) => <article key={title}>
          <div><Icon name={icon} className="h-6 w-6" /></div>
          <h3>{title}</h3>
          <p>{desc}</p>
        </article>)}
      </div>
    </div>
  </section>;
}

function PricingSection() {
  const [billingPeriod, setBillingPeriod] = useState('yearly');
  const isYearly = billingPeriod === 'yearly';
  const features = [
    'Sınırsız müşteri, firma rehberi ve iletişim geçmişi',
    'Müşteri haritası, canlı firma arama ve rota oluşturma',
    'Satış fırsatı, teklif, sözleşme ve ödeme durumu takibi',
    'Görev kanbanı, aktivite, takvim ve hatırlatmalar',
    'Profesyonel teklif ve e-posta şablonları',
    'Otomasyonlar, bildirimler ve ekip içi sosyal akış',
    'Belge yönetimi, raporlama ve entegrasyon altyapısı',
    'Rol, yetki, ekip ve departman yönetimi'
  ];

  return <section className="bg-white py-20 md:py-28">
    <div className="section-shell">
      <SectionHeading eyebrow="Fiyatlandırma" title="Tek paket. Net fiyat. Tüm CRM özellikleri." description="Karmaşık paket karşılaştırmaları olmadan tüm satış ve müşteri yönetimi araçlarına erişin. Ebeo CRM minimum 3 kullanıcı ile kullanılabilir." />

      <div className="pricing-billing-control" aria-label="Ödeme dönemini seçin">
        <button type="button" className={!isYearly ? 'is-active' : ''} onClick={() => setBillingPeriod('monthly')}>Aylık</button>
        <button
          type="button"
          className={`pricing-switch ${isYearly ? 'is-yearly' : ''}`}
          role="switch"
          aria-checked={isYearly}
          aria-label={isYearly ? 'Yıllık ödeme seçili' : 'Aylık ödeme seçili'}
          onClick={() => setBillingPeriod(isYearly ? 'monthly' : 'yearly')}
        >
          <span></span>
        </button>
        <button type="button" className={isYearly ? 'is-active' : ''} onClick={() => setBillingPeriod('yearly')}>Yıllık</button>
        <span className={`pricing-discount-pill ${isYearly ? 'is-visible' : ''}`}>%33 tasarruf</span>
      </div>

      <div className="mx-auto mt-8 max-w-4xl">
        <article className="pricing-plan-card pricing-single-plan is-highlighted">
          <span className="pricing-recommend-badge">Tüm özellikler dahil</span>
          <div className="pricing-plan-head">
            <div>
              <span>Ebeo CRM</span>
              <h3>Profesyonel CRM Paketi</h3>
            </div>
          </div>

          <div className="pricing-single-content">
            <div className="pricing-price-column">
              <span className="pricing-period-label">{isYearly ? 'Yıllık ödeme avantajı' : 'Aylık ödeme'}</span>
              <div className="pricing-main-line">
                <strong key={billingPeriod}>${isYearly ? '20' : '30'}</strong>
                <small>/ ay</small>
              </div>
              <p className="pricing-vat-note">+ KDV</p>
              <p className="pricing-monthly-equivalent">
                {isYearly
                  ? <>Yıllık ödeme tercihinde <strong>aylık $20&apos;ye gelir.</strong></>
                  : <>Aylık kullanım bedeli <strong>$30&apos;dır.</strong></>}
              </p>
              <div className="pricing-limit-note">Minimum 3 kullanıcı ile kullanılabilir.</div>
              <button onClick={() => openCrmRoute('/Auth/Register')} className="pricing-cta">14 Gün Ücretsiz Dene</button>
              <small className="pricing-cancel-note">14 gün ücretsiz deneyin. Aboneliğinizi dilediğiniz zaman yönetin.</small>
            </div>

            <div className="pricing-plan-body">
              <h4>İşinizi büyütmek için ihtiyacınız olan her şey</h4>
              <ul>
                {features.map((feature) => <li key={feature}><span>✓</span>{feature}</li>)}
              </ul>
            </div>
          </div>
        </article>
      </div>
      <p className="pricing-footnote">14 günlük ücretsiz deneme sonrası ödeme doğrulama ve abonelik süreci güvenli ödeme altyapısı üzerinden ilerler.</p>
    </div>
  </section>;
}

function FAQSection() {
  return <section className="faq-section">
    <div className="faq-bg-orb faq-orb-left"></div>
    <div className="faq-bg-orb faq-orb-right"></div>
    <div className="section-shell">
      <div className="faq-head reveal">
        <span>SSS</span>
        <h2>CRM’e geçmeden önce merak edilen her şey</h2>
        <p>Ebeo CRM’in satış, müşteri, teklif, görev, belge, e-posta ve yetkilendirme akışını netleştiren sık sorulan sorular.</p>
      </div>
      <div className="faq-layout">
        <aside className="faq-info-card reveal">
          <div className="faq-info-icon"><Icon name="spark" className="h-7 w-7" /></div>
          <h3>Kısa cevap, net karar.</h3>
          <p>Bu bölüm satın alma öncesi en çok sorulan operasyon, güvenlik ve kullanım sorularını hızlıca cevaplar.</p>
          <div className="faq-info-stats">
            <strong>{faqs.length}+</strong>
            <span>kritik soru cevaplandı</span>
          </div>
        </aside>
        <div className="faq-list reveal reveal-delay-2">
          {faqs.map(([category, question, answer], index) => <details key={question} className="faq-item" open={index === 0}>
            <summary>
              <span className="faq-number">{String(index + 1).padStart(2, '0')}</span>
              <span className="faq-question-wrap"><small>{category}</small><strong>{question}</strong></span>
              <span className="faq-toggle">+</span>
            </summary>
            <p>{answer}</p>
          </details>)}
        </div>
      </div>
    </div>
  </section>;
}

function TurnstileWidget({ onTokenChange, resetKey }) {
  const containerRef = useRef(null);
  const widgetIdRef = useRef(null);

  useEffect(() => {
    let disposed = false;

    const renderWidget = () => {
      if (disposed || !containerRef.current || !window.turnstile || !turnstileSiteKey) return;
      if (widgetIdRef.current !== null) {
        window.turnstile.remove(widgetIdRef.current);
        widgetIdRef.current = null;
      }

      widgetIdRef.current = window.turnstile.render(containerRef.current, {
        sitekey: turnstileSiteKey,
        action: 'callback_request',
        theme: 'light',
        language: 'tr',
        size: 'flexible',
        'refresh-expired': 'auto',
        'refresh-timeout': 'auto',
        callback: token => onTokenChange(token || ''),
        'expired-callback': () => onTokenChange(''),
        'error-callback': () => onTokenChange('')
      });
    };

    if (window.turnstile) renderWidget();
    else window.addEventListener('zcrm-turnstile-ready', renderWidget, { once: true });

    return () => {
      disposed = true;
      window.removeEventListener('zcrm-turnstile-ready', renderWidget);
      if (widgetIdRef.current !== null && window.turnstile) {
        window.turnstile.remove(widgetIdRef.current);
        widgetIdRef.current = null;
      }
    };
  }, [resetKey]);

  if (!turnstileSiteKey) {
    return <div className="callback-captcha-error">Güvenlik doğrulaması henüz yapılandırılmamış.</div>;
  }

  return <div className="callback-captcha">
    <div className="callback-captcha-head">
      <span className="callback-captcha-shield"><Icon name="shield" className="h-5 w-5" /></span>
      <span><strong>Güvenli doğrulama</strong><small>Cloudflare bot koruması</small></span>
    </div>
    <div ref={containerRef} className="callback-turnstile"></div>
  </div>;
}

function CallbackForm() {
  const [sent, setSent] = useState(false);
  const [error, setError] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [turnstileToken, setTurnstileToken] = useState('');
  const [captchaResetKey, setCaptchaResetKey] = useState(0);
  const submit = async (event) => {
    event.preventDefault();
    if (submitting) return;
    const data = new FormData(event.currentTarget);
    const form = event.currentTarget;
    const required = ['fullName', 'email', 'phone', 'companyName', 'city'];
    if (required.some(key => !String(data.get(key) || '').trim())) { setError('Lütfen tüm iletişim bilgilerini doldurun.'); return; }
    if (!String(data.get('email')).includes('@')) { setError('Geçerli bir e-posta adresi girin.'); return; }
    if (!data.get('agreement')) { setError('Devam etmek için kullanım sözleşmesini okuyup onaylamanız gerekir.'); return; }
    if (!turnstileToken) { setError('Lütfen güvenlik doğrulamasının tamamlanmasını bekleyin.'); return; }
    setError(''); setSent(false); setSubmitting(true);
    try {
      const response = await fetch(`${crmAppBaseUrl}/api/public/callback-requests`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          fullName: String(data.get('fullName')).trim(),
          email: String(data.get('email')).trim(),
          phone: String(data.get('phone')).trim(),
          companyName: String(data.get('companyName')).trim(),
          city: String(data.get('city')).trim(),
          agreementAccepted: true,
          website: String(data.get('website') || ''),
          turnstileToken
        })
      });
      const result = await response.json().catch(() => ({}));
      if (!response.ok) throw new Error(result.message || 'Talebiniz gönderilemedi. Lütfen tekrar deneyin.');
      setSent(true);
      form.reset();
      setTurnstileToken('');
    } catch (requestError) {
      const isNetworkError = requestError instanceof TypeError;
      setError(isNetworkError
        ? 'CRM sunucusuna ulaşılamadı. Lütfen kısa bir süre sonra tekrar deneyin.'
        : requestError.message || 'Talebiniz gönderilemedi. Lütfen tekrar deneyin.');
    } finally {
      setSubmitting(false);
      setTurnstileToken('');
      setCaptchaResetKey(value => value + 1);
    }
  };
  return <form onSubmit={submit} className="callback-form" noValidate>
    {sent && <div className="form-success">Talebiniz alındı. Zümre Soft ekibi en kısa sürede sizi arayacak.</div>}
    {error && <div className="form-error">{error}</div>}
    <div className="callback-form-grid">
      <label><span>Ad Soyad</span><input name="fullName" autoComplete="name" maxLength="160" placeholder="Adınız Soyadınız" required /></label>
      <label><span>Firma Adı</span><input name="companyName" autoComplete="organization" maxLength="220" placeholder="Firma adınız" required /></label>
      <label><span>E-posta</span><input name="email" type="email" autoComplete="email" maxLength="180" placeholder="mail@firma.com" required /></label>
      <label><span>Telefon</span><input name="phone" inputMode="tel" autoComplete="tel" maxLength="24" placeholder="05xx xxx xx xx" required /></label>
      <label className="callback-city"><span>Şehir</span><input name="city" autoComplete="address-level1" maxLength="100" placeholder="Örn. Ankara" required /></label>
    </div>
    <input className="callback-honeypot" name="website" tabIndex="-1" autoComplete="off" aria-hidden="true" />
    <label className="agreement-line"><input name="agreement" type="checkbox" /> <span><button type="button" onClick={() => setPath('/kullanim-sozlesmesi')}>Kullanım sözleşmesini</button> okudum ve onaylıyorum.</span></label>
    <TurnstileWidget onTokenChange={setTurnstileToken} resetKey={captchaResetKey} />
    <button type="submit" className="callback-submit" disabled={submitting || !turnstileToken || !turnstileSiteKey}>{submitting ? 'Gönderiliyor...' : turnstileToken ? 'Sizi Arayalım' : 'Güvenlik kontrolü bekleniyor'}</button>
  </form>;
}

function CTASection() {
  return <section className="support-cta-section">
    <div className="section-shell">
      <div className="support-cta-card reveal">
        <img src="/support-cta-team.png" alt="Ebeo CRM destek ekibi" className="support-cta-bg" loading="lazy" />
        <div className="support-cta-content">
          <div className="support-badge">🏆 Uzman ekibimiz yanınızda</div>
          <h2>Sorunuz mu var? Hemen sizi arayalım.</h2>
          <p>Ebeo CRM’i firmanızın müşteri, satış, teklif ve görev akışına nasıl uyarlayacağınızı birlikte netleştirelim.</p>
          <div className="support-actions">
            <button onClick={() => setPath('/iletisim')} className="support-primary">Sizi Arayalım</button>
          </div>
        </div>
      </div>
    </div>
  </section>;
}

function HomePage() {
  return <>
    <Hero />
    <GrowthDashboardSection />
    <FeatureCards />
    <SolutionHubSection />
    <WorkflowSection />
    <ModuleSection />
    <CTASection />
    <PricingSection />
    <FAQSection />
  </>;
}

function SolutionHubSection() {
  return <section className="solution-hub-section">
    <div className="section-shell">
      <div className="solution-hub-head reveal"><span>İşletmenize uygun CRM çözümleri</span><h2>Aradığınız iş sürecinden başlayın, tüm operasyonu aynı veride birleştirin.</h2><p>Müşteri takibinden saha satışına kadar her çözüm Ebeo CRM’in ortak müşteri, kullanıcı ve raporlama altyapısında çalışır.</p></div>
      <div className="solution-hub-grid reveal">
        {Object.entries(solutionPages).map(([route, page], index) => <SiteLink href={route} key={route} className={index === 0 ? 'is-wide' : ''}>
          <span>{String(index + 1).padStart(2, '0')}</span><div><small>{page.eyebrow}</small><h3>{page.title}</h3><p>{page.lead}</p></div><b>İncele ↗</b>
        </SiteLink>)}
      </div>
    </div>
  </section>;
}

function PageHero({ eyebrow, title, subtitle }) {
  return <section className="hero-bg py-16">
    <div className="section-shell max-w-4xl">
      <p className="mb-3 text-sm font-bold uppercase tracking-[0.24em] text-violet-600">{eyebrow}</p>
      <h1 className="text-4xl font-bold tracking-[-0.04em] text-slate-950 md:text-6xl">{title}</h1>
      <p className="mt-5 text-lg leading-8 text-slate-600">{subtitle}</p>
    </div>
  </section>;
}


function UsageAgreementPage() {
  const sections = [
    ['1. Taraflar', 'Bu Kullanım Sözleşmesi, Ebeo CRM yazılımını kullanan gerçek veya tüzel kişi kullanıcı ile Zümre Soft Yazılım Hizmetleri arasında elektronik ortamda kurulmuştur. Kullanıcı, hizmete kayıt olarak veya hizmeti kullanarak bu şartları kabul eder.'],
    ['2. Hizmetin Kapsamı', 'Ebeo CRM; müşteri yönetimi, teklif yönetimi, görev ve aktivite takibi, sözleşme hazırlama, toplu mail, raporlama, belge yönetimi ve ilgili CRM operasyonlarının dijital ortamda yürütülmesini sağlayan bir yazılım hizmetidir. Zümre Soft, hizmet kapsamını geliştirme, iyileştirme ve güvenlik gerekçesiyle güncelleme hakkını saklı tutar.'],
    ['3. Hesap ve Kullanıcı Sorumluluğu', 'Kullanıcı, kayıt sırasında verdiği bilgilerin doğru ve güncel olduğunu kabul eder. Hesap güvenliği, kullanıcı adı, şifre ve yetkilendirilmiş kullanıcı işlemlerinden müşteri sorumludur. Yetkisiz erişim şüphesi halinde Zümre Soft derhal bilgilendirilmelidir.'],
    ['4. Ücretsiz Deneme ve Ödeme', 'Ebeo CRM için sunulan 14 günlük ücretsiz deneme sürecinde kredi kartı bilgileri güvenli ödeme doğrulaması amacıyla alınabilir. Ödeme ve kart saklama süreçlerinde iyzico gibi lisanslı ödeme altyapılarından yararlanılabilir. Deneme süresi, paket şartları ve ücretlendirme kullanıcıya ayrıca bildirilen koşullara göre uygulanır.'],
    ['5. Veri, Gizlilik ve Güvenlik', 'Kullanıcı tarafından sisteme girilen müşteri, teklif, görev, belge ve benzeri içerikler kullanıcıya aittir. Zümre Soft, hizmetin sunulması, güvenliği, yedeklenmesi ve mevzuata uyum amacıyla gerekli teknik ve idari tedbirleri alır. Kişisel veriler yürürlükteki mevzuata uygun şekilde işlenir.'],
    ['6. Kullanım Kuralları', 'Kullanıcı; hukuka aykırı, üçüncü kişi haklarını ihlal eden, spam niteliğinde veya sistem güvenliğini tehlikeye atan faaliyetlerde bulunamaz. Toplu mail ve iletişim özelliklerinin kullanımı sırasında alıcı izinleri, ticari ileti mevzuatı ve ilgili yükümlülükler kullanıcı sorumluluğundadır.'],
    ['7. Fikri Mülkiyet', 'Ebeo CRM yazılımı, arayüzleri, tasarım unsurları, kaynak kodları, marka ve dokümantasyonu üzerindeki tüm fikri mülkiyet hakları Zümre Soft Yazılım Hizmetleri’ne aittir. Kullanıcıya yalnızca sözleşme koşulları kapsamında sınırlı, devredilemez kullanım hakkı tanınır.'],
    ['8. Üçüncü Taraf Entegrasyonları', 'Harita servisleri, e-posta sağlayıcıları, ödeme altyapıları veya benzeri üçüncü taraf hizmetlerde ilgili sağlayıcıların kendi kullanım koşulları geçerlidir. Bu hizmetlerde oluşabilecek kesinti, kısıtlama veya erişim değişikliklerinden Zümre Soft doğrudan sorumlu tutulamaz.'],
    ['9. Hizmet Sürekliliği', 'Zümre Soft, hizmetin kesintisiz ve güvenli sunulması için makul teknik çabayı gösterir. Bakım, güncelleme, altyapı, mücbir sebep veya üçüncü taraf kaynaklı durumlarda geçici erişim kesintileri yaşanabilir.'],
    ['10. Fesih', 'Kullanıcı, hizmeti kullanmayı bırakabilir veya hesabın kapatılmasını talep edebilir. Zümre Soft, sözleşmeye aykırılık, kötüye kullanım, ödeme yükümlülüğünün yerine getirilmemesi veya güvenlik riski halinde hizmet erişimini askıya alabilir ya da sonlandırabilir.'],
    ['11. Sorumluluğun Sınırı', 'Ebeo CRM, işletme süreçlerini yönetmeye yardımcı bir yazılım hizmetidir. Kullanıcının ticari kararları, müşteri ilişkileri, gönderdiği içerikler ve sisteme girdiği verilerin doğruluğu kullanıcı sorumluluğundadır. Zümre Soft, mevzuatın izin verdiği ölçüde dolaylı zararlardan sorumlu değildir.'],
    ['12. Yürürlük ve Değişiklik', 'Bu sözleşme, kullanıcının hizmete kayıt olması veya hizmeti kullanmasıyla yürürlüğe girer. Zümre Soft, sözleşme koşullarını mevzuat, ürün geliştirmeleri veya operasyonel ihtiyaçlar doğrultusunda güncelleyebilir. Güncel metin web sitesi üzerinden yayımlanır.']
  ];
  return <section className="agreement-page">
    <div className="section-shell">
      <div className="agreement-card">
        <p className="agreement-eyebrow">Ebeo CRM</p>
        <h1>Kullanım Sözleşmesi</h1>
        <p className="agreement-intro">Bu metin, Zümre Soft Yazılım Hizmetleri tarafından sunulan Ebeo CRM yazılımının kullanım şartlarını düzenler. Metin bilgilendirme amaçlı hazırlanmıştır; nihai yayın öncesinde hukuk danışmanı tarafından kontrol edilmesi önerilir.</p>
        <div className="agreement-meta"><span>Şirket: Zümre Soft Yazılım Hizmetleri</span><span>İletişim: iletisim@zumresoft.com</span></div>
        <div className="agreement-sections">
          {sections.map(([title, text]) => <article key={title}><h2>{title}</h2><p>{text}</p></article>)}
        </div>
      </div>
    </div>
  </section>;
}

const legalPages = {
  '/teslimat-iade-sartlari': {
    eyebrow: 'Satış Sonrası Süreç',
    title: 'Teslimat ve İade Şartları',
    intro: 'Bu metin, Ebeo CRM aboneliği ve dijital yazılım hizmetleri için teslimat, erişim, iptal ve iade süreçlerini açıklar. Ebeo CRM fiziksel ürün değil, internet üzerinden sunulan bir yazılım hizmetidir.',
    sections: [
      ['1. Hizmetin Niteliği', 'Ebeo CRM; müşteri yönetimi, teklif, sözleşme, görev, aktivite, belge, toplu mail, raporlama ve yetkilendirme modüllerini kapsayan web tabanlı bir CRM yazılım hizmetidir. Hizmet dijital ortamda sunulur ve fiziksel kargo teslimatı yapılmaz.'],
      ['2. Dijital Teslimat', 'Kullanıcının firma kaydı, ödeme doğrulama veya abonelik aktivasyonu tamamlandıktan sonra sistem erişimi elektronik ortamda sağlanır. Teslimat; kullanıcı hesabının açılması, panel erişiminin verilmesi ve ilgili modüllerin kullanıma hazır hale getirilmesiyle gerçekleşmiş kabul edilir.'],
      ['3. Erişim Bilgileri', 'Kullanıcı, kayıt sırasında belirlediği e-posta ve şifre ile panele giriş yapar. E-posta doğrulama, güvenlik kontrolleri veya ödeme doğrulama süreçleri tamamlanmadan bazı özellikler sınırlı çalışabilir.'],
      ['4. Ücretsiz Deneme Süreci', 'Ebeo CRM için sunulan 14 günlük deneme süreci, kullanıcının sistemi tanıması ve temel iş akışlarını test edebilmesi içindir. Deneme süresi ve sonrasında uygulanacak abonelik şartları, kayıt veya ödeme ekranında belirtilen koşullara göre yürütülür.'],
      ['5. İptal Talebi', 'Kullanıcı, hesabını veya aboneliğini kapatmak istediğinde panel içindeki hesap ayarları üzerinden ya da Zümre Soft ile iletişime geçerek iptal talebi oluşturabilir. İptal talebinin işleme alınması için hesap sahibi veya yetkili firma kullanıcısı tarafından yapılması gerekir.'],
      ['6. İade Koşulları', 'Dijital hizmetlerde iade talepleri; hizmetin aktif kullanım durumu, abonelik başlangıç tarihi, ödeme dönemi, kullanılan kampanya veya deneme koşulları dikkate alınarak değerlendirilir. Haksız kullanım, kötüye kullanım veya hizmetten fiilen yararlanılmış dönemler için iade yapılmayabilir.'],
      ['7. Teknik Sorunlar', 'Kullanıcının erişim, ödeme, giriş veya modül kullanımında teknik sorun yaşaması halinde Zümre Soft destek ekibine başvurması gerekir. Sorunun Zümre Soft kaynaklı ve hizmet kullanımını engelleyen nitelikte olduğunun tespiti halinde uygun çözüm, süre uzatımı veya iade değerlendirmesi yapılabilir.'],
      ['8. Üçüncü Taraf Hizmetleri', 'Harita, e-posta, ödeme veya benzeri üçüncü taraf entegrasyonlarında ilgili sağlayıcıların servis şartları ve teknik kısıtları geçerlidir. Bu servislerden kaynaklanan kesinti veya kısıtlamalar iade sebebi olarak ayrıca değerlendirilir.'],
      ['9. İletişim', `Teslimat, iptal ve iade talepleri için ${site.companyLegalName} ile ${site.email} e-posta adresi veya ${site.phone} telefon numarası üzerinden iletişime geçilebilir.`]
    ]
  },
  '/gizlilik-sozlesmesi': {
    eyebrow: 'Veri Güvenliği',
    title: 'Gizlilik Sözleşmesi',
    intro: 'Bu Gizlilik Sözleşmesi, Ebeo CRM kullanıcılarının ve firma hesaplarının verilerinin hangi amaçlarla işlendiğini, nasıl korunduğunu ve hangi durumlarda paylaşılabileceğini açıklar.',
    sections: [
      ['1. Veri Sorumlusu', `Ebeo CRM hizmeti ${site.companyLegalName} tarafından sunulur. Şirket adresi ${site.address}; iletişim e-posta adresi ${site.email}; telefon numarası ${site.phone}.`],
      ['2. İşlenen Veriler', 'Sistem; firma adı, kullanıcı adı, e-posta, telefon, giriş kayıtları, rol ve yetki bilgileri, müşteri kayıtları, teklifler, görevler, aktiviteler, sözleşmeler, belgeler, ödeme doğrulama kayıtları ve kullanıcı tarafından sisteme girilen iş verilerini işleyebilir.'],
      ['3. İşleme Amaçları', 'Veriler; CRM hizmetinin sunulması, kullanıcı hesabının yönetilmesi, güvenli oturum sağlanması, firma bazlı veri izolasyonu, destek süreçleri, bildirimler, teklif ve sözleşme yönetimi, raporlama, ödeme doğrulama, sistem güvenliği ve yasal yükümlülüklerin yerine getirilmesi amacıyla işlenir.'],
      ['4. Firma Bazlı Veri İzolasyonu', 'Ebeo CRM çoklu firma kullanımına uygun şekilde tasarlanır. Her firma kendi müşteri, kullanıcı, teklif, görev, belge ve rapor verilerine erişir. Yetkisiz firma veya kullanıcı erişimini engellemek için rol bazlı yetkilendirme ve tenant bazlı ayrım uygulanır.'],
      ['5. Güvenlik Tedbirleri', 'Şifreleme, güvenli oturum, rol ve izin kontrolleri, audit kayıtları, erişim logları, yedekleme, yetkisiz erişim kontrolleri ve sistemsel güvenlik önlemleri uygulanır. Kullanıcılar güçlü şifre kullanmak ve hesap bilgilerini üçüncü kişilerle paylaşmamakla yükümlüdür.'],
      ['6. Üçüncü Taraf Entegrasyonları', 'E-posta gönderimi, ödeme doğrulama, harita servisleri veya bulut dosya entegrasyonları gibi özelliklerde ilgili üçüncü taraf sağlayıcıların altyapısından yararlanılabilir. Bu hizmetlerde yalnızca ilgili işlemin yürütülmesi için gerekli veriler paylaşılır.'],
      ['7. Çerezler ve Oturum', 'Sistem, kullanıcının güvenli şekilde oturum açması, oturumun uzun süre korunması, tercihlerin hatırlanması ve güvenlik kontrollerinin yapılması için zorunlu çerezler kullanabilir. Kullanıcı çıkış yapmadıkça oturum belirlenen süre boyunca açık kalabilir.'],
      ['8. Veri Saklama', 'Veriler, hizmet ilişkisi devam ettiği sürece veya yasal yükümlülüklerin gerektirdiği süre boyunca saklanır. Hesap silme, abonelik iptali veya yasal talep durumunda veriler sistem politikalarına ve mevzuata uygun şekilde silinebilir, anonimleştirilebilir veya arşivlenebilir.'],
      ['9. Kullanıcı Hakları', 'Kullanıcılar; kişisel verilerinin işlenip işlenmediğini öğrenme, düzeltme, silme, işleme itiraz etme ve mevzuatta tanınan diğer haklarını kullanmak için Zümre Soft ile iletişime geçebilir. Talepler kimlik ve yetki doğrulaması sonrasında değerlendirilir.'],
      ['10. Değişiklikler', 'Zümre Soft, gizlilik metnini ürün geliştirmeleri, mevzuat değişiklikleri veya güvenlik gereksinimleri doğrultusunda güncelleyebilir. Güncel metin web sitesinde yayımlandığı tarihten itibaren geçerli olur.']
    ]
  },
  '/mesafeli-satis-sozlesmesi': {
    eyebrow: 'Abonelik Sözleşmesi',
    title: 'Mesafeli Satış Sözleşmesi',
    intro: 'Bu Mesafeli Satış Sözleşmesi, Ebeo CRM dijital yazılım aboneliğinin internet üzerinden satın alınması veya deneme sonrası ücretli aboneliğe dönüşmesi halinde tarafların hak ve yükümlülüklerini düzenler.',
    sections: [
      ['1. Satıcı / Hizmet Sağlayıcı', `${site.companyLegalName}. Adres: ${site.address}. Telefon: ${site.phone}. E-posta: ${site.email}.`],
      ['2. Alıcı / Kullanıcı', 'Alıcı, Ebeo CRM’e kayıt olan, abonelik başlatan veya firma adına ödeme doğrulaması yapan gerçek ya da tüzel kişidir. Alıcı tarafından kayıt sırasında verilen bilgiler esas alınır.'],
      ['3. Sözleşme Konusu', 'Sözleşmenin konusu; Ebeo CRM web tabanlı CRM yazılımının seçilen paket, deneme veya abonelik şartları kapsamında kullanıcıya dijital olarak sunulmasıdır. Hizmet fiziksel ürün teslimi içermez.'],
      ['4. Hizmet Kapsamı', 'Ebeo CRM; müşteri yönetimi, kişi rehberi, müşteri haritası, teklif yönetimi, sözleşme hazırlama, görev ve aktivite yönetimi, takvim, belge yönetimi, toplu mail, kullanıcı/rol yönetimi ve raporlama modüllerinden oluşabilir. Paket kapsamı ürün ekranlarında belirtilen özelliklere göre değişebilir.'],
      ['5. Ücret ve Ödeme', 'Abonelik ücreti, seçilen paket ve ödeme dönemine göre kullanıcıya ödeme ekranında gösterilir. Ödeme işlemleri güvenli ödeme altyapısı üzerinden yürütülebilir. Vergiler, kampanyalar, indirimler ve dönemsel ücretlendirme ödeme ekranındaki bilgilere göre uygulanır.'],
      ['6. Cayma Hakkı ve Dijital Hizmet', 'Ebeo CRM dijital içerik ve elektronik ortamda anında ifa edilen hizmet niteliğindedir. Kullanıcı hizmeti kullanmaya başladıktan, firma paneli aktive edildikten veya dijital hizmet ifasına onay verdikten sonra cayma hakkı mevzuattaki istisnalar kapsamında sınırlanabilir.'],
      ['7. Deneme Süresi', 'Kullanıcıya 14 günlük ücretsiz deneme sunulabilir. Deneme süresinin kapsamı, kredi kartı doğrulaması, ücretlendirme başlangıcı ve iptal koşulları kayıt/ödeme ekranındaki bilgilendirmeye göre yürütülür.'],
      ['8. Teslimat', 'Hizmet teslimatı, kullanıcının hesabına erişim sağlanması ve CRM panelinin kullanılabilir hale gelmesiyle tamamlanır. Kullanıcı, giriş bilgileriyle sisteme erişerek hizmetten yararlanmaya başlar.'],
      ['9. Kullanıcının Yükümlülükleri', 'Kullanıcı, kayıt bilgilerinin doğruluğundan, hesap güvenliğinden, sisteme girdiği müşteri ve ticari verilerden, gönderdiği e-postalardan ve üçüncü kişi haklarına uygun davranmaktan sorumludur.'],
      ['10. Hizmet Sağlayıcının Yükümlülükleri', 'Zümre Soft, hizmetin güvenli, çalışır ve sürdürülebilir şekilde sunulması için makul teknik ve idari tedbirleri alır. Bakım, güncelleme, güvenlik veya altyapı gereklilikleri nedeniyle geçici kesintiler yaşanabilir.'],
      ['11. Fesih ve Askıya Alma', 'Ödeme yükümlülüğünün yerine getirilmemesi, kötüye kullanım, güvenlik riski, hukuka aykırı kullanım veya sözleşme ihlali halinde Zümre Soft hizmeti askıya alabilir veya sonlandırabilir. Kullanıcı da aboneliğini yürürlükteki iptal koşullarına göre sonlandırabilir.'],
      ['12. Uyuşmazlık', 'Uyuşmazlıklarda yürürlükteki Türkiye Cumhuriyeti mevzuatı uygulanır. Taraflar öncelikle iyi niyetli çözüm ve yazılı iletişim yoluyla anlaşmazlığı gidermeye çalışır.']
    ]
  }
};

function LegalPage({ pageKey }) {
  const legal = legalPages[pageKey];
  if (!legal) return null;
  return <section className="agreement-page">
    <div className="section-shell">
      <div className="agreement-card">
        <p className="agreement-eyebrow">{legal.eyebrow}</p>
        <h1>{legal.title}</h1>
        <p className="agreement-intro">{legal.intro}</p>
        <div className="agreement-meta">
          <span>{site.companyLegalName}</span>
          <a href={site.mapsUrl} target="_blank" rel="noreferrer">{site.address}</a>
          <a href={`tel:${site.phone}`}>{site.phone}</a>
        </div>
        <div className="agreement-sections">
          {legal.sections.map(([title, text]) => <article key={title}><h2>{title}</h2><p>{text}</p></article>)}
        </div>
      </div>
    </div>
  </section>;
}

function AboutPage() {
  const serviceCards = [
    ['Özel Yazılım Geliştirme', 'ERP, CRM, e-ticaret, B2B bayi yazılımları ve işletmeye özel otomasyonlarla firmaların operasyonlarını dijitalleştiriyoruz.'],
    ['ERP & CRM Çözümleri', 'Müşteri, teklif, görev, sözleşme, ekip, rapor ve süreç yönetimini tek panelde birleştiren kurumsal yazılım çözümleri geliştiriyoruz.'],
    ['E-Ticaret ve B2B Platformları', 'Satış, bayi, sipariş ve müşteri deneyimini ölçeklenebilir yazılım mimarisiyle büyüten ticari platformlar tasarlıyoruz.'],
    ['3D Modelleme ve Akıllı Katalog', 'Ürünleri GLB tabanlı etkileşimli 3D deneyimlere ve dijital kataloglara dönüştürerek satış sunumlarını güçlendiriyoruz.'],
    ['Kurumsal Web ve Marka Kimliği', 'Kurumsal web sitesi, logo, sosyal medya, animasyon ve görsel tasarım çalışmalarıyla markaların dijital yüzünü güçlendiriyoruz.'],
    ['İhtiyaca Özel Dijital Çözümler', 'Rent a car, turizm, takip sistemleri, saha operasyonları ve özel sektör ihtiyaçlarına göre uçtan uca yazılım geliştiriyoruz.']
  ];

  return <section className="about-page-section">
    <div className="section-shell">
      <div className="about-hero-card reveal">
        <div>
          <p className="agreement-eyebrow">Zümre Soft</p>
          <h2>Teknoloji ve tasarımı işletmeler için büyüme aracına dönüştürüyoruz.</h2>
          <p>Zümre Soft olarak işletmelerin dijital dünyadaki parmak izini oluşturuyoruz. Karmaşık iş süreçlerini modernize eden yazılımlar, markanın ruhunu yansıtan tasarımlar ve satış ekiplerinin günlük işlerini hızlandıran CRM çözümleri geliştiriyoruz.</p>
          <p>Ebeo CRM; bu yaklaşımın satış, müşteri ilişkileri, teklif, sözleşme, görev ve raporlama tarafındaki ürünleşmiş halidir. Amacımız, firmaların dağınık müşteri ve satış verilerini tek merkezde toplayarak daha ölçülebilir, güvenli ve sürdürülebilir bir operasyon kurmasını sağlamaktır.</p>
        </div>
        <div className="about-contact-card">
          <strong>{site.companyLegalName}</strong>
          <a href={site.mapsUrl} target="_blank" rel="noreferrer">{site.address}</a>
          <a href={`tel:${site.phone}`}>+90 541 714 13 04</a>
          <a href={`mailto:${site.email}`}>{site.email}</a>
        </div>
      </div>

      <div className="about-values-grid reveal reveal-delay-2">
        {['İhtiyaca özel, ölçeklenebilir yazılım mimarileri', 'ERP, CRM ve sektörel takip sistemlerinde tam entegrasyon', 'Marka kimliğini güçlendiren modern görsel tasarımlar'].map(value =>
          <article key={value}><Icon name="check" className="h-5 w-5" /><span>{value}</span></article>
        )}
      </div>

      <SectionHeading
        eyebrow="Hizmetlerimiz"
        title="Yazılımdan tasarıma uçtan uca dijital çözüm üretiriz."
        description="Zümre Soft; özel yazılım, ERP/CRM, e-ticaret, B2B, 3D katalog ve kurumsal tasarım ihtiyaçlarını tek çatı altında planlayan teknoloji ekibidir."
      />

      <div className="about-service-grid">
        {serviceCards.map(([title, text]) => <article key={title} className="card-hover">
          <div className="about-service-icon"><Icon name="spark" className="h-5 w-5" /></div>
          <h3>{title}</h3>
          <p>{text}</p>
        </article>)}
      </div>
    </div>
  </section>;
}

const blogApiBase = `${crmAppBaseUrl}/api/public/blog`;

async function blogFetch(path, options = {}) {
  const response = await fetch(`${blogApiBase}${path}`, {
    ...options,
    headers: { 'Content-Type': 'application/json', ...(options.headers || {}) }
  });
  const payload = await response.json().catch(() => null);
  if (!response.ok && response.status !== 301) {
    throw new Error(payload?.message || 'Blog içeriği alınamadı.');
  }
  return payload;
}

function BlogSkeleton({ count = 3 }) {
  return <div className="blog-skeleton-grid" aria-label="İçerikler yükleniyor">
    {Array.from({ length: count }).map((_, index) => <div className="blog-skeleton-card" key={index}><i></i><span></span><b></b><b></b><em></em></div>)}
  </div>;
}

function formatBlogDate(value) {
  if (!value) return '';
  return new Intl.DateTimeFormat('tr-TR', { day: '2-digit', month: 'long', year: 'numeric' }).format(new Date(value));
}

function resolveBlogImage(url) {
  if (!url) return '';
  // Existing production records still point at the original SVG covers.
  // Keep those records compatible while serving the new photographic covers.
  if (/^\/blog\/[^?#]+\.svg(?:[?#].*)?$/i.test(url)) {
    return url.replace(/\.svg(?=([?#]|$))/i, '.jpg');
  }
  return url;
}

function absoluteBlogImage(url) {
  const resolvedUrl = resolveBlogImage(url);
  if (!resolvedUrl) return 'https://www.ebeocrm.com/ebeo-crm-logo-wide.png';
  if (/^https?:\/\//i.test(resolvedUrl)) return resolvedUrl;
  return `https://www.ebeocrm.com${resolvedUrl.startsWith('/') ? resolvedUrl : `/${resolvedUrl}`}`;
}

function BlogCard({ post, featured = false, compact = false }) {
  if (!post) return null;
  return <article className={`premium-blog-card ${featured ? 'is-featured' : ''} ${compact ? 'is-compact' : ''}`}>
    <button type="button" className="blog-card-cover" onClick={() => setPath(`/blog/${post.slug}`)} aria-label={`${post.title} makalesini oku`}>
      <img src={resolveBlogImage(post.coverImageUrl)} alt={post.coverImageAlt || post.title} loading="lazy" width="800" height="450" />
      {post.category && <span style={{ '--category': post.category.color }}>{post.category.name}</span>}
    </button>
    <div className="blog-card-body">
      <div className="blog-card-meta"><span>{formatBlogDate(post.publishedAtUtc)}</span><span>{post.readingMinutes} dk okuma</span></div>
      <h3><button type="button" onClick={() => setPath(`/blog/${post.slug}`)}>{post.title}</button></h3>
      {!compact && <p>{post.excerpt}</p>}
      <div className="blog-card-footer">
        <span className="blog-author-mini">{post.author?.fullName || 'Ebeo İçerik Ekibi'}</span>
        <button type="button" onClick={() => setPath(`/blog/${post.slug}`)} aria-label="Makaleyi aç">Oku <span>↗</span></button>
      </div>
    </div>
  </article>;
}

function BlogSection({ eyebrow, title, posts, featured = false }) {
  if (!posts?.length) return null;
  return <section className="blog-content-section reveal">
    <div className="blog-section-head"><div><span>{eyebrow}</span><h2>{title}</h2></div><button type="button" onClick={() => document.getElementById('tum-yazilar')?.scrollIntoView({ behavior: 'smooth' })}>Tümünü gör <b>↗</b></button></div>
    <div className={featured ? 'blog-featured-grid' : 'blog-card-grid'}>
      {posts.map((post, index) => <BlogCard key={post.id} post={post} featured={featured && index === 0} compact={featured && index > 0} />)}
    </div>
  </section>;
}

function BlogIndexPage() {
  const [home, setHome] = useState(null);
  const [listing, setListing] = useState({ items: [], totalPages: 1, total: 0 });
  const [q, setQ] = useState('');
  const [category, setCategory] = useState('');
  const [sort, setSort] = useState('latest');
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const [listLoading, setListLoading] = useState(true);
  const [error, setError] = useState('');
  const [newsletter, setNewsletter] = useState('');
  const [subscribed, setSubscribed] = useState(false);

  useEffect(() => {
    let active = true;
    setLoading(true);
    blogFetch('/home').then(data => { if (active) { setHome(data); setError(''); } }).catch(err => active && setError(err.message)).finally(() => active && setLoading(false));
    return () => { active = false; };
  }, []);

  useEffect(() => {
    if (!home?.latest?.length) return;
    setJsonLd('blog-index-schema', {
      '@context':'https://schema.org', '@type':'CollectionPage', name:'Ebeo CRM, ERP ve Dijital Dönüşüm Blogu',
      url:'https://www.ebeocrm.com/blog', description:routes['/blog'].description,
      mainEntity:{ '@type':'ItemList', itemListElement:home.latest.map((post,index)=>({ '@type':'ListItem', position:index+1, url:`https://www.ebeocrm.com/blog/${post.slug}`, name:post.title })) }
    });
    return () => removeJsonLd('blog-index-schema');
  }, [home]);

  useEffect(() => {
    let active = true;
    const timer = window.setTimeout(() => {
      setListLoading(true);
      const params = new URLSearchParams({ page: String(page), pageSize: '6', sort });
      if (q.trim()) params.set('q', q.trim());
      if (category) params.set('category', category);
      blogFetch(`/posts?${params}`).then(data => { if (active) setListing(data); }).catch(err => active && setError(err.message)).finally(() => active && setListLoading(false));
    }, 320);
    return () => { active = false; clearTimeout(timer); };
  }, [q, category, sort, page]);

  const chooseCategory = slug => { setCategory(slug === category ? '' : slug); setPage(1); document.getElementById('tum-yazilar')?.scrollIntoView({ behavior: 'smooth' }); };
  const submitNewsletter = async event => {
    event.preventDefault();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(newsletter)) return;
    try {
      await blogFetch('/newsletter', { method: 'POST', body: JSON.stringify({ email: newsletter, source: 'LandingBlog' }) });
      setSubscribed(true);
      setError('');
    } catch (err) {
      setError(err.message);
    }
  };

  return <div className="blog-world">
    <section className="blog-hero">
      <div className="blog-hero-orbit one"></div><div className="blog-hero-orbit two"></div>
      <div className="section-shell blog-hero-inner">
        <div className="blog-hero-copy">
          <span className="blog-kicker"><i></i>Ebeo Bilgi Merkezi</span>
          <h1>İşletmenizi büyüten <em>CRM, ERP ve üretim</em> rehberleri.</h1>
          <p>Satıştan üretime, müşteri yönetiminden kaliteye kadar sahada uygulanabilen, kaynaklı ve güncel içerikler.</p>
          <label className="blog-search"><Icon name="search" className="h-5 w-5" /><input value={q} onChange={event => { setQ(event.target.value); setPage(1); }} placeholder="CRM, teklif, üretim veya kalite ara..." /><kbd>⌘ K</kbd></label>
          <div className="blog-category-chips">
            <button className={!category ? 'active' : ''} onClick={() => chooseCategory('')}>Tüm Yazılar</button>
            {home?.categories?.map(item => <button key={item.slug} className={category === item.slug ? 'active' : ''} onClick={() => chooseCategory(item.slug)}><i style={{ background: item.color }}></i>{item.name}<b>{item.postCount}</b></button>)}
          </div>
        </div>
        <div className="blog-hero-featured">
          {loading ? <BlogSkeleton count={1} /> : home?.featured ? <BlogCard post={home.featured} featured /> : null}
        </div>
      </div>
    </section>

    <div className="section-shell blog-page-content">
      {error && <div className="blog-error"><strong>İçerikler şu anda alınamıyor.</strong><span>{error}</span><button type="button" onClick={() => window.location.reload()}>Tekrar dene</button></div>}
      {loading ? <BlogSkeleton count={6} /> : <>
        <BlogSection eyebrow="Editörün seçtikleri" title="Önce bunları okuyun" posts={home?.editorPicks} featured />
        <BlogSection eyebrow="Gündemde" title="Trend yazılar" posts={home?.trending} />
        <section className="blog-product-bridge reveal">
          <div><span>Ebeo ile uygulayın</span><h2>Okuduğunuz yöntemi gerçek iş akışına dönüştürün.</h2><p>Müşteri 360, teklif, sözleşme, otomasyon, üretim ve kalite modülleri aynı veri düzeninde çalışır.</p></div>
          <div>{[['users','Müşteri 360'],['file','Teklif Yönetimi'],['map','Saha ve Rota'],['kanban','Görev Kanban']].map(([icon,label])=><button key={label} onClick={()=>setPath('/moduller')}><Icon name={icon} className="h-5 w-5"/><span>{label}</span></button>)}</div>
        </section>
        <BlogSection eyebrow="En çok okunanlar" title="Okurların tercihleri" posts={home?.popular} />
      </>}

      <section className="all-posts-section reveal" id="tum-yazilar">
        <div className="blog-section-head">
          <div><span>Bilgi kütüphanesi</span><h2>Son yazılar</h2><p>{listing.total || 0} kapsamlı rehber</p></div>
          <select value={sort} onChange={event => { setSort(event.target.value); setPage(1); }} aria-label="Makaleleri sırala"><option value="latest">En yeni</option><option value="popular">En çok okunan</option><option value="reading">Okuma süresi</option><option value="oldest">En eski</option></select>
        </div>
        {listLoading ? <BlogSkeleton count={6} /> : listing.items.length ? <div className="blog-card-grid">{listing.items.map(post => <BlogCard key={post.id} post={post} />)}</div> : <div className="blog-empty"><Icon name="search" className="h-8 w-8" /><strong>Aramanızla eşleşen yazı bulunamadı.</strong><span>Başka bir kelime veya kategori deneyin.</span></div>}
        {listing.totalPages > 1 && <nav className="blog-pagination" aria-label="Blog sayfalama"><button disabled={page <= 1} onClick={() => setPage(page - 1)}>← Önceki</button><span>{page} / {listing.totalPages}</span><button disabled={page >= listing.totalPages} onClick={() => setPage(page + 1)}>Sonraki →</button></nav>}
      </section>

      <section className="blog-newsletter reveal">
        <div className="newsletter-visual"><span>01</span><i></i><span>02</span><i></i><span>03</span></div>
        <div><span className="blog-kicker">Aylık Ebeo Notları</span><h2>Gürültüsüz, uygulanabilir iş yönetimi içeriği.</h2><p>Ayda en fazla iki e-posta. CRM, ERP, satış ve üretim alanında yalnızca uygulanabilir rehberler.</p></div>
        {subscribed ? <div className="newsletter-success">✓ Kaydınız alındı.</div> : <form onSubmit={submitNewsletter}><input type="email" value={newsletter} onChange={e=>setNewsletter(e.target.value)} required placeholder="is@epostaniz.com" aria-label="E-posta adresi" /><button>Abone ol</button></form>}
      </section>

      <section className="blog-final-cta reveal"><div><span>14 gün ücretsiz deneyin</span><h2>Bilgiyi aksiyona dönüştüren çalışma alanınızı kurun.</h2><p>Müşteri, satış, teklif, görev, üretim ve raporlama süreçlerini Ebeo ile tek merkezde yönetin.</p></div><button onClick={() => openCrmRoute('/Auth/Register')}>Ücretsiz başlayın <b>↗</b></button></section>
    </div>
  </div>;
}

function useBlogSeo(post) {
  useEffect(() => {
    if (!post) return;
    const title = post.seo?.title || post.title;
    const description = post.seo?.description || post.excerpt;
    const canonical = post.seo?.canonicalUrl || `https://www.ebeocrm.com/blog/${post.slug}`;
    const image = absoluteBlogImage(post.ogImageUrl || post.coverImageUrl);
    document.title = title;
    setHeadMeta('name', 'description', description);
    setHeadMeta('name', 'keywords', [post.seo?.focusKeyword, ...(post.seo?.secondaryKeywords || [])].filter(Boolean).join(', '));
    setHeadMeta('name', 'robots', `${post.seo?.noIndex ? 'noindex' : 'index'},${post.seo?.noFollow ? 'nofollow' : 'follow'},max-image-preview:large,max-snippet:-1,max-video-preview:-1`);
    setHeadLink('canonical', canonical);
    setHeadMeta('property', 'og:type', 'article'); setHeadMeta('property', 'og:title', title); setHeadMeta('property', 'og:description', description); setHeadMeta('property', 'og:url', canonical); setHeadMeta('property', 'og:image', image);
    setHeadMeta('property', 'article:published_time', post.publishedAtUtc); setHeadMeta('property', 'article:modified_time', post.updatedAtUtc || post.publishedAtUtc); setHeadMeta('property', 'article:section', post.category?.name || 'Blog');
    setHeadMeta('name', 'twitter:card', 'summary_large_image'); setHeadMeta('name', 'twitter:title', title); setHeadMeta('name', 'twitter:description', description); setHeadMeta('name', 'twitter:image', image);
    setJsonLd('blog-article-schema', { '@context':'https://schema.org','@type':'Article', headline:post.title, description, image:[image], datePublished:post.publishedAtUtc, dateModified:post.updatedAtUtc || post.publishedAtUtc, mainEntityOfPage:canonical, author:{'@type':'Person',name:post.author?.fullName || 'Ebeo İçerik Ekibi',url:`https://www.ebeocrm.com/blog/yazar/${post.author?.slug || 'ebeo-icerik-ekibi'}`}, publisher:{'@type':'Organization',name:'Zümre Soft Yazılım Hizmetleri Ltd. Şti.',url:'https://www.ebeocrm.com',logo:{'@type':'ImageObject',url:'https://www.ebeocrm.com/ebeo-crm-logo-wide.png'}}, wordCount:post.wordCount, articleSection:post.category?.name, keywords:[post.seo?.focusKeyword,...(post.seo?.secondaryKeywords||[])].filter(Boolean).join(', ') });
    setJsonLd('blog-breadcrumb-schema', { '@context':'https://schema.org','@type':'BreadcrumbList',itemListElement:[{'@type':'ListItem',position:1,name:'Ana Sayfa',item:'https://www.ebeocrm.com/'},{'@type':'ListItem',position:2,name:'Blog',item:'https://www.ebeocrm.com/blog'},{'@type':'ListItem',position:3,name:post.title,item:canonical}]});
    setJsonLd('blog-author-schema', { '@context':'https://schema.org','@type':'ProfilePage',name:post.author?.fullName || 'Ebeo İçerik Ekibi',mainEntity:{'@type':'Person',name:post.author?.fullName || 'Ebeo İçerik Ekibi',jobTitle:post.author?.title,description:post.author?.biography,knowsAbout:post.author?.expertise || []} });
    if (post.faqs?.length) setJsonLd('blog-faq-schema', { '@context':'https://schema.org','@type':'FAQPage',mainEntity:post.faqs.map(item=>({'@type':'Question',name:item.question,acceptedAnswer:{'@type':'Answer',text:item.answer}})) });
    return () => { removeJsonLd('blog-article-schema'); removeJsonLd('blog-breadcrumb-schema'); removeJsonLd('blog-author-schema'); removeJsonLd('blog-faq-schema'); };
  }, [post]);
}

function safeBlogHref(value) {
  const url = String(value || '');
  return /^https?:\/\//i.test(url) || url.startsWith('/') ? url : '#';
}

function youtubeEmbed(value) {
  const url = String(value || '');
  const match = url.match(/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/))([^&?/]+)/i);
  return match ? `https://www.youtube-nocookie.com/embed/${match[1]}` : '';
}

function BlogContentBlock({ block, slug, visitorId }) {
  if (!block) return null;
  if (block.type === 'heading') { const Tag = block.level === 3 ? 'h3' : 'h2'; return <Tag id={block.id || undefined}>{block.text}</Tag>; }
  if (block.type === 'lead') return <p className="article-lead">{block.text}</p>;
  if (block.type === 'paragraph') return <p>{block.text}</p>;
  if (block.type === 'list') { const Tag = block.ordered ? 'ol' : 'ul'; return <Tag>{(block.items || []).map((item,index)=><li key={index}>{item}</li>)}</Tag>; }
  if (block.type === 'image') return <figure><img src={safeBlogHref(block.url)} alt={block.alt || ''} loading="lazy" width="960" height="540" />{block.caption && <figcaption>{block.caption}</figcaption>}</figure>;
  if (block.type === 'video') { const embed=youtubeEmbed(block.url); return embed ? <figure className="article-video"><iframe src={embed} title={block.title || 'Video'} loading="lazy" allowFullScreen></iframe></figure> : <a href={safeBlogHref(block.url)} target="_blank" rel="noreferrer">{block.title || 'Videoyu aç'}</a>; }
  if (block.type === 'code') return <pre><span>{block.language || 'code'}</span><code>{block.code}</code></pre>;
  if (block.type === 'table') return <div className="article-table-wrap"><table><thead><tr>{(block.headers||[]).map((item,index)=><th key={index}>{item}</th>)}</tr></thead><tbody>{(block.rows||[]).map((row,rowIndex)=><tr key={rowIndex}>{row.map((cell,index)=><td key={index}>{cell}</td>)}</tr>)}</tbody></table></div>;
  if (block.type === 'callout') return <aside className={`article-callout ${block.style || 'info'}`}><strong>{block.title}</strong><p>{block.text}</p></aside>;
  if (block.type === 'accordion') return <details className="article-accordion"><summary>{block.title}</summary><p>{block.text}</p></details>;
  if (block.type === 'quote') return <blockquote><p>{block.text}</p>{block.source && <cite>{block.source}</cite>}</blockquote>;
  if (block.type === 'stat') return <aside className="article-stat"><strong>{block.value}</strong><span>{block.label}</span>{block.sourceUrl && <a href={safeBlogHref(block.sourceUrl)} target="_blank" rel="noreferrer">{block.source} ↗</a>}</aside>;
  if (block.type === 'timeline') return <div className="article-timeline">{(block.items||[]).map((item,index)=><article key={index}><span>{item.period}</span><div><strong>{item.title}</strong><p>{item.text}</p></div></article>)}</div>;
  if (block.type === 'sources') return <section className="article-sources"><h2>{block.title || 'Kaynaklar'}</h2><ol>{(block.items||[]).map((item,index)=><li key={index}><a href={safeBlogHref(item.url)} target="_blank" rel="noreferrer">{item.title}<span>↗</span></a></li>)}</ol></section>;
  if (block.type === 'relatedProduct') return <aside className="article-product"><Icon name="spark" className="h-6 w-6"/><div><strong>{block.title}</strong><p>{block.text}</p></div><button onClick={()=>setPath(safeBlogHref(block.url))}>İncele</button></aside>;
  if (block.type === 'cta' || block.type === 'banner') return <aside className="article-cta"><div>{block.eyebrow && <span>{block.eyebrow}</span>}<strong>{block.title}</strong><p>{block.text}</p></div><a href={safeBlogHref(block.buttonUrl)} onClick={()=>blogFetch(`/posts/${slug}/cta`,{method:'POST',body:JSON.stringify({visitorId,ctaKey:block.id||'article-cta',targetUrl:block.buttonUrl})}).catch(()=>{})}>{block.buttonText || 'İncele'} <b>↗</b></a></aside>;
  return null;
}

function BlogDetailPage({ path }) {
  const slug = decodeURIComponent(path.replace('/blog/', '').split('/')[0]);
  const [post, setPost] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [copied, setCopied] = useState(false);
  const visitorId = useMemo(() => {
    let value = localStorage.getItem('ebeo-blog-visitor');
    if (!value) { value = crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`; localStorage.setItem('ebeo-blog-visitor', value); }
    return value;
  }, []);
  useBlogSeo(post);

  useEffect(() => {
    let active = true; setLoading(true);
    blogFetch(`/posts/${encodeURIComponent(slug)}`).then(data => {
      if (!active) return;
      if (data?.redirect) { setPath(data.redirect); return; }
      setPost(data); setError('');
      const params = new URLSearchParams(window.location.search);
      blogFetch(`/posts/${encodeURIComponent(slug)}/view`, { method:'POST', body:JSON.stringify({ visitorId, referrer:document.referrer, utmSource:params.get('utm_source'), utmMedium:params.get('utm_medium'), utmCampaign:params.get('utm_campaign') }) }).catch(()=>{});
    }).catch(err => active && setError(err.message)).finally(()=>active&&setLoading(false));
    return ()=>{active=false};
  }, [slug, visitorId]);

  const headings = (post?.content || []).filter(block => block.type === 'heading' && block.text);
  const share = async () => { const data={title:post.title,text:post.excerpt,url:window.location.href}; if(navigator.share) await navigator.share(data); else {await navigator.clipboard.writeText(window.location.href);setCopied(true);setTimeout(()=>setCopied(false),1600)} };
  if (loading) return <div className="blog-world"><div className="section-shell article-loading"><BlogSkeleton count={3}/></div></div>;
  if (error || !post) return <div className="blog-world"><div className="section-shell blog-detail-error"><span>404</span><h1>Makale bulunamadı.</h1><p>{error || 'Aradığınız içerik yayından kaldırılmış veya taşınmış olabilir.'}</p><button onClick={()=>setPath('/blog')}>Bloga dön</button></div></div>;

  return <div className="blog-world article-world">
    <article>
      <header className="article-hero">
        <div className="section-shell">
          <nav className="article-breadcrumb" aria-label="Breadcrumb"><button onClick={()=>setPath('/')}>Ana Sayfa</button><span>›</span><button onClick={()=>setPath('/blog')}>Blog</button><span>›</span><em>{post.category?.name}</em></nav>
          <div className="article-hero-grid">
            <div className="article-title-block">
              <span className="article-category" style={{'--category':post.category?.color}}>{post.category?.name}</span>
              <h1>{post.title}</h1>
              <p>{post.excerpt}</p>
              <div className="article-byline"><span className="article-author-avatar">{(post.author?.fullName||'Ebeo').split(' ').slice(0,2).map(x=>x[0]).join('')}</span><div><strong>{post.author?.fullName}</strong><small>{post.author?.title}</small></div><i></i><span>{formatBlogDate(post.publishedAtUtc)}</span><span>{post.readingMinutes} dk okuma</span></div>
            </div>
            <figure className="article-cover"><img src={resolveBlogImage(post.coverImageUrl)} alt={post.coverImageAlt} width="1200" height="675" fetchPriority="high" /></figure>
          </div>
        </div>
      </header>
      <div className="section-shell article-layout">
        <aside className="article-toc"><strong>İçindekiler</strong><nav>{headings.map((item,index)=><a key={item.id||index} href={`#${item.id}`}>{item.text}</a>)}</nav><button type="button" onClick={share}>{copied?'Bağlantı kopyalandı':'Makaleyi paylaş'} <span>↗</span></button></aside>
        <main className="article-content">{post.content.map((block,index)=><BlogContentBlock key={block.id||index} block={block} slug={slug} visitorId={visitorId}/>)}
          {post.faqs?.length>0&&<section className="article-faq"><span>Merak edilenler</span><h2>Sıkça sorulan sorular</h2>{post.faqs.map((item,index)=><details key={index}><summary>{item.question}<b>+</b></summary><p>{item.answer}</p></details>)}</section>}
          <section className="article-author-box"><span className="article-author-avatar">{(post.author?.fullName||'Ebeo').split(' ').slice(0,2).map(x=>x[0]).join('')}</span><div><small>Yazar</small><strong>{post.author?.fullName}</strong><p>{post.author?.biography}</p></div></section>
        </main>
        <aside className="article-share"><button onClick={share} title="Paylaş">↗</button><a href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(window.location.href)}`} target="_blank" rel="noreferrer">in</a><a href={`https://twitter.com/intent/tweet?url=${encodeURIComponent(window.location.href)}&text=${encodeURIComponent(post.title)}`} target="_blank" rel="noreferrer">𝕏</a></aside>
      </div>
      {post.related?.length>0&&<section className="section-shell related-articles"><div className="blog-section-head"><div><span>Okumaya devam edin</span><h2>İlgili makaleler</h2></div></div><div className="blog-card-grid">{post.related.map(item=><BlogCard key={item.id} post={item}/>)}</div></section>}
      <section className="section-shell blog-final-cta article-end-cta"><div><span>14 gün ücretsiz deneyin</span><h2>Bu rehberi kendi sürecinizde uygulayın.</h2><p>Ebeo CRM ve ERP modüllerini gerçek ekibinizle deneyin.</p></div><button onClick={()=>openCrmRoute('/Auth/Register')}>Ücretsiz başlayın <b>↗</b></button></section>
    </article>
  </div>;
}

function SimplePage({ path }) {
  const page = routes[path];
  if (solutionPages[path]) return <SolutionPage path={path} />;
  if (path === '/iletisim') return <><PageHero title="Sizi Arayalım" subtitle={page.description} eyebrow="İletişim" /><section className="callback-page-section"><div className="section-shell callback-page-grid"><div className="callback-info-card"><h2>Zümre Soft ekibi sizi arasın.</h2><p>Ebeo CRM’in firmanızdaki müşteri, teklif, görev ve satış sürecine nasıl uyarlanacağını birlikte değerlendirelim.</p><a href="tel:05417141304">0541 714 13 04</a><a href="mailto:iletisim@zumresoft.com">iletisim@zumresoft.com</a></div><CallbackForm /></div></section></>;
  if (path === '/kullanim-sozlesmesi') return <UsageAgreementPage />;
  if (legalPages[path]) return <LegalPage pageKey={path} />;
  if (path === '/blog') return <BlogIndexPage />;
  return <>
    <PageHero title={page.title.replace('Ebeo CRM | ', '')} subtitle={page.description} eyebrow={page.title} />
    {path === '/ozellikler' && <FeatureCards />}
    {path === '/moduller' && <ModuleSection />}
    {path === '/fiyatlandirma' && <PricingSection />}
    {path === '/hakkimizda' && <AboutPage />}
  </>;
}

function Footer() {
  const productLinks = [
    ['Müşteri Yönetimi', '/moduller'], ['Teklif Yönetimi', '/moduller'], ['Sözleşmeler', '/moduller'], ['Görev Kanban', '/moduller'], ['Toplu Mail', '/moduller'], ['Raporlama', '/moduller']
  ];
  const companyLinks = [['Hakkımızda', '/hakkimizda'], ['Blog', '/blog'], ['İletişim', '/iletisim'], ['Kullanım Sözleşmesi', '/kullanim-sozlesmesi']];
  const solutionLinks = [['CRM Yazılımı', '/crm-yazilimi'], ['Müşteri Takip Programı', '/musteri-takip-programi'], ['Satış Takip Programı', '/satis-takip-programi'], ['Teklif Hazırlama', '/teklif-hazirlama-programi'], ['Haritadan Müşteri Bulma', '/haritadan-musteri-bulma']];
  const legalLinks = [
    ['Teslimat ve İade Şartları', '/teslimat-iade-sartlari'],
    ['Gizlilik Sözleşmesi', '/gizlilik-sozlesmesi'],
    ['Mesafeli Satış Sözleşmesi', '/mesafeli-satis-sozlesmesi']
  ];
  const socialLinks = [
    ['Instagram', 'https://www.instagram.com/zumresoft/', <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.2"/></svg>],
    ['LinkedIn', 'https://www.linkedin.com/company/zumresoft/?viewAsMember=true', <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4V9h4v2"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>],
    ['Facebook', 'https://www.facebook.com/zumresoft/', <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>]
  ];
  return <footer className="site-footer">
    <div className="section-shell">
      <div className="footer-top-card">
        <div>
          <span>14 gün ücretsiz deneme</span>
          <h2>Müşteri, satış ve ekip operasyonunuzu tek CRM panelinde toplayın.</h2>
        </div>
        <button onClick={() => openCrmRoute('/Auth/Register')}>Ücretsiz Başlayın</button>
      </div>

      <div className="footer-main-grid">
        <div className="footer-brand-col">
          <img src={site.logo} alt="Ebeo CRM logosu" className="footer-logo" />
          <p>Ebeo CRM; müşteri yönetimi, teklif, sözleşme, görev, aktivite, toplu mail, belge ve raporlama süreçlerini aynı çalışma alanında birleştiren modern CRM platformudur.</p>
          <div className="footer-socials" aria-label="Sosyal medya hesapları">
            {socialLinks.map(([label, href, icon]) => <a key={label} href={href} target="_blank" rel="noreferrer" aria-label={label}>{icon}</a>)}
          </div>
        </div>

        <div className="footer-link-col">
          <h3>Platform</h3>
          {productLinks.map(([label, href]) => <SiteLink key={label} href={href}>{label}</SiteLink>)}
        </div>

        <div className="footer-link-col">
          <h3>Çözümler</h3>
          {solutionLinks.map(([label, href]) => <SiteLink key={label} href={href}>{label}</SiteLink>)}
        </div>

        <div className="footer-link-col">
          <h3>Şirket</h3>
          {companyLinks.map(([label, href]) => <SiteLink key={label} href={href}>{label}</SiteLink>)}
          <a href={`${crmAppBaseUrl}/Auth/Login`}>Giriş Yap</a>
        </div>

        <div className="footer-link-col">
          <h3>Sözleşmeler</h3>
          {legalLinks.map(([label, href]) => <SiteLink key={label} href={href}>{label}</SiteLink>)}
        </div>

        <div className="footer-payment-col">
          <h3>Güvenli Ödeme</h3>
          <img src="/payment-logos.png" alt="iyzico, Mastercard, Visa, American Express ve Troy ödeme logoları" loading="lazy" />
        </div>
      </div>

      <div className="footer-bottom">
        <span>© 2026 Ebeo CRM. Zümre Soft Yazılım Hizmetleri. Tüm hakları saklıdır.</span>
      </div>
    </div>
  </footer>;
}

function App() {
  const path = useRoute();
  useReveal(path);
  const page = useMemo(() => path === '/'
    ? <HomePage />
    : path.startsWith('/blog/')
      ? <BlogDetailPage path={path} />
      : <SimplePage path={path} />, [path]);
  return <><Seo path={path} /><div className="min-h-screen bg-slate-50 text-slate-950"><Header path={path} /><main>{page}</main><Footer /></div></>;
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);