// Araçlar index, Rehber

function AraclarIndex() {
  const all = [
    // Finansal (10)
    { to: "araclar/karlilik", n: "01", t: "Kârlılık & Landed Cost", d: "Çıkış + navlun + varış vergisi + KDV → net marj.", tag: "ÜCRETSİZ", cat: "Finansal" },
    { to: "araclar/kdv", n: "02", t: "KDV İadesi Hesaplayıcı", d: "İhracat KDV iadesi potansiyeli + başvuru tarihleri.", tag: "ÜCRETSİZ", cat: "Finansal" },
    { to: "araclar/fiyatlama", n: "03", t: "İhracat Fiyatlama & Marj", d: "Hedef marj → fiyat; döviz + vade etkisi.", tag: "ÜCRETSİZ", cat: "Finansal" },
    { to: "araclar/basabas", n: "04", t: "Başabaş Noktası Analizi", d: "Kâr etmek için minimum sipariş miktarı.", tag: "ÜCRETSİZ", cat: "Finansal" },
    { to: "araclar/incoterm", n: "05", t: "INCOTERM Maliyet Karşılaştırması", d: "FOB vs CIF vs DDP — kim hangi riski alıyor?", tag: "ÜCRETSİZ", cat: "Finansal" },
    { to: "araclar/navlun", n: "06", t: "Navlun & Sigorta Hesaplayıcı", d: "Ağırlık + bölge + kargo seçimi → toplam maliyet.", tag: "ÜCRETSİZ", cat: "Finansal" },
    { to: "araclar/nakitakisi", n: "07", t: "Nakit Akışı Planlayıcı", d: "Sipariş tarihinden tahsilata kadar olan nakit çizelgesi.", tag: "ÜCRETSİZ", cat: "Finansal" },
    { to: "araclar/ulkeriski", n: "08", t: "Ülke Riski & Ödeme Vadesi", d: "Hedef pazarın kredi riski + önerilen ödeme koşulları.", tag: "ÜCRETSİZ", cat: "Finansal" },
    { to: "araclar/forward", n: "09", t: "Döviz Forward Hesaplayıcı", d: "Forward vs spot → senaryo analizi.", tag: "ÜCRETSİZ", cat: "Finansal" },
    { to: "araclar/kur", n: "10", t: "Kur Riski Tarayıcı", d: "Açık döviz pozisyonu için senaryo + forward karşılaştırma.", tag: "ÜCRETSİZ", cat: "Finansal" },
    // Finansman (10)
    { to: "araclar/eximbank", n: "11", t: "Eximbank Kredi Simülatörü", d: "Eximbank kredi ürünleri için ödeme planı + ticari banka kıyası.", tag: "ÜCRETSİZ", cat: "Finansman" },
    { to: "araclar/faktoring", n: "12", t: "Faktoring Maliyet Hesaplayıcı", d: "Faktoring ücreti vs nakit akış hızlandırması.", tag: "ÜCRETSİZ", cat: "Finansman" },
    { to: "araclar/forfaiting", n: "13", t: "Forfaiting Hesaplayıcı", d: "Uzun vadeli ihracat alacakları için geri finansman.", tag: "ÜCRETSİZ", cat: "Finansman" },
    { to: "araclar/finansman-karsi", n: "14", t: "Finansman Yöntemi Karşılaştırması", d: "Faktoring vs forfaiting vs akreditif vs peşin — hangisi daha ucuz?", tag: "ÜCRETSİZ", cat: "Finansman" },
    { to: "araclar/teminat", n: "15", t: "Teminat Mektubu Maliyeti", d: "Teminat mektubu banka ücreti + prim hesaplayıcı.", tag: "ÜCRETSİZ", cat: "Finansman" },
    { to: "araclar/kredi-sigorta", n: "16", t: "İhracat Kredi Sigortası Prim", d: "Ülke + tutarına göre prim + risk indirimi.", tag: "ÜCRETSİZ", cat: "Finansman" },
    { to: "araclar/sevk-finansman", n: "17", t: "Sevk Finansmanı Seçicisi", d: "İthalatçı kredibilitesine göre sevk finansmanı uygunluğu.", tag: "ÜCRETSİZ", cat: "Finansman" },
    { to: "araclar/sermaye", n: "18", t: "İşletme Sermayesi Analizi", d: "İhracat için gerekli işletme sermayesi hesapla.", tag: "ÜCRETSİZ", cat: "Finansman" },
    { to: "araclar/garanti", n: "19", t: "Banka Garanti & Avan", d: "Garanti maliyeti + avan oranları.", tag: "ÜCRETSİZ", cat: "Finansman" },
    { to: "araclar/finansman-zaman", n: "20", t: "Finansman Zaman Çizelgesi", d: "Sipariş → sevk → tahsilat → kredi geri ödeme.", tag: "ÜCRETSİZ", cat: "Finansman" },
    // Ödeme & Belgeler (10)
    { to: "araclar/akreditif", n: "21", t: "Akreditif Tarayıcı", d: "UCP 600 ihlal kontrolü, 12 sık rezerv, banka maliyeti.", tag: "ÜCRETSİZ", cat: "Ödeme" },
    { to: "araclar/odeme-yontemi", n: "22", t: "Ödeme Yöntemi Karşılaştırması", d: "Akreditif vs T/T vs DP/DA vs peşin — risk vs maliyet.", tag: "ÜCRETSİZ", cat: "Ödeme" },
    { to: "araclar/vesaik", n: "23", t: "Vesaik Kontrol Listesi", d: "Akreditif başvurusu için 30+ kontrol maddesi.", tag: "ÜCRETSİZ", cat: "Ödeme" },
    { to: "araclar/tahsilat-riski", n: "24", t: "Tahsilat Riski Analizi", d: "İthalatçı + ülke → tahsilat riski skoru.", tag: "ÜCRETSİZ", cat: "Ödeme" },
    { to: "araclar/vade-iskonto", n: "25", t: "Vade & İskonto Hesaplayıcı", d: "Vadeli satış vs peşin iskonto → net kazanç.", tag: "ÜCRETSİZ", cat: "Ödeme" },
    { to: "araclar/sevkiyat-sure", n: "26", t: "Yükleme & Sevkiyat Süresi", d: "Nakliye tarihleri + gümrük gecikmesi → ödeme vadesi.", tag: "ÜCRETSİZ", cat: "Ödeme" },
    { to: "araclar/belge-uygunluk", n: "27", t: "İhracat Belgesi Uygunluk", d: "Fatura, CMR, packing list vs — eksi belge nedir?", tag: "ÜCRETSİZ", cat: "Ödeme" },
    { to: "araclar/akreditif-maliyet", n: "28", t: "Akreditif Maliyet Hesaplayıcı", d: "Banka ücreti + sigorta + kayıt + değişiklik → toplam.", tag: "ÜCRETSİZ", cat: "Ödeme" },
    { to: "araclar/swift", n: "29", t: "Swift Mesaj Tipi Seçicisi", d: "MT 700 vs 400 vs 103 — hangi ödeme yöntemi?", tag: "ÜCRETSİZ", cat: "Ödeme" },
    { to: "araclar/odeme-takvimi", n: "30", t: "Ödeme Takvimi Oluşturucu", d: "Sipariş → sevk → tahsilat → kredi ödeme planı.", tag: "ÜCRETSİZ", cat: "Ödeme" },
    // E-İhracat (10)
    { to: "araclar/pazaryeri", n: "31", t: "E-Pazaryeri Analizörü", d: "Amazon vs Etsy vs eBay — komisyon + vade karşılaştırması.", tag: "ÜCRETSİZ", cat: "E-İhracat" },
    { to: "araclar/mikro", n: "32", t: "Mikro İhracat Uygunluk Testi", d: "≤€30K + ≤600kg — mikro ihracatçı mısın?", tag: "ÜCRETSİZ", cat: "E-İhracat" },
    { to: "araclar/kargo", n: "33", t: "Kargo Ücret Karşılaştırması", d: "DHL vs FedEx vs UPS vs PTT — kilo başına maliyet.", tag: "ÜCRETSİZ", cat: "E-İhracat" },
    { to: "araclar/etgb", n: "34", t: "ETGB Maliyet Hesaplayıcı", d: "E-Ticaret Gümrük Birliği üyeliği maliyeti.", tag: "ÜCRETSİZ", cat: "E-İhracat" },
    { to: "araclar/platform-uygunluk", n: "35", t: "Platform Uygunluk Testi", d: "Ürün + kategori → hangi pazaryerinde satılabilir?", tag: "ÜCRETSİZ", cat: "E-İhracat" },
    { to: "araclar/dijital-vergi", n: "36", t: "EU/UK/USA Dijital Vergi", d: "OSS/IOSS hesapla — dijital vergi sorumluluğu.", tag: "ÜCRETSİZ", cat: "E-İhracat" },
    { to: "araclar/eihracat-kdv", n: "37", t: "E-İhracat KDV İstisnası", d: "€150'nin altı + hizmet = KDV muaf mı?", tag: "ÜCRETSİZ", cat: "E-İhracat" },
    { to: "araclar/iade", n: "38", t: "İade Maliyet Analizi", d: "Geri sevkiyat + gümrük + rehive — gerçek maliyet.", tag: "ÜCRETSİZ", cat: "E-İhracat" },
    { to: "araclar/platform-fx", n: "39", t: "Platform FX Kaybı", d: "Döviz çevirme + platform marjı → gerçek FX kaybı.", tag: "ÜCRETSİZ", cat: "E-İhracat" },
    { to: "araclar/eihracat-karlilik", n: "40", t: "E-İhracat Kârlılık", d: "Maliyet + komisyon + vergi → net kâr/zararım.", tag: "ÜCRETSİZ", cat: "E-İhracat" },
    // Devlet Desteği (10)
    { to: "araclar/destek", n: "41", t: "Destek Bulucu", d: "KOSGEB, Ticaret Bakanlığı, Eximbank, TÜBİTAK destek programları.", tag: "ÜCRETSİZ", cat: "Devlet desteği" },
    { to: "araclar/kosgeb", n: "42", t: "KOSGEB Destek Hesaplayıcı", d: "Yatırım desteği + işletme değeri → toplam destek.", tag: "ÜCRETSİZ", cat: "Devlet desteği" },
    { to: "araclar/turquality", n: "43", t: "Turquality Simülatörü", d: "Marka desteği + dış ticaret desteği + fuar desteği.", tag: "ÜCRETSİZ", cat: "Devlet desteği" },
    { to: "araclar/tubitak", n: "44", t: "TÜBİTAK Uygunluk Testi", d: "Ar-Ge projen hangi TÜBİTAK programına uygun?", tag: "ÜCRETSİZ", cat: "Devlet desteği" },
    { to: "araclar/fuar", n: "45", t: "Fuar & Tanıtım Desteği", d: "Gümrük + konaklama + eğitim + tanıtım desteği.", tag: "ÜCRETSİZ", cat: "Devlet desteği" },
    { to: "araclar/serbest-bolge", n: "46", t: "Serbest Bölge Analizi", d: "KDV + vergi + gümrük muafiyeti → yıllık tasarruf.", tag: "ÜCRETSİZ", cat: "Devlet desteği" },
    { to: "araclar/eticaret-destek", n: "47", t: "E-Ticaret Destek Programları", d: "Platform, pazarlama, lojistik ve dış pazarlar desteği.", tag: "ÜCRETSİZ", cat: "Devlet desteği" },
    { to: "araclar/arge", n: "48", t: "R&D Vergi Teşviki", d: "Ar-Ge harcamaları → vergi indirimi hesapla.", tag: "ÜCRETSİZ", cat: "Devlet desteği" },
    { to: "araclar/yatirim", n: "49", t: "Yatırım Teşvik Uygunluğu", d: "Yatırım + istihdam + bölge → teşvik tutarı.", tag: "ÜCRETSİZ", cat: "Devlet desteği" },
    { to: "araclar/basvuru-takvim", n: "50", t: "Başvuru Takvimi & Süreci", d: "Her destek programının başvuru tarihleri ve işlem süresi.", tag: "ÜCRETSİZ", cat: "Devlet desteği" },
    // Eğitim
    { to: "rehber", n: "51", t: "Rehber kütüphanesi", d: "Akreditif, INCOTERMS, A.TR vs EUR.1 — KOBİ diline indirgenmiş.", tag: "ÜCRETSİZ", cat: "Eğitim" },
  ];

  const tools = all.filter((x) => x.cat !== "Eğitim");
  const cats = [...new Set(tools.map((x) => x.cat))];
  const [active, setActive] = useState("Tümü");

  const getCategoryCount = (category) => tools.filter((x) => x.cat === category).length;
  const filtered = active === "Tümü" ? tools : tools.filter((x) => x.cat === active);

  return (
    <>
      <PageHeader
        crumbs={[{ label: "ihracathub", to: "" }, { label: "Araçlar" }]}
        kicker="ARAÇ KÜTÜPHANESİ"
        title="50 ücretsiz hesap aracı."
        lede="Hepsi tarayıcınızda çalışır. 5 kategoride, 50 araç. Login yok, paywall yok, dış API çağrısı yok. Verileriniz sunucuya gönderilmez."
      />

      <section className="section tight">
        <div className="container">
          <div style={{ display: "flex", gap: 8, marginBottom: 32, flexWrap: "wrap" }}>
            <button onClick={() => setActive("Tümü")} className={"btn " + (active === "Tümü" ? "" : "ghost") + " sm"}>Tümü ({tools.length})</button>
            {cats.map((c) => (
              <button key={c} onClick={() => setActive(c)} className={"btn " + (active === c ? "" : "ghost") + " sm"}>{c} ({getCategoryCount(c)})</button>
            ))}
          </div>

          <div className="grid grid-3">
            {filtered.map((tool) => (
              <Link to={tool.to} key={tool.n} className="tool-card">
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span className="mono caption">{tool.n}</span>
                  <span className="tag pos">{tool.tag}</span>
                </div>
                <div className="h-3" style={{ marginTop: 4 }}>{tool.t}</div>
                <div className="caption">{tool.d}</div>
                <div className="caption" style={{ color: "var(--ink-3)", marginTop: 4, fontFamily: "var(--f-mono)", fontSize: 11 }}>{tool.cat}</div>
                <span className="arrow">→</span>
              </Link>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function RehberPage() {
  const articles = window.IH_DATA.rehberler;
  const [cat, setCat] = useState("Tümü");
  const cats = [...new Set(articles.map((a) => a.cat))];
  const filtered = cat === "Tümü" ? articles : articles.filter((a) => a.cat === cat);

  const featured = articles.find((a) => a.id === "gtip-rehberi") || articles[0];

  return (
    <>
      <PageHeader
        crumbs={[{ label: "ihracathub", to: "" }, { label: "Rehber" }]}
        kicker="EDİTORYAL"
        title="Rehber kütüphanesi"
        lede="KOBİ diline indirgenmiş ihracat mevzuatı ve uygulama kılavuzları. Her rehberin yanında ilgili bir hesap aracı."
      />

      <section className="section tight">
        <div className="container">
          {/* Featured */}
          <div className="grid grid-12" style={{ gap: 48, alignItems: "start", marginBottom: 64 }}>
            <div style={{ gridColumn: "span 7" }}>
              <div className="placeholder" style={{ aspectRatio: "16/9" }}>BAŞLANGIÇ REHBERİ · İLLÜSTRASYON</div>
            </div>
            <div style={{ gridColumn: "span 5" }}>
              <div className="eyebrow accent">ÖNE ÇIKAN · {featured.cat}</div>
              <h2 className="h-1" style={{ marginTop: 12, marginBottom: 12 }}>{featured.title}</h2>
              <p className="lede">{featured.excerpt}</p>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 24 }}>
                <span className="caption mono">{featured.date} · {featured.time} dk okuma</span>
                <Link to={"rehber/" + featured.id} className="btn">Okumaya başla →</Link>
              </div>

              <hr className="hr" style={{ margin: "32px 0" }} />

              <div className="eyebrow">İLGİLİ ARAÇLAR</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 8 }}>
                <Link to="araclar/destek" style={{ display: "flex", justifyContent: "space-between", padding: "12px 0", borderBottom: "1px solid var(--rule)" }}>
                  <span>Destek Bulucu</span><span className="mono caption">→</span>
                </Link>
                <Link to="araclar/karlilik" style={{ display: "flex", justifyContent: "space-between", padding: "12px 0", borderBottom: "1px solid var(--rule)" }}>
                  <span>Kârlılık Hesaplayıcı</span><span className="mono caption">→</span>
                </Link>
              </div>
            </div>
          </div>

          {/* Filter */}
          <div style={{ display: "flex", gap: 8, marginBottom: 32, flexWrap: "wrap", paddingTop: 32, borderTop: "1px solid var(--ink)" }}>
            <button onClick={() => setCat("Tümü")} className={"btn " + (cat === "Tümü" ? "" : "ghost") + " sm"}>Tümü</button>
            {cats.map((c) => (
              <button key={c} onClick={() => setCat(c)} className={"btn " + (cat === c ? "" : "ghost") + " sm"}>{c}</button>
            ))}
          </div>

          {/* Grid */}
          <div className="grid grid-3">
            {filtered.map((a) => (
              <Link key={a.id} to={"rehber/" + a.id} className="tool-card" style={{ textDecoration: "none" }}>
                <div className="eyebrow accent">{a.cat}</div>
                <div className="h-3" style={{ marginTop: 4 }}>{a.title}</div>
                <p className="caption">{a.excerpt}</p>
                <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, fontFamily: "var(--f-mono)", fontSize: 11, color: "var(--ink-3)" }}>
                  <span>{a.date}</span>
                  <span>{a.time} dk</span>
                </div>
                <span className="arrow">→</span>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* Sample article body */}
      <section className="section cream">
        <div className="container">
          <div className="grid grid-12" style={{ gap: 48 }}>
            <div style={{ gridColumn: "span 8" }}>
              <div className="eyebrow accent">ÖRNEK MAKALE · BAŞLANGIÇ</div>
              <h2 className="h-1" style={{ marginTop: 12 }}>İhracat nasıl yapılır? 2026 başlangıç rehberi</h2>
              <div className="caption mono" style={{ marginTop: 8 }}>12 NİSAN 2026 · 18 DK OKUMA · YAZAR EDİTÖR EKİBİ</div>
              <hr className="hr" style={{ margin: "24px 0" }} />
              <div className="article">
                <p>İhracata yeni başlayan bir KOBİ için en zor adım ilk fiili sevkiyata kadar olan kısımdır. Vergi numarası, GTİP belirleme, ihracatçı birliği üyeliği, gümrük müşaviri seçimi — her biri ayrı bir öğrenme eğrisi.</p>
                <blockquote>İhracata yeni başlayan KOBİ'lerin %62'si ilk altı ayda en az bir önemli prosedür hatası yapıyor. En yaygın üçü: yanlış GTİP, eksik menşe belgesi ve geç KDV iadesi başvurusu.</blockquote>
                <h2>Dört temel adım</h2>
                <p>İlk fiili sevkiyata kadar olan süreç dört temel başlıkta toplanır: <strong>(1)</strong> idari kayıt — vergi mükellefiyeti ve ihracatçı birliği üyeliği, <strong>(2)</strong> ürün sınıflandırması — GTİP ve menşe belgeleri, <strong>(3)</strong> ödeme yapısı — akreditif veya peşin/vadeli koşulları, <strong>(4)</strong> lojistik ve gümrük — INCOTERM seçimi ve gümrük müşaviri.</p>
                <h3>İlk üç ayda dikkat edilecek riskler</h3>
                <p>İlk akreditif tahsilatınızda küçük bir vesaik hatası 150-500 USD arası rezerv ücretine yol açabilir. KDV iadesi standart sürede ortalama 6-8 ay alır; eksik belge nedeniyle iadenin kesilmesi yaygındır. Kur riskini başlangıçtan yönetmek için ihracat tahsilatı ile ithalat ödemesi arasında doğal hedge kurulması önerilir.</p>
              </div>
              <div style={{ marginTop: 32, padding: 24, background: "var(--ink)", color: "var(--paper)" }}>
                <div className="eyebrow accent" style={{ color: "var(--accent)" }}>BU REHBERİN ARAÇLARI</div>
                <div style={{ display: "flex", gap: 12, marginTop: 12, flexWrap: "wrap" }}>
                  <Link to="araclar/destek" className="btn accent">Destek Bulucu →</Link>
                  <Link to="araclar/karlilik" className="btn ghost" style={{ color: "var(--paper)", borderColor: "var(--paper)" }}>Kârlılık Hesaplayıcı →</Link>
                </div>
              </div>
            </div>
            <div style={{ gridColumn: "span 4" }}>
              <div className="eyebrow">İÇİNDEKİLER</div>
              <div className="anchor-list" style={{ marginTop: 8, fontSize: 14 }}>
                <a href="#1">1. Vergi mükellefiyeti ve birlik üyeliği</a>
                <a href="#2">2. GTİP belirleme ve menşe belgeleri</a>
                <a href="#3">3. Ödeme yapısı: akreditif vs peşin</a>
                <a href="#4">4. INCOTERM seçimi</a>
                <a href="#5">5. Gümrük müşaviri ve lojistik</a>
                <a href="#6">6. KDV iadesi süreci</a>
                <a href="#7">7. Devlet destekleri ve KOSGEB</a>
                <a href="#8">8. Sık sorulan sorular</a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// ---------- ArticleLayout ----------
function ArticleLayout({ cat, title, date, time, id, tools, toc, children }) {
  const others = (window.IH_DATA.rehberler || []).filter((a) => a.id !== id).slice(0, 6);
  return (
    <>
      <PageHeader
        crumbs={[{ label: "ihracathub", to: "" }, { label: "Rehber", to: "rehber" }, { label: cat }]}
        kicker={"REHBERİ · " + (cat || "").toUpperCase()}
        title={title}
      />
      <section className="section cream">
        <div className="container">
          <div className="grid grid-12" style={{ gap: 48, alignItems: "start" }}>
            <article style={{ gridColumn: "span 8" }}>
              <div className="caption mono" style={{ marginBottom: 24, color: "var(--ink-3)" }}>
                {date} · {time} DK OKUMA · EDİTÖR EKİBİ
              </div>
              <div className="article">
                {children}
              </div>
              {tools && tools.length > 0 && (
                <div style={{ marginTop: 40, padding: 24, background: "var(--ink)", color: "var(--paper)" }}>
                  <div className="eyebrow accent" style={{ color: "var(--accent)" }}>BU REHBERİN ARAÇLARI</div>
                  <div style={{ display: "flex", gap: 12, marginTop: 12, flexWrap: "wrap" }}>
                    {tools.map((t, i) => (
                      <Link key={i} to={t.to}
                        className={i === 0 ? "btn accent" : "btn ghost"}
                        style={i > 0 ? { color: "var(--paper)", borderColor: "var(--paper)" } : {}}>
                        {t.label} →
                      </Link>
                    ))}
                  </div>
                </div>
              )}
            </article>
            <aside style={{ gridColumn: "span 4", position: "sticky", top: 80 }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>İÇİNDEKİLER</div>
              <div className="anchor-list" style={{ fontSize: 14 }}>
                {(toc || []).map((t, i) => (
                  <a key={i} href={"#sec-" + t.id}>{t.label}</a>
                ))}
              </div>
              <hr className="hr" style={{ margin: "24px 0" }} />
              <div className="eyebrow" style={{ marginBottom: 12 }}>DİĞER REHBERLER</div>
              <div className="anchor-list" style={{ fontSize: 13 }}>
                {others.map((a) => (
                  <Link key={a.id} to={"rehber/" + a.id} style={{ display: "block", padding: "8px 0", borderBottom: "1px solid var(--rule)", color: "var(--ink-2)", lineHeight: 1.4 }}>
                    {a.title}
                  </Link>
                ))}
              </div>
              <div style={{ marginTop: 20 }}>
                <Link to="rehber" className="btn ghost sm" style={{ width: "100%", textAlign: "center" }}>Tüm rehberler →</Link>
              </div>
            </aside>
          </div>
        </div>
      </section>
    </>
  );
}

// ---------- Inline hesap aracı kutusu ----------
function InlineCalc({ title, children }) {
  return (
    <div className="inline-calc" style={{ margin: "32px 0" }}>
      <div className="eyebrow accent" style={{ marginBottom: 12 }}>HESAP ARACI · {title.toUpperCase()}</div>
      {children}
    </div>
  );
}

// ---------- Makale veri tablosu ----------
function ArticleTable({ headers, rows, caption }) {
  return (
    <div style={{ overflowX: "auto", margin: "20px 0" }}>
      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14, fontFamily: "var(--f-sans)" }}>
        {caption && <caption style={{ textAlign: "left", fontSize: 12, color: "var(--ink-3)", marginBottom: 6, captionSide: "top" }}>{caption}</caption>}
        <thead>
          <tr style={{ borderBottom: "2px solid var(--ink)" }}>
            {headers.map((h, i) => (
              <th key={i} style={{ padding: "8px 12px", textAlign: "left", fontWeight: 600, fontSize: 12, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--ink-3)", whiteSpace: "nowrap" }}>{h}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, ri) => (
            <tr key={ri} style={{ borderBottom: "1px solid var(--rule)", background: ri % 2 === 0 ? "transparent" : "var(--paper-2)" }}>
              {row.map((cell, ci) => (
                <td key={ci} style={{ padding: "8px 12px", verticalAlign: "top", lineHeight: 1.45 }} dangerouslySetInnerHTML={{ __html: cell }} />
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// ---------- RehberArticlePage - yönlendirici ----------
function RehberArticlePage({ id }) {
  const ArticleComponent = (window.REHBER_ARTICLES || {})[id];
  if (!ArticleComponent) {
    return (
      <>
        <PageHeader
          crumbs={[{ label: "ihracathub", to: "" }, { label: "Rehber", to: "rehber" }]}
          title="Makale bulunamadı"
          lede="Bu makale henüz yayında değil veya taşınmış olabilir."
        />
        <section className="section"><div className="container"><Link to="rehber" className="btn">← Tüm rehberlere dön</Link></div></section>
      </>
    );
  }
  return <ArticleComponent />;
}

window.AraclarIndex = AraclarIndex;
window.RehberPage = RehberPage;
window.RehberArticlePage = RehberArticlePage;
window.ArticleLayout = ArticleLayout;
window.InlineCalc = InlineCalc;
window.ArticleTable = ArticleTable;
window.REHBER_ARTICLES = window.REHBER_ARTICLES || {};