// Eximbank Simülatörü + Kur Riski

function EximbankPage() {
  const products = window.IH_DATA.eximbank;
  const [active, setActive] = useState(products[0].id);
  const [amount, setAmount] = useState(500000);
  const [termMonths, setTermMonths] = useState(6);

  const p = products.find((x) => x.id === active);
  const monthlyRate = p.rate / 100 / 12;
  const totalInterest = amount * (p.rate / 100) * (termMonths / 12);
  const monthly = (amount + totalInterest) / termMonths;

  return (
    <>
      <PageHeader
        crumbs={[{ label: "ihracathub", to: "" }, { label: "Araçlar", to: "araclar" }, { label: "Eximbank Simülatörü" }]}
        kicker="ARAÇ 02 / 05 · ÜCRETSİZ"
        title="Eximbank Kredi Simülatörü"
        lede="Eximbank kredi ürünleri için ödeme planı, taahhüt yönetimi, ticari banka faiziyle karşılaştırma."
      />

      <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 }}>ÜRÜN SEÇİMİ</div>
              <div style={{ display: "flex", flexDirection: "column", border: "1px solid var(--rule)" }}>
                {products.map((prod) => (
                  <button
                    key={prod.id}
                    onClick={() => setActive(prod.id)}
                    style={{
                      textAlign: "left",
                      padding: 16,
                      background: active === prod.id ? "var(--ink)" : "var(--paper)",
                      color: active === prod.id ? "var(--paper)" : "var(--ink)",
                      border: 0,
                      borderBottom: "1px solid var(--rule)",
                      cursor: "pointer",
                    }}
                  >
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                      <span style={{ fontWeight: 500 }}>{prod.label}</span>
                      <span className="mono" style={{ fontSize: 13 }}>%{prod.rate} · {prod.currency}</span>
                    </div>
                    <div className="caption" style={{ color: active === prod.id ? "#9C9486" : "var(--ink-3)", marginTop: 4 }}>{prod.term} · min {prod.min.toLocaleString("tr-TR")} {prod.currency}</div>
                  </button>
                ))}
              </div>
            </div>

            <div style={{ gridColumn: "span 7" }}>
              <div className="eyebrow accent" style={{ marginBottom: 16 }}>SİMÜLASYON</div>

              <div className="grid grid-2" style={{ gap: 16 }}>
                <div>
                  <label className="label">Kredi tutarı ({p.currency})</label>
                  <input type="number" className="input mono" value={amount} onChange={(e) => setAmount(Math.max(0, parseFloat(e.target.value) || 0))} />
                </div>
                <div>
                  <label className="label">Vade (ay)</label>
                  <input type="number" className="input mono" value={termMonths} onChange={(e) => setTermMonths(Math.max(1, parseInt(e.target.value) || 1))} />
                </div>
              </div>

              <div className="result-band" style={{ marginTop: 24 }}>
                <div className="label">Toplam geri ödeme</div>
                <div className="value">{(amount + totalInterest).toLocaleString("tr-TR", { maximumFractionDigits: 0 })} <small style={{ fontSize: 18, color: "#9C9486" }}>{p.currency}</small></div>
                <div className="sub">
                  Anapara {amount.toLocaleString("tr-TR")} + Faiz {totalInterest.toLocaleString("tr-TR", { maximumFractionDigits: 0 })} {p.currency} · Aylık ortalama {monthly.toLocaleString("tr-TR", { maximumFractionDigits: 0 })}
                </div>
              </div>

              <div className="divider-label">TİCARİ BANKA İLE KARŞILAŞTIRMA</div>
              <table className="tbl">
                <thead>
                  <tr>
                    <th>KAYNAK</th>
                    <th className="num">FAİZ</th>
                    <th className="num">TOPLAM FAİZ</th>
                    <th className="num">TASARRUF</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><strong>Eximbank</strong> · {p.label}</td>
                    <td className="num">%{p.rate}</td>
                    <td className="num mono">{totalInterest.toLocaleString("tr-TR", { maximumFractionDigits: 0 })}</td>
                    <td className="num"><span className="tag pos">REFERANS</span></td>
                  </tr>
                  {[
                    { n: "Ticari banka A (TL)", r: p.currency === "TL" ? 55 : 9.2 },
                    { n: "Ticari banka B (TL)", r: p.currency === "TL" ? 58 : 9.6 },
                    { n: "Yabancı banka", r: p.currency === "TL" ? 52 : 8.4 },
                  ].map((b, i) => {
                    const intr = amount * (b.r / 100) * (termMonths / 12);
                    const sav = intr - totalInterest;
                    return (
                      <tr key={i}>
                        <td>{b.n}</td>
                        <td className="num">%{b.r}</td>
                        <td className="num mono">{intr.toLocaleString("tr-TR", { maximumFractionDigits: 0 })}</td>
                        <td className="num" style={{ color: "var(--neg)" }}>+{sav.toLocaleString("tr-TR", { maximumFractionDigits: 0 })}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>

              <div className="card flat card-pad" style={{ marginTop: 24, borderLeft: "3px solid var(--accent)" }}>
                <div className="eyebrow accent" style={{ marginBottom: 4 }}>TAAHHÜT</div>
                <div style={{ fontSize: 14 }}>{p.taahhut}</div>
              </div>

              <div style={{ display: "flex", gap: 12, marginTop: 24 }}>
                <button className="btn">Tam ödeme planı (PDF) →</button>
                <button className="btn ghost">Aracı banka şubelerini göster</button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function KurPage() {
  const [pos, setPos] = useState(250000);
  const [ccy, setCcy] = useState("USD");
  const [horizon, setHorizon] = useState(90);
  const fxBase = { USD: 38.42, EUR: 43.71, GBP: 50.88 };
  const vol = { USD: 0.18, EUR: 0.16, GBP: 0.20 };
  const v = vol[ccy];
  const tlExposure = pos * fxBase[ccy];
  const var95 = tlExposure * v * Math.sqrt(horizon / 252) * 1.645;
  const fwd = fxBase[ccy] * (1 + 0.04 * (horizon / 365));
  const fwdLock = pos * fwd;

  return (
    <>
      <PageHeader
        crumbs={[{ label: "ihracathub", to: "" }, { label: "Araçlar", to: "araclar" }, { label: "Kur Riski" }]}
        kicker="ARAÇ 05 / 05 · ÜCRETSİZ"
        title="Kur Riski Tarayıcı"
        lede="Açık döviz pozisyonunuz için Value-at-Risk, forward kontrat karşılaştırması ve senaryo analizi."
      />
      <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>
              <label className="label">Açık alacak tutarı</label>
              <div style={{ display: "flex", gap: 0, border: "1px solid var(--rule-2)" }}>
                <input type="number" className="input mono" style={{ border: 0 }} value={pos} onChange={(e) => setPos(parseFloat(e.target.value) || 0)} />
                <select value={ccy} onChange={(e) => setCcy(e.target.value)} style={{ border: 0, borderLeft: "1px solid var(--rule-2)", padding: "0 16px", background: "var(--paper-2)", fontFamily: "var(--f-mono)" }}>
                  <option>USD</option>
                  <option>EUR</option>
                  <option>GBP</option>
                </select>
              </div>

              <div style={{ marginTop: 24 }}>
                <label className="label">Tahsilat ufku</label>
                <div className="tabs" style={{ display: "flex" }}>
                  {[30, 60, 90, 180, 365].map((d) => (
                    <button key={d} className={"tab " + (horizon === d ? "active" : "")} style={{ flex: 1 }} onClick={() => setHorizon(d)}>{d}g</button>
                  ))}
                </div>
              </div>

              <div className="card flat card-pad" style={{ marginTop: 24 }}>
                <div className="eyebrow">PİYASA VERİSİ</div>
                <table className="tbl" style={{ marginTop: 8 }}>
                  <tbody>
                    <tr><td>Spot {ccy}/TRY</td><td className="num mono"><strong>{fxBase[ccy].toFixed(4)}</strong></td></tr>
                    <tr><td>Geçmiş volatilite (yıllık)</td><td className="num mono">%{(v * 100).toFixed(1)}</td></tr>
                    <tr><td>Forward {horizon}g</td><td className="num mono">{fwd.toFixed(4)}</td></tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div style={{ gridColumn: "span 7" }}>
              <div className="eyebrow accent" style={{ marginBottom: 16 }}>RİSK ANALİZİ</div>

              <div className="result-band">
                <div className="label">VaR %95 · {horizon} gün</div>
                <div className="value">₺{var95.toLocaleString("tr-TR", { maximumFractionDigits: 0 })}</div>
                <div className="sub">{horizon} gün içinde %95 olasılıkla bu tutardan daha az TL kaybedersiniz.</div>
              </div>

              <div className="divider-label">SENARYO ANALİZİ</div>
              <table className="tbl">
                <thead>
                  <tr>
                    <th>SENARYO</th>
                    <th className="num">{ccy}/TRY</th>
                    <th className="num">TL ALACAK</th>
                    <th className="num">FARK</th>
                  </tr>
                </thead>
                <tbody>
                  {[
                    { s: "Şiddetli düşüş (−15%)", k: 0.85, t: "neg" },
                    { s: "Düşüş (−5%)", k: 0.95, t: "neg" },
                    { s: "Mevcut spot", k: 1.0, t: "" },
                    { s: "Hafif yükseliş (+5%)", k: 1.05, t: "pos" },
                    { s: "Forward kilidi", k: fwd / fxBase[ccy], t: "primary" },
                  ].map((sc, i) => {
                    const tl = pos * fxBase[ccy] * sc.k;
                    const diff = tl - tlExposure;
                    return (
                      <tr key={i}>
                        <td>{sc.s}</td>
                        <td className="num">{(fxBase[ccy] * sc.k).toFixed(4)}</td>
                        <td className="num mono">₺{tl.toLocaleString("tr-TR", { maximumFractionDigits: 0 })}</td>
                        <td className="num" style={{ color: diff > 0 ? "var(--pos)" : diff < 0 ? "var(--neg)" : "var(--ink-3)" }}>
                          {diff > 0 ? "+" : ""}{diff.toLocaleString("tr-TR", { maximumFractionDigits: 0 })}
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>

              <div className="card flat card-pad" style={{ marginTop: 24, borderLeft: "3px solid var(--accent)" }}>
                <div className="eyebrow accent">ÖNERİ</div>
                <div style={{ fontSize: 15, marginTop: 4 }}>
                  {var95 > tlExposure * 0.05 ? (
                    <><strong>Yüksek risk:</strong> Forward kontratı ile {fwdLock.toLocaleString("tr-TR", { maximumFractionDigits: 0 })} ₺'yi sabitleyebilirsiniz. Ticari bankalar tipik olarak 100K USD üzeri pozisyonlar için forward sunar.</>
                  ) : (
                    <><strong>Düşük risk:</strong> Mevcut pozisyon ufuk içinde tolerans aralığında. Hedge maliyeti yüksek olabilir.</>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

window.EximbankPage = EximbankPage;
window.KurPage = KurPage;