// TrackingAlt.jsx — re-purposed as "Процесс перевозки груза" using the dark-panel design.
// Same visual structure (dark navy panel, animated route bar, timeline with indicators)
// but the timeline shows the 6 process steps instead of a real shipment.

const altTrackStyles = {
  section: {
    background: "var(--gol-navy-950)",
    color: "#fff",
    backgroundImage: "radial-gradient(ellipse at top right, rgba(31,77,128,0.35) 0%, transparent 60%), radial-gradient(ellipse at bottom left, rgba(201,166,65,0.06) 0%, transparent 50%)",
  },
  grid: { display: "grid", gridTemplateColumns: "1fr 1.15fr", gap: 56, alignItems: "center" },
  gridMobile: { gridTemplateColumns: "1fr", gap: 32 },
  copy: { display: "flex", flexDirection: "column", gap: 22 },
  h2: {
    fontFamily: "var(--font-display)", fontWeight: 700,
    fontSize: "clamp(30px, 3.6vw, 44px)", lineHeight: 1.08,
    letterSpacing: "-0.01em", color: "#fff",
  },
  lead: { fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 17, lineHeight: 1.6, color: "rgba(255,255,255,0.72)" },

  panel: {
    background: "rgba(10,26,50,0.55)",
    border: "1px solid rgba(255,255,255,0.08)",
    borderRadius: 18,
    padding: 28,
    backdropFilter: "blur(8px)",
  },
  panelHead: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16, marginBottom: 22 },
  panelLabel: { fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 10, color: "var(--gol-gold-400)", letterSpacing: "0.22em", textTransform: "uppercase", marginBottom: 6 },
  panelTitle: { fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 16, color: "#fff" },

  routeBar: { display: "flex", alignItems: "center", gap: 14, marginBottom: 22 },
  routeCity: { fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 13, color: "#fff" },
  routeCode: { fontFamily: "var(--font-mono)", fontSize: 11, color: "rgba(255,255,255,0.5)", letterSpacing: "0.06em" },
  routeLine: {
    flex: 1, height: 2, position: "relative",
    background: "linear-gradient(90deg, var(--gol-gold-500) 0%, var(--gol-gold-500) 100%)",
  },
  routePin: (left) => ({
    position: "absolute", left: left, top: "50%", transform: "translate(-50%, -50%)",
    width: 12, height: 12, borderRadius: "50%", background: "var(--gol-gold-500)",
    boxShadow: "0 0 0 4px rgba(201,166,65,0.2), 0 0 14px rgba(201,166,65,0.5)",
  }),

  timeline: { display: "flex", flexDirection: "column" },
  step: { display: "grid", gridTemplateColumns: "auto 1fr", gap: 14, padding: "14px 0", borderTop: "1px solid rgba(255,255,255,0.06)" },
  ind: {
    width: 28, height: 28, borderRadius: "50%",
    background: "rgba(201,166,65,0.16)",
    color: "var(--gol-gold-400)",
    border: "1px solid rgba(201,166,65,0.32)",
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500,
    fontVariantNumeric: "tabular-nums",
  },
  stepText: { fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 14, lineHeight: 1.5, color: "#fff", alignSelf: "center" },

  bullets: { display: "flex", flexDirection: "column", gap: 12, marginTop: 8 },
  bullet: { display: "flex", gap: 12, alignItems: "flex-start" },
  bulletIcon: { width: 26, height: 26, borderRadius: 8, background: "rgba(201,166,65,0.16)", color: "var(--gol-gold-400)", flexShrink: 0, display: "inline-flex", alignItems: "center", justifyContent: "center" },
  bulletText: { fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 14, lineHeight: 1.55, color: "rgba(255,255,255,0.82)" },
};

