// Ödeme & Belgeler araçları — 9 araç

// ── 3.2 Vesaik Kontrol Listesi ───────────────────────────────────────────────
function VesaikKontrol() {
  const [odemeYontemi, setOdemeYontemi] = useState("LC");
  const belgeler = {
    TT: ["Fatura", "Konşimento/CMR", "Poli liste", "Paket listesi"],
    DA: ["Fatura", "Konşimento", "Menşe belgesi", "Poliçe listesi", "Çeki listesi", "Nakliye talimatı"],
    LC: ["Fatura", "Orijinal konşimento (3 kopya)", "Menşe belgesi (A.TR/EUR.1)", "Sigorta poliçesi", "Packing list", "Commercial invoice (2 kopya)", "Certificate of origin"],
    OA: ["Fatura", "Konşimento", "Menşe belgesi"],
  };
  const metni = { TT: "Peşin/Vadeli Transfer", DA: "Vesaik (Tahsilat)", LC: "Akreditif", OA: "Açık Hesap" };
  const belgel = belgeler[odemeYontemi] || [];

  return (
    <>
      <PageHeader crumbs={[{label:"ihracathub",to:""},{label:"Araçlar",to:"araclar"},{label:"Vesaik Kontrol Listesi"}]} kicker="ÖDEME ARACI · ÜCRETSİZ" title="Vesaik Kontrol Listesi" lede="Ödeme yöntemine göre gereken belgeleri kontrol listesi olarak görün." />
      <section className="section tight"><div className="container">
        <label className="label" style={{marginBottom:12}}>Ödeme yöntemi</label>
        <div className="tabs" style={{display:"flex",marginBottom:32}}>
          {["TT","DA","LC","OA"].map(m=><button key={m} className={"btn sm "+(odemeYontemi===m?"":"ghost")} onClick={()=>setOdemeYontemi(m)} style={{flex:1}}>{metni[m]}</button>)}
        </div>
        <div style={{background:"var(--paper-2)",padding:16}}>
          <div className="h-3" style={{marginBottom:16}}>{metni[odemeYontemi]} için gereken belgeler</div>
          {belgel.map((b,i)=>(
            <div key={i} style={{display:"flex",gap:12,padding:"10px 0",borderBottom:"1px solid var(--rule)"}}>
              <input type="checkbox" defaultChecked={false} style={{marginTop:2,cursor:"pointer"}} />
              <span style={{flex:1}}>{b}</span>
            </div>
          ))}
        </div>
      </div></section>
    </>
  );
}

