/* PhoneMockup, Integrations, Testimonials, Pricing, Comparison, FAQ, Blog */

/* Integrations strip — NEW */
const INTEGRATIONS = [
  { name: "Zirve", color: "#1d4ed8" },
  { name: "Luca", color: "#f59e0b" },
  { name: "Mikro", color: "#0ba5ec" },
  { name: "Logo", color: "#dc2626" },
  { name: "ETA", color: "#16a34a" },
  { name: "Datasoft", color: "#6d59ff" },
  { name: "GİB", color: "#0e1423" },
];

function Integrations() {
  return (
    <section className="section-pad" style={{ background: "var(--bg-muted)", paddingTop: 56, paddingBottom: 56 }}>
      <div className="container-kolaybi">
        <div style={{ textAlign: "center", marginBottom: 32 }}>
          <p style={{ margin: 0, fontSize: 11.5, fontWeight: 800, letterSpacing: ".12em", color: "var(--text-muted)", textTransform: "uppercase" }}>
            Türkiye'nin Önde Gelen Muhasebe Programlarıyla Çift Yönlü Senkron
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(8, 1fr)", gap: 16, alignItems: "center" }} className="int-grid">
          {INTEGRATIONS.map((it) => (
            <div key={it.name} style={{ background: "#fff", border: "1px solid var(--border-light)", borderRadius: 12, padding: "18px 12px", display: "flex", alignItems: "center", justifyContent: "center", gap: 8 }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: it.color }} />
              <span style={{ fontSize: 14, fontWeight: 700, color: "var(--brand-700)", letterSpacing: "-0.2px" }}>{it.name}</span>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 992px) { .int-grid { grid-template-columns: repeat(4, 1fr) !important; } }
        @media (max-width: 560px) { .int-grid { grid-template-columns: repeat(2, 1fr) !important; } }
      `}</style>
    </section>
  );
}

/* PhoneMockup */
function PhoneMockup() {
  return (
    <section className="section-pad" style={{ background: "#fff" }}>
      <div className="container-kolaybi">
        <div className="grid-2">
          <div style={{ order: 2 }} className="phone-img">
            <img src="assets/ofisimnet-mobile-3phones.webp" alt="Ofisimnet Mobil Uygulama" style={{ width: "100%", height: "auto" }} />
          </div>
          <div style={{ order: 1 }} className="phone-copy">
            <span className="section-eyebrow">Mobil + Web</span>
            <h2 className="h-section" style={{ marginTop: 14 }}>
              Ofisiniz <span className="ink-bar"><span style={{ color: "var(--brand-500)" }}>cebinizde</span></span>
            </h2>
            <p className="body-lg" style={{ marginTop: 16, maxWidth: 520, color: "var(--text-body)" }}>
              Mükellef telefonla aradığında beyanname durumu cebinizde. AL ile gelen faturayı yolda fotoğraflayın, ofise döndüğünüzde muhasebeleşmiş olsun.
            </p>

            <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "flex", flexDirection: "column", gap: 12 }}>
              {[
                { i: <Icon.Phone />, t: "Android uygulama · anlık push bildirimleri" },
                { i: <Icon.Sparkle />, t: "AL ile WhatsApp fotoğrafından fatura kes" },
                { i: <Icon.Bell />, t: "Beyanname & son ödeme hatırlatıcıları" },
                { i: <Icon.Sgk />, t: "Ekip görevleri ve mesajlaşma" },
              ].map((b, idx) => (
                <li key={idx} style={{ display: "flex", gap: 12, alignItems: "center", fontSize: 14, color: "var(--text-body)" }}>
                  <span style={{ width: 32, height: 32, borderRadius: 8, background: "color-mix(in oklch, var(--brand-500) 8%, white)", color: "var(--brand-500)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>{b.i}</span>
                  {b.t}
                </li>
              ))}
            </ul>

            <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a href="#" style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "10px 18px", borderRadius: 12, background: "#0e1423", color: "#fff", fontSize: 13, fontWeight: 600 }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M3.5 20.5V3.5c0-.2.1-.4.3-.5l11 8.5L3.8 21c-.2-.1-.3-.3-.3-.5zm12.4-8.5l-9.4 7.3 8.4-4.9c.5-.3.9-.3 1.4 0l2.6 1.5L15.9 12zm5.2-2.6c.5.3.5.9 0 1.2l-2.8 1.6-3-3 3-3 2.8 1.6c-.1-.1-.1.6 0 .6zM5 20.5l9.6-9.6 1.4 1.4L5 22.5c-.5 0-.5-.4-.5-2z"/></svg>
                <div>
                  <div style={{ fontSize: 10, opacity: .8 }}>GET IT ON</div>
                  <div style={{ fontSize: 15, fontWeight: 700, marginTop: -2 }}>Google Play</div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (min-width: 992px) {
          .phone-img { order: 2 !important; }
          .phone-copy { order: 1 !important; }
        }
      `}</style>
    </section>
  );
}