function TrackingAlt() {
  const isMobile = window.useMobile ? window.useMobile(900) : false;
  const [lang] = window.useLang();
  const steps = [
    t("Забираем ваш груз с вашей фабрики или склада поставщика в любом городе Китая, либо вы можете его привезти на один из наших складов", "Қытайдың кез келген қаласындағы фабрикаңыздан немесе жеткізушінің қоймасынан жүгіңізді аламыз, немесе оны біздің қоймаларымыздың біріне әкеле аласыз"),
    t("Объединяем с грузами других клиентов в одну фуру (LTL) либо полностью загружаем вашу фуру", "Басқа клиенттердің жүктерімен бір фураға біріктіреміз (LTL) немесе сіздің фураңызды толығымен тиеп аламыз"),
    t("Мы отправляем автотранспортом до пункта назначения", "Автокөлікпен баратын жеріне жөнелтеміз"),
    t("По желанию, растаможиваем и помогаем всей документацией", "Қалауыңыз бойынша кедендеуді және барлық құжаттарды жасап береміз"),
    t("Доставляем до СВХ (склад временного хранения)", "ҰҚҚ (уақытша сақтау қоймасы) дейін жеткіземіз"),
    t("Опциональная доставка до двери", "Опционалды есікке дейін жеткізу"),
  ];

  return (
    <section className="section section--dark" style={altTrackStyles.section}>
      <div className="container">
        <div style={{ ...altTrackStyles.grid, ...(isMobile ? altTrackStyles.gridMobile : {}) }}>
          <div style={altTrackStyles.copy}>
            <span className="eyebrow">{t("КАК МЫ РАБОТАЕМ", "БІЗ ҚАЛАЙ ЖҰМЫС ІСТЕЙМІЗ")}</span>
            <h2 style={altTrackStyles.h2}>{t("Процесс перевозки груза", "Жүк тасымалдау процесі")}</h2>
            <p style={altTrackStyles.lead}>
              {t("От фабрики в Китае до склада в вашем городе — один договор, один менеджер, шесть прозрачных шагов. Каждый этап под нашим контролем.", "Қытайдағы фабрикадан сіздің қалаңыздағы қоймаға дейін — бір келісімшарт, бір менеджер, алты ашық қадам. Әр кезең біздің бақылауымызда.")}
            </p>
            <div style={altTrackStyles.bullets}>
              {[
                ["map-pin", t("Забор с фабрики в любом городе Китая", "Қытайдың кез келген қаласынан фабрикадан жүкті алу")],
                ["package-check", t("Объединение или полная загрузка фуры", "Біріктіру немесе фураны толық тиеу")],
                ["file-check", t("Растаможка и документы — на нас", "Кедендеу және құжаттар — бізде")],
              ].map(([icon, t]) => (
                <div key={t} style={altTrackStyles.bullet}>
                  <span style={altTrackStyles.bulletIcon}><Icon name={icon} size={14} /></span>
                  <span style={altTrackStyles.bulletText}>{t}</span>
                </div>
              ))}
            </div>
          </div>

          <div style={altTrackStyles.panel}>
            <div style={altTrackStyles.panelHead}>
              <div>
                <div style={altTrackStyles.panelLabel}>{t("ПРОЦЕСС · 6 ШАГОВ", "ПРОЦЕСС · 6 ҚАДАМ")}</div>
                <div style={altTrackStyles.panelTitle}>{t("Маршрут от двери до двери", "Есіктен есікке маршрут")}</div>
              </div>
              <span className="pill pill--gold-dark">{t("ПОД КЛЮЧ", "КІЛТ ҚОЛҒА")}</span>
            </div>

            <div style={altTrackStyles.routeBar}>
              <div>
                <div style={altTrackStyles.routeCity}>{t("Фабрика в Китае", "Қытайдағы фабрика")}</div>
                <div style={altTrackStyles.routeCode}>CN</div>
              </div>
              <div style={altTrackStyles.routeLine}>
                <div style={altTrackStyles.routePin("0%")} />
                <div style={altTrackStyles.routePin("100%")} />
              </div>
              <div style={{ textAlign: "right" }}>
                <div style={altTrackStyles.routeCity}>{t("Склад / СВХ", "Қойма / ҰҚҚ")}</div>
                <div style={altTrackStyles.routeCode}>KZ · RU</div>
              </div>
            </div>

            <div style={altTrackStyles.timeline}>
              {steps.map((text, i) => (
                <div key={i} style={altTrackStyles.step}>
                  <span style={altTrackStyles.ind}>{String(i + 1).padStart(2, "0")}</span>
                  <p style={altTrackStyles.stepText}>{text}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.TrackingAlt = TrackingAlt;