// ServicesAlt.jsx — service grid with per-kg / days / terms metrics on each card
// Uses the user's 5 service categories from Gold Orient.fig

const altServicesStyles = {
  section: { background: "var(--bg-subtle)" },
  head: { display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginBottom: 40 },
  headLeft: { display: "flex", flexDirection: "column", gap: 16, maxWidth: 620 },
  legend: { display: "flex", gap: 8, alignItems: "center", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-subtle)", letterSpacing: "0.08em" },
  grid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 },
  gridMobile: { gridTemplateColumns: "1fr", gap: 12 },
  card: {
    background: "#fff", border: "1px solid var(--border)", borderRadius: 16,
    padding: "26px 28px",
    display: "flex", flexDirection: "column", gap: 16,
    transition: "transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 140ms",
    cursor: "pointer",
    minHeight: 280,
  },
  cardActive: { borderColor: "var(--gol-gold-500)", boxShadow: "0 0 0 4px rgba(201,166,65,0.08)" },
  cardWide: { gridColumn: "span 2" },
  cardWideMobile: { gridColumn: "auto" },

  topRow: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 },
  modeChip: {
    display: "inline-flex", alignItems: "center", gap: 6,
    padding: "4px 10px",
    background: "var(--gol-navy-50)", color: "var(--gol-navy-700)",
    borderRadius: 999,
    fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 10,
    letterSpacing: "0.12em", textTransform: "uppercase",
  },
  modeChipGold: { background: "var(--gol-gold-100)", color: "var(--gol-gold-900)" },
  iconBox: { width: 36, height: 36, borderRadius: 10, background: "var(--slate-100)", color: "var(--gol-navy-700)", display: "inline-flex", alignItems: "center", justifyContent: "center" },

  title: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 19, lineHeight: 1.2, color: "var(--fg)", letterSpacing: 0 },
  body: { fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 14, lineHeight: 1.6, color: "var(--fg-muted)" },

  metricRow: {
    display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 0,
    marginTop: "auto", paddingTop: 16, borderTop: "1px dashed var(--border)",
  },
  metric: { display: "flex", flexDirection: "column", gap: 4 },
  metricLabel: { fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--fg-subtle)" },
  metricValue: { fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--fg)", fontVariantNumeric: "tabular-nums" },

  bullets: { display: "flex", flexDirection: "column", gap: 8, marginTop: 4 },
  bullet: { display: "flex", gap: 10, fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 13, lineHeight: 1.5, color: "var(--fg-muted)" },
  bulletDash: { color: "var(--gol-gold-600)", flexShrink: 0 },
};

