/* global React */
const { useState: useStateS, useEffect: useEffectS } = React;

// ═══════════════════════════════════════════════════════════════
// FEATURES SECTION — alternating demos
// ═══════════════════════════════════════════════════════════════
const FEATURE_DEFS = [
  {
    key: "kanban",
    tag: "01 / Müşteri Takip Panosu",
    title: "Hangi müşteri ne aşamada — tek bakışta gör.",
    body: "Sana mesaj atan, toptancı fiyatı soran, ama henüz sipariş vermeyen, teklif bekleyen, satış olmuş — her müşteri kendi sırasında durur. Hiç kimse arada kaybolmaz, hiç kimse unutulmaz. Müşteri kaçma oranın düşer, çünkü her birinin nerede kaldığını biliyorsun.",
    bullets: [
      "Mesaj attı / fiyat sordu / teklif bekliyor — durumlara göre ayır",
      "Toptancı fiyat soran ama henüz almayan müşteri unutulmasın",
      "Parmağınla sürükle, müşterinin durumunu güncelle",
      "Açık teklifler, kim ne kadar para getiriyor — anlık toplam",
    ],
    Demo: () => <KanbanDemo speed={window.__yukaSpeed || 1} />,
  },
  {
    key: "avci",
    tag: "02 / Müşteri Avcısı",
    title: "Tek tıkla binlerce yeni müşteri adayı bul.",
    body: "Sektörü yaz, şehri seç — 60 işletmeyi adresi, telefonu ve web sitesiyle önüne getirir. Aramaya, mesaj atmaya hemen başlarsın. Rusya, Belarus, Kazakistan gibi ülkelerde Yandex'ten de bakar.",
    bullets: [
      "Google Haritalar'dan otomatik liste",
      "Telefon, adres, web sitesi hazır gelir",
      "Aynı aramayı tekrar yapsan ek ücret yok",
      "Tek arama = 1 kredi, sınırı geçersen kredi başına cüzi ek",
    ],
    Demo: () => <AvciDemo speed={window.__yukaSpeed || 1} />,
  },
  {
    key: "chat",
    tag: "03 / Tek Ekrandan Tüm Sohbetler",
    title: "WhatsApp, Instagram, Facebook, Telegram — hepsi aynı yerde.",
    body: "Müşteri nereden yazarsa yazsın aynı ekrandan cevaplarsın. Sesli mesajı dinlemeden okursun — sistem otomatik yazıya çevirir. Her mesajın yanında o müşterinin durumu yazar, kafa karışmaz.",
    bullets: [
      "WhatsApp, Instagram, Facebook, Telegram, VK ve web — hepsi",
      "Sesli mesaj geldiğinde yazıya çevrilmiş hâli kendiliğinden çıkar",
      "Hazır yanıt şablonları — bir tıkla cevap",
      "Müşterinin satış aşaması mesajın yanında görünür",
    ],
    Demo: () => <ChatDemo speed={window.__yukaSpeed || 1} />,
  },
  {
    key: "broadcast",
    tag: "04 / Toplu Mesaj",
    title: "Yüzlerce müşteriye tek tıkla mesaj at.",
    body: "İster tüm müşterilere, ister sadece seçtiklerine. Mesajın içine müşterinin adı, sektörü kendiliğinden yazılır — herkese özel gibi görünür. Kim aldı, kim okudu, kim cevap verdi anlık görürsün.",
    bullets: [
      "Etiketle grupla — sadece istediklerine gönder",
      "Mesajda {isim}, {sektör} kendi kendine yerine geçer",
      "Hangi kanaldan kaç kişiye ulaştığı canlı akar",
      "WhatsApp kapanmama korumalı — hesabın güvende",
    ],
    Demo: () => <BroadcastDemo speed={window.__yukaSpeed || 1} />,
  },
  {
    key: "voice",
    tag: "05 / Sesli Mesaj Yazıya Çevirir",
    title: "Sesli mesajları dinlemeden anla.",
    body: "Müşteri sesli mesaj attı, dinlemeye vaktin yok. Sistem otomatik yazıya çevirir, anlamlı cümlelere döker. Yabancı dilde mesaj geldiyse Türkçe çevirisini de ekler.",
    bullets: [
      "Sesli mesajı kendiliğinden yazıya döker",
      "Akıllı düzeltme — okuyabileceğin hâle getirir",
      "Türkçe ⇄ İngilizce çeviri (isteğe bağlı)",
      "Sohbet listesinde özetini gör, açmana gerek yok",
    ],
    Demo: () => <VoiceDemo speed={window.__yukaSpeed || 1} />,
  },
  {
    key: "team",
    tag: "06 / Personel & Yetkiler",
    title: "Personeline ne kadar yetki vereceğine sen karar ver.",
    body: "Patron, müdür, satış temsilcisi — herkesin kendi yetki sınırı olur. İstemediğin bilgiyi (mesela telefon numarasını) personelden gizleyebilirsin. Kim ne yaptı, hangi müşteriyi nasıl değiştirdi her şey kayıtlı.",
    bullets: [
      "3 hazır yetki seviyesi + istediğin gibi özelleştir",
      "Telefon numarasını personele gizleyebilirsin",
      "Kim hangi müşteriyi nasıl değiştirdi — geçmiş kayıtlı",
      "Davet linki yolla, 30 saniyede personeli sisteme ekle",
    ],
    Demo: () => <TeamDemo speed={window.__yukaSpeed || 1} />,
  },
  {
    key: "social",
    tag: "07 / Sosyal Medya",
    title: "Bir kere yaz, üç kanalda yayınla.",
    body: "Instagram, Facebook, Telegram için aynı paylaşımı hazırlarsın. Görseli yükle, hangi saatte yayınlanacağını seç — sen ilgilenmesen bile saati gelince Yuka paylaşır.",
    bullets: [
      "Tek ekrandan üç kanala paylaşım",
      "Saatli yayın — gece bile çalışır",
      "Görselli, bağlantı önizlemeli",
      "Gelen yorumlar mesaj kutuna düşer",
    ],
    Demo: () => <SocialDemo speed={window.__yukaSpeed || 1} />,
  },
  {
    key: "integrations",
    tag: "08 / Tüm Kanalların Bağlantısı",
    title: "Her kanal Yuka'ya konuşur — kurulumu tek tık.",
    body: "WhatsApp, Instagram, Facebook, Telegram, VK ve web sitendeki form — hepsi resmi bağlantılarla bağlanır. Üçüncü parti yazılım, karmaşık kurulum yok. Kuruluma 3 dakika.",
    bullets: [
      "Resmi WhatsApp, Instagram, Facebook bağlantıları",
      "Web sitene ekleyebileceğin iletişim formu",
      "Cep telefonuna anlık bildirim",
      "Başka programınla bağlamak istersen otomatik bildirim",
    ],
    Demo: () => <IntegrationsDemo speed={window.__yukaSpeed || 1} />,
  },
];

