/* Shared small components — exported to window for cross-file use */

const fmtUSD = (n, dp = 0) =>
  "$" + Number(n).toLocaleString("en-US", { minimumFractionDigits: dp, maximumFractionDigits: dp });

const fmtVND = (n) => {
  // n in VND
  if (n >= 1e9) return (n / 1e9).toLocaleString("vi-VN", { maximumFractionDigits: 2 }) + " tỷ ₫";
  if (n >= 1e6) return (n / 1e6).toLocaleString("vi-VN", { maximumFractionDigits: 1 }) + " tr ₫";
  return Math.round(n).toLocaleString("vi-VN") + " ₫";
};

const USD_VND = 25400; // tỷ giá minh họa 6/2026

function SecHead({ num, eyebrow, title, lede }) {
  return (
    <div className="sec-head">
      <p className="eyebrow">{eyebrow}{num ? <span className="sec-num" style={{ marginLeft: "auto" }}>{num}</span> : null}</p>
      <h2 dangerouslySetInnerHTML={{ __html: title }} />
      {lede ? <p className="lede" dangerouslySetInnerHTML={{ __html: lede }} /> : null}
    </div>
  );
}

function Segmented({ value, onChange, options, accent }) {
  return (
    <div className={"seg" + (accent ? " accent" : "")}>
      {options.map((o) => (
        <button key={o.value} className={value === o.value ? "on" : ""} onClick={() => onChange(o.value)}>
          {o.label}
        </button>
      ))}
    </div>
  );
}

Object.assign(window, { fmtUSD, fmtVND, USD_VND, SecHead, Segmented });