// Kârlılık + Akreditif + Destek

function KarlilikPage() {
  const [unitCost, setUnitCost] = useState(120);
  const [units, setUnits] = useState(1000);
  const [salePrice, setSalePrice] = useState(220);
  const [destination, setDestination] = useState("DE");
  const [incoterm, setIncoterm] = useState("FOB");
  const [freight, setFreight] = useState(2400);
  const [insurance, setInsurance] = useState(180);
  const [duty, setDuty] = useState(12);
  const [vat, setVat] = useState(19);

  const cogs = unitCost * units;
  const revenue = salePrice * units;
  const grossMargin = revenue - cogs;
  const totalLogistics = freight + insurance;
  const dutyCost = (incoterm === "DDP" ? revenue * (duty / 100) : 0);
  const vatCost = (incoterm === "DDP" ? (revenue + dutyCost) * (vat / 100) : 0);
  const net = grossMargin - totalLogistics - dutyCost;
  const netMargin = (net / revenue) * 100;

  return (
    <>
      <PageHeader
        crumbs={[{ label: "ihracathub", to: "" }, { label: "Araçlar", to: "araclar" }, { label: "Kârlılık & Landed Cost" }]}
        kicker="ARAÇ 01 / 05 · ÜCRETSİZ"
        title="Kârlılık & Landed Cost"
        lede="Çıkış maliyeti, navlun, sigorta, varış ülkesi vergisi ve KDV — tek sayfada net marj."
      />
      <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 VE FİYAT</div>
              <div className="grid grid-2" style={{ gap: 16 }}>
                <div><label className="label">Birim maliyet (TL)</label><input type="number" className="input mono" value={unitCost} onChange={(e) => setUnitCost(parseFloat(e.target.value) || 0)} /></div>
                <div><label className="label">Adet</label><input type="number" className="input mono" value={units} onChange={(e) => setUnits(parseFloat(e.target.value) || 0)} /></div>
                <div><label className="label">Birim satış (TL)</label><input type="number" className="input mono" value={salePrice} onChange={(e) => setSalePrice(parseFloat(e.target.value) || 0)} /></div>
                <div>
                  <label className="label">Hedef ülke</label>
                  <select className="select" value={destination} onChange={(e) => setDestination(e.target.value)}>
                    <option value="DE">Almanya · AB</option>
                    <option value="US">ABD</option>
                    <option value="GB">Birleşik Krallık</option>
                    <option value="IQ">Irak</option>
                  </select>
                </div>
              </div>

              <div className="divider-label">INCOTERM VE LOJİSTİK</div>
              <label className="label">INCOTERM 2020</label>
              <div className="tabs" style={{ display: "flex", flexWrap: "wrap" }}>
                {["EXW", "FOB", "CIF", "DAP", "DDP"].map((t) => (
                  <button key={t} className={"tab " + (incoterm === t ? "active" : "")} onClick={() => setIncoterm(t)} style={{ flex: 1 }}>{t}</button>
                ))}
              </div>

              <div className="grid grid-2" style={{ gap: 16, marginTop: 16 }}>
                <div><label className="label">Navlun (TL)</label><input type="number" className="input mono" value={freight} onChange={(e) => setFreight(parseFloat(e.target.value) || 0)} /></div>
                <div><label className="label">Sigorta (TL)</label><input type="number" className="input mono" value={insurance} onChange={(e) => setInsurance(parseFloat(e.target.value) || 0)} /></div>
                <div><label className="label">Varış vergisi %</label><input type="number" className="input mono" value={duty} onChange={(e) => setDuty(parseFloat(e.target.value) || 0)} /></div>
                <div><label className="label">Varış KDV %</label><input type="number" className="input mono" value={vat} onChange={(e) => setVat(parseFloat(e.target.value) || 0)} /></div>
              </div>
            </div>

            <div style={{ gridColumn: "span 7" }}>
              <div className="eyebrow accent" style={{ marginBottom: 16 }}>SONUÇ · {incoterm}</div>
              <div className="result-band">
                <div className="label">Net kâr (TL)</div>
                <div className="value" style={{ color: net > 0 ? "#7FCBA8" : "#E89C8E" }}>
                  {net.toLocaleString("tr-TR", { maximumFractionDigits: 0 })}
                </div>
                <div className="sub">Net marj %{netMargin.toFixed(1)} · Kalem başına ₺{(net / units).toFixed(2)}</div>
              </div>

              <div className="divider-label">MALİYET KIRILIM TABLOSU</div>
              <table className="tbl">
                <tbody>
                  <tr><td>Hasılat ({units} × {salePrice})</td><td className="num mono"><strong>+{revenue.toLocaleString("tr-TR")}</strong></td></tr>
                  <tr><td>COGS</td><td className="num mono" style={{ color: "var(--neg)" }}>−{cogs.toLocaleString("tr-TR")}</td></tr>
                  <tr style={{ background: "var(--paper-2)" }}><td><strong>Brüt kâr</strong></td><td className="num mono"><strong>{grossMargin.toLocaleString("tr-TR")}</strong></td></tr>
                  <tr><td>Navlun ({incoterm} kapsamı)</td><td className="num mono" style={{ color: "var(--neg)" }}>−{freight.toLocaleString("tr-TR")}</td></tr>
                  <tr><td>Sigorta</td><td className="num mono" style={{ color: "var(--neg)" }}>−{insurance.toLocaleString("tr-TR")}</td></tr>
                  {incoterm === "DDP" && <tr><td>Varış ülkesi vergi (%{duty})</td><td className="num mono" style={{ color: "var(--neg)" }}>−{dutyCost.toLocaleString("tr-TR", { maximumFractionDigits: 0 })}</td></tr>}
                  {incoterm === "DDP" && <tr><td>Varış KDV (%{vat}, geri iade edilebilir)</td><td className="num mono" style={{ color: "var(--ink-3)" }}>({vatCost.toLocaleString("tr-TR", { maximumFractionDigits: 0 })})</td></tr>}
                  <tr style={{ background: "var(--ink)", color: "var(--paper)" }}>
                    <td style={{ color: "var(--paper)" }}><strong>Net kâr</strong></td>
                    <td className="num mono" style={{ color: net > 0 ? "#7FCBA8" : "#E89C8E" }}><strong>{net.toLocaleString("tr-TR")}</strong></td>
                  </tr>
                </tbody>
              </table>

              <div className="grid grid-3" style={{ marginTop: 24 }}>
                <div className="kpi"><div className="kpi-label">BRÜT MARJ</div><div className="kpi-value">%{((grossMargin / revenue) * 100).toFixed(1)}</div></div>
                <div className="kpi"><div className="kpi-label">NET MARJ</div><div className="kpi-value">%{netMargin.toFixed(1)}</div></div>
                <div className="kpi"><div className="kpi-label">BREAK-EVEN ADET</div><div className="kpi-value">{Math.ceil((cogs + totalLogistics) / (salePrice - unitCost))}</div></div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function AkreditifPage() {
  const reservations = [
    { code: "L/C-01", title: "Late shipment / Geç yükleme", freq: "%18", impact: "Yüksek", desc: "Yükleme tarihi akreditifte belirtilenden sonra. UCP 600 m.14(c) uyarınca rezerv konusu." },
    { code: "L/C-02", title: "Discrepancy in description / Mal tanımı uyumsuzluğu", freq: "%14", impact: "Yüksek", desc: "Fatura veya konşimentodaki mal tanımı, akreditiftekiyle birebir aynı olmalı (m.18(c))." },
    { code: "L/C-03", title: "Incomplete documents / Eksik belge", freq: "%12", impact: "Yüksek", desc: "Akreditifte istenen belgelerden biri eksik teslim edilmiş." },
    { code: "L/C-04", title: "Insurance amount short / Sigorta tutarı eksik", freq: "%9", impact: "Orta", desc: "CIF/CIP'te sigorta minimum %110 fatura tutarı olmalı (m.28(f))." },
    { code: "L/C-05", title: "BL endorsement issue / Konşimento ciro hatası", freq: "%8", impact: "Yüksek", desc: "Order konşimento doğru cirolanmamış." },
    { code: "L/C-06", title: "Stale documents / Eski belgeler", freq: "%7", impact: "Orta", desc: "BL tarihi sonrası 21 günden geç sunum." },
    { code: "L/C-07", title: "Partial shipment / Kısmi yükleme yasağı ihlali", freq: "%6", impact: "Yüksek", desc: "Akreditifte 'partial shipments not allowed' iken kısmi yükleme yapılmış." },
    { code: "L/C-08", title: "Wrong port / Liman uyumsuzluğu", freq: "%5", impact: "Yüksek", desc: "Yükleme veya boşaltma limanı akreditifte yazılı olandan farklı." },
    { code: "L/C-09", title: "Origin certificate / Menşe belgesi sorunu", freq: "%5", impact: "Orta", desc: "Form A / EUR.1 / A.TR yanlış belge tipi veya eksik onay." },
    { code: "L/C-10", title: "Inspection certificate / Denetim raporu eksik", freq: "%4", impact: "Orta", desc: "SGS, Bureau Veritas vb. tarafından düzenlenmiş rapor istenmiş ancak sunulmamış." },
    { code: "L/C-11", title: "Beneficiary's address / Lehdar adresi farkı", freq: "%4", impact: "Düşük", desc: "Faturadaki adres akreditiftekiyle birebir aynı olmalı." },
    { code: "L/C-12", title: "Math errors / Matematiksel hata", freq: "%3", impact: "Düşük", desc: "Faturadaki adet × fiyat = toplam hesabında çelişki." },
  ];

  const [selected, setSelected] = useState([]);
  const toggle = (c) => setSelected((s) => s.includes(c) ? s.filter((x) => x !== c) : [...s, c]);

  return (
    <>
      <PageHeader
        crumbs={[{ label: "ihracathub", to: "" }, { label: "Araçlar", to: "araclar" }, { label: "Akreditif Tarayıcı" }]}
        kicker="ARAÇ 03 / 05 · ÜCRETSİZ"
        title="Akreditif Tarayıcı"
        lede="UCP 600 ihlali tespit listesi. Akreditif metninizi ve vesaikinizi 12 sık rezerv kalemine göre değerlendirin."
      />

      <section className="section tight">
        <div className="container">
          <div className="grid grid-12" style={{ gap: 32 }}>
            <div style={{ gridColumn: "span 7" }}>
              <div className="eyebrow primary" style={{ marginBottom: 16 }}>KONTROL LİSTESİ</div>

              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {reservations.map((r) => (
                  <label key={r.code} className="card" style={{ display: "flex", alignItems: "start", padding: 16, gap: 12, cursor: "pointer", borderColor: selected.includes(r.code) ? "var(--ink)" : "var(--rule)" }}>
                    <input type="checkbox" checked={selected.includes(r.code)} onChange={() => toggle(r.code)} style={{ marginTop: 4 }} />
                    <div style={{ flex: 1 }}>
                      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
                        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                          <span className="mono caption">{r.code}</span>
                          <span style={{ fontWeight: 500 }}>{r.title}</span>
                        </div>
                        <div style={{ display: "flex", gap: 8 }}>
                          <span className={"tag " + (r.impact === "Yüksek" ? "neg" : r.impact === "Orta" ? "warn" : "")}>{r.impact}</span>
                          <span className="tag">FREK {r.freq}</span>
                        </div>
                      </div>
                      <div className="caption" style={{ marginTop: 6 }}>{r.desc}</div>
                    </div>
                  </label>
                ))}
              </div>
            </div>

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

              <div className="result-band">
                <div className="label">Tespit edilen rezerv</div>
                <div className="value">{selected.length}<span style={{ fontSize: 22, color: "#9C9486" }}>/12</span></div>
                <div className="sub">
                  {selected.length === 0 ? "Henüz işaretleme yapılmadı." :
                    selected.length <= 2 ? "Düşük risk · banka muhtemelen kabul eder." :
                    selected.length <= 5 ? "Orta risk · rezerv ücreti 150-500 USD." :
                    "Yüksek risk · ödeme reddi olası, vesaik düzeltilmeli."}
                </div>
              </div>

              <div className="card flat card-pad" style={{ marginTop: 24 }}>
                <div className="eyebrow">YAKLAŞIK MALİYET</div>
                <table className="tbl" style={{ marginTop: 8 }}>
                  <tbody>
                    <tr><td>Rezerv başına banka ücreti</td><td className="num mono">75-150 USD</td></tr>
                    <tr><td>SWIFT mesajı</td><td className="num mono">25-40 USD</td></tr>
                    <tr><td>İhbar ücreti</td><td className="num mono">25-50 USD</td></tr>
                    <tr style={{ background: "var(--paper-3)" }}><td><strong>Toplam tahmini</strong></td><td className="num mono"><strong>{(selected.length * 110 + 50).toFixed(0)} USD</strong></td></tr>
                  </tbody>
                </table>
              </div>

              <div className="card flat card-pad" style={{ marginTop: 16, borderLeft: "3px solid var(--accent)" }}>
                <div className="eyebrow accent">TAVSİYE</div>
                <ul style={{ paddingLeft: 16, margin: "8px 0 0", fontSize: 14, lineHeight: 1.6 }}>
                  <li>Vesaiki bankaya sunmadan önce checklist'i tek tek geçin.</li>
                  <li>BL'de "shipped on board" kaşesi olmazsa "received for shipment" kabul edilmez.</li>
                  <li>Akreditif metnindeki yazım hatalarını bile fatura/BL'ye birebir taşıyın.</li>
                  <li>UCP 600 m.14(d): "ek terimler" başlığını dikkatli okuyun.</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function DestekPage() {
  const data = window.IH_DATA.destekler;
  const [boyut, setBoyut] = useState("kucuk");
  const [sektor, setSektor] = useState("tümü");
  const [ihtiyac, setIhtiyac] = useState("");

  const filtered = data.filter((d) =>
    (d.boyut.includes(boyut) || d.boyut.includes("tümü")) &&
    (d.sektor.includes(sektor) || d.sektor.includes("tümü") || sektor === "tümü") &&
    (!ihtiyac || (d.scope + d.program).toLowerCase().includes(ihtiyac.toLowerCase()))
  );

  return (
    <>
      <PageHeader
        crumbs={[{ label: "ihracathub", to: "" }, { label: "Araçlar", to: "araclar" }, { label: "Destek Bulucu" }]}
        kicker="ARAÇ 04 / 05 · ÜCRETSİZ"
        title="Devlet Destek Bulucu"
        lede="KOSGEB, Ticaret Bakanlığı, Eximbank ve TÜBİTAK destek programları arasında firma profilinize uygun olanları listeleyin."
      />
      <section style={{ background: "var(--paper-2)", padding: "32px 0", borderBottom: "1px solid var(--rule)" }}>
        <div className="container">
          <div className="grid grid-12" style={{ gap: 24 }}>
            <div style={{ gridColumn: "span 4" }}>
              <label className="label">Firma boyutu</label>
              <div className="tabs" style={{ display: "flex" }}>
                {[{ k: "mikro", l: "Mikro" }, { k: "kucuk", l: "Küçük" }, { k: "orta", l: "Orta" }, { k: "buyuk", l: "Büyük" }].map((b) => (
                  <button key={b.k} className={"tab " + (boyut === b.k ? "active" : "")} onClick={() => setBoyut(b.k)} style={{ flex: 1 }}>{b.l}</button>
                ))}
              </div>
            </div>
            <div style={{ gridColumn: "span 4" }}>
              <label className="label">Sektör</label>
              <select className="select" value={sektor} onChange={(e) => setSektor(e.target.value)}>
                <option value="tümü">Tüm sektörler</option>
                <option value="tekstil">Tekstil/giyim</option>
                <option value="makine">Makine</option>
                <option value="elektronik">Elektronik</option>
                <option value="mobilya">Mobilya</option>
                <option value="savunma">Savunma sanayi</option>
                <option value="insaat">İnşaat</option>
              </select>
            </div>
            <div style={{ gridColumn: "span 4" }}>
              <label className="label">İhtiyaç (anahtar kelime)</label>
              <input className="input" placeholder="ör: fuar, sertifikasyon, kredi" value={ihtiyac} onChange={(e) => setIhtiyac(e.target.value)} />
            </div>
          </div>
        </div>
      </section>

      <section className="section tight">
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }}>
            <div className="eyebrow accent">{filtered.length} EŞLEŞME</div>
            <div style={{ display: "flex", gap: 8 }}>
              <button className="btn ghost sm">Liste</button>
              <button className="btn sm">Grup karşılaştır</button>
            </div>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>KURUM</th>
                <th>PROGRAM</th>
                <th>KAPSAM</th>
                <th className="num">TAVAN</th>
                <th>TÜR</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((d) => (
                <tr key={d.id}>
                  <td><strong>{d.kurum}</strong></td>
                  <td>{d.program}</td>
                  <td className="caption">{d.scope}</td>
                  <td className="num mono">{d.uplimit}</td>
                  <td><span className="tag accent">{d.tag}</span></td>
                  <td><button className="btn link sm">Detay →</button></td>
                </tr>
              ))}
            </tbody>
          </table>
          {filtered.length === 0 && (
            <div className="card-pad" style={{ textAlign: "center", padding: 64 }}>
              <div className="eyebrow">Filtrenize uygun program bulunamadı</div>
            </div>
          )}
        </div>
      </section>
    </>
  );
}

window.KarlilikPage = KarlilikPage;
window.AkreditifPage = AkreditifPage;
window.DestekPage = DestekPage;