// Finansman araçları — Faktoring, Forfaiting, Karşılaştırıcı, Teminat, Kredi Sigortası,
//                     Sevk Finansman Seçici, Sermaye, Garanti, Finansman Zaman Çizelgesi

// ── 2.7 İşletme Sermayesi İhtiyaç Analizi ────────────────────────────────────
function SermayePage() {
  const [aylikIhracat, setAylikIhracat] = useState(400000);
  const [stok, setStok] = useState(45);
  const [tahsilat, setTahsilat] = useState(60);
  const [odeme, setOdeme] = useState(30);
  const [finansmanFaiz, setFinansmanFaiz] = useState(55);

  const dongus = stok + tahsilat - odeme;
  const gunluk = aylikIhracat / 30;
  const ihtiyac = gunluk * dongus;
  const aylikMaliyet = ihtiyac * (finansmanFaiz / 100 / 12);
  const fmt = n => n.toLocaleString("tr-TR", { maximumFractionDigits: 0 });

  return (
    <>
      <PageHeader crumbs={[{label:"ihracathub",to:""},{label:"Araçlar",to:"araclar"},{label:"İşletme Sermayesi İhtiyaç Analizi"}]} kicker="FİNANSMAN ARACI · ÜCRETSİZ" title="İşletme Sermayesi İhtiyaç Analizi" lede="İhracat nakit döngünüzü girerek ek finansman ihtiyacınızı ve maliyetini hesaplayın." />
      <section className="section tight"><div className="container">
        <div className="grid grid-12" style={{gap:32}}>
          <div style={{gridColumn:"span 5"}}>
            <div style={{display:"flex",flexDirection:"column",gap:14}}>
              <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 günü</label><input type="number" className="input mono" value={stok} onChange={e=>setStok(+e.target.value||0)} /></div>
              <div><label className="label">Tahsilat günü</label><input type="number" className="input mono" value={tahsilat} onChange={e=>setTahsilat(+e.target.value||0)} /></div>
              <div><label className="label">Tedarikçi ödeme günü</label><input type="number" className="input mono" value={odeme} onChange={e=>setOdeme(+e.target.value||0)} /></div>
              <div><label className="label">Finansman faizi (yıllık %)</label><input type="number" className="input mono" value={finansmanFaiz} onChange={e=>setFinansmanFaiz(+e.target.value||0)} /></div>
            </div>
          </div>
          <div style={{gridColumn:"span 7"}}>
            <div className="result-band"><div className="label">Gerekli işletme sermayesi</div><div className="value">₺{fmt(ihtiyac)}</div><div className="sub">Döngü: {dongus} gün · Aylık finansman maliyeti: ₺{fmt(aylikMaliyet)}</div></div>
            <div className="grid grid-3" style={{marginTop:16}}>
              <div className="kpi"><div className="kpi-label">DÖNGÜ</div><div className="kpi-value">{dongus} gün</div></div>
              <div className="kpi"><div className="kpi-label">SERMAYE İHTİYACI</div><div className="kpi-value" style={{fontSize:14}}>₺{fmt(ihtiyac)}</div></div>
              <div className="kpi"><div className="kpi-label">AYLIK MALİYET</div><div className="kpi-value" style={{fontSize:14}}>₺{fmt(aylikMaliyet)}</div></div>
            </div>
          </div>
        </div>
      </div></section>
    </>
  );
}