// ── 3.3 Tahsilat Riski Analizi ───────────────────────────────────────────────
function TahsilatRiski() {
  const [ulke, setUlke] = useState("DE");
  const [odeme, setOdeme] = useState("LC");
  const [iliskiYasi, setIliskiYasi] = useState("yeni");
  const [tutar, setTutar] = useState(500000);

  const riskPuan = (ulke === "DE" || ulke === "US" || ulke === "GB" ? 20 : ulke === "IQ" || ulke === "EG" ? 70 : 40) +
                   (odeme === "OA" ? 30 : odeme === "DA" ? 20 : odeme === "TT" ? 10 : 5) +
                   (iliskiYasi === "yeni" ? 20 : 5);
  const riskSeviyesi = riskPuan < 30 ? "Çok düşük" : riskPuan < 50 ? "Düşük" : riskPuan < 70 ? "Orta" : "Yüksek";
  const renk = riskSeviyesi === "Çok düşük" ? "var(--pos)" : riskSeviyesi === "Yüksek" ? "var(--neg)" : "var(--warn)";

  return (
    <>
      <PageHeader crumbs={[{label:"ihracathub",to:""},{label:"Araçlar",to:"araclar"},{label:"Tahsilat Riski Analizi"}]} kicker="ÖDEME ARACI · ÜCRETSİZ" title="Tahsilat Riski Analizi" lede="Alıcı ülkesi, ödeme yöntemi ve iş ilişkisine göre tahsilat riskini puanlayı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">Alıcı ülkesi</label>
                <select className="select" value={ulke} onChange={e=>setUlke(e.target.value)}>
                  {[["DE","Almanya"],["US","ABD"],["GB","UK"],["TR","Türkiye"],["IQ","Irak"],["EG","Mısır"]].map(([k,v])=><option key={k} value={k}>{v}</option>)}
                </select>
              </div>
              <div><label className="label">Ödeme yöntemi</label>
                <div className="tabs" style={{display:"flex"}}>
                  {[["LC","Akreditif"],["DA","Vesaik"],["TT","TT"],["OA","Açık Hesap"]].map(([v,l])=><button key={v} className={"tab "+(odeme===v?"active":"")} onClick={()=>setOdeme(v)} style={{flex:1,fontSize:11}}>{l}</button>)}
                </div>
              </div>
              <div><label className="label">İş ilişkisi yaşı</label>
                <div className="tabs" style={{display:"flex"}}>
                  {[["yeni","Yeni"],["kurulu","Kurulu 1+ yıl"],["uzun","Uzun (3+ yıl)"]].map(([v,l])=><button key={v} className={"tab "+(iliskiYasi===v?"active":"")} onClick={()=>setIliskiYasi(v)} style={{flex:1,fontSize:11}}>{l}</button>)}
                </div>
              </div>
              <div><label className="label">Tuttar (TL)</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="result-band">
              <div className="label">Risk puanı</div>
              <div className="value" style={{color:renk}}>{riskPuan}/100</div>
              <div className="sub" style={{color:renk}}>Seviye: <strong>{riskSeviyesi}</strong></div>
            </div>
            <div className="grid grid-1" style={{marginTop:16}}>
              <div style={{padding:16,background:"var(--paper-2)",borderLeft:"4px solid "+renk}}>
                <div className="h-3" style={{marginBottom:8}}>Tavsiye</div>
                {riskSeviyesi === "Çok düşük" && <div>Açık hesap veya vadeli TT kabul edilebilir.</div>}
                {riskSeviyesi === "Düşük" && <div>Vesaik (D/P) veya kısa vadeli LC tercih edin.</div>}
                {riskSeviyesi === "Orta" && <div>Teyitli akreditif (confirmed L/C) gerekir.</div>}
                {riskSeviyesi === "Yüksek" && <div>Peşin TT veya teyitli akreditif zorunludur. Kredi sigortası alın.</div>}
              </div>
            </div>
          </div>
        </div>
      </div></section>
    </>
  );
}

