// Live transfer calculator
const RATES = {
  EUR: { sym: "€", rate: 95.3, flag: "🇪🇺", default: 800 },
  USD: { sym: "$", rate: 88.4, flag: "🇺🇸", default: 1000 },
  CNY: { sym: "¥", rate: 12.1, flag: "🇨🇳", default: 6000 },
  KZT: { sym: "₸", rate: 0.176, flag: "🇰🇿", default: 400000 },
};
const FEE_PCT = 0.012; // 1.2%

const Calculator = ({ t, lang }) => {
  const [cur, setCur] = React.useState("EUR");
  const [amt, setAmt] = React.useState(800);

  React.useEffect(() => { setAmt(RATES[cur].default); }, [cur]);

  const r = RATES[cur];
  const feeSrc = +(amt * FEE_PCT).toFixed(2);
  const netSrc = amt - feeSrc;
  const rub = Math.round(netSrc * r.rate);
  const fmt = (n) => n.toLocaleString(lang === "ru" ? "ru-RU" : "en-US", { maximumFractionDigits: 2 });
  const fmtR = (n) => n.toLocaleString(lang === "ru" ? "ru-RU" : "en-US");

  return (
    <section className="calc" id="calc">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">{t.calc.eyebrow}</div>
          <h2 className="h-section">{t.calc.title_a}<em>{t.calc.title_em}</em></h2>
        </div>

        <div className="calc-card">
          <div className="calc-grid">
            <div className="calc-col">
              <div className="calc-lbl">{t.calc.send}</div>
              <div className="calc-input">
                <input
                  type="text"
                  className="ci-amount mono"
                  value={fmt(amt)}
                  onChange={(e) => {
                    const v = e.target.value.replace(/[^\d.]/g, "");
                    setAmt(Math.max(0, Math.min(50000000, parseFloat(v) || 0)));
                  }}
                />
                <div className="ci-cur">
                  {Object.keys(RATES).map(k => (
                    <button key={k} className={cur === k ? "on" : ""} onClick={() => setCur(k)}>
                      <span className="cur-sym">{RATES[k].sym}</span>{k}
                    </button>
                  ))}
                </div>
              </div>
            </div>

            <div className="calc-equals">
              <svg width="34" height="34" viewBox="0 0 34 34" fill="none">
                <path d="M8 13H26M8 21H26" stroke="var(--ink-3)" strokeWidth="1.4" strokeLinecap="round"/>
              </svg>
            </div>

            <div className="calc-col calc-col-out">
              <div className="calc-lbl">{t.calc.receive}</div>
              <div className="calc-output mono">
                <span className="co-sym">₽</span>
                <span className="co-num">{fmtR(rub)}</span>
              </div>
              <div className="co-bank mono">→ {lang === "ru" ? "ваш счёт в ПСБ" : lang === "fr" ? "votre compte PSB" : "your PSB account"}</div>
            </div>
          </div>

          <div className="calc-breakdown">
            <div className="cb-row">
              <span className="cb-lbl">{t.calc.rate}</span>
              <span className="mono">1 {r.sym} = ₽ {r.rate}</span>
            </div>
            <div className="cb-row">
              <span className="cb-lbl">{t.calc.fee} <span className="mono">(1.2%)</span></span>
              <span className="mono">— {r.sym} {fmt(feeSrc)}</span>
            </div>
            <div className="cb-row cb-row-acc">
              <span className="cb-lbl">{t.calc.delivery}</span>
              <span>{t.calc.delivery_v}</span>
            </div>
          </div>

          <div className="calc-vs">
            <div className="vs-pill">
              <div className="vs-row">
                <span className="vs-tag mono">AlmaPay</span>
                <span className="vs-val mono">~10 min · 1.2%</span>
              </div>
              <div className="vs-bar"><div className="vs-bar-fill alma" style={{width: "18%"}} /></div>
            </div>
            <div className="vs-pill vs-pill-muted">
              <div className="vs-row">
                <span className="vs-tag mono">{t.calc.vs}</span>
                <span className="vs-val mono">{t.calc.vs_v}</span>
              </div>
              <div className="vs-bar"><div className="vs-bar-fill swift" style={{width: "92%"}} /></div>
            </div>
          </div>

          <div className="calc-hint">{t.calc.hint}</div>
        </div>
      </div>
    </section>
  );
};
window.Calculator = Calculator;