/* Testimonials */
const QUOTES = [
  { q: "Beyanname son tarihlerini takip etmek için 3 personel ayırıyorduk. Ofisimnet'ten sonra hiçbir tarih kaçırmadık — ekibim asıl işine döndü.", n: "Mehmet A. — SMMM", o: "Bursa · 240 mükellef" },
  { q: "AL'ı görene kadar inanmadım. WhatsApp'a düşen kasa fişlerini saniyeler içinde yevmiyeye yansıttı. Bu yıl ay sonu mesai bitti.", n: "Esra K. — YMM", o: "İstanbul · 95 mükellef" },
  { q: "Karşıt inceleme cevapları artık 1 günde değil, 15 dakikada. Zirve'den veri çekiyor, 3568 tutanağını otomatik dolduruyor.", n: "Hasan Ç. — SMMM", o: "Ankara · 180 mükellef" },
];

function Testimonials() {
  return (
    <section className="section-pad" style={{ background: "var(--bg-muted)" }}>
      <div className="container-kolaybi">
        <div style={{ maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
          <span className="section-eyebrow">Müşterilerimiz</span>
          <h2 className="h-section" style={{ marginTop: 14 }}>
            Türkiye'nin dört bir yanından <span className="ink-bar"><span style={{ color: "var(--brand-500)" }}>mali müşavirler</span></span>
          </h2>
        </div>

        <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }} className="quote-grid">
          {QUOTES.map((q, i) => (
            <div key={i} className="card-pop" style={{ padding: 28, display: "flex", flexDirection: "column", gap: 16 }}>
              <div style={{ display: "flex", gap: 2 }}>
                {[0,1,2,3,4].map((j) => (
                  <svg key={j} width="14" height="14" viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                ))}
              </div>
              <p style={{ margin: 0, fontSize: 14.5, lineHeight: "22px", color: "var(--text-body)", flex: 1 }}>"{q.q}"</p>
              <div style={{ display: "flex", alignItems: "center", gap: 12, paddingTop: 12, borderTop: "1px solid var(--border-light)" }}>
                <div style={{ width: 38, height: 38, borderRadius: "50%", background: `linear-gradient(135deg, var(--brand-500), var(--ai-purple))`, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 13 }}>
                  {q.n.split(" ").map(w => w[0]).join("").slice(0,2)}
                </div>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 700, color: "var(--brand-700)" }}>{q.n}</div>
                  <div style={{ fontSize: 11.5, color: "var(--text-muted)" }}>{q.o}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

/* Pricing — NEW */
const PLANS = [
  {
    name: "Standart",
    desc: "150 mükellefe kadar mali müşavir ofisleri",
    monthly: "₺1.500",
    period: "/ay",
    feats: [
      "150 mükellefe kadar",
      "GİB e-Beyanname her gece otomatik",
      "DVD e-Tebligat + Vergi Borcu otomatik sorgu",
      "SGK Vizite Web Servisi entegrasyonu",
      "AL · AI WhatsApp fatura parse",
      "e-Arşiv + Mikro ePortal fatura kesme",
      "Sınırsız kullanıcı — rol bazlı yetki",
      "Türkiye'de hosted (KVKK)",
      "WhatsApp tahakkuk gönderimi",
    ],
    cta: "14 gün ücretsiz dene",
    featured: true,
  },
  {
    name: "Kurumsal",
    desc: "150+ mükellef ölçeğindeki ofisler ve YMM'ler için",
    monthly: "Teklif al",
    period: "",
    feats: [
      "Sınırsız mükellef",
      "Özel anlaşma koşulları",
      "Atanmış müşteri yöneticisi",
      "Özel SLA ve öncelikli destek",
      "API erişimi (isteğe bağlı)",
      "Özel veri ihracı / yedekleme planları",
    ],
    cta: "Bizi arayın",
    featured: false,
  },
];

function Pricing() {
  return (
    <section id="fiyatlar" className="section-pad" style={{ background: "#fff" }}>
      <div className="container-kolaybi">
        <div style={{ maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
          <span className="section-eyebrow">Fiyatlandırma</span>
          <h2 className="h-section" style={{ marginTop: 14 }}>
            Ofisinizin büyüklüğüne göre <span className="ink-bar"><span style={{ color: "var(--brand-500)" }}>esnek planlar</span></span>
          </h2>
          <p className="body-lg" style={{ marginTop: 14, color: "var(--text-muted)" }}>
            Her plan 14 gün ücretsiz başlar, kredi kartı sorulmaz. Yıllık ödemede 2 ay hediye.
          </p>
        </div>

        <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20, alignItems: "stretch", maxWidth: 880, margin: "56px auto 0" }} className="plans-grid">
          {PLANS.map((p) => (
            <div key={p.name} className={`price-card ${p.featured ? "featured" : ""}`} style={{ position: "relative" }}>
              {p.featured && <span className="tag">EN POPÜLER</span>}
              <div style={{ marginBottom: 6 }}>
                <h3 style={{ fontSize: 20, fontWeight: 800 }}>{p.name}</h3>
                <p style={{ margin: "6px 0 0", fontSize: 13, color: "var(--text-muted)" }}>{p.desc}</p>
              </div>
              <div style={{ marginTop: 20, display: "flex", alignItems: "baseline", gap: 4 }}>
                <span style={{ fontSize: 40, fontWeight: 800, color: "var(--brand-700)", letterSpacing: "-1px", fontFamily: "Montserrat" }}>{p.monthly}</span>
                <span style={{ fontSize: 13, color: "var(--text-muted)" }}>{p.period} · KDV hariç</span>
              </div>

              <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
                {p.feats.map((f) => (
                  <li key={f} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 13.5, color: "var(--text-body)" }}>
                    <span style={{ flexShrink: 0, width: 18, height: 18, borderRadius: "50%", background: p.featured ? "color-mix(in oklch, var(--brand-500) 14%, white)" : "color-mix(in oklch, var(--success-green) 14%, white)", color: p.featured ? "var(--brand-500)" : "var(--success-green)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginTop: 1 }}>
                      <Icon.Check style={{ width: 11, height: 11 }} />
                    </span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>

              <a href="#" className={p.featured ? "kb-btn-primary" : "kb-btn-secondary"} style={{ marginTop: 28, justifyContent: "center" }}>
                {p.cta} {p.featured && <Icon.ArrowRight />}
              </a>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .plans-grid { grid-template-columns: 1fr !important; } .price-card.featured { transform: none !important; } }
      `}</style>
    </section>
  );
}

/* Comparison table — NEW */
const COMPARE_ROWS = [
  { f: "Mali müşavir odaklı arayüz", o: true, x: false, y: "kısmen" },
  { f: "GİB e-Beyanname otomatik tarama (gece)", o: true, x: false, y: false },
  { f: "DVD e-Tebligat otomatik sorgu", o: true, x: false, y: false },
  { f: "DVD Vergi Borcu otomatik sorgu", o: true, x: false, y: false },
  { f: "SGK Vizite Web Servisi entegrasyonu", o: true, x: false, y: "kısmen" },
  { f: "AL · AI WhatsApp fatura parse", o: true, x: false, y: false },
  { f: "Zirve / Luca / Mikro entegrasyonu", o: true, x: "kısmen", y: true },
  { f: "Türkiye'de hosted veri (KVKK)", o: true, x: true, y: false },
  { f: "WhatsApp tahakkuk gönderimi", o: true, x: false, y: false },
];

function Comparison() {
  const Cell = ({ v }) => {
    if (v === true) return <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 24, height: 24, borderRadius: "50%", background: "color-mix(in oklch, var(--success-green) 14%, white)", color: "var(--success-green)" }}><Icon.Check style={{ width: 14, height: 14 }} /></span>;
    if (v === false) return <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 24, height: 24, borderRadius: "50%", background: "#f3f4f6", color: "#9ca3af", fontSize: 13, fontWeight: 700 }}>—</span>;
    return <span style={{ fontSize: 11, fontWeight: 700, color: "#b45309", background: "#fef3c7", padding: "4px 10px", borderRadius: 999 }}>{v}</span>;
  };
  return (
    <section className="section-pad" style={{ background: "var(--bg-muted)" }}>
      <div className="container-kolaybi">
        <div style={{ maxWidth: 720, margin: "0 auto", textAlign: "center", marginBottom: 48 }}>
          <span className="section-eyebrow">Karşılaştırma</span>
          <h2 className="h-section" style={{ marginTop: 14 }}>
            Neden <span className="ink-bar"><span style={{ color: "var(--brand-500)" }}>Ofisimnet</span></span>?
          </h2>
        </div>

        <div style={{ background: "#fff", border: "1px solid var(--border-light)", borderRadius: 16, overflow: "hidden" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr", padding: "20px 24px", background: "linear-gradient(180deg, var(--brand-700), #1e2a5e)", color: "#fff", gap: 12 }}>
            <div style={{ fontSize: 12, fontWeight: 700, opacity: .85, letterSpacing: ".06em", textTransform: "uppercase" }}>Özellik</div>
            <div style={{ textAlign: "center", fontSize: 15, fontWeight: 800, display: "flex", alignItems: "center", justifyContent: "center", gap: 8 }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#3b82f6" }} />
              Ofisimnet
            </div>
            <div style={{ textAlign: "center", fontSize: 13, fontWeight: 600, opacity: .7 }}>Klasik Muhasebe Yazılımı</div>
            <div style={{ textAlign: "center", fontSize: 13, fontWeight: 600, opacity: .7 }}>Diğer Bulut Çözüm</div>
          </div>
          {COMPARE_ROWS.map((r, i) => (
            <div key={r.f} style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr", padding: "16px 24px", borderTop: i ? "1px solid var(--border-light)" : "none", alignItems: "center", gap: 12, background: i % 2 ? "var(--bg-muted)" : "#fff" }} className="cmp-row">
              <div style={{ fontSize: 14, fontWeight: 600, color: "var(--brand-700)" }}>{r.f}</div>
              <div style={{ display: "flex", justifyContent: "center" }}><Cell v={r.o} /></div>
              <div style={{ display: "flex", justifyContent: "center" }}><Cell v={r.x} /></div>
              <div style={{ display: "flex", justifyContent: "center" }}><Cell v={r.y} /></div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) { .cmp-row > div:first-child { grid-column: 1 / -1; } .cmp-row { grid-template-columns: 1fr 1fr 1fr !important; } }
      `}</style>
    </section>
  );
}

/* FAQ — NEW */
const FAQ_DATA = [
  { q: "14 gün ücretsiz denemede kredi kartı vermek zorunda mıyım?", a: "Hayır. Kayıt için sadece e-posta ve telefon numaranız yeterli. 14 gün sonunda otomatik ücretlendirme yoktur — siz onaylamadan ödeme alınmaz." },
  { q: "Zirve veya Luca verilerimi nasıl aktarırım?", a: "Tek tıkla içe aktarım modülümüz var: Zirve veritabanı üzerinden direkt çıkartıcı, Luca XML üzerinden içe alım. VKN bazında eşleşme yapar, mükellef listesi 2 dakikada hazır olur." },
  { q: "AL nasıl çalışır? Gerçekten 3 saniyede mi fatura okur?", a: "WhatsApp'a düşen fatura fotoğrafı, PDF veya mesaj — yapay zekâ ile parse edilir. Kalemler, KDV oranı ve hesap kodu otomatik çıkarılır; sonuç e-Arşiv, Mikro ePortal veya Zirve'de tek tıkla kesime hazır taslak olarak görünür. Testlerimizde ortalama parse süresi 2.8 sn, doğruluk oranı %98+." },
  { q: "DVD (Dijital Vergi Dairesi) sorguları nasıl otomatikleşiyor?", a: "Türkiye'de özel altyapımız var. GİB oturum tokenini IP'ye bağlıyor; özel altyapımız üzerinden CAPTCHA yapay zekâ ile çözülüyor, login + e-tebligat + vergi borcu tek seferde çekiliyor. her gün otomatik, istediğinizde manuel tetiklenir." },
  { q: "SGK Vizite entegrasyonu ne sağlıyor?", a: "SGK Vizite Web Servisi üzerinden SOAP ile doğrudan bağlanıyoruz. Personel raporlarını sorgulayıp onaylayabilir / iptal edebilir, sonuçları panelde takip edebilirsiniz." },
  { q: "Verilerim nerede tutuluyor? KVKK uyumu var mı?", a: "Veritabanı güvenli veritabanı, PDF'ler güvenli bulut depolama (Türkiye uyumlu), Türkiye veri merkezi. KVKK ve VERBİS uyumluyuz, veri sağlama sözleşmesi imzalanır." },
  { q: "İptal etmek istersem ne olur?", a: "İstediğiniz an iptal edebilirsiniz; iptal sonrası 90 gün boyunca tüm verilerinizi PDF ve CSV olarak indirebilirsiniz. Kilit-içi sözleşme yok." },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section-pad" style={{ background: "#fff" }}>
      <div className="container-kolaybi">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 56, alignItems: "flex-start" }} className="faq-grid">
          <div>
            <span className="section-eyebrow">SSS</span>
            <h2 className="h-section" style={{ marginTop: 14 }}>
              Sıkça sorulan <br /><span className="ink-bar"><span style={{ color: "var(--brand-500)" }}>sorular</span></span>
            </h2>
            <p style={{ marginTop: 16, fontSize: 14, lineHeight: "22px", color: "var(--text-muted)" }}>
              Cevabını bulamadığınız soru için <a href="#iletisim" style={{ color: "var(--brand-500)", fontWeight: 600 }}>iletişim formunu</a> kullanabilirsiniz — 1 iş günü içinde döneriz.
            </p>
          </div>
          <div>
            {FAQ_DATA.map((it, i) => (
              <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{it.q}</span>
                  <Icon.ChevronDown className="chev" />
                </button>
                <div className="faq-a">{it.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }
      `}</style>
    </section>
  );
}

/* Solutions navigator — pared down, distinct from KolayBi */
const SOLUTIONS = [
  { for: "SMMM Ofisleri", desc: "20-200 mükellef için günlük rutin otomasyonu", glyph: "S", bg: "#3b82f6" },
  { for: "YMM'ler", desc: "Karşıt inceleme + tasdik raporları odaklı", glyph: "Y", bg: "#6d59ff" },
  { for: "Avukat & Hukuk Büroları", desc: "Müvekkil ön muhasebe + e-tebligat", glyph: "A", bg: "#22c55e" },
  { for: "Bağımsız Denetim", desc: "ÇTUS, denetim notları, dosya yönetimi", glyph: "BD", bg: "#f59e0b" },
];

function Solutions() {
  return (
    <section id="musavirler" className="section-pad" style={{ background: "var(--bg-muted)" }}>
      <div className="container-kolaybi">
        <div style={{ maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
          <span className="section-eyebrow">Kimler için?</span>
          <h2 className="h-section" style={{ marginTop: 14 }}>
            Mali müşavirlik <span className="ink-bar"><span style={{ color: "var(--brand-500)" }}>her ölçekte</span></span>
          </h2>
        </div>

        <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }} className="sol-grid">
          {SOLUTIONS.map((s) => (
            <a key={s.for} href="#" className="card-pop" style={{ padding: 22, display: "flex", flexDirection: "column", gap: 12 }}>
              <div style={{ width: 44, height: 44, borderRadius: 10, background: s.bg, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 14, letterSpacing: "-0.5px" }}>{s.glyph}</div>
              <h3 style={{ fontSize: 15, fontWeight: 700 }}>{s.for}</h3>
              <p style={{ margin: 0, fontSize: 13, lineHeight: "20px", color: "var(--text-muted)" }}>{s.desc}</p>
              <span style={{ marginTop: "auto", fontSize: 12.5, fontWeight: 700, color: "var(--brand-500)", display: "inline-flex", alignItems: "center", gap: 4 }}>İncele <Icon.ArrowRight style={{ width: 12, height: 12 }} /></span>
            </a>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 800px) { .sol-grid { grid-template-columns: 1fr 1fr !important; } }
      `}</style>
    </section>
  );
}

/* Blog */
const BLOG_POSTS = [
  { category: "Beyanname", title: "2026 Geçici Vergi Beyannameleri: Son Tarihler ve Sık Yapılan Hatalar", excerpt: "Üç aylık geçici vergi beyannamesinde gözden kaçan kalemler ve Ofisimnet ile otomatik hatırlatma.", image: "assets/blog-gecici-vergi.webp" },
  { category: "Karşıt İnceleme", title: "3568 Karşıt İnceleme Tutanağı: Zirve + Ofisimnet bulut ile Otomatik", excerpt: "YMM'lerin haftalarını alan karşıt inceleme süreçlerini 15 dakikaya indiriyoruz.", image: "assets/blog-karsit-inceleme.webp" },
  { category: "AL · Yapay Zekâ", title: "AL ile Türkçe Fatura Okuma: KDV, ÖTV ve Hesap Kodu Otomatik", excerpt: "Mükellef fatura fotoğrafından kalem kalem muhasebe kaydını AL nasıl çıkarıyor?", image: "assets/blog-al-fatura.webp" },
  { category: "E-Tebligat", title: "E-Tebligat Açma Süresi 5 Gün — Mükellefiniz Açmadıysa Cezası Var", excerpt: "Tüm mükelleflerin e-tebligat kutusunu otomatik tarayın, SMS ile bilgilendirin.", image: "assets/blog-e-tebligat.webp" },
];

function BlogFeatured() {
  return (
    <section id="blog" className="section-pad" style={{ background: "#fff", borderTop: "1px solid var(--border-light)" }}>
      <div className="container-kolaybi">
        <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 24, alignItems: "flex-end" }}>
          <div>
            <span className="section-eyebrow">Blog</span>
            <h2 className="h-section" style={{ marginTop: 14 }}>
              Blog'tan <span className="ink-bar"><span style={{ color: "var(--brand-500)" }}>son yazılar</span></span>
            </h2>
            <p style={{ marginTop: 12, fontSize: 14, color: "var(--text-muted)" }}>
              Mali müşavirlik mevzuatı, otomasyon ipuçları ve sektörel gelişmeler.
            </p>
          </div>
          <a href="#" style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13.5, fontWeight: 700, color: "var(--brand-500)" }}>Tüm yazılar <Icon.ArrowRight /></a>
        </div>

        <div style={{ marginTop: 40 }} className="grid-4">
          {BLOG_POSTS.map((p) => (
            <a key={p.title} href="#" className="card-pop" style={{ overflow: "hidden", display: "flex", flexDirection: "column" }}>
              <div style={{ aspectRatio: "4/3", overflow: "hidden", background: "var(--bg-muted)" }}>
                <img src={p.image} alt={p.title} style={{ width: "100%", height: "100%", objectFit: "cover", transition: "transform .3s ease" }} />
              </div>
              <div style={{ padding: 20, display: "flex", flexDirection: "column", flex: 1 }}>
                <span style={{ alignSelf: "flex-start", padding: "3px 10px", borderRadius: 999, background: "color-mix(in oklch, var(--bluelight-500) 12%, white)", color: "var(--brand-500)", fontSize: 10.5, fontWeight: 800, letterSpacing: ".06em", textTransform: "uppercase" }}>{p.category}</span>
                <h3 style={{ marginTop: 12, fontSize: 14.5, lineHeight: "21px", fontWeight: 700 }}>{p.title}</h3>
                <p style={{ marginTop: 8, fontSize: 12.5, lineHeight: "19px", color: "var(--text-muted)", flex: 1 }}>{p.excerpt}</p>
                <span style={{ marginTop: 14, fontSize: 12, fontWeight: 700, color: "var(--brand-500)" }}>Okumaya devam et →</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Integrations, PhoneMockup, Testimonials, Pricing, Comparison, FAQ, Solutions, BlogFeatured });