function ServicesAlt() {
  const isMobile = window.useMobile ? window.useMobile(900) : false;
  const [lang] = window.useLang();
  const [active, setActive] = React.useState("full-truck");
  const services = [
    {
      id: "ltl",
      chip: "LTL",
      icon: "package",
      title: t("Авто перевозки сборного груза", "Жинақ жүкті автотасымалдар"),
      body: t("Объединяем товары разных клиентов в одну фуру. Вы платите только за объём вашего груза — от 100 кг.", "Әртүрлі клиенттердің тауарларын бір фураға біріктіреміз. Сіз тек өз жүгіңіздің көлемі үшін төлейсіз — 100 кг-нан бастап."),
      perKg: "от 320 ₽",
      days: "14–18 дней",
      terms: "DDP",
    },
    {
      id: "full-truck",
      chip: "FULL TRUCK",
      chipGold: true,
      icon: "truck",
      title: t("FCL — полные авто перевозки", "FCL — толық автотасымал"),
      body: t("Ваш груз едет один в целой фуре. Забираем с фабрики, везём до двери (либо СВХ вашего города). Идеально для крупных партий, негабарита и чувствительных к срокам грузов.", "Сіздің жүгіңіз бөлек фурада жүреді. Фабрикадан аламыз, есікке дейін жеткіземіз (немесе сіздің қалаңыздағы ҰҚҚ-ға). Үлкен партиялар, габаритсыз және мерзімге сезімтал жүктер үшін тамаша."),
      bullets: [
        t("Заводская партия — от 15 паллет или 20 тонн", "Зауыттық партия — 15 паллет немесе 20 тоннадан"),
        t("Жёсткие сроки — без простоев на консолидацию", "Қатаң мерзімдер — консолидация үшін тоқтаусыз"),
        t("Негабарит — станки, трубы, спецтехника", "Габаритсыз — станоктар, құбырлар, арнайы техника"),
      ],
      perKg: "от 285 ₽",
      days: "12–16 дней",
      terms: "DDP",
      wide: true,
    },
    {
      id: "multi",
      chip: "MULTIMODAL",
      icon: "route",
      title: t("Мультимодальные перевозки", "Мультимодальды тасымалдар"),
      body: t("Комбинируем виды транспорта (ЖД + авто либо авто + ЖД), чтобы вы получили наилучший вариант по деньгам и срокам под ваш конкретный груз.", "Көлік түрлерін біріктіреміз (т/ж + авто немесе авто + т/ж), ақша мен мерзім бойынша сіздің нақты жүгіңізге ең жақсы нұсқаны аласыз."),
      perKg: "от 260 ₽",
      days: "20–26 дней",
      terms: "DAP",
    },
    {
      id: "customs",
      chip: t("ТАМОЖНЯ", "КЕДЕН"),
      icon: "file-check",
      title: t("Таможенное оформление", "Кеден ресімдеу"),
      body: t("Услуги таможенного оформления по доступным тарифам. Полностью берём на себя документацию и сертификацию.", "Қолжетімді тарифтер бойынша кеден ресімдеу қызметтері. Құжаттама мен сертификаттауды толығымен өзімізге аламыз."),
      perKg: "от 0,5%",
      days: "1–3 дня",
      terms: "от стоимости",
    },
    {
      id: "cargo",
      chip: "КАРГО",
      icon: "boxes",
      title: t("Карго доставка", "Карго жеткізу"),
      body: t("Упрощённое оформление — оптимально для онлайн-торговли и небольших партий. Срочные отправки 24/7.", "Жеңілдетілген ресімдеу — онлайн-сауда мен шағын партиялар үшін оңтайлы. Жедел жөнелтулер 24/7."),
      perKg: "от 380 ₽",
      days: "8–12 дней",
      terms: "DDP",
    },
  ];

  return (
    <section className="section" style={altServicesStyles.section} id="services">
      <div className="container">
        <div style={altServicesStyles.head}>
          <div style={altServicesStyles.headLeft}>
            <span className="eyebrow">{t("УСЛУГИ · 5 НАПРАВЛЕНИЙ", "ҚЫЗМЕТТЕР · 5 БАҒЫТ")}</span>
            <h2 className="h-section">{t("Логистические услуги под ключ", "Кілттегі логистикалық қызметтер")}</h2>
            <p className="body-15-muted">{t("Один договор, одна цена за килограмм, один менеджер на маршрут. Подбираем оптимальный вид под ваш груз и сроки.", "Бір келісімшарт, килограмның бір бағасы, маршрутқа бір менеджер. Жүгіңіз бен мерзіміңізге сай оңтайлы түрін таңдаймыз.")}</p>
          </div>
          <div style={altServicesStyles.legend}>
            <span style={{ width: 8, height: 8, background: "var(--gol-gold-500)", borderRadius: "50%" }} />
            <span>{t("FULL TRUCK — самый выбираемый", "FULL TRUCK — ең көп таңдалатыны")}</span>
          </div>
        </div>

        <div style={{ ...altServicesStyles.grid, ...(isMobile ? altServicesStyles.gridMobile : {}) }}>
          {services.map((s) => (
            <div
              key={s.id}
              style={{
                ...altServicesStyles.card,
                ...(s.wide && !isMobile ? altServicesStyles.cardWide : {}),
                ...(s.id === active ? altServicesStyles.cardActive : {}),
              }}
              onClick={() => setActive(s.id)}
              onMouseEnter={() => setActive(s.id)}
            >
              <div style={altServicesStyles.topRow}>
                <span style={{ ...altServicesStyles.modeChip, ...(s.chipGold ? altServicesStyles.modeChipGold : {}) }}>{s.chip}</span>
                <span style={altServicesStyles.iconBox}><Icon name={s.icon} size={18} /></span>
              </div>
              <div style={altServicesStyles.title}>{s.title}</div>
              <p style={altServicesStyles.body}>{s.body}</p>
              {s.bullets && (
                <div style={altServicesStyles.bullets}>
                  {s.bullets.map((b) => (
                    <div key={b} style={altServicesStyles.bullet}>
                      <span style={altServicesStyles.bulletDash}>—</span>
                      <span>{b}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.ServicesAlt = ServicesAlt;