// ── 2.8 Banka Garanti & Avan Maliyet ──────────────────────────────────────────
function GarantiPage() {
  const [tur, setTur] = useState("garanti");
  const [tutar, setTutar] = useState(500000);
  const [sure, setSure] = useState(12);

  const oranlar = { garanti:0.5, kontr:0.75, avan:0.6 };
  const adlar = { garanti:"Banka Garantisi (Letter of Guarantee)", kontr:"Kontr-Garanti (Bank-to-Bank)", avan:"Avans Ödemesi Teminatı" };
  const komisyon3Ay = tutar * (oranlar[tur] / 100);
  const toplam = komisyon3Ay * Math.ceil(sure / 3);
  const fmt = n => n.toLocaleString("tr-TR", { maximumFractionDigits: 0 });

  return (
    <>
      <PageHeader crumbs={[{label:"ihracathub",to:""},{label:"Araçlar",to:"araclar"},{label:"Banka Garanti & Avan Maliyet"}]} kicker="FİNANSMAN ARACI · ÜCRETSİZ" title="Banka Garanti & Avan Maliyet" lede="Banka garantisi ve kontr-garanti işlemlerinin komisyon maliyetini hesaplayın." />
      <section className="section tight"><div className="container">
        <div className="grid grid-12" style={{gap:32}}>
          <div style={{gridColumn:"span 5"}}>
            <div style={{display:"flex",flexDirection:"column",gap:16}}>
              <div><label className="label">Garanti türü</label>
                <select className="select" value={tur} onChange={e=>setTur(e.target.value)}>
                  {Object.entries(adlar).map(([k,v])=><option key={k} value={k}>{v}</option>)}
                </select>
              </div>
              <div><label className="label">Garanti tutarı (TL)</label><input type="number" className="input mono" value={tutar} onChange={e=>setTutar(+e.target.value||0)} /></div>
              <div><label className="label">Süre (ay)</label>
                <div className="tabs" style={{display:"flex"}}>
                  {[3,6,12,24].map(m=><button key={m} className={"tab "+(sure===m?"active":"")} onClick={()=>setSure(m)} style={{flex:1}}>{m}</button>)}
                </div>
              </div>
            </div>
          </div>
          <div style={{gridColumn:"span 7"}}>
            <div className="result-band"><div className="label">Toplam komisyon maliyeti</div><div className="value">₺{fmt(toplam)}</div><div className="sub">3 aylık komisyon: ₺{fmt(komisyon3Ay)} · Oran: %{oranlar[tur]}/3 ay</div></div>
            <table className="tbl" style={{marginTop:16}}>
              <tbody>
                <tr><td>Garanti tutarı</td><td className="num mono">₺{fmt(tutar)}</td></tr>
                <tr><td>Komisyon oranı</td><td className="num mono">%{oranlar[tur]} / 3 ay</td></tr>
                <tr><td>Dönem sayısı</td><td className="num mono">{Math.ceil(sure/3)}</td></tr>
                <tr style={{fontWeight:600}}><td>Toplam maliyet</td><td className="num mono" style={{color:"var(--neg)"}}>₺{fmt(toplam)}</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div></section>
    </>
  );
}

