// WhyAlt.jsx — 3-up trust strip pulled from the user's advantages copy

const altWhyStyles = {
  section: { background: "#fff" },
  head: { display: "flex", flexDirection: "column", gap: 16, marginBottom: 48, maxWidth: 720 },
  grid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 },
  gridMobile: { gridTemplateColumns: "1fr", gap: 14 },
  card: {
    background: "#fff", border: "1px solid var(--border)", borderRadius: 16,
    padding: 28, display: "flex", flexDirection: "column", gap: 16,
    position: "relative", overflow: "hidden",
    transition: "transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out)",
  },
  num: {
    fontFamily: "var(--font-mono)", fontSize: 11,
    color: "var(--gol-gold-700)", letterSpacing: "0.18em",
  },
  title: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 20, lineHeight: 1.2, color: "var(--fg)" },
  body: { fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 14, lineHeight: 1.6, color: "var(--fg-muted)" },
  proof: { display: "flex", alignItems: "center", gap: 8, marginTop: "auto", paddingTop: 16, borderTop: "1px dashed var(--border)" },
  proofIcon: { color: "var(--gol-gold-700)" },
  proofText: { fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-muted)" },
};

function WhyAlt() {
  const isMobile = window.useMobile ? window.useMobile(900) : false;
  const [lang] = window.useLang();
  const items = [
    {
      n: t("01 / СЕРВИС", "01 / СЕРВИС"),
      title: t("Высокий сервис", "Жоғары сервис"),
      body: t("Команда профессионалов с многолетним опытом в авто и ЖД перевозках. Один менеджер ведёт ваш маршрут от расчёта до подписи на коробке.", "Көп жылдық тәжірибесі бар кәсіпқойлар тобы. Маршрутыңызды есептен бастап жеткізуге дейін бір менеджер жүргізеді."),
      proof: ["users", t("RU · CN коммуникация 24/7", "RU · CN байланыс 24/7")],
    },
    {
      n: t("02 / ЦЕНА", "02 / БАҒА"),
      title: t("Лучшие тарифы", "Үздік тарифтер"),
      body: t("Гибкие тарифы и индивидуальный подход к каждому маршруту. Стоимость фиксируется в договоре — без скрытых надбавок и курсовых сюрпризов.", "Икемді тарифтер және әр маршрутқа жеке көзқарас. Құн келісімшартта бекітіледі — жасырын үстемелер мен валюталық тосын сыйларсыз."),
      proof: ["coins", t("Тариф зафиксирован на 30 дней", "Тариф 30 күнге бекітілген")],
    },
    {
      n: t("03 / ИНФРАСТРУКТУРА", "03 / ИНФРАҚҰРЫЛЫМ"),
      title: t("Склады в Китае", "Қытайдағы қоймалар"),
      body: t("Складские площади в ключевых городах Китая — Шэньчжэнь, Гуанчжоу, Иу, Шанхай. Удобная логистика для консолидации и жөнелту под любые виды грузов.", "Қытайдың негізгі қалаларында қойма алаңдары — Шэньчжэнь, Гуанчжоу, Иу, Шанхай. Әртүрлі жүк түрлерін жинақтау және жөнелту үшін ыңғайлы логистика."),
      proof: ["warehouse", t("Склады — 4 города Китая", "Қоймалар — Қытайдың 4 қаласы")],
    },
  ];

  return (
    <section className="section" style={altWhyStyles.section}>
      <div className="container">
        <div style={altWhyStyles.head}>
          <span className="eyebrow">{t("ПОЧЕМУ GOLD ORIENT", "НЕ ҮШІН GOLD ORIENT")}</span>
          <h2 className="h-section">{t("Наши преимущества", "Біздің артықшылықтарымыз")}</h2>
          <p className="body-15-muted" style={{ maxWidth: 620 }}>
            {t("Наша компания выделяется высоким уровнем сервиса и гибким подходом к каждому маршруту, а складские площади в ключевых городах Китая позволяют удобно консолидировать и отгружать грузы любого объёма.", "Біздің компания жоғары сервис деңгейімен және әр маршрутқа икемді көзқарасымен ерекшеленеді, ал Қытайдың негізгі қалаларындағы қойма алаңдары кез келген көлемдегі жүктерді ыңғайлы жинақтауға және жөнелтуге мүмкіндік береді.")}
          </p>
        </div>

        <div style={{ ...altWhyStyles.grid, ...(isMobile ? altWhyStyles.gridMobile : {}) }}>
          {items.map((it) => (
            <div key={it.n} style={altWhyStyles.card}>
              <span style={altWhyStyles.num}>{it.n}</span>
              <div style={altWhyStyles.title}>{it.title}</div>
              <p style={altWhyStyles.body}>{it.body}</p>
              <div style={altWhyStyles.proof}>
                <span style={altWhyStyles.proofIcon}><Icon name={it.proof[0]} size={14} /></span>
                <span style={altWhyStyles.proofText}>{it.proof[1]}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.WhyAlt = WhyAlt;