// Finansal araçlar — KDV, Fiyatlama, Başabaş, INCOTERM, Navlun, Nakit Akışı, Ülke Riski, Forward

// ── 2. İhracat Fiyatlama & Marj ──────────────────────────────────────────────
function FiyatlamaPage() {
  const [maliyet, setMaliyet] = useState(250);
  const [doviz, setDoviz] = useState("USD");
  const kurlar = { USD: 38.42, EUR: 43.71, GBP: 50.88 };
  const kur = kurlar[doviz];
  const margins = [10, 15, 20, 25, 30, 35, 40];

  const satirlar = margins.map(m => ({
    marj: m,
    fiyatTL: maliyet / (1 - m / 100),
    fiyatDoviz: maliyet / (1 - m / 100) / kur,
  }));

  return (
    <>
      <PageHeader
        crumbs={[{ label: "ihracathub", to: "" }, { label: "Araçlar", to: "araclar" }, { label: "İhracat Fiyatlama & Marj" }]}
        kicker="FİNANSAL ARAÇ · ÜCRETSİZ"
        title="İhracat Fiyatlama & Marj"
        lede="Hedef kâr marjına göre döviz bazlı ihracat satış fiyatını hesaplayın."
      />
      <section className="section tight">
        <div className="container">
          <div className="grid grid-12" style={{ gap: 32 }}>
            <div style={{ gridColumn: "span 4" }}>
              <div className="eyebrow primary" style={{ marginBottom: 16 }}>ÜRÜN MALİYETİ</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <div>
                  <label className="label">Birim maliyet (TL)</label>
                  <input type="number" className="input mono" value={maliyet} onChange={e => setMaliyet(+e.target.value || 0)} />
                </div>
                <div>
                  <label className="label">Fatura dövizi</label>
                  <div className="tabs" style={{ display: "flex" }}>
                    {["USD", "EUR", "GBP"].map(d => (
                      <button key={d} className={"tab " + (doviz === d ? "active" : "")} onClick={() => setDoviz(d)} style={{ flex: 1 }}>{d}</button>
                    ))}
                  </div>
                </div>
                <div style={{ padding: 12, background: "var(--paper-2)", fontSize: 12 }}>
                  <div className="mono">Kullanılan kur: {doviz}/TRY = {kur.toFixed(2)}</div>
                  <div style={{ color: "var(--ink-3)", marginTop: 4 }}>Kaynak: TCMB gösterge</div>
                </div>
              </div>
            </div>

            <div style={{ gridColumn: "span 8" }}>
              <div className="eyebrow accent" style={{ marginBottom: 16 }}>MARJ TABLOSU</div>
              <table className="tbl">
                <thead>
                  <tr>
                    <th>Hedef Marj</th>
                    <th className="num">Satış Fiyatı (TL)</th>
                    <th className="num">Satış Fiyatı ({doviz})</th>
                    <th className="num">Katkı (TL/adet)</th>
                  </tr>
                </thead>
                <tbody>
                  {satirlar.map(s => (
                    <tr key={s.marj}>
                      <td>%{s.marj}</td>
                      <td className="num mono">₺{s.fiyatTL.toFixed(2)}</td>
                      <td className="num mono">{s.fiyatDoviz.toFixed(2)} {doviz}</td>
                      <td className="num mono" style={{ color: "var(--pos)" }}>₺{(s.fiyatTL - maliyet).toFixed(2)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// ── 3. Başabaş Noktası Analizi ────────────────────────────────────────────────
function BasabasPage() {
  const [sabitMaliyet, setSabitMaliyet] = useState(80000);
  const [birimMaliyet, setBirimMaliyet] = useState(120);
  const [birimSatis, setBirimSatis] = useState(220);

  const katki = birimSatis - birimMaliyet;
  const bbAdet = katki > 0 ? Math.ceil(sabitMaliyet / katki) : 0;
  const bbCiro = bbAdet * birimSatis;
  const katkiMarji = birimSatis > 0 ? (katki / birimSatis) * 100 : 0;

  const fmt = n => n.toLocaleString("tr-TR", { maximumFractionDigits: 0 });

  return (
    <>
      <PageHeader
        crumbs={[{ label: "ihracathub", to: "" }, { label: "Araçlar", to: "araclar" }, { label: "Başabaş Noktası Analizi" }]}
        kicker="FİNANSAL ARAÇ · ÜCRETSİZ"
        title="Başabaş Noktası Analizi"
        lede="İhracat partisi için sabit ve değişken maliyetleri girerek kâra geçiş noktanızı bulun."
      />
      <section className="section tight">
        <div className="container">
          <div className="grid grid-12" style={{ gap: 32 }}>
            <div style={{ gridColumn: "span 5" }}>
              <div className="eyebrow primary" style={{ marginBottom: 16 }}>MALİYET YAPISI</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <div>
                  <label className="label">Sabit maliyet (TL/parti)</label>
                  <input type="number" className="input mono" value={sabitMaliyet} onChange={e => setSabitMaliyet(+e.target.value || 0)} />
                  <div className="caption" style={{ marginTop: 4, color: "var(--ink-3)" }}>Navlun, ambalaj, belge, gümrük sabit giderleri</div>
                </div>
                <div>
                  <label className="label">Birim değişken maliyet (TL)</label>
                  <input type="number" className="input mono" value={birimMaliyet} onChange={e => setBirimMaliyet(+e.target.value || 0)} />
                </div>
                <div>
                  <label className="label">Birim satış fiyatı (TL)</label>
                  <input type="number" className="input mono" value={birimSatis} onChange={e => setBirimSatis(+e.target.value || 0)} />
                </div>
              </div>
            </div>

            <div style={{ gridColumn: "span 7" }}>
              <div className="eyebrow accent" style={{ marginBottom: 16 }}>SONUÇ</div>
              <div className="result-band">
                <div className="label">Başabaş noktası</div>
                <div className="value">{fmt(bbAdet)} adet</div>
                <div className="sub">Başabaş ciro: ₺{fmt(bbCiro)} · Katkı payı marjı: %{katkiMarji.toFixed(1)}</div>
              </div>

              <div className="divider-label">SENARYO TABLOSU</div>
              <table className="tbl">
                <thead>
                  <tr><th>Satış Adedi</th><th className="num">Toplam Gelir</th><th className="num">Toplam Maliyet</th><th className="num">Kâr/Zarar</th></tr>
                </thead>
                <tbody>
                  {[0.5, 0.75, 1, 1.25, 1.5].map(kat => {
                    const adet = Math.round(bbAdet * kat);
                    const gelir = adet * birimSatis;
                    const toplam = sabitMaliyet + adet * birimMaliyet;
                    const kar = gelir - toplam;
                    return (
                      <tr key={kat} style={kat === 1 ? { background: "var(--paper-2)", fontWeight: 600 } : {}}>
                        <td>{fmt(adet)}{kat === 1 ? " ← BB" : ""}</td>
                        <td className="num mono">₺{fmt(gelir)}</td>
                        <td className="num mono">₺{fmt(toplam)}</td>
                        <td className="num mono" style={{ color: kar >= 0 ? "var(--pos)" : "var(--neg)" }}>{kar >= 0 ? "+" : ""}₺{fmt(kar)}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// ── 4. INCOTERM Maliyet Karşılaştırıcı ───────────────────────────────────────
function IncotermPage() {
  const [secili, setSecili] = useState("FOB");

  const terms = [
    { kod: "EXW", tip: "Çok mod", ozet: "Ex Works — fabrika teslim", saticiOder: "Hiçbir şey", aliciOder: "Her şey", risk: "Fabrikada geçer", not: "Satıcı için en az sorumluluk. Alıcı ihracat gümrüğünü de yapar." },
    { kod: "FCA", tip: "Çok mod", ozet: "Free Carrier — taşıyıcıya teslim", saticiOder: "İhracat gümrüğü", aliciOder: "Ana navlun + sigorta + ithalat", risk: "Taşıyıcıya teslimde geçer", not: "LC işlemlerinde konşimento düzenlenmesi için FCA tercih edilir." },
    { kod: "CPT", tip: "Çok mod", ozet: "Carriage Paid To", saticiOder: "İhracat gümrüğü + ana navlun", aliciOder: "Sigorta + ithalat gümrüğü", risk: "İlk taşıyıcıya teslimde geçer", not: "Risk navlun ödenmeden önce geçer." },
    { kod: "CIP", tip: "Çok mod", ozet: "Carriage & Insurance Paid To", saticiOder: "İhracat gümrüğü + navlun + sigorta", aliciOder: "İthalat gümrüğü", risk: "İlk taşıyıcıya teslimde geçer", not: "CIP'ta sigorta en az ICC-A seviyesinde olmalı." },
    { kod: "DAP", tip: "Çok mod", ozet: "Delivered at Place", saticiOder: "Her şey (ithalat hariç)", aliciOder: "İthalat gümrüğü + KDV", risk: "Varış yerinde boşaltmaya hazırda geçer", not: "Türk KOBİ'lerin sıkça tercih ettiği terim." },
    { kod: "DPU", tip: "Çok mod", ozet: "Delivered at Place Unloaded", saticiOder: "Her şey + boşaltma (ithalat hariç)", aliciOder: "İthalat gümrüğü + KDV", risk: "Boşaltmadan sonra geçer", not: "DDP ve DAP arası; satıcı boşaltmayı da üstlenir." },
    { kod: "DDP", tip: "Çok mod", ozet: "Delivered Duty Paid", saticiOder: "Her şey dahil", aliciOder: "Hiçbir şey", risk: "Teslimat adresinde geçer", not: "Alıcı için en az sorumluluk. E-ihracatta yaygın." },
    { kod: "FAS", tip: "Deniz/İçsu", ozet: "Free Alongside Ship", saticiOder: "İhracat gümrüğü + rıhtıma getirme", aliciOder: "Yükleme + navlun + sigorta", risk: "Rıhtımda geçer", not: "Dökme yük veya RoRo için uygundur." },
    { kod: "FOB", tip: "Deniz/İçsu", ozet: "Free on Board", saticiOder: "İhracat gümrüğü + gemiye yükleme", aliciOder: "Navlun + sigorta + ithalat", risk: "Gemide geçer", not: "Türkiye'den en yaygın kullanılan terim. Konteyner için FCA önerilir." },
    { kod: "CFR", tip: "Deniz/İçsu", ozet: "Cost & Freight", saticiOder: "İhracat gümrüğü + yükleme + navlun", aliciOder: "Sigorta + ithalat gümrüğü", risk: "Gemide geçer", not: "Risk navlun ödenmeden önce geçer." },
    { kod: "CIF", tip: "Deniz/İçsu", ozet: "Cost Insurance & Freight", saticiOder: "İhracat gümrüğü + yükleme + navlun + sigorta", aliciOder: "İthalat gümrüğü", risk: "Gemide geçer", not: "Sigorta minimum ICC-C. LC işlemlerinde yaygın." },
  ];

  const t = terms.find(x => x.kod === secili);

  return (
    <>
      <PageHeader
        crumbs={[{ label: "ihracathub", to: "" }, { label: "Araçlar", to: "araclar" }, { label: "INCOTERM Karşılaştırıcı" }]}
        kicker="FİNANSAL ARAÇ · ÜCRETSİZ"
        title="INCOTERM 2020 Karşılaştırıcı"
        lede="11 INCOTERM 2020 terimi için satıcı/alıcı sorumlulukları, risk geçiş noktası ve uygulama notu."
      />
      <section className="section tight">
        <div className="container">
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 24 }}>
            {terms.map(t => (
              <button key={t.kod} onClick={() => setSecili(t.kod)}
                className={"btn sm " + (secili === t.kod ? "" : "ghost")}
                style={{ minWidth: 52 }}>
                {t.kod}
              </button>
            ))}
          </div>

          {t && (
            <div className="grid grid-12" style={{ gap: 32 }}>
              <div style={{ gridColumn: "span 5" }}>
                <div className="eyebrow accent">{t.kod} · {t.tip}</div>
                <h3 className="h-2" style={{ marginTop: 8 }}>{t.ozet}</h3>
                <div style={{ marginTop: 24, padding: 16, background: "var(--paper-2)", borderLeft: "3px solid var(--accent)", fontSize: 13 }}>
                  {t.not}
                </div>
                <div style={{ marginTop: 16, fontSize: 13 }}>
                  <strong>Risk geçiş noktası:</strong> {t.risk}
                </div>
              </div>
              <div style={{ gridColumn: "span 7" }}>
                <table className="tbl">
                  <tbody>
                    <tr>
                      <td style={{ width: "40%" }}><strong>Satıcı öder / üstlenir</strong></td>
                      <td style={{ color: "var(--neg)" }}>{t.saticiOder}</td>
                    </tr>
                    <tr>
                      <td><strong>Alıcı öder / üstlenir</strong></td>
                      <td style={{ color: "var(--pos)" }}>{t.aliciOder}</td>
                    </tr>
                  </tbody>
                </table>

                <div className="divider-label" style={{ marginTop: 24 }}>TÜM TERİMLER — HIZLI TABLO</div>
                <table className="tbl" style={{ fontSize: 12 }}>
                  <thead><tr><th>Terim</th><th>Tip</th><th>Risk Geçişi</th></tr></thead>
                  <tbody>
                    {terms.map(row => (
                      <tr key={row.kod} style={row.kod === secili ? { background: "var(--paper-2)", fontWeight: 600 } : {}}
                        onClick={() => setSecili(row.kod)} style={{ cursor: "pointer", ...(row.kod === secili ? { background: "var(--paper-2)", fontWeight: 600 } : {}) }}>
                        <td>{row.kod}</td>
                        <td className="mono" style={{ fontSize: 11 }}>{row.tip}</td>
                        <td style={{ fontSize: 11 }}>{row.risk}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </div>
      </section>
    </>
  );
}

// ── 5. Navlun & Sigorta Hesaplayıcı ──────────────────────────────────────────
function NavlunPage() {
  const [mod, setMod] = useState("deniz");
  const [agirlik, setAgirlik] = useState(5000);
  const [mesafe, setMesafe] = useState("orta");
  const [malDegeri, setMalDegeri] = useState(500000);
  const [sigortaOrani, setSigortaOrani] = useState(0.2);

  const navlunTablosu = {
    deniz:  { kisa: 0.012, orta: 0.018, uzun: 0.028 },
    hava:   { kisa: 0.18,  orta: 0.25,  uzun: 0.38 },
    kara:   { kisa: 0.008, orta: 0.014, uzun: 0.022 },
    demir:  { kisa: 0.006, orta: 0.010, uzun: 0.016 },
  };

  const navlunKg = navlunTablosu[mod][mesafe];
  const navlun = agirlik * navlunKg * 38.42;
  const sigorta = malDegeri * (sigortaOrani / 100);
  const cif = malDegeri + navlun + sigorta;
  const fmt = n => n.toLocaleString("tr-TR", { maximumFractionDigits: 0 });

  return (
    <>
      <PageHeader
        crumbs={[{ label: "ihracathub", to: "" }, { label: "Araçlar", to: "araclar" }, { label: "Navlun & Sigorta Hesaplayıcı" }]}
        kicker="FİNANSAL ARAÇ · ÜCRETSİZ"
        title="Navlun & Sigorta Hesaplayıcı"
        lede="Taşıma moduna ve mesafeye göre navlun tahmini, sigorta maliyeti ve CIF değeri hesaplayın."
      />
      <section className="section tight">
        <div className="container">
          <div className="grid grid-12" style={{ gap: 32 }}>
            <div style={{ gridColumn: "span 5" }}>
              <div className="eyebrow primary" style={{ marginBottom: 16 }}>TAŞIMA BİLGİLERİ</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <div>
                  <label className="label">Taşıma modu</label>
                  <div className="tabs" style={{ display: "flex" }}>
                    {[["deniz","Deniz"],["hava","Hava"],["kara","Kara"],["demir","Demir"]].map(([v,l]) => (
                      <button key={v} className={"tab " + (mod === v ? "active" : "")} onClick={() => setMod(v)} style={{ flex: 1 }}>{l}</button>
                    ))}
                  </div>
                </div>
                <div>
                  <label className="label">Mesafe</label>
                  <div className="tabs" style={{ display: "flex" }}>
                    {[["kisa","Kısa (≤2000 km)"],["orta","Orta (2–6K km)"],["uzun","Uzun (6K+ km)"]].map(([v,l]) => (
                      <button key={v} className={"tab " + (mesafe === v ? "active" : "")} onClick={() => setMesafe(v)} style={{ flex: 1, fontSize: 11 }}>{l}</button>
                    ))}
                  </div>
                </div>
                <div>
                  <label className="label">Mal ağırlığı (kg)</label>
                  <input type="number" className="input mono" value={agirlik} onChange={e => setAgirlik(+e.target.value || 0)} />
                </div>
                <div>
                  <label className="label">Mal değeri (TL)</label>
                  <input type="number" className="input mono" value={malDegeri} onChange={e => setMalDegeri(+e.target.value || 0)} />
                </div>
                <div>
                  <label className="label">Sigorta oranı (%)</label>
                  <input type="number" step="0.05" className="input mono" value={sigortaOrani} onChange={e => setSigortaOrani(+e.target.value || 0)} />
                  <div className="caption" style={{ color: "var(--ink-3)", marginTop: 4 }}>Tipik: %0.10–0.50</div>
                </div>
              </div>
            </div>

            <div style={{ gridColumn: "span 7" }}>
              <div className="eyebrow accent" style={{ marginBottom: 16 }}>SONUÇ</div>
              <div className="result-band">
                <div className="label">CIF Değeri (toplam)</div>
                <div className="value">₺{fmt(cif)}</div>
                <div className="sub">Mal değeri + navlun + sigorta</div>
              </div>
              <table className="tbl" style={{ marginTop: 16 }}>
                <tbody>
                  <tr><td>Mal değeri (EXW)</td><td className="num mono">₺{fmt(malDegeri)}</td></tr>
                  <tr><td>Navlun tahmini ({mod} · {mesafe})</td><td className="num mono" style={{ color: "var(--neg)" }}>₺{fmt(navlun)}</td></tr>
                  <tr><td>Sigorta (%{sigortaOrani})</td><td className="num mono" style={{ color: "var(--neg)" }}>₺{fmt(sigorta)}</td></tr>
                  <tr style={{ background: "var(--ink)", color: "var(--paper)" }}>
                    <td style={{ color: "var(--paper)" }}><strong>CIF Değeri</strong></td>
                    <td className="num mono"><strong>₺{fmt(cif)}</strong></td>
                  </tr>
                </tbody>
              </table>
              <div className="grid grid-3" style={{ marginTop: 24 }}>
                <div className="kpi"><div className="kpi-label">NAVLUN</div><div className="kpi-value" style={{ fontSize: 18 }}>₺{fmt(navlun)}</div></div>
                <div className="kpi"><div className="kpi-label">SİGORTA</div><div className="kpi-value" style={{ fontSize: 18 }}>₺{fmt(sigorta)}</div></div>
                <div className="kpi"><div className="kpi-label">LOJİSTİK PAYI</div><div className="kpi-value">%{malDegeri > 0 ? ((navlun + sigorta) / malDegeri * 100).toFixed(1) : "0"}</div></div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// ── 6. Nakit Akışı Planlayıcı ────────────────────────────────────────────────
function NakitAkisiPage() {
  const [aylikIhracat, setAylikIhracat] = useState(300000);
  const [stokGun, setStokGun] = useState(45);
  const [tahsilatGun, setTahsilatGun] = useState(60);
  const [odemeGun, setOdemeGun] = useState(30);
  const [finansmanMaliyeti, setFinansmanMaliyeti] = useState(55);

  const dongus = stokGun + tahsilatGun - odemeGun;
  const gunlukCiro = aylikIhracat / 30;
  const sermayeIhtiyaci = gunlukCiro * dongus;
  const yillikFinansmanMaliyeti = sermayeIhtiyaci * (finansmanMaliyeti / 100);
  const aylikFinansmanMaliyeti = yillikFinansmanMaliyeti / 12;

  const fmt = n => n.toLocaleString("tr-TR", { maximumFractionDigits: 0 });

  const aylar = ["Oca", "Şub", "Mar", "Nis", "May", "Haz"];
  const tahsilat = aylar.map((_, i) => i >= 2 ? aylikIhracat : (i === 1 ? aylikIhracat * 0.5 : 0));
  const odeme = aylar.map(() => aylikIhracat * 0.6);

  return (
    <>
      <PageHeader
        crumbs={[{ label: "ihracathub", to: "" }, { label: "Araçlar", to: "araclar" }, { label: "Nakit Akışı Planlayıcı" }]}
        kicker="FİNANSAL ARAÇ · ÜCRETSİZ"
        title="Nakit Akışı Planlayıcı"
        lede="İhracat döngüsündeki stok, tahsilat ve ödeme sürelerini girerek işletme sermayesi ihtiyacını hesaplayın."
      />
      <section className="section tight">
        <div className="container">
          <div className="grid grid-12" style={{ gap: 32 }}>
            <div style={{ gridColumn: "span 5" }}>
              <div className="eyebrow primary" style={{ marginBottom: 16 }}>DÖNGÜ PARAMETRELERİ</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <div>
                  <label className="label">Aylık ihracat cirosu (TL)</label>
                  <input type="number" className="input mono" value={aylikIhracat} onChange={e => setAylikIhracat(+e.target.value || 0)} />
                </div>
                <div>
                  <label className="label">Stok süresi (gün)</label>
                  <input type="number" className="input mono" value={stokGun} onChange={e => setStokGun(+e.target.value || 0)} />
                </div>
                <div>
                  <label className="label">Tahsilat süresi (gün)</label>
                  <input type="number" className="input mono" value={tahsilatGun} onChange={e => setTahsilatGun(+e.target.value || 0)} />
                  <div className="caption" style={{ color: "var(--ink-3)", marginTop: 4 }}>Akreditif: 30–60 gün · Vadeli TT: 60–90 gün</div>
                </div>
                <div>
                  <label className="label">Tedarikçiye ödeme süresi (gün)</label>
                  <input type="number" className="input mono" value={odemeGun} onChange={e => setOdemeGun(+e.target.value || 0)} />
                </div>
                <div>
                  <label className="label">Finansman maliyeti (yıllık %)</label>
                  <input type="number" className="input mono" value={finansmanMaliyeti} onChange={e => setFinansmanMaliyeti(+e.target.value || 0)} />
                </div>
              </div>
            </div>

            <div style={{ gridColumn: "span 7" }}>
              <div className="eyebrow accent" style={{ marginBottom: 16 }}>SONUÇ</div>
              <div className="result-band">
                <div className="label">İşletme sermayesi ihtiyacı</div>
                <div className="value">₺{fmt(sermayeIhtiyaci)}</div>
                <div className="sub">Nakit döngüsü: {dongus} gün · Aylık finansman maliyeti: ₺{fmt(aylikFinansmanMaliyeti)}</div>
              </div>
              <div className="grid grid-3" style={{ marginTop: 16 }}>
                <div className="kpi"><div className="kpi-label">NAKİT DÖNGÜSÜ</div><div className="kpi-value">{dongus} gün</div></div>
                <div className="kpi"><div className="kpi-label">AYLIK MALİYET</div><div className="kpi-value" style={{ fontSize: 16 }}>₺{fmt(aylikFinansmanMaliyeti)}</div></div>
                <div className="kpi"><div className="kpi-label">YILLIK MALİYET</div><div className="kpi-value" style={{ fontSize: 16 }}>₺{fmt(yillikFinansmanMaliyeti)}</div></div>
              </div>
              <div className="divider-label">DÖNGÜ KIRILIMLARI</div>
              <table className="tbl">
                <tbody>
                  <tr><td>Stok süresi</td><td className="num mono">+{stokGun} gün</td></tr>
                  <tr><td>Tahsilat süresi</td><td className="num mono">+{tahsilatGun} gün</td></tr>
                  <tr><td>Tedarikçi ödeme vadesi</td><td className="num mono" style={{ color: "var(--pos)" }}>−{odemeGun} gün</td></tr>
                  <tr style={{ fontWeight: 600 }}><td>Net nakit döngüsü</td><td className="num mono">{dongus} gün</td></tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// ── 7. Ülke Risk & Ödeme Vadesi ───────────────────────────────────────────────
function UlkeRiskiPage() {
  const pazar = window.IH_DATA?.pazar || [];
  const [secili, setSecili] = useState("DE");

  const ulke = pazar.find(p => p.code === secili) || pazar[0];

  const odemeTavsiyeleri = {
    "Düşük":   { yontem: "Vadeli TT veya Açık Hesap", aciklama: "Düşük riskli pazar — ticaret geçmişi iyi, akreditif genelde fazla maliyetli.", vade: "60–90 gün açık hesap kabul edilebilir." },
    "Orta":    { yontem: "Akreditif veya Vesaik", aciklama: "Orta riskli pazar — LC görülebilir vesaik (D/P) tercih edilir.", vade: "Peşin veya kısa vadeli LC önerilir." },
    "Yüksek":  { yontem: "Peşin TT veya LC teyitli", aciklama: "Yüksek riskli pazar — teyitli akreditif veya %30-50 peşin geri kalan LC.", vade: "60 günü aşan vadeler için kredi sigortası alın." },
  };

  const tavsiye = ulke ? odemeTavsiyeleri[ulke.risk] : null;

  return (
    <>
      <PageHeader
        crumbs={[{ label: "ihracathub", to: "" }, { label: "Araçlar", to: "araclar" }, { label: "Ülke Risk & Ödeme Vadesi" }]}
        kicker="FİNANSAL ARAÇ · ÜCRETSİZ"
        title="Ülke Risk & Ödeme Vadesi"
        lede="Hedef ülkeyi seçin; risk profili, gümrük bilgileri ve tavsiye edilen ödeme yöntemini görün."
      />
      <section className="section tight">
        <div className="container">
          <div style={{ marginBottom: 24 }}>
            <label className="label">Hedef pazar</label>
            <select className="select" value={secili} onChange={e => setSecili(e.target.value)} style={{ maxWidth: 320 }}>
              {pazar.map(p => <option key={p.code} value={p.code}>{p.name} — {p.region}</option>)}
            </select>
          </div>

          {ulke && (
            <div className="grid grid-12" style={{ gap: 32 }}>
              <div style={{ gridColumn: "span 5" }}>
                <div className="eyebrow accent">{ulke.name} · {ulke.region}</div>
                <div className="grid grid-2" style={{ gap: 16, marginTop: 16 }}>
                  <div className="kpi">
                    <div className="kpi-label">RİSK SEVİYESİ</div>
                    <div className="kpi-value" style={{ fontSize: 18, color: ulke.risk === "Düşük" ? "var(--pos)" : ulke.risk === "Yüksek" ? "var(--neg)" : "var(--warn)" }}>{ulke.risk}</div>
                  </div>
                  <div className="kpi">
                    <div className="kpi-label">İHRACAT SKORU</div>
                    <div className="kpi-value">{ulke.score}/100</div>
                  </div>
                  <div className="kpi">
                    <div className="kpi-label">GÜMRÜK VERGİSİ</div>
                    <div className="kpi-value">%{ulke.tariff}</div>
                  </div>
                  <div className="kpi">
                    <div className="kpi-label">STA / ANLAŞMA</div>
                    <div className="kpi-value" style={{ fontSize: 13 }}>{ulke.fta}</div>
                  </div>
                </div>
              </div>
              <div style={{ gridColumn: "span 7" }}>
                {tavsiye && (
                  <>
                    <div className="eyebrow primary" style={{ marginBottom: 12 }}>ÖDEME TAVSİYESİ</div>
                    <div style={{ padding: 20, background: "var(--paper-2)", borderLeft: "4px solid var(--accent)" }}>
                      <div className="h-3">{tavsiye.yontem}</div>
                      <p style={{ fontSize: 14, marginTop: 8 }}>{tavsiye.aciklama}</p>
                      <p style={{ fontSize: 14, marginTop: 8 }}><strong>Vade:</strong> {tavsiye.vade}</p>
                    </div>
                    <table className="tbl" style={{ marginTop: 16 }}>
                      <tbody>
                        <tr><td>İthalat hacmi</td><td className="num mono">${ulke.import} mlr</td></tr>
                        <tr><td>İthalat büyümesi</td><td className="num mono">+%{ulke.growth}</td></tr>
                        <tr><td>İletişim dili</td><td className="num mono">{ulke.lang}</td></tr>
                      </tbody>
                    </table>
                  </>
                )}
              </div>
            </div>
          )}
        </div>
      </section>
    </>
  );
}

// ── 8. Döviz Forward Hesaplayıcı ──────────────────────────────────────────────
function ForwardPage() {
  const [tutar, setTutar] = useState(100000);
  const [doviz, setDoviz] = useState("USD");
  const [vade, setVade] = useState(90);

  const spotKurlar = { USD: 38.42, EUR: 43.71, GBP: 50.88 };
  const yabanciFaiz = { USD: 5.5, EUR: 3.5, GBP: 5.25 };
  const trFaiz = 45;

  const spot = spotKurlar[doviz];
  const rf = yabanciFaiz[doviz];
  const forward = spot * (1 + trFaiz / 100 * vade / 365) / (1 + rf / 100 * vade / 365);
  const hedgingMaliyeti = ((forward - spot) / spot) * 100;
  const spotTRY = tutar * spot;
  const forwardTRY = tutar * forward;
  const kazanc = forwardTRY - spotTRY;

  const fmt = n => n.toLocaleString("tr-TR", { maximumFractionDigits: 0 });

  return (
    <>
      <PageHeader
        crumbs={[{ label: "ihracathub", to: "" }, { label: "Araçlar", to: "araclar" }, { label: "Döviz Forward Hesaplayıcı" }]}
        kicker="FİNANSAL ARAÇ · ÜCRETSİZ"
        title="Döviz Forward Hesaplayıcı"
        lede="Faiz paritesine göre forward kur hesaplayın; vadeli satış ile spot arasındaki farkı görün."
      />
      <section className="section tight">
        <div className="container">
          <div className="grid grid-12" style={{ gap: 32 }}>
            <div style={{ gridColumn: "span 5" }}>
              <div className="eyebrow primary" style={{ marginBottom: 16 }}>POZİSYON</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <div>
                  <label className="label">Tutar ({doviz})</label>
                  <input type="number" className="input mono" value={tutar} onChange={e => setTutar(+e.target.value || 0)} />
                </div>
                <div>
                  <label className="label">Döviz</label>
                  <div className="tabs" style={{ display: "flex" }}>
                    {["USD","EUR","GBP"].map(d => (
                      <button key={d} className={"tab " + (doviz === d ? "active" : "")} onClick={() => setDoviz(d)} style={{ flex: 1 }}>{d}</button>
                    ))}
                  </div>
                </div>
                <div>
                  <label className="label">Vade (gün)</label>
                  <div className="tabs" style={{ display: "flex" }}>
                    {[30,60,90,180].map(g => (
                      <button key={g} className={"tab " + (vade === g ? "active" : "")} onClick={() => setVade(g)} style={{ flex: 1 }}>{g}</button>
                    ))}
                  </div>
                </div>
                <div style={{ padding: 12, background: "var(--paper-2)", fontSize: 12 }}>
                  <div>Spot: <span className="mono">{spot.toFixed(4)} TRY/{doviz}</span></div>
                  <div>TR faiz: <span className="mono">%{trFaiz}</span> · {doviz} faiz: <span className="mono">%{rf}</span></div>
                </div>
              </div>
            </div>

            <div style={{ gridColumn: "span 7" }}>
              <div className="eyebrow accent" style={{ marginBottom: 16 }}>FORWARD KURU</div>
              <div className="result-band">
                <div className="label">Forward kur ({vade} gün)</div>
                <div className="value">{forward.toFixed(4)} TRY/{doviz}</div>
                <div className="sub">Hedging primi: %{hedgingMaliyeti.toFixed(2)} · Spread: {(forward - spot).toFixed(4)} TRY</div>
              </div>
              <table className="tbl" style={{ marginTop: 16 }}>
                <tbody>
                  <tr><td>Spot satış ({fmt(tutar)} {doviz})</td><td className="num mono">₺{fmt(spotTRY)}</td></tr>
                  <tr><td>Forward satış ({vade} gün)</td><td className="num mono">₺{fmt(forwardTRY)}</td></tr>
                  <tr style={{ fontWeight: 600 }}>
                    <td>Forward avantajı</td>
                    <td className="num mono" style={{ color: kazanc >= 0 ? "var(--pos)" : "var(--neg)" }}>
                      {kazanc >= 0 ? "+" : ""}₺{fmt(kazanc)}
                    </td>
                  </tr>
                </tbody>
              </table>
              <div style={{ marginTop: 16, padding: 14, background: "var(--paper-2)", fontSize: 13 }}>
                <strong>Hesaplama:</strong> Faiz paritesi yöntemi kullanılmaktadır. Gerçek forward fiyatı için bankanızın kur teklifini alın.
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// ── 1. KDV İadesi Hesaplayıcı ────────────────────────────────────────────────
function KdvIadesiPage() {
  const [ihracat, setIhracat] = useState(500000);
  const [toplamCiro, setToplamCiro] = useState(1200000);
  const [yuklenilenKdv, setYuklenilenKdv] = useState(80000);
  const [kdvOrani, setKdvOrani] = useState(20);

  const ihracatOrani = toplamCiro > 0 ? ihracat / toplamCiro : 0;
  const aylikIade = yuklenilenKdv * ihracatOrani;
  const yillikIade = aylikIade * 12;
  const nakdenEsik = 100000;
  const iadeYontemi = aylikIade >= nakdenEsik ? "Nakden iade (YMM raporu gerektirir)" : "Mahsuben iade (vergi borcundan düşülür)";
  const sureTahmini = aylikIade >= nakdenEsik ? "15 iş günü (YMM raporuyla)" : "3–6 ay (standart)";

  const fmt = (n) => n.toLocaleString("tr-TR", { maximumFractionDigits: 0 });

  return (
    <>
      <PageHeader
        crumbs={[{ label: "ihracathub", to: "" }, { label: "Araçlar", to: "araclar" }, { label: "KDV İadesi Hesaplayıcı" }]}
        kicker="FİNANSAL ARAÇ · ÜCRETSİZ"
        title="KDV İadesi Hesaplayıcı"
        lede="İhracat işlemlerine isabet eden KDV iade tutarını, tahmini süreyi ve iade yöntemini hesaplayın."
      />
      <section className="section tight">
        <div className="container">
          <div className="grid grid-12" style={{ gap: 32 }}>
            <div style={{ gridColumn: "span 5" }}>
              <div className="eyebrow primary" style={{ marginBottom: 16 }}>AYLIK VERİLER</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <div>
                  <label className="label">Aylık ihracat tutarı (TL)</label>
                  <input type="number" className="input mono" value={ihracat} onChange={e => setIhracat(+e.target.value || 0)} />
                </div>
                <div>
                  <label className="label">Toplam aylık ciro (TL)</label>
                  <input type="number" className="input mono" value={toplamCiro} onChange={e => setToplamCiro(+e.target.value || 0)} />
                </div>
                <div>
                  <label className="label">Aylık yüklenilen KDV (TL)</label>
                  <input type="number" className="input mono" value={yuklenilenKdv} onChange={e => setYuklenilenKdv(+e.target.value || 0)} />
                </div>
                <div>
                  <label className="label">KDV oranı (%)</label>
                  <div className="tabs" style={{ display: "flex" }}>
                    {[1, 10, 20].map(r => (
                      <button key={r} className={"tab " + (kdvOrani === r ? "active" : "")} onClick={() => setKdvOrani(r)} style={{ flex: 1 }}>%{r}</button>
                    ))}
                  </div>
                </div>
              </div>
            </div>

            <div style={{ gridColumn: "span 7" }}>
              <div className="eyebrow accent" style={{ marginBottom: 16 }}>SONUÇ</div>
              <div className="result-band">
                <div className="label">Aylık KDV iade tutarı (tahmini)</div>
                <div className="value">₺{fmt(aylikIade)}</div>
                <div className="sub">İhracat oranı: %{(ihracatOrani * 100).toFixed(1)} · Yıllık toplam: ₺{fmt(yillikIade)}</div>
              </div>

              <div className="divider-label">DEĞERLENDİRME</div>
              <table className="tbl">
                <tbody>
                  <tr><td>İhracat oranı</td><td className="num mono">%{(ihracatOrani * 100).toFixed(1)}</td></tr>
                  <tr><td>İhracata isabet eden KDV</td><td className="num mono">₺{fmt(aylikIade)}</td></tr>
                  <tr><td>Önerilen iade yöntemi</td><td className="num mono" style={{ fontSize: 12 }}>{iadeYontemi}</td></tr>
                  <tr><td>Tahmini iade süresi</td><td className="num mono" style={{ fontSize: 12 }}>{sureTahmini}</td></tr>
                  <tr><td>Yıllık iade tahmini</td><td className="num mono" style={{ color: "var(--pos)" }}>₺{fmt(yillikIade)}</td></tr>
                </tbody>
              </table>

              <div className="grid grid-3" style={{ marginTop: 24 }}>
                <div className="kpi"><div className="kpi-label">AYLIK İADE</div><div className="kpi-value">₺{fmt(aylikIade)}</div></div>
                <div className="kpi"><div className="kpi-label">İHRACAT ORANI</div><div className="kpi-value">%{(ihracatOrani * 100).toFixed(1)}</div></div>
                <div className="kpi"><div className="kpi-label">TAHMİNİ SÜRE</div><div className="kpi-value" style={{ fontSize: 14 }}>{aylikIade >= nakdenEsik ? "15 iş günü" : "3–6 ay"}</div></div>
              </div>

              <div style={{ marginTop: 20, padding: 16, background: "var(--paper-2)", borderLeft: "3px solid var(--accent)", fontSize: 13 }}>
                <strong>Not:</strong> Aylık iade ₺100.000 üzerindeyse nakden iade için YMM (Yeminli Mali Müşavir) raporu zorunludur. Altında kalan tutarlar vergi borcundan mahsup yoluyla iade edilir.
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { KdvIadesiPage, FiyatlamaPage, BasabasPage, IncotermPage, NavlunPage, NakitAkisiPage, UlkeRiskiPage, ForwardPage });