// ── 2.9 İhracat Finansmanı Zaman Çizelgesi ────────────────────────────────────
function FinansmanZamanPage() {
  const [secili, setSecili] = useState("eximbank");

  const surецler = {
    eximbank: {
      ad: "Eximbank Reeskont Kredisi",
      adimlar: [
        { gun:"1–3", baslik:"Başvuru", aciklama:"Aracı bankaya başvuru; ihracat taahhüt belgesi, vergi borcu yok yazısı" },
        { gun:"4–7", baslik:"İnceleme", aciklama:"Eximbank kredi değerlendirmesi; firmanın ihracat sicili ve aktif durumu" },
        { gun:"8–15", baslik:"Onay & Limit", aciklama:"Kredi limiti belirleme ve aracı bankayla mutabakat" },
        { gun:"16–20", baslik:"Kullandırım", aciklama:"Reeskont işlemi; tutar firma hesabına geçer" },
        { gun:"90–120", baslik:"Geri Ödeme", aciklama:"Sevk belgelerinin ibrazından sonra tahsilat; taahhüt kapatma" },
      ],
    },
    faktoring: {
      ad: "Faktoring",
      adimlar: [
        { gun:"1", baslik:"Fatura İbrazı", aciklama:"Fatura ve sevk belgeleri faktoring şirketine iletilir" },
        { gun:"2–3", baslik:"Onay", aciklama:"Alıcı risk değerlendirmesi ve limit kararı" },
        { gun:"3–5", baslik:"Ön Ödeme", aciklama:"Tutar (%70–90) firmanın hesabına aktarılır" },
        { gun:"Vade", baslik:"Tahsilat", aciklama:"Faktoring şirketi alıcıdan tahsilatı yapar; bakiye transfer edilir" },
      ],
    },
    banka: {
      ad: "Ticari Banka İşletme Kredisi",
      adimlar: [
        { gun:"1–3", baslik:"Başvuru & Evrak", aciklama:"Mali tablolar, teminat belgeleri, şirket bilgileri" },
        { gun:"4–10", baslik:"Kredi İnceleme", aciklama:"Banka kredi birimi değerlendirmesi; istihbarat ve rating" },
        { gun:"11–15", baslik:"Komite Onayı", aciklama:"Kredi komitesi kararı; teklif mektubu" },
        { gun:"15–21", baslik:"Sözleşme & Tesis", aciklama:"Teminat tesisi, ipotek vb.; kredi hesap açılışı" },
        { gun:"22+", baslik:"Kullandırım", aciklama:"İhtiyaç anında çekiş yapılabilir" },
      ],
    },
  };

  const s = surецler[secili];

  return (
    <>
      <PageHeader crumbs={[{label:"ihracathub",to:""},{label:"Araçlar",to:"araclar"},{label:"Finansman Zaman Çizelgesi"}]} kicker="FİNANSMAN ARACI · ÜCRETSİZ" title="Finansman Zaman Çizelgesi" lede="Üç ana finansman yönteminin başvurudan kullandırıma kadar olan süreç adımlarını karşılaştırın." />
      <section className="section tight"><div className="container">
        <div style={{display:"flex",gap:8,marginBottom:24}}>
          {Object.entries({eximbank:"Eximbank",faktoring:"Faktoring",banka:"Ticari Banka"}).map(([k,v])=>(
            <button key={k} className={"btn sm "+(secili===k?"":"ghost")} onClick={()=>setSecili(k)}>{v}</button>
          ))}
        </div>
        <div className="eyebrow primary" style={{marginBottom:16}}>{s.ad}</div>
        <div style={{display:"flex",flexDirection:"column",gap:0}}>
          {s.adimlar.map((a,i)=>(
            <div key={i} style={{display:"flex",gap:24,padding:"16px 0",borderBottom:"1px solid var(--rule)"}}>
              <div className="mono" style={{minWidth:60,fontSize:12,color:"var(--accent-2)",paddingTop:2}}>GÜN {a.gun}</div>
              <div>
                <div style={{fontWeight:600,marginBottom:4}}>{a.baslik}</div>
                <div style={{fontSize:13,color:"var(--ink-3)"}}>{a.aciklama}</div>
              </div>
            </div>
          ))}
        </div>
      </div></section>
    </>
  );
}

Object.assign(window, { FaktoringPage, ForfaitingPage, FinansmanKarsiPage, TeminatPage, KrediSigortaPage, SevkFinansmanPage, SermayePage, GarantiPage, FinansmanZamanPage });

