// AboutPageAlt.jsx — "О компании" page (copy from Gold Orient.fig)
// Matches the visual language of MainPageAlt (same hero block style, same section spacing).

const altAboutStyles = {
  // Hero (mirrors HeroAlt but shorter and split layout)
  hero: {
    position: "relative",
    background: "var(--gol-navy-950)",
    color: "#fff",
    overflow: "hidden",
    paddingTop: 96,
    paddingBottom: 96,
    backgroundImage: "radial-gradient(ellipse 70% 60% at 80% 20%, rgba(31,77,128,0.45) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 20% 95%, rgba(201,166,65,0.1) 0%, transparent 60%), linear-gradient(180deg, #0a1a32 0%, #050f1f 100%)",
  },
  heroMap: { position: "absolute", inset: 0, overflow: "hidden" },
  heroImage: { width: "100%", height: "100%", objectFit: "cover", opacity: 0.4, display: "block" },
  heroVignette: { position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(5,15,31,0.7) 0%, rgba(5,15,31,0.55) 35%, rgba(5,15,31,0.7) 70%, rgba(5,15,31,0.92) 100%)" },
  heroGrid: { position: "relative", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" },
  heroGridMobile: { gridTemplateColumns: "1fr", gap: 24 },
  heroEyebrow: {
    display: "inline-flex", alignItems: "center", gap: 10,
    fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 11,
    letterSpacing: "0.22em", textTransform: "uppercase",
    color: "var(--gol-gold-400)",
  },
  heroEyebrowDot: { width: 6, height: 6, background: "var(--gol-gold-500)", borderRadius: "50%", boxShadow: "0 0 12px rgba(201,166,65,0.9)" },
  heroTitle: {
    fontFamily: "var(--font-display)", fontWeight: 700,
    fontSize: "clamp(40px, 5.5vw, 76px)",
    lineHeight: 0.98, letterSpacing: "-0.02em",
    color: "#fff", margin: 0,
  },
  heroAccent: { color: "var(--gol-gold-500)" },
  heroLead: { fontFamily: "var(--font-body)", fontWeight: 400, fontSize: 17, lineHeight: 1.65, color: "rgba(255,255,255,0.95)", marginTop: 20 },
  heroLeadSecond: { fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 15, lineHeight: 1.65, color: "rgba(255,255,255,0.75)", marginTop: 16 },
  heroLeft: { display: "flex", flexDirection: "column", gap: 20 },

  // Pillars (3-up)
  pillars: { background: "#fff" },
  pillHead: { display: "flex", flexDirection: "column", gap: 16, marginBottom: 40, maxWidth: 700 },
  pillGrid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 },
  pillGridMobile: { gridTemplateColumns: "1fr", gap: 14 },
  pill: {
    background: "#fff", border: "1px solid var(--border)", borderRadius: 16,
    padding: 28, display: "flex", flexDirection: "column", gap: 16,
    minHeight: 280,
    transition: "transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out)",
  },
  pillNum: {
    fontFamily: "var(--font-mono)", fontSize: 11,
    color: "var(--gol-gold-700)", letterSpacing: "0.18em",
  },
  pillTitle: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 20, lineHeight: 1.2, color: "var(--fg)" },
  pillBody: { fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 14, lineHeight: 1.65, color: "var(--fg-muted)" },
  pillIcon: { width: 40, height: 40, borderRadius: 10, background: "var(--gol-navy-50)", color: "var(--gol-navy-700)", display: "inline-flex", alignItems: "center", justifyContent: "center" },

  // Docs
  docs: { background: "var(--bg-subtle)" },
  docsHead: { display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 20, marginBottom: 28 },
  docsHeadLeft: { display: "flex", flexDirection: "column", gap: 14, maxWidth: 620 },
  docsGrid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 },
  docsGridMobile: { gridTemplateColumns: "1fr", gap: 10 },
  doc: {
    background: "#fff", border: "1px solid var(--border)", borderRadius: 14,
    padding: 22, display: "flex", gap: 16, alignItems: "flex-start",
    transition: "border-color 140ms, transform 140ms",
    cursor: "pointer",
  },
  docIcon: { width: 40, height: 40, borderRadius: 10, background: "var(--gol-gold-50)", color: "var(--gol-gold-800)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 },
  docTitle: { fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 14, color: "var(--fg)", marginBottom: 6, lineHeight: 1.35 },
  docMeta: { fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-subtle)" },
};