function FeatureRow({ f, index }) {
  const reverse = index % 2 === 1;
  const Demo = f.Demo;
  return (
    <div className={`demo-row ${reverse ? "reverse" : ""}`}>
      <div className="demo-text">
        <div className="demo-tag">{f.tag}</div>
        <h3>{f.title}</h3>
        <p>{f.body}</p>
        <ul>
          {f.bullets.map((b) => <li key={b}>{b}</li>)}
        </ul>
      </div>
      <Demo />
    </div>
  );
}

function FeaturesSection({ order }) {
  const features = order
    .map((k) => FEATURE_DEFS.find((f) => f.key === k))
    .filter(Boolean);

  return (
    <section id="ozellikler" className="section" style={{ paddingTop: 120 }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>ÜRÜN TURU</span>
          <h2 className="h-section">
            B2B satış ekibinizin <span className="serif">tek</span> ihtiyacı.
          </h2>
          <p>
            Yuka — yapay zeka destekli B2B satış ajansı. Yeni müşteri bulmaktan satışa kadar her şeyi tek panelde toplar.
            Aşağıdaki örnekler canlı çalışan animasyonlardır — ürünün gerçekte nasıl çalıştığını gösterir.
          </p>
        </div>

        {features.map((f, i) => (
          <FeatureRow f={f} index={i} key={f.key} />
        ))}
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// SOCIAL PROOF / METRICS
// ═══════════════════════════════════════════════════════════════
function MetricsSection() {
  const metrics = [
    { v: "6", l: "Kanal tek panelde", s: "WA · IG · FB · TG · VK · Web" },
    { v: "$0", l: "14 gün dene", s: "kart bilgisi gerekmez" },
    { v: "<3 dk", l: "Kuruluma kadar", s: "yardımcı oluyoruz" },
    { v: "✓", l: "WhatsApp kapanmama", s: "garanti veriyoruz" },
  ];
  return (
    <section className="section" style={{ background: "var(--bg-alt)", padding: "72px 0" }}>
      <div className="container">
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 32,
        }}>
          {metrics.map((m) => (
            <div key={m.l} style={{ borderLeft: "2px solid var(--accent)", paddingLeft: 18 }}>
              <div style={{ fontSize: 48, fontWeight: 600, letterSpacing: "-0.04em", color: "var(--ink)", lineHeight: 1 }}>
                {m.v}
              </div>
              <div style={{ marginTop: 10, fontSize: 15, fontWeight: 500, color: "var(--ink)" }}>{m.l}</div>
              <div style={{ marginTop: 4, fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.06em" }}>
                {m.s}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// PRICING SECTION
// ═══════════════════════════════════════════════════════════════
function PricingSection({ ctaText }) {
  return (
    <section id="fiyat" className="section">
      <div className="container">
        <div className="section-head" style={{ textAlign: "center", margin: "0 auto 56px" }}>
          <span className="eyebrow" style={{ marginInline: "auto" }}><span className="dot"></span>FİYATLANDIRMA</span>
          <h2 className="h-section" style={{ marginTop: 16 }}>Şeffaf, basit, <span className="serif">adil.</span></h2>
          <p style={{ margin: "18px auto 0", maxWidth: 560 }}>
            Tek paket, aylık ödeme + kullandığın kadar arama kredisi. Kart bilgisi vermeden 14 gün dene; istediğin an iptal et.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1.15fr", gap: 24, alignItems: "stretch" }}>
          {/* Ücretsiz / Deneme */}
          <div className="price-card">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ fontSize: 13, fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--muted)" }}>Ücretsiz</span>
              <span style={{ fontSize: 11, color: "var(--accent-ink)", fontFamily: "var(--font-mono)" }}>14 gün</span>
            </div>
            <div className="price-amount">
              <span className="num">$0</span>
              <span className="per">/ deneme</span>
            </div>
            <div style={{ color: "var(--muted)", fontSize: 14 }}>
              Sistemi gör, kanalları bağla, kullanmaya başla. Kart bilgisi yok.
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14, color: "var(--ink-2)" }}>
              <li>✓ 1 patron + 1 personel</li>
              <li>✓ 5 müşteri arama kredisi hediye</li>
              <li>✓ Tüm kanallar açık</li>
              <li>✓ Ek arama gerekirse $0.50 / arama</li>
            </ul>
            <a href="https://crm.yukagency.com/register" className="btn btn-ghost" style={{ width: "100%", justifyContent: "center", marginTop: "auto" }}>Hemen dene</a>
          </div>

          {/* Starter */}
          <div className="price-card">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ fontSize: 13, fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--muted)" }}>Başlangıç</span>
              <span style={{ fontSize: 11, color: "var(--muted)", fontFamily: "var(--font-mono)" }}>aylık ödeme</span>
            </div>
            <div className="price-amount">
              <span className="num">$59</span>
              <span className="per">/ ay</span>
            </div>
            <div style={{ color: "var(--ink-2)", fontSize: 14, lineHeight: 1.5 }}>
              Küçük işletmeler için. <strong style={{ color: "var(--ink)" }}>1-3 kullanıcı</strong> ve <strong style={{ color: "var(--accent-ink)" }}>aylık 80 müşteri arama</strong> dahil.
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14, color: "var(--ink-2)" }}>
              <li>✓ 3 kullanıcıya kadar</li>
              <li>✓ Aylık 80 müşteri arama kredisi</li>
              <li>✓ Sınırsız sohbet ve toplu mesaj</li>
              <li>✓ WhatsApp, Instagram, Facebook, Telegram</li>
              <li>✓ Ek kullanıcı: $10 / ay</li>
              <li>✓ Ek arama kredisi: $0.50 / arama</li>
            </ul>
            <a href="https://crm.yukagency.com/register" className="btn btn-ghost" style={{ width: "100%", justifyContent: "center", marginTop: "auto" }}>Başlangıç'ı seç</a>
          </div>

          {/* Pro */}
          <div className="price-card feature">
            <div className="badge">Popüler</div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ fontSize: 13, fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--accent-ink)" }}>Pro</span>
              <span style={{ fontSize: 11, color: "var(--muted)", fontFamily: "var(--font-mono)" }}>aylık ödeme</span>
            </div>
            <div className="price-amount">
              <span className="num">$179</span>
              <span className="per">/ ay</span>
            </div>
            <div style={{ color: "var(--ink-2)", fontSize: 14, lineHeight: 1.5 }}>
              Büyüyen ekipler için. <strong style={{ color: "var(--ink)" }}>5 kullanıcı</strong>, <strong style={{ color: "var(--accent-ink)" }}>aylık 200 müşteri arama</strong> ve <strong style={{ color: "var(--ink)" }}>ürün entegrasyonları</strong> dahil.
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14, color: "var(--ink-2)" }}>
              <li>✓ 5 kullanıcıya kadar</li>
              <li>✓ Aylık 200 müşteri arama kredisi</li>
              <li>✓ Sınırsız sohbet ve toplu mesaj</li>
              <li>✓ Telegram, web sitesi, VK, WhatsApp ürün entegrasyonu</li>
              <li>✓ Sesli mesajı yazıya çevirme + çeviri</li>
              <li>✓ Ek kullanıcı: $8 / ay</li>
              <li>✓ Ek arama kredisi: $0.35 / arama (indirimli)</li>
              <li>✓ Öncelikli destek (Telegram'dan anlık)</li>
            </ul>
            <a href="https://crm.yukagency.com/register" className="btn btn-primary" style={{ width: "100%", justifyContent: "center", marginTop: "auto" }}>{ctaText}</a>
          </div>
        </div>

        {/* credit math */}
        <div style={{
          marginTop: 56, padding: "28px 32px",
          background: "var(--surface)",
          border: "1px solid var(--border)",
          borderRadius: "var(--radius-lg)",
          display: "flex",
          alignItems: "center",
          gap: 32,
          flexWrap: "wrap",
        }}>
          <div style={{ flex: 1, minWidth: 280 }}>
            <div style={{ fontSize: 12, fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--muted)", marginBottom: 8 }}>
              Kredi nasıl çalışır?
            </div>
            <div style={{ fontSize: 16, color: "var(--ink-2)", lineHeight: 1.55 }}>
              Sadece <strong style={{ color: "var(--accent-ink)" }}>sonuç dönen</strong> müşteri aramaları kredi düşürür. Aynı aramayı tekrar yaparsan, boş çıkarsa, sohbet ve toplu mesaj — <strong style={{ color: "var(--ink)" }}>hepsi ücretsiz</strong>.
            </div>
          </div>
          <div style={{ display: "flex", gap: 24, fontFamily: "var(--font-mono)" }}>
            <div>
              <div style={{ fontSize: 28, fontWeight: 600, color: "var(--ink)" }}>80 / 200</div>
              <div style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase" }}>başlangıç / pro aylık</div>
            </div>
            <div>
              <div style={{ fontSize: 28, fontWeight: 600, color: "var(--ink)" }}>$0.35 - $0.50</div>
              <div style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase" }}>ek arama ücreti</div>
            </div>
            <div>
              <div style={{ fontSize: 28, fontWeight: 600, color: "var(--ink)" }}>30 gün</div>
              <div style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase" }}>aynı arama hatırlanır</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// TESTIMONIALS
// ═══════════════════════════════════════════════════════════════
const TESTIMONIALS = [
  {
    quote: "Telegram'dan gelen Polonyalı müşterileri tek panelde topladık. İlk ay satışlarımız belirgin arttı.",
    name: "Mert Y.",
    title: "Kurucu, ihracat firması",
    avatar: "MY",
    color: "var(--accent)",
  },
  {
    quote: "Sesli mesajları dinlemeden, yazıya çevrilmiş hâlini okuyup cevap veriyoruz. Bu tek özellik haftada saatler kazandırıyor.",
    name: "Selin Y.",
    title: "Satış sorumlusu, sağlık sektörü",
    avatar: "SY",
    color: "var(--violet)",
  },
  {
    quote: "Müşteri avcısı ilk haftada yüzlerce yeni firma getirdi. Kredi sistemi gayet adil — boş aramada para gitmiyor.",
    name: "Burak Ö.",
    title: "İşletme sahibi, otomotiv",
    avatar: "BÖ",
    color: "var(--amber)",
  },
];

function TestimonialsSection() {
  return (
    <section id="yorumlar" className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>MÜŞTERİ HİKAYELERİ</span>
          <h2 className="h-section" style={{ marginTop: 16 }}>Müşterilerimiz ne <span className="serif">diyor?</span></h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {TESTIMONIALS.map((t) => (
            <div key={t.name} className="card card-hover" style={{ padding: 28, display: "flex", flexDirection: "column", gap: 20 }}>
              <div style={{ fontSize: 32, lineHeight: 1, fontFamily: "var(--font-serif)", color: "var(--accent)" }}>"</div>
              <p style={{ fontSize: 17, color: "var(--ink)", lineHeight: 1.5, flex: 1 }}>{t.quote}</p>
              <div style={{ display: "flex", alignItems: "center", gap: 12, paddingTop: 16, borderTop: "1px solid var(--border)" }}>
                <div style={{
                  width: 40, height: 40, borderRadius: "50%",
                  background: t.color, color: "white",
                  display: "grid", placeItems: "center",
                  fontWeight: 600, fontSize: 14,
                }}>
                  {t.avatar}
                </div>
                <div>
                  <div style={{ fontWeight: 500, color: "var(--ink)", fontSize: 14 }}>{t.name}</div>
                  <div style={{ fontSize: 12, color: "var(--muted)" }}>{t.title}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// FAQ
// ═══════════════════════════════════════════════════════════════
const FAQ = [
  {
    q: "Yuka Ajans nedir, sadece yazılım mı?",
    a: "Hayır. Yuka, yapay zeka destekli bir B2B satış ajansıdır. Sana sadece bir panel teslim etmiyoruz — kuruluşunu birlikte yapıyoruz, mesaj şablonlarını ekibine uygun hazırlıyoruz, kanalları (WhatsApp, Instagram, Telegram, VK) senin yerine devreye alıyoruz. Yani hem yazılım hem destek hem birlikte iş yürütme.",
  },
  {
    q: "WhatsApp'ı resmi olarak kullanabiliyor muyuz?",
    a: "Evet — Meta'nın resmi WhatsApp Business sistemiyle çalışıyoruz. Hesap onayını birlikte hallediyoruz. Genelde 3-7 iş günü içinde her şey hazır oluyor.",
  },
  {
    q: "Aylık arama kredisi yetmezse panel kapanır mı?",
    a: "Hayır. Panel açık kalır, sohbet ve toplu mesaj kesilmez. Sadece yeni müşteri arama özelliği duraksar. Bir tıkla ek arama satın alırsın — Başlangıç'ta $0.50, Pro'da $0.35 — ya da bir sonraki ay yenilenir.",
  },
  {
    q: "Müşteri bilgilerim güvende mi? KVKK'ya uygun mu?",
    a: "Evet. Sunucularımız Almanya'da, banka düzeyinde güvenlikle. Her firma kendi alanını görür — başka müşteri başkalarınınkini göremez. Telefon numaralarını personelinden gizleyebilirsin. KVKK ve Avrupa veri kurallarına tam uyumlu.",
  },
  {
    q: "Sesli mesaj yazıya çevirme hangi dillerde çalışır?",
    a: "99 dilde yazıya çeviriyor. Çeviri ise Türkçe ⇄ İngilizce, Rusça, Arapça, Almanca, Fransızca, İspanyolca olarak hazır. Başka diller için bize söyle, ekleyelim.",
  },
  {
    q: "Eski müşteri listemi sisteme nasıl aktarırım?",
    a: "Excel dosyasıyla tek seferde aktarırsın. Telegram, VK veya WhatsApp sohbet geçmişlerin varsa onları da otomatik aktarıyoruz. Kuruluma başlarken birlikte yapıyoruz, dert etme.",
  },
  {
    q: "Telefondan kullanabiliyor muyum?",
    a: "Evet. iPhone ve Android için ayrı uygulamamız var. Anlık bildirim geliyor — müşteri mesaj atınca cebinden hemen görüyorsun.",
  },
];

function FAQSection() {
  return (
    <section id="sss" className="section">
      <div className="container" style={{ maxWidth: 880 }}>
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>SIKÇA SORULAN</span>
          <h2 className="h-section" style={{ marginTop: 16 }}>Aklınıza takılanlar.</h2>
        </div>
        <div>
          {FAQ.map((item, i) => (
            <details className="faq-item" key={i} open={i === 0}>
              <summary>
                {item.q}
                <span className="chev"></span>
              </summary>
              <p>{item.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// FINAL CTA
// ═══════════════════════════════════════════════════════════════
function FinalCTA({ ctaText }) {
  return (
    <section className="section" style={{ paddingBottom: 40 }}>
      <div className="container">
        <div style={{
          position: "relative",
          background: "var(--ink)",
          color: "var(--bg)",
          borderRadius: "var(--radius-xl)",
          padding: "80px 56px",
          overflow: "hidden",
          textAlign: "center",
        }}>
          <div style={{
            position: "absolute", inset: 0,
            background: "radial-gradient(ellipse at 30% 0%, oklch(from var(--accent) l c h / 0.5), transparent 50%), radial-gradient(ellipse at 80% 100%, oklch(from var(--amber) l c h / 0.3), transparent 50%)",
          }} />
          <div className="grain" />
          <div style={{ position: "relative" }}>
            <span style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.08em",
              textTransform: "uppercase", color: "var(--accent)",
              padding: "6px 12px", borderRadius: 999,
              background: "oklch(from var(--accent) l c h / 0.15)",
            }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)" }}></span>
              ŞIMDI BAŞLA
            </span>
            <h2 className="h-section" style={{ marginTop: 24, color: "var(--bg)", fontSize: "clamp(40px, 5vw, 68px)" }}>
              B2B satışınızı Yuka ile <span className="serif" style={{ color: "var(--accent)" }}>büyütün.</span>
            </h2>
            <p style={{ marginTop: 16, fontSize: 18, color: "oklch(from var(--bg) l c h / 0.7)", maxWidth: 560, margin: "16px auto 0" }}>
              Yapay zeka destekli B2B ajans. 14 gün ücretsiz, kart bilgisi yok. 3 dakikada kuralım, personelinizi ekleyin, müşterileri tek panelden takip etmeye başlayın.
            </p>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 36, flexWrap: "wrap" }}>
              <a href="https://crm.yukagency.com/register" className="btn btn-primary">{ctaText} →</a>
              <a href="https://wa.me/905350779230?text=Yuka%20CRM%20demo%20talebim%20var" target="_blank" rel="noopener" className="btn" style={{ background: "transparent", color: "var(--bg)", borderColor: "oklch(from var(--bg) l c h / 0.3)" }}>Demo iste</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// FOOTER
// ═══════════════════════════════════════════════════════════════
function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr", gap: 48 }}>
          <div>
            <a href="#" className="brand"><span className="brand-mark">Y</span>Yuka Ajans</a>
            <p style={{ marginTop: 16, fontSize: 14, color: "var(--muted)", maxWidth: 280 }}>
              Yapay zeka destekli B2B satış ajansı. Müşteri bulmaktan satış kapatmaya kadar — sohbet, toplu mesaj, takip; hepsi tek panelde.
            </p>
            <div style={{ display: "flex", gap: 8, marginTop: 20 }}>
              {["X", "in", "ig", "tg"].map((s) => (
                <a key={s} href="#" style={{
                  width: 36, height: 36, borderRadius: 8,
                  border: "1px solid var(--border)",
                  display: "grid", placeItems: "center",
                  color: "var(--muted)", textDecoration: "none",
                  fontSize: 13, fontWeight: 600,
                }}>{s}</a>
              ))}
            </div>
          </div>

          <div>
            <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--muted)", marginBottom: 16 }}>Ürün</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14 }}>
              <li><a href="#ozellikler" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Özellikler</a></li>
              <li><a href="#fiyat" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Fiyat</a></li>
              <li><a href="/entegrasyonlar.html" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Entegrasyonlar</a></li>
              <li><a href="/mobil.html" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Mobil uygulama</a></li>
              <li><a href="/api.html" style={{ color: "var(--ink-2)", textDecoration: "none" }}>API</a></li>
            </ul>
          </div>
          <div>
            <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--muted)", marginBottom: 16 }}>Şirket</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14 }}>
              <li><a href="/hakkimizda.html" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Hakkımızda</a></li>
              <li><a href="#yorumlar" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Müşteriler</a></li>
              <li><a href="/blog.html" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Blog</a></li>
              <li><a href="/kariyer.html" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Kariyer</a></li>
              <li><a href="/iletisim.html" style={{ color: "var(--ink-2)", textDecoration: "none" }}>İletişim</a></li>
            </ul>
          </div>
          <div>
            <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--muted)", marginBottom: 16 }}>Yasal</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14 }}>
              <li><a href="https://crm.yukagency.com/privacy" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Gizlilik</a></li>
              <li><a href="https://crm.yukagency.com/privacy" style={{ color: "var(--ink-2)", textDecoration: "none" }}>KVKK</a></li>
              <li><a href="https://crm.yukagency.com/privacy" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Şartlar</a></li>
              <li><a href="https://crm.yukagency.com" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Status</a></li>
            </ul>
          </div>
        </div>

        <div style={{ marginTop: 64, paddingTop: 28, borderTop: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
          <div style={{ fontSize: 13, color: "var(--muted)" }}>
            © 2026 Yuka Agency · Made with ☕ in İstanbul
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 16, fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--muted)" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)", boxShadow: "0 0 0 4px oklch(0.62 0.16 150 / 0.2)" }}></span>
              Tüm sistemler operasyonel
            </span>
            <span>v2.4.1</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  FeaturesSection, MetricsSection, PricingSection, TestimonialsSection, FAQSection, FinalCTA, SiteFooter,
  FEATURE_DEFS,
});