// ── 2.4 Teminat Mektubu Maliyeti ─────────────────────────────────────────────
function TeminatPage() {
  const [tur, setTur] = useState("performans");
  const [tutar, setTutar] = useState(500000);
  const [sureMay, setSureMay] = useState(12);

  const turler = { teklif:0.3, performans:0.5, avans:0.6, geri:0.5 };
  const turAd = { teklif:"Teklif Teminatı", performans:"Performans Teminatı", avans:"Avans Teminatı", geri:"Geri Ödeme Teminatı" };
  const komisyon3Ay = tutar * (turler[tur] / 100);
  const toplamKomisyon = komisyon3Ay * Math.ceil(sureMay / 3);
  const yillikEfektif = (toplamKomisyon / tutar / sureMay * 12) * 100;
  const fmt = n => n.toLocaleString("tr-TR", { maximumFractionDigits: 0 });

  return (
    <>
      <PageHeader crumbs={[{label:"ihracathub",to:""},{label:"Araçlar",to:"araclar"},{label:"Teminat Mektubu Maliyeti"}]} kicker="FİNANSMAN ARACI · ÜCRETSİZ" title="Teminat Mektubu Maliyeti" lede="Teminat mektubu türü ve süresine göre banka komisyonunu 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}}>MEKTUP BİLGİLERİ</div>
            <div style={{display:"flex",flexDirection:"column",gap:16}}>
              <div><label className="label">Teminat türü</label>
                <select className="select" value={tur} onChange={e=>setTur(e.target.value)}>
                  {Object.entries(turAd).map(([k,v])=><option key={k} value={k}>{v}</option>)}
                </select>
              </div>
              <div><label className="label">Teminat tutarı (TL)</label><input type="number" className="input mono" value={tutar} onChange={e=>setTutar(+e.target.value||0)} /></div>
              <div><label className="label">Süre (ay)</label>
                <div className="tabs" style={{display:"flex"}}>
                  {[3,6,12,24].map(m=><button key={m} className={"tab "+(sureMay===m?"active":"")} onClick={()=>setSureMay(m)} style={{flex:1}}>{m}</button>)}
                </div>
              </div>
              <div style={{padding:12,background:"var(--paper-2)",fontSize:12}}>Komisyon oranı: %{turler[tur].toFixed(1)}/3 ay · {turAd[tur]}</div>
            </div>
          </div>
          <div style={{gridColumn:"span 7"}}>
            <div className="result-band"><div className="label">Toplam komisyon maliyeti</div><div className="value">₺{fmt(toplamKomisyon)}</div><div className="sub">3 aylık komisyon: ₺{fmt(komisyon3Ay)} · Dönem sayısı: {Math.ceil(sureMay/3)}</div></div>
            <table className="tbl" style={{marginTop:16}}>
              <tbody>
                <tr><td>Teminat tutarı</td><td className="num mono">₺{fmt(tutar)}</td></tr>
                <tr><td>Komisyon oranı</td><td className="num mono">%{turler[tur].toFixed(1)} / 3 ay</td></tr>
                <tr><td>Toplam dönem</td><td className="num mono">{Math.ceil(sureMay/3)} dönem ({sureMay} ay)</td></tr>
                <tr style={{fontWeight:600}}><td>Toplam maliyet</td><td className="num mono" style={{color:"var(--neg)"}}>₺{fmt(toplamKomisyon)}</td></tr>
                <tr><td>Yıllık efektif maliyet</td><td className="num mono">%{yillikEfektif.toFixed(2)}</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div></section>
    </>
  );
}

// ── 2.5 İhracat Kredi Sigortası Prim Tahmini ──────────────────────────────────
function KrediSigortaPage() {
  const [tutar, setTutar] = useState(1000000);
  const [ulkeRiski, setUlkeRiski] = useState("orta");
  const [vadeGun, setVadeGun] = useState(90);

  const primOranlari = { dusuk:0.15, orta:0.35, yuksek:0.70 };
  const riskAd = { dusuk:"Düşük (AB, ABD, UK)", orta:"Orta (Körfez, Doğu Avrupa)", yuksek:"Yüksek (Afrika, bazı Orta Doğu)" };
  const primOrani = primOranlari[ulkeRiski];
  const yillikPrim = tutar * (primOrani / 100);
  const vadePrim = yillikPrim * (vadeGun / 365);
  const azamiTazminat = tutar * 0.85;
  const fmt = n => n.toLocaleString("tr-TR", { maximumFractionDigits: 0 });

  return (
    <>
      <PageHeader crumbs={[{label:"ihracathub",to:""},{label:"Araçlar",to:"araclar"},{label:"İhracat Kredi Sigortası"}]} kicker="FİNANSMAN ARACI · ÜCRETSİZ" title="İhracat Kredi Sigortası Prim Tahmini" lede="Alıcı riskine ve vadeye göre kredi sigortası primini ve azami tazminat tutarını tahmin edin." />
      <section className="section tight"><div className="container">
        <div className="grid grid-12" style={{gap:32}}>
          <div style={{gridColumn:"span 5"}}>
            <div style={{display:"flex",flexDirection:"column",gap:16}}>
              <div><label className="label">Sigortalı alacak (TL)</label><input type="number" className="input mono" value={tutar} onChange={e=>setTutar(+e.target.value||0)} /></div>
              <div><label className="label">Alıcı ülke risk grubu</label>
                <select className="select" value={ulkeRiski} onChange={e=>setUlkeRiski(e.target.value)}>
                  {Object.entries(riskAd).map(([k,v])=><option key={k} value={k}>{v}</option>)}
                </select>
              </div>
              <div><label className="label">Vade (gün)</label>
                <div className="tabs" style={{display:"flex"}}>
                  {[30,60,90,180,365].map(g=><button key={g} className={"tab "+(vadeGun===g?"active":"")} onClick={()=>setVadeGun(g)} style={{flex:1}}>{g}</button>)}
                </div>
              </div>
            </div>
          </div>
          <div style={{gridColumn:"span 7"}}>
            <div className="result-band"><div className="label">Tahmini sigorta primi</div><div className="value">₺{fmt(vadePrim)}</div><div className="sub">Yıllık prim: ₺{fmt(yillikPrim)} · Azami tazminat: ₺{fmt(azamiTazminat)}</div></div>
            <div className="grid grid-3" style={{marginTop:16}}>
              <div className="kpi"><div className="kpi-label">PRİM ORANI</div><div className="kpi-value">%{primOrani.toFixed(2)}/yıl</div></div>
              <div className="kpi"><div className="kpi-label">TAHMİNİ PRİM</div><div className="kpi-value" style={{fontSize:16}}>₺{fmt(vadePrim)}</div></div>
              <div className="kpi"><div className="kpi-label">AZAMİ TAZMİNAT</div><div className="kpi-value" style={{fontSize:14}}>₺{fmt(azamiTazminat)}</div></div>
            </div>
          </div>
        </div>
      </div></section>
    </>
  );
}