function AboutPageAlt() {
  const isMobile = window.useMobile ? window.useMobile(900) : false;
  const [lang] = window.useLang();
  const pillars = [
    {
      n: t("01 / ПРОЦЕСС", "01 / ПРОЦЕСС"),
      icon: "shield-check",
      title: t("Описание процесса и гарантии", "Процесс сипаттамасы және кепілдіктер"),
      body: t("Перевозка, страхование, таможенное оформление — с нашей компанией вы можете оставить все заботы и ожидать доставки в кротчайшие сроки. Прозрачная цепочка от фабрики до СВХ.", "Тасымалдау, сақтандыру, кеден ресімдеу — біздің компаниямызбен өте қысқа мерзімде жеткізуді күте аласыз. Фабрикадан ҰҚҚ-ға дейін ашық тізбе."),
    },
    {
      n: t("02 / ГЕОГРАФИЯ", "02 / ГЕОГРАФИЯ"),
      icon: "map",
      title: t("География", "География"),
      body: t("Мы обеспечиваем надёжное автомобильное сообщение, специализируясь на направлении Китай — Казахстан и Россия. Прямые контакты с крупнейшими складами Китая.", "Қытай — Қазақстан және Ресей бағытына маманданып, сенімді автокөлік қатынасын қамтамасыз етеміз."),
    },
    {
      n: t("03 / СЕРВИС", "03 / СЕРВИС"),
      icon: "user-check",
      title: t("Удобный сервис", "Ыңғайлы сервис"),
      body: t("Вы общаетесь с одним менеджером, который в любую секунду знает, где находится машина, что с документами и когда груз прибудет на ваш склад.", "Сіз бір менеджермен сөйлесесіз, ол әр сәтте көлік қайда екенін, құжаттардың жағдайын және жүктің қашан жететінін біледі."),
    },
  ];

  const docs = [
    { title: t("Лицензия таможенного представителя", "Кеден өкілінің лицензиясы"), code: "№ ТП-2024-0481" },
    { title: t("Свидетельство участника ВЭД", "СЭҚ қатысушысының куәлігі"), code: "№ ВЭД-1842-РФ" },
    { title: t("Страховой полис партнёра", "Әріптестің сақтандыру полисі"), code: "№ 2105-3308-А" },
    { title: t("Сертификат ISO 9001:2015", "ISO 9001:2015 сертификаты"), code: "RU-ISO-2026-118" },
    { title: t("Разрешение на МПД", "ХАТ рұқсаты"), code: "№ МПД-CN-RU-2024" },
    { title: t("Договор с CR Express", "CR Express келісімшарты"), code: "№ CR-2023-091" },
  ];

  return (
    <main>
      {/* HERO */}
      <section className="on-dark" style={altAboutStyles.hero}>
        <div style={altAboutStyles.heroMap}>
          <img src="assets/about-hero.png" alt="" style={altAboutStyles.heroImage} />
        </div>
        <div style={altAboutStyles.heroVignette} />
        <div className="container" style={{ position: "relative" }}>
          <div style={{ ...altAboutStyles.heroGrid, ...(isMobile ? altAboutStyles.heroGridMobile : {}) }}>
            <div style={altAboutStyles.heroLeft}>
              <span style={altAboutStyles.heroEyebrow}>
                <span style={altAboutStyles.heroEyebrowDot} />
                {t("О КОМПАНИИ · GOLD ORIENT", "КОМПАНИЯ ТУРАЛЫ · GOLD ORIENT")}
              </span>
              <h1 style={altAboutStyles.heroTitle}>
                {t(
                  <>Миссия <span style={altAboutStyles.heroAccent}>Gold Orient</span> Logistics</>,
                  <><span style={altAboutStyles.heroAccent}>Gold Orient</span> Logistics миссиясы</>
                )}
              </h1>
            </div>
            <div>
              <p style={altAboutStyles.heroLead}>
                {t("Создавать безупречную логистическую связь между бизнесом и возможностями Китая. Мы берём на себя всю сложность цепочки поставок, чтобы наши клиенты могли сосредоточиться на росте своего дела — будучи абсолютно уверенными в безопасности, сроках и честной цене каждого килограмма своего груза.", "Бизнес пен Қытайдың мүмкіндіктері арасында мінсіз логистикалық байланыс құру. Клиенттеріміз өз ісінің өсуіне шоғырлана алуы үшін жеткізу тізбегінің барлық күрделілігін өз мойнымызға аламыз — әр килограмм жүктің қауіпсіздігіне, мерзіміне және адал бағасына толық сенімді қамтамасыз етеміз.")}
              </p>
              <p style={altAboutStyles.heroLeadSecond}>
                {t("Компания Gold Orient Logistics была основана командой логистов, объединивших свои усилия, чтобы осуществлять доступные перевозки с высоким уровнем сервиса. Мы динамично развивающаяся компания, предоставляющая полный спектр авто-логистических услуг.", "Gold Orient Logistics компаниясы қолжетімді тасымалдарды жоғары сервис деңгейінде жүзеге асыру үшін күштерін біріктірген логистиктер тобымен негізделген. Авто-логистикалық қызметтердің толық спектрін ұсынатын динамикалық дамып келе жатқан компаниямыз.")}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* PILLARS */}
      <section className="section" style={altAboutStyles.pillars}>
        <div className="container">
          <div style={altAboutStyles.pillHead}>
            <span className="eyebrow">{t("НАШ ПОДХОД", "БІЗДІҢ ТӘСІЛ")}</span>
            <h2 className="h-section">{t("Как мы работаем", "Біз қалай жұмыс істейміз")}</h2>
            <p className="body-15-muted">
              {t("Полный спектр авто-логистических услуг под ключ — от расчёта до подписи на коробке.", "Кілттегі авто-логистикалық қызметтердің толық спектрі — есептеуден қораптағы қолтаңбаға дейін.")}
            </p>
          </div>
          <div style={{ ...altAboutStyles.pillGrid, ...(isMobile ? altAboutStyles.pillGridMobile : {}) }}>
            {pillars.map((p) => (
              <div key={p.n} style={altAboutStyles.pill}>
                <span style={altAboutStyles.pillNum}>{p.n}</span>
                <span style={altAboutStyles.pillIcon}><Icon name={p.icon} size={20} /></span>
                <div style={altAboutStyles.pillTitle}>{p.title}</div>
                <p style={altAboutStyles.pillBody}>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* DOCS removed */}

      <CtaPanelAlt />
    </main>
  );
}

window.AboutPageAlt = AboutPageAlt;