// ── 3.4 Ödeme Vadesi & İskonto ────────────────────────────────────────────────
function VadeIskonto() {
  const [tutar, setTutar] = useState(100000);
  const [vade, setVade] = useState(60);
  const [iskonto, setIskonto] = useState(2);

  const bugunkuDeger = tutar * (1 - iskonto / 100);
  const maliyetGun = (tutar - bugunkuDeger) / (vade / 365);
  const yillikOran = (iskonto / (100 - iskonto)) * (365 / vade) * 100;
  const fmt = n => n.toLocaleString("tr-TR", { maximumFractionDigits: 0 });

  return (
    <>
      <PageHeader crumbs={[{label:"ihracathub",to:""},{label:"Araçlar",to:"araclar"},{label:"Ödeme Vadesi & İskonto"}]} kicker="ÖDEME ARACI · ÜCRETSİZ" title="Ödeme Vadesi & İskonto Hesaplayıcı" lede="Erken ödeme iskontosunun yıllık maliyetini ve bugünkü değerini 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">Fatura tutarı (TL)</label><input type="number" className="input mono" value={tutar} onChange={e=>setTutar(+e.target.value||0)} /></div>
              <div><label className="label">Ödeme vadesi (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">Erken ödeme iskontosi (%)</label><input type="number" step="0.25" className="input mono" value={iskonto} onChange={e=>setIskonto(+e.target.value||0)} /><div className="caption" style={{color:"var(--ink-3)",marginTop:4}}>Tipik: %1–3</div></div>
            </div>
          </div>
          <div style={{gridColumn:"span 7"}}>
            <div className="result-band"><div className="label">Bugünkü değer (erken ödeme ile)</div><div className="value">₺{fmt(bugunkuDeger)}</div><div className="sub">İskonto tutarı: ₺{fmt(tutar - bugunkuDeger)} · Yıllık maliyet oranı: %{yillikOran.toFixed(2)}</div></div>
            <table className="tbl" style={{marginTop:16}}>
              <tbody>
                <tr><td>Fatura tutarı (Net {vade})</td><td className="num mono">₺{fmt(tutar)}</td></tr>
                <tr><td>Erken ödeme iskontosi</td><td className="num mono">−₺{fmt(tutar - bugunkuDeger)} ({iskonto}%)</td></tr>
                <tr style={{fontWeight:600}}><td>Bugünkü değer</td><td className="num mono">₺{fmt(bugunkuDeger)}</td></tr>
                <tr><td>Yıllık efektif maliyet</td><td className="num mono">%{yillikOran.toFixed(2)}</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div></section>
    </>
  );
}

// ── 3.6 İhracat Belgesi Uygunluk Testi ────────────────────────────────────────
function BelgeUygunluk() {
  const [hedee, setHedef] = useState("AB");
  const belgeler = {
    AB: ["İhracat faturası (2 kopya)", "Konşimento / CMR", "Menşe şahadetnamesi (A.TR)", "Paket listesi", "Sürücü belgesi"],
    ABD: ["Commercial invoice", "Original B/L (3 kopya)", "Packing list", "Certificate of origin", "Hammaddesi Belgesi (varsa)"],
    STA: ["İhracat faturası", "Konşimento", "EUR.1 Menşe belgesi", "Paket listesi"],
  };
  const belgel = belgeler[hedee] || [];

  return (
    <>
      <PageHeader crumbs={[{label:"ihracathub",to:""},{label:"Araçlar",to:"araclar"},{label:"İhracat Belgesi Uygunluk"}]} kicker="ÖDEME ARACI · ÜCRETSİZ" title="İhracat Belgesi Uygunluk Testi" lede="Hedef pazara göre gerekli vesaik kontrol listesini işaretleyip takip edin." />
      <section className="section tight"><div className="container">
        <label className="label" style={{marginBottom:12}}>Hedef pazaar</label>
        <div className="tabs" style={{display:"flex",marginBottom:32}}>
          {["AB","ABD","STA"].map(m=><button key={m} className={"btn sm "+(hedee===m?"":"ghost")} onClick={()=>setHedef(m)} style={{flex:1}}>{m}</button>)}
        </div>
        <div style={{background:"var(--paper-2)",padding:20}}>
          {belgel.map((b,i)=>(
            <div key={i} style={{display:"flex",gap:12,padding:"12px 0",borderBottom:"1px solid var(--rule)"}}>
              <input type="checkbox" defaultChecked={false} style={{marginTop:2,cursor:"pointer",width:20,height:20}} />
              <span style={{flex:1,paddingTop:2}}>{b}</span>
            </div>
          ))}
        </div>
      </div></section>
    </>
  );
}

// ── 3.7 Akreditif Maliyet Hesaplayıcı ──────────────────────────────────────────
function AkreditifMaliyet() {
  const [lcTutarı, setLcTutarı] = useState(500000);
  const [vadeGun, setVadeGun] = useState(90);
  const [teyitVarMı, setTeyitVarMı] = useState(false);
  const [teyitOrani, setTeyitOrani] = useState(0.2);

  const acilisKomisyon = lcTutarı * 0.0015;
  const ihbarUcreti = 100;
  const incelemeUcreti = 150;
  const swiftUcreti = 50;
  const teyitKomisyon = teyitVarMı ? lcTutarı * (teyitOrani / 100) * (vadeGun / 90) : 0;
  const toplamMaliyet = acilisKomisyon + ihbarUcreti + incelemeUcreti + swiftUcreti + teyitKomisyon;
  const oran = (toplamMaliyet / lcTutarı) * 100;
  const fmt = n => n.toLocaleString("tr-TR", { maximumFractionDigits: 0 });

  return (
    <>
      <PageHeader crumbs={[{label:"ihracathub",to:""},{label:"Araçlar",to:"araclar"},{label:"Akreditif Maliyet"}]} kicker="ÖDEME ARACI · ÜCRETSİZ" title="Akreditif Maliyet Hesaplayıcı" lede="L/C açılış, ihbar, inceleme ve teyit komisyonlarının toplamını 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">L/C tutarı (TL)</label><input type="number" className="input mono" value={lcTutarı} onChange={e=>setLcTutarı(+e.target.value||0)} /></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><label style={{display:"flex",gap:8,cursor:"pointer"}}>
                <input type="checkbox" checked={teyitVarMı} onChange={e=>setTeyitVarMı(e.target.checked)} />
                <span>L/C teyitli mi? (Teyit komisyonu var)</span>
              </label></div>
              {teyitVarMı && <div><label className="label">Teyit komisyon oranı (%)</label><input type="number" step="0.05" className="input mono" value={teyitOrani} onChange={e=>setTeyitOrani(+e.target.value||0)} /></div>}
            </div>
          </div>
          <div style={{gridColumn:"span 7"}}>
            <div className="result-band"><div className="label">Toplam L/C maliyeti</div><div className="value">₺{fmt(toplamMaliyet)}</div><div className="sub">L/C'nin %{oran.toFixed(2)}'i · Oran için referans: %1–3</div></div>
            <table className="tbl" style={{marginTop:16}}>
              <tbody>
                <tr><td>Açılış komisyonu (%0.15 min.)</td><td className="num mono">₺{fmt(acilisKomisyon)}</td></tr>
                <tr><td>İhbar ücreti</td><td className="num mono">₺{fmt(ihbarUcreti)}</td></tr>
                <tr><td>İnceleme ücreti</td><td className="num mono">₺{fmt(incelemeUcreti)}</td></tr>
                <tr><td>SWIFT ücreti</td><td className="num mono">₺{fmt(swiftUcreti)}</td></tr>
                {teyitVarMı && <tr><td>Teyit komisyonu</td><td className="num mono">₺{fmt(teyitKomisyon)}</td></tr>}
                <tr style={{fontWeight:600}}><td>Toplam maliyet</td><td className="num mono" style={{color:"var(--neg)"}}>₺{fmt(toplamMaliyet)}</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div></section>
    </>
  );
}

// ── 3.8 SWIFT Mesaj Tipi Seçici ────────────────────────────────────────────────
function SwiftSecici() {
  const [secili, setSecili] = useState("MT700");

  const mesajlar = {
    MT700: { ad: "MT 700 — L/C İçeriği", amaç: "Banka tarafından akreditif açıldığında gönderilen ilk mesaj", ne: "Kapı, koşullar, belgeler, vade tarihi, ödeme vb." },
    MT710: { ad: "MT 710 — L/C İhbarı", amaç: "İhbar bankası L/C alındığını bildirir", ne: "Açan bankadan alınan bilgi; muhabir olarak görev yapan bankanın teyidi (varsa)" },
    MT750: { ad: "MT 750 — L/C Değişimi", amaç: "L/C koşullarında değişiklik bildirimi", ne: "Tutar, vade, belgeler, sipariş numarası vb. değişiklikleri" },
    MT742: { ad: "MT 742 — Rambursman Talimatı", amaç: "Başka bir banka tarafından ödeme alınması konusunda bildiri", ne: "Rambursman hakkı, limiti, ödeme para birimi, şartları" },
  };
  const m = mesajlar[secili] || {};

  return (
    <>
      <PageHeader crumbs={[{label:"ihracathub",to:""},{label:"Araçlar",to:"araclar"},{label:"SWIFT Mesaj Seçici"}]} kicker="ÖDEME ARACI · ÜCRETSİZ" title="SWIFT Mesaj Tipi Seçici" lede="L/C işlemlerinde en sık kullanılan 4 SWIFT mesaj türünü tanıyın." />
      <section className="section tight"><div className="container">
        <div style={{display:"flex",gap:8,flexWrap:"wrap",marginBottom:24}}>
          {Object.entries(mesajlar).map(([k,v])=>(
            <button key={k} onClick={()=>setSecili(k)} className={"btn sm "+(secili===k?"":"ghost")}>{k}</button>
          ))}
        </div>
        {m && (
          <div style={{padding:24,background:"var(--paper-2)",borderLeft:"4px solid var(--accent)"}}>
            <div className="h-3">{m.ad}</div>
            <div style={{marginTop:12}}><strong>Amacı:</strong> {m.amaç}</div>
            <div style={{marginTop:8}}><strong>İçeriği:</strong> {m.ne}</div>
          </div>
        )}
      </div></section>
    </>
  );
}

// ── 3.9 Ödeme Takvimi Oluşturucu ────────────────────────────────────────────────
function OdemeTagvimi() {
  const [faturaTarihi, setFaturaTarihi] = useState("2026-04-28");
  const [vade, setVade] = useState(60);

  const f = new Date(faturaTarihi);
  const son = new Date(f.getTime() + vade * 24 * 60 * 60 * 1000);
  const hatirla1 = new Date(f.getTime() + (vade - 14) * 24 * 60 * 60 * 1000);
  const hatirla2 = new Date(son.getTime() + 10 * 24 * 60 * 60 * 1000);

  const fmt = d => d.toLocaleDateString("tr-TR");

  return (
    <>
      <PageHeader crumbs={[{label:"ihracathub",to:""},{label:"Araçlar",to:"araclar"},{label:"Ödeme Takvimi"}]} kicker="ÖDEME ARACI · ÜCRETSİZ" title="Ödeme Takvimi Oluşturucu" lede="Fatura tarihini ve ödeme vadesini girerek ödeme takvimini görün." />
      <section className="section tight"><div className="container">
        <div className="grid grid-12" style={{gap:32}}>
          <div style={{gridColumn:"span 4"}}>
            <div style={{display:"flex",flexDirection:"column",gap:16}}>
              <div><label className="label">Fatura tarihi</label><input type="date" className="input mono" value={faturaTarihi} onChange={e=>setFaturaTarihi(e.target.value)} /></div>
              <div><label className="label">Ödeme vadesi (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>
          </div>
          <div style={{gridColumn:"span 8"}}>
            <div style={{display:"flex",flexDirection:"column",gap:12}}>
              <div style={{padding:12,background:"var(--paper-2)",borderLeft:"3px solid var(--pos)"}}>
                <div className="caption">Fatura tarihi</div>
                <div className="h-3" style={{marginTop:4}}>{fmt(f)}</div>
              </div>
              <div style={{padding:12,background:"var(--paper-2)",borderLeft:"3px solid var(--warn)"}}>
                <div className="caption">Ödeme süresi başlaması için 14 gün kaldığında hatırlat</div>
                <div className="h-3" style={{marginTop:4}}>{fmt(hatirla1)}</div>
              </div>
              <div style={{padding:12,background:"var(--paper-2)",borderLeft:"3px solid var(--ink)"}}>
                <div className="caption">Ödeme tarihi (son tarih)</div>
                <div className="h-3" style={{marginTop:4}}>{fmt(son)}</div>
              </div>
              <div style={{padding:12,background:"var(--paper-2)",borderLeft:"3px solid var(--neg)"}}>
                <div className="caption">Ödeme yapılmadıysa gecikme faizi başlangıcı</div>
                <div className="h-3" style={{marginTop:4}}>{fmt(hatirla2)}</div>
              </div>
            </div>
          </div>
        </div>
      </div></section>
    </>
  );
}

Object.assign(window, { OdemeYontemiKarsi, VesaikKontrol, TahsilatRiski, VadeIskonto, SevkiyatSure, BelgeUygunluk, AkreditifMaliyet, SwiftSecici, OdemeTagvimi });

// ── 3.5 Yükleme & Sevkiyat Süresi ─────────────────────────────────────────────
function SevkiyatSure() {
  const [kalKismı, setKalKismı] = useState("Istanbul");
  const [varKismı, setVarKismı] = useState("EU");
  const [tasimaModu, setTasimaModu] = useState("deniz");

  const süreler = {
    deniz_EU: 10, deniz_US: 18, deniz_MENA: 14,
    hava_EU: 3, hava_US: 4, hava_MENA: 2,
    kara_EU: 5, kara_US: 0, kara_MENA: 4,
  };
  const sure = süreler[`${tasimaModu}_${varKismı}`] || 14;
  const kesintisuzlik = Math.ceil(sure * 1.5) + 2;

  return (
    <>
      <PageHeader crumbs={[{label:"ihracathub",to:""},{label:"Araçlar",to:"araclar"},{label:"Yükleme & Sevkiyat Süresi"}]} kicker="ÖDEME ARACI · ÜCRETSİZ" title="Yükleme & Sevkiyat Süresi Hesaplayıcı" lede="Kalkış limanı, varış bölgesi ve taşıma moduna göre tahmini transit süresini görün." />
      <section className="section tight"><div className="container">
        <div className="grid grid-12" style={{gap:24}}>
          <div style={{gridColumn:"span 4"}}>
            <label className="label">Kalkış limanı</label>
            <select className="select" value={kalKismı} onChange={e=>setKalKismı(e.target.value)}>
              {["Istanbul","Mersin","İzmir"].map(k=><option key={k} value={k}>{k}</option>)}
            </select>
          </div>
          <div style={{gridColumn:"span 4"}}>
            <label className="label">Varış bölgesi</label>
            <select className="select" value={varKismı} onChange={e=>setVarKismı(e.target.value)}>
              {[["EU","AB-27"],["US","ABD"],["MENA","Körfez/Orta Doğu"]].map(([k,v])=><option key={k} value={k}>{v}</option>)}
            </select>
          </div>
          <div style={{gridColumn:"span 4"}}>
            <label className="label">Taşıma modu</label>
            <select className="select" value={tasimaModu} onChange={e=>setTasimaModu(e.target.value)}>
              {[["deniz","Deniz"],["hava","Hava"],["kara","Kara (Karayolu)"]].map(([k,v])=><option key={k} value={k}>{v}</option>)}
            </select>
          </div>
        </div>
        <div className="grid grid-3" style={{gap:32,marginTop:32}}>
          <div className="kpi"><div className="kpi-label">TRANSİT SÜRESİ</div><div className="kpi-value">{sure} gün</div></div>
          <div className="kpi"><div className="kpi-label">KESİNTİSÜZ ZAMANLA</div><div className="kpi-value">{kesintisuzlik} gün</div></div>
          <div className="kpi"><div className="kpi-label">TOPLAM LEAD TIME</div><div className="kpi-value">{kesintisuzlik + 3} gün*</div></div>
        </div>
        <div style={{marginTop:16,fontSize:12,color:"var(--ink-3)"}}>*Üretim süresi dahil değildir. Kesintisüz zamanla = transit × 1.5 + buffer</div>
      </div></section>
    </>
  );
}

// ── 3.1 Ödeme Yöntemi Karşılaştırıcı ──────────────────────────────────────────
function OdemeYontemiKarsi() {
  const [tutar, setTutar] = useState(500000);

  const yontemler = [
    { ad: "Peşin TT (Swift Transfer)", satiGun: 0, aliciGun: 1, maliyet: "%0.2–0.5", risk: "En düşük", uygunluk: "Büyük siparişler, yeni alıcılar" },
    { ad: "Vadeli TT (Net 30/60/90)", satiGun: 3, aliciGun: 2, maliyet: "%0–0.3", risk: "Düşük", uygunluk: "İtibari alıcılar, periyodik ticaret" },
    { ad: "Vesaik (D/A veya D/P)", satiGun: 2, aliciGun: 2, maliyet: "%0.3–0.8", risk: "Orta", uygunluk: "Yeni ilişkiler, riski paylaş" },
    { ad: "Akreditif Görülebilir (L/C at Sight)", satiGun: 1, aliciGun: 3, maliyet: "%1–2.5", risk: "Çok düşük", uygunluk: "Büyük tutarlar, yüksek risk ülkeler" },
    { ad: "Akreditif Vadeli (L/C 60–180d)", satiGun: 1, aliciGun: 4, maliyet: "%1.5–3.5", risk: "Çok düşük", uygunluk: "Orta vadeli, ihracatçı finansmanı" },
    { ad: "Açık Hesap (Net 30–120)", satiGun: 5, aliciGun: 0, maliyet: "%0", risk: "Çok yüksek", uygunluk: "Sabit müşteriler, düşük risk ülkeleri" },
  ];

  return (
    <>
      <PageHeader crumbs={[{label:"ihracathub",to:""},{label:"Araçlar",to:"araclar"},{label:"Ödeme Yöntemi Karşılaştırıcı"}]} kicker="ÖDEME ARACI · ÜCRETSİZ" title="Ödeme Yöntemi Karşılaştırıcı" lede="6 farklı ödeme yönteminin hız, maliyet, risk ve uygunluk alanlarını karşılaştırın." />
      <section className="section tight"><div className="container">
        <table className="tbl" style={{fontSize:12}}>
          <thead><tr><th>Ödeme Yöntemi</th><th className="num">Satıcı<br/>Geçiş (gün)</th><th className="num">Alıcı<br/>Ödeme (gün)</th><th>Maliyet</th><th style={{width:"30%"}}>Riski</th><th style={{width:"35%"}}>Uygunluk</th></tr></thead>
          <tbody>
            {yontemler.map((y,i)=>(
              <tr key={y.ad} style={i===3?{background:"var(--paper-2)",fontWeight:600}:{}}>
                <td><strong>{y.ad}</strong></td>
                <td className="num">{y.satiGun}</td>
                <td className="num">{y.aliciGun}</td>
                <td className="mono" style={{fontSize:11}}>{y.maliyet}</td>
                <td><span className="tag" style={{background:y.risk==="En düşük"||y.risk==="Çok düşük"?"var(--pos)":y.risk==="Çok yüksek"?"var(--neg)":"var(--warn)",color:"#fff",fontSize:10}}>{y.risk}</span></td>
                <td style={{fontSize:11}}>{y.uygunluk}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <div style={{marginTop:24,padding:16,background:"var(--paper-2)",fontSize:12,borderLeft:"3px solid var(--accent)"}}>
          <strong>Tavsiye:</strong> Risk ve hız arasında denge kurmak için <strong>Akreditif Görülebilir (L/C at Sight)</strong> ya da <strong>Vesaik (D/P)</strong> en yaygın seçimlerdir.
        </div>
      </div></section>
    </>
  );
}