// HeroAlt.jsx — dark navy hero with RouteMap backdrop, single gold CTA, trust strip.
// (Restored to the pre-video state per user request.)

const altHeroStyles = {
  wrap: {
    position: "relative",
    background: "#000",
    color: "#fff",
    overflow: "hidden",
    paddingTop: 96,
    paddingBottom: 96,
    minHeight: "calc(100vh - 84px)",
  },
  wrapMobile: { paddingTop: 56, paddingBottom: 56, minHeight: "70vh" },
  video: {
    position: "absolute",
    inset: 0,
    width: "100%",
    height: "100%",
    objectFit: "cover",
    zIndex: 0,
  },
  map: { position: "absolute", inset: 0, opacity: 0.18, mixBlendMode: "screen", pointerEvents: "none" },
  vignette: {
    position: "absolute",
    inset: 0,
    background: "linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.25) 65%, rgba(0,0,0,0.85) 100%)",
    pointerEvents: "none",
  },
  grid: { position: "relative", zIndex: 2, display: "flex", flexDirection: "column", justifyContent: "flex-end", alignItems: "flex-start", minHeight: "inherit", maxWidth: 920 },
  copy: { display: "flex", flexDirection: "column", gap: 24 },
  title: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: "clamp(48px, 7vw, 96px)",
    lineHeight: 0.98,
    letterSpacing: "-0.025em",
    color: "#fff",
    margin: 0,
  },
  accent: { color: "var(--gol-gold-500)" },
  lead: {
    fontFamily: "var(--font-body)",
    fontWeight: 300,
    fontSize: 19,
    lineHeight: 1.6,
    color: "rgba(255,255,255,0.72)",
    maxWidth: 620,
  },
  ctaRow: { display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" },
  trustRow: {
    marginTop: 16, display: "flex", gap: 28, flexWrap: "wrap", alignItems: "center",
  },
  trustItem: { display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-mono)", fontSize: 12, color: "rgba(255,255,255,0.55)" },
  trustIcon: { color: "var(--gol-gold-400)" },
};

function HeroAlt() {
  const isMobile = window.useMobile ? window.useMobile(760) : false;
  const [lang] = window.useLang();
  const scrollToConsultation = () => {
    const el = document.getElementById("consultation");
    if (el) {
      const top = el.getBoundingClientRect().top + window.pageYOffset - 24;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  return (
    <section style={{ ...altHeroStyles.wrap, ...(isMobile ? altHeroStyles.wrapMobile : {}) }}>
      <video
        ref={(el) => { if (el) { el.muted = true; el.volume = 0; } }}
        style={altHeroStyles.video}
        autoPlay
        loop
        muted
        playsInline
        preload="auto"
        src="assets/hero-bg.mp4"
      />
      <div style={altHeroStyles.map}><RouteMap showLegend={false} /></div>
      <div style={altHeroStyles.vignette} />
      <div className="container" style={{ position: "relative", zIndex: 2, display: "flex", flexDirection: "column", justifyContent: "flex-end", minHeight: isMobile ? "60vh" : "calc(100vh - 84px - 96px - 96px)" }}>
        <div style={altHeroStyles.grid}>
          <div style={altHeroStyles.copy}>
            <h1 style={altHeroStyles.title}>
              {t(
                <>Доставка грузов<br />из <span style={altHeroStyles.accent}>Китая</span></>,
                <><span style={altHeroStyles.accent}>Қытайдан</span><br />жүк жеткізу</>
              )}
            </h1>
            <p style={altHeroStyles.lead}>
              {t(
                "Логистические услуги под ключ. Мы берём на себя всю сложность цепочки поставок — от фабрики в Гуанчжоу до СВХ в вашем городе.",
                "Кілттегі логистикалық қызметтер. Жеткізу тізбегінің барлық күрделілігін өз мойнымызға аламыз — Гуанчжоудағы фабрикадан сіздің қалаңыздағы ҰҚҚ-ға дейін."
              )}
            </p>
            <div style={altHeroStyles.ctaRow}>
              <button className="btn btn--gold btn--lg" onClick={scrollToConsultation}>
                {t("Получить расчёт", "Есеп алу")}
                <Icon name="arrow-right" size={16} />
              </button>
            </div>
            <div style={altHeroStyles.trustRow}>
              <span style={altHeroStyles.trustItem}>
                <span style={altHeroStyles.trustIcon}><Icon name="shield-check" size={14} /></span>
                {t("Страховка в стоимости", "Сақтандыру құнға кіреді")}
              </span>
              <span style={altHeroStyles.trustItem}>
                <span style={altHeroStyles.trustIcon}><Icon name="lock" size={14} /></span>
                {t("Фикс. цена за кг", "Кг үшін бекітілген баға")}
              </span>
              <span style={altHeroStyles.trustItem}>
                <span style={altHeroStyles.trustIcon}><Icon name="package-check" size={14} /></span>
                {t("Один менеджер на маршрут", "Әр маршрутқа бір менеджер")}
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.HeroAlt = HeroAlt;