// InsuranceCompactAlt.jsx — slim insurance strip (uses the user's insurance copy)

const altInsStyles = {
  section: { background: "var(--bg-subtle)" },
  panel: {
    background: "#fff", border: "1px solid var(--border)", borderRadius: 18,
    padding: "28px 32px", display: "grid", gridTemplateColumns: "auto 1fr", gap: 24, alignItems: "center",
  },
  panelMobile: { gridTemplateColumns: "1fr", gap: 20, padding: "24px 22px" },
  iconWrap: {
    width: 56, height: 56, borderRadius: 14,
    background: "var(--gol-gold-100)", color: "var(--gol-gold-800)",
    display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
  },
  text: { display: "flex", flexDirection: "column", gap: 6 },
  title: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, color: "var(--fg)", letterSpacing: 0 },
  body: { fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 14, lineHeight: 1.55, color: "var(--fg-muted)", maxWidth: 640 },
  badges: { display: "flex", flexDirection: "column", gap: 10 },
  trust: { display: "flex", alignItems: "center", gap: 10 },
  trustIcon: { width: 32, height: 32, borderRadius: 10, background: "var(--gol-gold-100)", color: "var(--gol-gold-800)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 },
  trustText: { display: "flex", flexDirection: "column", gap: 2, minWidth: 0 },
  trustValue: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 14, color: "var(--fg)", lineHeight: 1.1 },
  trustLabel: { fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-subtle)", letterSpacing: "0.06em" },
};

function InsuranceCompactAlt() {
  const isMobile = window.useMobile ? window.useMobile(760) : false;
  return (
    <section className="section--tight" style={altInsStyles.section}>
      <div className="container">
        <div style={{ ...altInsStyles.panel, ...(isMobile ? altInsStyles.panelMobile : {}) }}>
          <span style={altInsStyles.iconWrap}><Icon name="shield-check" size={28} strokeWidth={1.5} /></span>
          <div style={altInsStyles.text}>
            <div style={altInsStyles.title}>{t("Страхование — в стоимости перевозки", "Сақтандыру — тасымал құнының ішінде")}</div>
            <p style={altInsStyles.body}>
              {t("Работаем с разными китайскими страховыми компаниями. Весь перевозимый груз получает обязательное страхование от несчастных случаев, кражи, частичного или полного повреждения.", "Әртүрлі қытайлық сақтандыру компанияларымен жұмыс істейміз. Тасымалданатын барлық жүк бақытсыз жағдайлардан, ұрлықтан, ішінара немесе толық зақымданудан міндетті сақтандыру алады.")}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

window.InsuranceCompactAlt = InsuranceCompactAlt;