// ── 2.6 Sevk Finansmanı Seçici ────────────────────────────────────────────────
function SevkFinansmanPage() {
  const [zaman, setZaman] = useState("oncesi");
  const [doviz, setDoviz] = useState("tl");
  const [tutar, setTutar] = useState(500000);

  const urunler = {
    oncesi: {
      tl:  { ad:"Eximbank Sevk Öncesi Reeskont (TL)", faiz:"32,5%", vade:"120 gün", min:"₺50K", taahhut:"2× ihracat taahhüdü (24 ay)" },
      usd: { ad:"Eximbank Sevk Öncesi Reeskont (USD)", faiz:"5,75%", vade:"120 gün", min:"$25K", taahhut:"1,5× ihracat taahhüdü" },
      eur: { ad:"Eximbank Sevk Öncesi Reeskont (EUR)", faiz:"4,95%", vade:"120 gün", min:"€25K", taahhut:"1,5× ihracat taahhüdü" },
    },
    sonrasi: {
      tl:  { ad:"Ticari Banka (İşletme Kredisi TL)", faiz:"~58%", vade:"Esnek", min:"—", taahhut:"Teminat / ipotek" },
      usd: { ad:"Eximbank Sevk Sonrası (USD)", faiz:"6,25%", vade:"180 gün", min:"$25K", taahhut:"Mevcut sevkiyat" },
      eur: { ad:"Eximbank Sevk Sonrası (USD bazlı)", faiz:"6,25%", vade:"180 gün", min:"$25K", taahhut:"Mevcut sevkiyat" },
    },
  };
  const oneri = urunler[zaman]?.[doviz] || {};

  return (
    <>
      <PageHeader crumbs={[{label:"ihracathub",to:""},{label:"Araçlar",to:"araclar"},{label:"Sevk Finansmanı Seçici"}]} kicker="FİNANSMAN ARACI · ÜCRETSİZ" title="Sevk Finansmanı Seçici" lede="Sevk öncesi mi sonrası mı? Hangi döviz? Sorulara göre size en uygun Eximbank ürününü öneririz." />
      <section className="section tight"><div className="container">
        <div className="grid grid-12" style={{gap:32}}>
          <div style={{gridColumn:"span 5"}}>
            <div style={{display:"flex",flexDirection:"column",gap:20}}>
              <div><label className="label">Finansman zamanı</label>
                <div className="tabs" style={{display:"flex"}}>
                  {[["oncesi","Sevk Öncesi"],["sonrasi","Sevk Sonrası"]].map(([v,l])=><button key={v} className={"tab "+(zaman===v?"active":"")} onClick={()=>setZaman(v)} style={{flex:1}}>{l}</button>)}
                </div>
              </div>
              <div><label className="label">Tercih edilen döviz</label>
                <div className="tabs" style={{display:"flex"}}>
                  {[["tl","TL"],["usd","USD"],["eur","EUR"]].map(([v,l])=><button key={v} className={"tab "+(doviz===v?"active":"")} onClick={()=>setDoviz(v)} style={{flex:1}}>{l}</button>)}
                </div>
              </div>
              <div><label className="label">İhtiyaç duyulan tutar</label><input type="number" className="input mono" value={tutar} onChange={e=>setTutar(+e.target.value||0)} /></div>
            </div>
          </div>
          <div style={{gridColumn:"span 7"}}>
            <div className="eyebrow accent" style={{marginBottom:12}}>ÖNERİLEN ÜRÜN</div>
            <div style={{padding:24,background:"var(--paper-2)",borderLeft:"4px solid var(--accent)"}}>
              <div className="h-3">{oneri.ad}</div>
              <table className="tbl" style={{marginTop:16}}>
                <tbody>
                  <tr><td>Faiz oranı</td><td className="num mono">{oneri.faiz}</td></tr>
                  <tr><td>Vade</td><td className="num mono">{oneri.vade}</td></tr>
                  <tr><td>Minimum tutar</td><td className="num mono">{oneri.min}</td></tr>
                  <tr><td>Taahhüt</td><td style={{fontSize:12}}>{oneri.taahhut}</td></tr>
                </tbody>
              </table>
            </div>
            <div style={{marginTop:16,fontSize:13,color:"var(--ink-3)"}}>Detaylar için <Link to="araclar/eximbank" style={{color:"var(--accent)"}}>Eximbank Simülatörü →</Link></div>
          </div>
        </div>
      </div></section>
    </>
  );
}

