const { useEffect, useMemo, 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: 'Ebeo CRM | Satış ve Müşteri Yönetim Platformu', description: 'Ebeo CRM ile müşteri, teklif, fırsat, görev, aktivite, toplu mail, sözleşme ve raporlama süreçlerini tek panelden yönetin.' },
  '/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 paketleri ve firma ihtiyaçlarına göre ölçeklenebilir CRM planları.' },
  '/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: 'Blog', description: 'CRM, satış yönetimi, teklif takibi, müşteri ilişkileri ve toplu mail süreçleri hakkında içerikler.' },
  '/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 crmAppBaseUrl = (() => {
  const configured = window.EBEO_CRM_APP_URL || '';
  if (configured) return configured.replace(/\/$/, '');
  const isLocalLanding = ['5173', '5174', '5175'].includes(window.location.port);
  return isLocalLanding ? 'http://localhost:5086' : 'https://app.ebeocrm.com';
})();

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']
];

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'],
  ['Belge ve Drive Hazırlığı', 'Manuel belge yükleyin, belge tiplerini sınıflandırın ve Google Drive entegrasyonuna hazır belge yönetimiyle dosya düzenini koruyun.', '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 = [
  ['Google Drive', 'Belge yönetimine bağlanabilir dosya 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', 'Google Drive veya manuel belge yönetimi var mı?', 'Belge yönetimi ekranında manuel belge yüklenebilir. Google Drive entegrasyonuna hazır yapı ile Drive dosyaları sistemde kaynak bilgisiyle listelenebilir.'],
  ['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) {
  window.location.hash = path === '/' ? '#/' : `#${path}`;
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

function useRoute() {
  const read = () => (window.location.hash.replace('#', '') || '/');
  const [path, setCurrentPath] = useState(read());
  useEffect(() => {
    const onHash = () => setCurrentPath(read());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  return routes[path] ? path : '/';
}

function Seo({ path }) {
  useEffect(() => {
    const meta = routes[path] || routes['/'];
    document.title = meta.title;
    const description = document.querySelector('meta[name="description"]');
    if (description) description.setAttribute('content', meta.description);
    const canonical = document.querySelector('link[rel="canonical"]');
    if (canonical) canonical.setAttribute('href', `https://www.ebeocrm.com${path === '/' ? '/' : path}`);
    const ogTitle = document.querySelector('meta[property="og:title"]');
    if (ogTitle) ogTitle.setAttribute('content', meta.title);
    const ogDescription = document.querySelector('meta[property="og:description"]');
    if (ogDescription) ogDescription.setAttribute('content', meta.description);
  }, [path]);
  return null;
}

function useReveal(path) {
  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('in');
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12 });
    document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
    return () => 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ü">
      <button onClick={() => setPath('/')} className="flex items-center" aria-label="Ebeo CRM ana sayfa">
        <img src={site.logo} alt="Ebeo CRM logosu" className="logo-img" />
      </button>
      <div className="hidden items-center gap-1 lg:flex">
        {nav.map(([label, href]) => <button key={href} onClick={() => setPath(href)} className={`rounded-full px-4 py-2 text-sm font-bold transition ${path === href ? 'brand-gradient text-white shadow-lg shadow-violet-500/20' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-950'}`}>{label}</button>)}
      </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'], ['Giriş Yap', '/Auth/Login']].map(([label, href]) => <button key={href} onClick={() => { href.startsWith('/Auth/') ? openCrmRoute(href) : setPath(href); setOpen(false); }} className="rounded-2xl px-4 py-3 text-left text-sm font-bold text-slate-700 hover:bg-slate-100">{label}</button>)}
        <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 plans = [
    {
      name: 'BAŞLANGIÇ',
      annualPrice: '4.800₺',
      grossAnnualPrice: '5.760₺',
      monthlyEquivalent: '400₺',
      userRule: 'En fazla 3 kullanıcı kaydedilebilir.',
      features: [
        'Sınırsız müşteri ve firma kaydı',
        'Firma rehberi, yetkili kişi ve iletişim geçmişi',
        'Teklif oluşturma, PDF çıktısı ve teklif durum takibi',
        'Görev, aktivite, takvim ve hatırlatma yönetimi',
        'Müşteri haritası ile şehir/ilçe/sektör bazlı firma arama',
        'Temel dashboard, satış ve teklif raporları'
      ]
    },
    {
      name: 'PROFESYONEL',
      annualPrice: '10.800₺',
      grossAnnualPrice: '12.960₺',
      monthlyEquivalent: '900₺',
      userRule: 'Başlangıç planının tüm özellikleri ve gelişmiş CRM kabiliyetleri dahildir:',
      highlighted: true,
      features: [
        'Sınırsız kullanıcı kaydedilebilir',
        'Sınırsız müşteri, firma rehberi, kişi ve iletişim geçmişi',
        'Müşteri haritası, canlı firma arama ve Google Maps rota oluşturma',
        'Satış süreci, fırsat aşamaları, teklif ve ödeme/faturalandı takibi',
        'Kanban görev yönetimi, aktivite, takvim ve yaklaşan hatırlatmalar',
        'Gelişmiş teklif şablonları, PDF çıktıları ve sözleşme hazırlama',
        'Toplu e-posta gönderimi, sürükle-bırak mail şablonları ve kampanya takibi',
        'Belge yönetimi, manuel dosya yükleme ve Google Drive bağlantısı',
        'Otomasyon kuralları, bildirimler ve ekip içi sosyal akış',
        'Gelişmiş rol/yetki yönetimi ve rol kopyalama',
        'Firma bazlı çoklu ekip ve departman organizasyonu',
        'Gelişmiş raporlama, dönüşüm analizi ve performans görünümü',
        'Kurumsal bildirim tercihleri ve sistem e-posta altyapısı',
        'Paraşüt ürün, müşteri ve satış faturası entegrasyonu',
        'Kullanıcı işlem geçmişi, güvenli erişim ve tenant bazlı veri ayrımı',
        'Özel entegrasyonlara hazır API-first altyapı ve öncelikli destek'
      ]
    }
  ];
  return <section className="bg-white py-20 md:py-28">
    <div className="section-shell">
      <SectionHeading eyebrow="Planlar" title="Kullanıcı başı net ve ölçeklenebilir CRM paketleri" description="Her firma ihtiyacı kadar kullanıcı alır. Paket kapsamı büyüdükçe satış, teklif, otomasyon, entegrasyon ve yetki yönetimi daha güçlü hale gelir." />
      <div className="mx-auto mt-12 grid max-w-5xl gap-6 lg:grid-cols-2">
        {plans.map((plan) => <article key={plan.name} className={`pricing-plan-card ${plan.highlighted ? 'is-highlighted' : ''}`}>
          {plan.highlighted && <span className="pricing-recommend-badge">En Çok Tercih Edilen</span>}
          <div className="pricing-plan-head">
            <h3>{plan.name}</h3>
          </div>
          <div className="pricing-price-zone">
            <div className="pricing-main-line"><strong>{plan.annualPrice}</strong><small>+ KDV / Yıl</small></div>
            <div className="pricing-monthly-equivalent">Aylık karşılığı: <strong>{plan.monthlyEquivalent} + KDV</strong></div>
            <div className="pricing-annual">KDV dahil yıllık tahsilat: <strong>{plan.grossAnnualPrice}</strong></div>
          </div>
          <div className="pricing-special-ribbon" aria-hidden="true"></div>
          <div className="pricing-plan-body">
            <p className="pricing-user-rule">{plan.userRule}</p>
            <ul>
              {plan.features.map((feature) => <li key={feature}><span></span>{feature}</li>)}
            </ul>
            <button onClick={() => openCrmRoute('/Auth/Register')} className="pricing-cta">14 Gün Ücretsiz Dene</button>
          </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 CallbackForm() {
  const [sent, setSent] = useState(false);
  const [error, setError] = useState('');
  const submit = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const required = ['fullName', 'email', 'phone'];
    if (required.some(key => !String(data.get(key) || '').trim())) { setError('Lütfen ad soyad, e-posta ve telefon alanlarını 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; }
    setError(''); setSent(true); event.currentTarget.reset();
  };
  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>}
    <label><span>Ad Soyad</span><input name="fullName" placeholder="Adınız Soyadınız" /></label>
    <label><span>E-posta</span><input name="email" type="email" placeholder="mail@firma.com" /></label>
    <label><span>Telefon</span><input name="phone" inputMode="tel" placeholder="05xx xxx xx xx" /></label>
    <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>
    <button type="submit" className="callback-submit">Sizi Arayalım</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 />
    <WorkflowSection />
    <ModuleSection />
    <CTASection />
    <PricingSection />
    <FAQSection />
  </>;
}

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ı', 'Google Drive, 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, Google Drive 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>;
}

function SimplePage({ path }) {
  const page = routes[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 <><PageHero title="Blog" subtitle={page.description} eyebrow="Blog" /><section className="py-20"><div className="section-shell grid gap-6 md:grid-cols-3">{blogPosts.map(([a, b, c]) => <article key={a} className="card-hover rounded-[2rem] border border-slate-200 bg-white p-6"><span className="rounded-full bg-violet-50 px-3 py-1 text-sm font-bold text-violet-700">{c}</span><h2 className="mt-5 text-xl font-bold">{a}</h2><p className="mt-3 leading-7 text-slate-600">{b}</p></article>)}</div></section></>;
  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 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]) => <button key={label} onClick={() => setPath(href)}>{label}</button>)}
        </div>

        <div className="footer-link-col">
          <h3>Şirket</h3>
          {companyLinks.map(([label, href]) => <button key={label} onClick={() => setPath(href)}>{label}</button>)}
          <button onClick={() => openCrmRoute('/Auth/Login')}>Giriş Yap</button>
        </div>

        <div className="footer-link-col">
          <h3>Sözleşmeler</h3>
          {legalLinks.map(([label, href]) => <button key={label} onClick={() => setPath(href)}>{label}</button>)}
        </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 /> : <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 />);