// ── 2.3 Finansman Yöntemi Karşılaştırıcı ─────────────────────────────────────
function FinansmanKarsiPage() {
  const [tutar, setTutar] = useState(1000000);
  const [vadeGun, setVadeGun] = useState(90);

  const yontemler = [
    { ad: "Eximbank Reeskont (TL)", faiz: 32.5, sure: "90–120 gün", risk: "Düşük", not: "Taahhüt gerektir" },
    { ad: "Eximbank Reeskont (USD)", faiz: 5.75, sure: "120 gün", risk: "Düşük", not: "Dolar bazlı" },
    { ad: "Ticari Banka (TL)", faiz: 58.0, sure: "Esnek", risk: "Düşük", not: "Teminatlı kredi" },
    { ad: "Faktoring", faiz: 14.0, sure: "30–120 gün", risk: "Orta", not: "Senet devri" },
    { ad: "Forfaiting", faiz: 8.5, sure: "6–60 ay", risk: "Düşük", not: "Orta vade" },
    { ad: "Açık Hesap (alıcı riskli)", faiz: 0, sure: "Anlaşmaya bağlı", risk: "Yüksek", not: "Finansman yok" },
  ];

  const hesapla = faiz => tutar * (faiz / 100) * (vadeGun / 365);
  const fmt = n => n.toLocaleString("tr-TR", { maximumFractionDigits: 0 });

  return (
    <>
      <PageHeader
        crumbs={[{ label: "ihracathub", to: "" }, { label: "Araçlar", to: "araclar" }, { label: "Finansman Yöntemi Karşılaştırıcı" }]}
        kicker="FİNANSMAN ARACI · ÜCRETSİZ"
        title="Finansman Yöntemi Karşılaştırıcı"
        lede="Aynı tutar ve vade için 6 farklı finansman yönteminin maliyetini yan yana görün."
      />
      <section className="section tight">
        <div className="container">
          <div style={{ display: "flex", gap: 24, marginBottom: 32, flexWrap: "wrap" }}>
            <div><label className="label">Finansman tutarı (TL)</label><input type="number" className="input mono" value={tutar} onChange={e=>setTutar(+e.target.value||0)} style={{width:200}} /></div>
            <div><label className="label">Vade (gün)</label>
              <div className="tabs" style={{ display:"flex" }}>
                {[30,60,90,120,180].map(g=><button key={g} className={"tab "+(vadeGun===g?"active":"")} onClick={()=>setVadeGun(g)} style={{flex:1}}>{g}</button>)}
              </div>
            </div>
          </div>
          <table className="tbl">
            <thead>
              <tr><th>Yöntem</th><th className="num">Yıllık Maliyet</th><th className="num">Toplam Faiz (TL)</th><th>Vade</th><th>Risk</th><th>Not</th></tr>
            </thead>
            <tbody>
              {[...yontemler].sort((a,b)=>hesapla(a.faiz)-hesapla(b.faiz)).map((y,i)=>(
                <tr key={y.ad} style={i===0?{background:"var(--paper-2)",fontWeight:600}:{}}>
                  <td>{y.ad}{i===0?" ✓":""}</td>
                  <td className="num mono">%{y.faiz.toFixed(2)}</td>
                  <td className="num mono" style={{color:y.faiz===0?"var(--ink-3)":"var(--neg)"}}>{y.faiz===0?"—":"−₺"+fmt(hesapla(y.faiz))}</td>
                  <td style={{fontSize:12}}>{y.sure}</td>
                  <td><span className="tag" style={{background:y.risk==="Düşük"?"var(--pos)":y.risk==="Yüksek"?"var(--neg)":"var(--warn)",color:"#fff",fontSize:10}}>{y.risk}</span></td>
                  <td style={{fontSize:12,color:"var(--ink-3)"}}>{y.not}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>
    </>
  );
}

// ── 2.2 Forfaiting Hesaplayıcı ────────────────────────────────────────────────
function ForfaitingPage() {
  const [tutar, setTutar] = useState(500000);
  const [doviz, setDoviz] = useState("USD");
  const [vadeAy, setVadeAy] = useState(24);
  const [iskontoOrani, setIskontoOrani] = useState(7.5);

  const kur = { USD: 38.42, EUR: 43.71 }[doviz] || 38.42;
  const tutarTL = tutar * kur;
  const bugunkuDeger = tutar / Math.pow(1 + iskontoOrani / 100, vadeAy / 12);
  const iskontoMaliyeti = tutar - bugunkuDeger;
  const iskontoMaliyetiTL = iskontoMaliyeti * kur;
  const fmt = n => n.toLocaleString("tr-TR", { maximumFractionDigits: 0 });

  return (
    <>
      <PageHeader
        crumbs={[{ label: "ihracathub", to: "" }, { label: "Araçlar", to: "araclar" }, { label: "Forfaiting Hesaplayıcı" }]}
        kicker="FİNANSMAN ARACI · ÜCRETSİZ"
        title="Forfaiting Hesaplayıcı"
        lede="Orta vadeli ihracat alacaklarının iskontolu devrinde net gelirinizi ve maliyet oranınızı 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 }}>SENEDİN DETAYLARI</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <div><label className="label">Senet değeri ({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"].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 (ay)</label>
                  <div className="tabs" style={{ display: "flex" }}>
                    {[6,12,24,36,60].map(g => <button key={g} className={"tab "+(vadeAy===g?"active":"")} onClick={()=>setVadeAy(g)} style={{flex:1}}>{g}</button>)}
                  </div>
                </div>
                <div><label className="label">İskonto oranı (yıllık %)</label><input type="number" step="0.1" className="input mono" value={iskontoOrani} onChange={e => setIskontoOrani(+e.target.value || 0)} /><div className="caption" style={{color:"var(--ink-3)",marginTop:4}}>SOFR/EURIBOR + spread. Tipik: %6–10</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">Bugünkü net gelir ({doviz})</div>
                <div className="value">{bugunkuDeger.toLocaleString("tr-TR", { maximumFractionDigits: 0 })} {doviz}</div>
                <div className="sub">TL karşılığı: ₺{fmt(bugunkuDeger * kur)} · İskonto maliyeti: {iskontoMaliyeti.toLocaleString("tr-TR",{maximumFractionDigits:0})} {doviz}</div>
              </div>
              <table className="tbl" style={{ marginTop: 16 }}>
                <tbody>
                  <tr><td>Senet nominal değeri</td><td className="num mono">{tutar.toLocaleString("tr-TR")} {doviz}</td></tr>
                  <tr><td>İskonto maliyeti (%{iskontoOrani} · {vadeAy} ay)</td><td className="num mono" style={{color:"var(--neg)"}}>−{iskontoMaliyeti.toLocaleString("tr-TR",{maximumFractionDigits:0})} {doviz}</td></tr>
                  <tr style={{fontWeight:600}}><td>Net gelir ({doviz})</td><td className="num mono" style={{color:"var(--pos)"}}>{bugunkuDeger.toLocaleString("tr-TR",{maximumFractionDigits:0})} {doviz}</td></tr>
                  <tr><td>Net gelir (TL — kur {kur})</td><td className="num mono">₺{fmt(bugunkuDeger * kur)}</td></tr>
                  <tr><td>Efektif maliyet oranı</td><td className="num mono">%{(iskontoMaliyeti/tutar*100).toFixed(2)}</td></tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// ── 2.1 Faktoring Maliyet Hesaplayıcı ────────────────────────────────────────
function FaktoringPage() {
  const [alacak, setAlacak] = useState(500000);
  const [vade, setVade] = useState(90);
  const [faktoringOrani, setFaktoringOrani] = useState(3.5);
  const [onOdemeOrani, setOnOdemeOrani] = useState(80);

  const onOdeme = alacak * (onOdemeOrani / 100);
  const faktoringBedeli = alacak * (faktoringOrani / 100);
  const kalanTahsilat = alacak - onOdeme - faktoringBedeli;
  const efektifYillik = ((faktoringBedeli / alacak) / (vade / 365)) * 100;
  const fmt = n => n.toLocaleString("tr-TR", { maximumFractionDigits: 0 });

  return (
    <>
      <PageHeader
        crumbs={[{ label: "ihracathub", to: "" }, { label: "Araçlar", to: "araclar" }, { label: "Faktoring Maliyet Hesaplayıcı" }]}
        kicker="FİNANSMAN ARACI · ÜCRETSİZ"
        title="Faktoring Maliyet Hesaplayıcı"
        lede="İhracat alacaklarınızı faktoring şirketine devretmenin maliyetini ve net gelirinizi 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 }}>ALACAK BİLGİLERİ</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <div><label className="label">Alacak tutarı (TL)</label><input type="number" className="input mono" value={alacak} onChange={e => setAlacak(+e.target.value || 0)} /></div>
                <div><label className="label">Vade (gün)</label>
                  <div className="tabs" style={{ display: "flex" }}>
                    {[30,60,90,120].map(g => <button key={g} className={"tab "+(vade===g?"active":"")} onClick={()=>setVade(g)} style={{flex:1}}>{g}</button>)}
                  </div>
                </div>
                <div><label className="label">Faktoring oranı (%)</label><input type="number" step="0.1" className="input mono" value={faktoringOrani} onChange={e => setFaktoringOrani(+e.target.value || 0)} /><div className="caption" style={{color:"var(--ink-3)",marginTop:4}}>Tipik aralık: %2–5 (vade ve riske göre)</div></div>
                <div><label className="label">Ön ödeme oranı (%)</label><input type="number" className="input mono" value={onOdemeOrani} onChange={e => setOnOdemeOrani(+e.target.value || 0)} /><div className="caption" style={{color:"var(--ink-3)",marginTop:4}}>Tipik: %70–90</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">Anında tahsil edilen tutar</div>
                <div className="value">₺{fmt(onOdeme)}</div>
                <div className="sub">Faktoring bedeli: ₺{fmt(faktoringBedeli)} · Efektif yıllık maliyet: %{efektifYillik.toFixed(1)}</div>
              </div>
              <table className="tbl" style={{ marginTop: 16 }}>
                <tbody>
                  <tr><td>Alacak tutarı</td><td className="num mono">₺{fmt(alacak)}</td></tr>
                  <tr><td>Ön ödeme (%{onOdemeOrani})</td><td className="num mono" style={{color:"var(--pos)"}}>+₺{fmt(onOdeme)}</td></tr>
                  <tr><td>Faktoring bedeli (%{faktoringOrani})</td><td className="num mono" style={{color:"var(--neg)"}}>−₺{fmt(faktoringBedeli)}</td></tr>
                  <tr><td>Vade sonunda kalan tahsilat</td><td className="num mono">₺{fmt(kalanTahsilat)}</td></tr>
                  <tr style={{fontWeight:600}}><td>Efektif yıllık maliyet</td><td className="num mono">%{efektifYillik.toFixed(1)}</td></tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}